diff --git a/src/components/bulitipp/Paarungsergebnisse.vue b/src/components/bulitipp/Paarungsergebnisse.vue
new file mode 100644
index 0000000..3e766de
--- /dev/null
+++ b/src/components/bulitipp/Paarungsergebnisse.vue
@@ -0,0 +1,55 @@
+<script lang="ts">
+    export default {
+        props: {
+            paarungen: {
+                type: Array,
+                required: true
+            },
+            teams: {
+                type: Array,
+                required: true
+            }
+        }
+    }
+</script>
+<template>
+<section class="buli-results scroll-x" id="buliresults-section">
+    <br /><br />
+    <h2>Paarungsergebnisse . Spieltag</h2>
+    <table>
+      <tbody>
+        <tr>
+          <td>Paarung</td>
+          <td>Ergebnis</td>
+        </tr>
+        <tr v-for="paarung in paarungen">
+          <td>
+            <!-- Modal -->
+            <!-- 
+                  <iframe frameborder="0"></iframe> -->
+            <span class="as-link">
+              <span class="teams">
+                <span class="team">
+                  <img src="" alt="" />
+                  <p>{{ teams[paarung.team1].name }}</p>
+                </span>
+                <span class="vs"></span>
+                <span class="team">
+                  <p>{{ teams[paarung.team2].name }}</p>
+                  <img src="" alt="" />
+                </span>
+              </span>
+            </span>
+          </td>
+          <td>
+            <p>{{ paarung.result1 }} - {{ paarung.result2 }}</p>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </section>
+</template>
+<style scoped>
+
+@import "../../assets/css/bulitipp2.css";
+</style>
\ No newline at end of file
diff --git a/src/components/bulitipp/Rangliste.vue b/src/components/bulitipp/Rangliste.vue
new file mode 100644
index 0000000..76ae289
--- /dev/null
+++ b/src/components/bulitipp/Rangliste.vue
@@ -0,0 +1,40 @@
+<script lang="ts">
+    export default {
+        props: {
+            users: {
+                type: Array,
+                required: true
+            }
+        }
+    }
+</script>
+<template>
+<section class="rangliste" id="rangliste-sektion">
+    <br /><br />
+
+    <h2>Rangliste</h2>
+    <table>
+      <tbody>
+        <tr>
+          <td>Platz</td>
+          <td>Name</td>
+          <td>Punkte</td>
+        </tr>
+        <tr v-for="(user, i) in users">
+          <td>{{ i }}</td>
+          <td>
+            <!-- <iframe class="iframeRanglisteDetailansicht"
+                    data-src="">Detailansicht User 1</iframe> -->
+
+            <span class="as-link">{{ user.name }}</span>
+          </td>
+          <td>{{ user.points }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </section>
+</template>
+<style scoped>
+
+@import "../../assets/css/bulitipp2.css";
+</style>
\ No newline at end of file
diff --git a/src/components/bulitipp/Tabelle.vue b/src/components/bulitipp/Tabelle.vue
new file mode 100644
index 0000000..1eba7a3
--- /dev/null
+++ b/src/components/bulitipp/Tabelle.vue
@@ -0,0 +1,61 @@
+<script lang="ts">
+export default {
+  props: {
+    users: {
+      type: Array,
+      required: true,
+    },
+  },
+  computed: {
+    spieltage() {
+      let result=[
+        [5,10,15,20,25,30],
+        [5,10,15,20,25,30],
+        [5,10,15,20,25,30]
+      ];
+        
+        return result;
+    },
+  },
+  methods: {
+    tagessumme(spieltag:number, user:number){
+        return 5;
+    }
+  }
+};
+</script>
+<template>
+  <section class="buli-table" id="buli-table">
+    <br /><br />
+
+    <h2>Punktetabelle</h2>
+    <div id="load-table-btn-container">
+      <button id="load-table-btn">Punkte ausrechnen</button>
+    </div>
+    <table>
+      <tbody>
+        <tr>
+          <td>Tag</td>
+          <td v-for="user in users">{{ user.name }}</td>
+        </tr>
+        <tr v-for="spieltag,i in spieltage">
+          <td>{{ i+1 }}</td>
+
+          <!-- Modal -->
+
+          <!-- Open BTN -->
+          <td class="as-link" v-for="userpoints in spieltag">{{ userpoints }}</td>
+        </tr>
+
+        <tr>
+          <td>Summe</td>
+
+          <td v-for="user in users">{{ user.points }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </section>
+</template>
+<style scoped>
+@import "../../assets/css/bulitipp2.css";
+</style>
diff --git a/src/components/bulitipp/Uebersicht.vue b/src/components/bulitipp/Uebersicht.vue
new file mode 100644
index 0000000..cc84f71
--- /dev/null
+++ b/src/components/bulitipp/Uebersicht.vue
@@ -0,0 +1,29 @@
+<script lang="ts">
+export default {
+    props: {
+        users: {
+            type: Array,
+            required: true
+        }
+    },
+}
+</script>
+<template>
+    <section class="uebersicht scroll-x">
+    <table>
+        <tbody>
+      <tr>
+        <td v-for="user in users">{{ user.kuerzel }}</td>
+      </tr>
+      <tr>
+          <td v-for="user in users">{{ user.points }}</td>
+            <!-- <iframe class="iframeRanglisteDetailansicht">Benutzer</iframe> -->
+      </tr>
+      </tbody>
+    </table>
+  </section>
+</template>
+<style scoped>
+
+@import "../../assets/css/bulitipp2.css";
+</style>
\ No newline at end of file
diff --git a/src/ritzenbergenlib.ts b/src/ritzenbergenlib.ts
index 5275c20..342f12e 100644
--- a/src/ritzenbergenlib.ts
+++ b/src/ritzenbergenlib.ts
@@ -4,7 +4,7 @@ export default class RitzenbergenLib {
     else return "http://bilder.ritzenbergen.de/"+mypath;
   }
   static api(path:string){
-    if(path.startsWith("/")) return "http://api.ritzenbergen.de"+path;
-    else return "http://api.ritzenbergen.de/"+path;
+    if(path.startsWith("/")) return "http://192.168.188.38/Jonas/ritzenbergenapi"+path;
+    else return "http://192.168.188.38/Jonas/ritzenbergenapi/"+path;
   }
 }
\ No newline at end of file
diff --git a/src/views/Bulitipp.vue b/src/views/Bulitipp.vue
index c0c5048..ee0c8fd 100644
--- a/src/views/Bulitipp.vue
+++ b/src/views/Bulitipp.vue
@@ -2,36 +2,221 @@
 import Navbar from "../components/Navbar.vue";
 import Footer from "../components/Footer.vue";
 import Modal from "../components/Modal.vue";
+import Uebersicht from "../components/bulitipp/Uebersicht.vue";
+import Rangliste from "../components/bulitipp/Rangliste.vue";
+import Paarungsergebnisse from "../components/bulitipp/Paarungsergebnisse.vue";
+import Tabelle from "../components/bulitipp/Tabelle.vue";
 
 export default {
-    components: {
-        Navbar,
-        Footer,
-        Modal
+  components: {
+    Navbar,
+    Footer,
+    Modal,
+    Uebersicht,
+    Rangliste,
+    Paarungsergebnisse,
+    Tabelle
+  },
+  computed: {
+    tippenoffen() {
+      return this.$route.path === "/bulitipp/tippen";
     },
-    computed: {
-        tippenoffen(){
-            return this.$route.path === "/bulitipp/tippen";
+    users() {
+      return [
+        {
+          id: 1,
+          name: "User 1",
+          points: 10,
+          kuerzel: "U1",
         },
-        tippenschliessen(){
-            return this.$router.push("/bulitipp");
-        }
-    }
-}
+        {
+          id: 2,
+          name: "User 2",
+          points: 20,
+          kuerzel: "U2",
+        },
+        {
+          id: 3,
+          name: "User 3",
+          points: 10,
+          kuerzel: "U3",
+        },
+        {
+          id: 4,
+          name: "User 4",
+          points: 20,
+          kuerzel: "U4",
+        },
+        {
+          id: 5,
+          name: "User 5",
+          points: 10,
+          kuerzel: "U5",
+        },
+        {
+          id: 6,
+          name: "User 6",
+          points: 20,
+          kuerzel: "U6",
+        },
+      ].sort((a, b) => b.points - a.points);
+    },
+    teams() {
+      return {
+        1: {
+          name: "Team 1",
+        },
+        2: {
+          name: "Team 2",
+        },
+        3: {
+          name: "Team 3",
+        },
+        4: {
+          name: "Team 4",
+        },
+        5: {
+          name: "Team 5",
+        },
+        6: {
+          name: "Team 6",
+        },
+        7: {
+          name: "Team 7",
+        },
+        8: {
+          name: "Team 8",
+        },
+        9: {
+          name: "Team 9",
+        },
+        10: {
+          name: "Team 10",
+        },
+        11: {
+          name: "Team 11",
+        },
+        12: {
+          name: "Team 12",
+        },
+        13: {
+          name: "Team 13",
+        },
+        14: {
+          name: "Team 14",
+        },
+        15: {
+          name: "Team 15",
+        },
+        16: {
+          name: "Team 16",
+        },
+        17: {
+          name: "Team 17",
+        },
+        18: {
+          name: "Team 18",
+        },
+      };
+    },
+    paarungen() {
+      return [
+        {
+          id: 1,
+          team1: 1,
+          team2: 2,
+          result1: 1,
+          result2: 0,
+        },
+        {
+          id: 2,
+          team1: 3,
+          team2: 4,
+          result1: 1,
+          result2: 0,
+        },
+        {
+          id: 3,
+          team1: 5,
+          team2: 6,
+          result1: 1,
+          result2: 0,
+        },
+        {
+          id: 4,
+          team1: 7,
+          team2: 8,
+          result1: 2,
+          result2: 1,
+        },
+        {
+          id: 5,
+          team1: 9,
+          team2: 10,
+          result1: 0,
+          result2: 0,
+        },
+        {
+          id: 6,
+          team1: 11,
+          team2: 12,
+          result1: 3,
+          result2: 2,
+        },
+        {
+          id: 7,
+          team1: 13,
+          team2: 14,
+          result1: 2,
+          result2: 2,
+        },
+        {
+          id: 8,
+          team1: 15,
+          team2: 16,
+          result1: 0,
+          result2: 1,
+        },
+        {
+          id: 9,
+          team1: 17,
+          team2: 18,
+          result1: 3,
+          result2: 3,
+        },
+      ];
+    },
+  },
+  methods: {
+    tippenschliessen() {
+      this.$router.push("/bulitipp");
+    },
+  },
+};
 </script>
 <template>
-    <Navbar buttontext="Tippen" mainlink="/bulitipp/tippen"/>
+  <Navbar buttontext="Tippen" mainlink="/bulitipp/tippen" />
 
-    <section class="header16 cid-u6k7q0xIhk bulitipp mbr-fullscreen mbr-parallax-background" id="hero-17-u6k7q0xIhk">
-    <div class="mbr-overlay" style="opacity: 0.3; background-color: rgb(0, 0, 0);"></div>
+  <section
+    class="header16 cid-u6k7q0xIhk bulitipp mbr-fullscreen mbr-parallax-background"
+    id="hero-17-u6k7q0xIhk"
+  >
+    <div
+      class="mbr-overlay"
+      style="opacity: 0.3; background-color: rgb(0, 0, 0)"
+    ></div>
     <div class="container-fluid">
       <div class="row">
         <div class="content-wrap col-12 col-md-10">
-          <h1 class="mbr-section-title mbr-fonts-style mbr-white mb-4 display-1">
+          <h1
+            class="mbr-section-title mbr-fonts-style mbr-white mb-4 display-1"
+          >
             <strong>Willkommen im Bundesliga Tippspiel</strong>
           </h1>
-          <p class="mbr-fonts-style mbr-text mbr-white mb-4 display-7">Saison </p>
-          <br><br>
+          <p class="mbr-fonts-style mbr-text mbr-white mb-4 display-7">
+            Saison
+          </p>
+          <br /><br />
         </div>
       </div>
     </div>
@@ -43,158 +228,28 @@ export default {
 
 
 
-  <section class="features023 cid-u6k7q0xclF" id="metrics-1-u6k7q0xclF">
-    <div class="container">
-      <div class="row content-row justify-content-center">
+  <Uebersicht :users="users" />
 
-        <div class="item features-without-image col-12 col-md-6 col-lg-4 item-mb">
-          <div class="item-wrapper">
+  <!-- Rangliste -->
 
-          </div>
-        </div>
-        <div class="item features-without-image col-12 col-md-6 col-lg-4 item-mb">
-          <div class="item-wrapper">
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-
-
-  <section class="uebersicht scroll-x">
-    <table>
-        <tbody>
-      <tr>
-        <td>Kürzel</td>
-        
-      </tr>
-      <tr>
-        <td id="uebersicht-user-<?php echo $user; ?>">
-            <iframe class="iframeRanglisteDetailansicht">Benutzer</iframe>
-            
-          <button>Punkte</button> <!-- Style Rot Grün -->
-        </td>
-      </tr>
-      </tbody>
-    </table>
-  </section>
-
-<!-- Rangliste -->
-
-<section class="rangliste" id="rangliste-sektion">
-    <br><br>
-
-    <h2>Rangliste</h2>
-    <table>
-        <tbody>
-      <tr>
-        <td>Platz</td>
-        <td>Name</td>
-        <td>Punkte</td>
-      </tr>
-        <tr>
-          <td></td>
-          <td>
-                  <iframe class="iframeRanglisteDetailansicht"
-                    data-src="">Detailansicht User 1</iframe>
-
-              <span class="as-link">User 1</span>
-          </td>
-          <td></td>
-        </tr>
-        </tbody>
-    </table>
-
-  </section>
+  <Rangliste :users="users"/>
 
   <!-- Paarungsergebnisse -->
 
-  <section class="buli-results scroll-x" id="buliresults-section">
-    <br><br>
-    <h2>Paarungsergebnisse . Spieltag</h2>
-    <table>
-
-        <tbody>
-      <tr>
-        <td>Paarung</td>
-        <td>Ergebnis</td>
-      </tr>
-        <tr>
-
-          <td>
-            <!-- Modal -->
-                  
-                  <iframe frameborder="0"></iframe>
-              <span class="as-link">
-                <span class="teams">
-                  <span class="team">
-                    <img src="" alt="">
-                    <p>Team 1</p>
-                  </span>
-                  <span class="vs"></span>
-                  <span class="team">
-                    <p>Team 2</p>
-                    <img src="" alt="">
-                  </span>
-                </span>
-              </span>
-
-          </td>
-          <td>
-            <p>1 - 0</p>
-          </td>
-
-
-        </tr>
-        </tbody>
-    </table>
-  </section>
-
+  <Paarungsergebnisse :paarungen="paarungen" :teams="teams"/>
 
   <!-- Punktetabelle -->
-  <section class="buli-table" id="buli-table">
-    <br><br>
+  <Tabelle :users="users"/>
 
-    <h2>Punktetabelle</h2>
-    <div id="load-table-btn-container">
-      <button id="load-table-btn">Punkte ausrechnen</button>
-    </div>
-    <table>
+  <br />
+  <br />
+  <br />
 
-        <tbody>
-      <tr>
-        <td>Tag</td>
-        <td>User1</td>
-      </tr>
-        <tr>
-
-          <td>123</td>
-
-            <!-- Modal -->
-            
-                <!-- Open BTN -->
-            <td class="as-link">Punkte</td>
-          
-        </tr>
-        
-      <tr>
-        <td>Summe</td>
-        
-          <td>Benutzer</td>
-          
-      </tr>
-      </tbody>
-    </table>
-  </section>
-
-
-  
-  <br>
-  <br>
-  <br>
-
-  <Footer/>
+  <Footer />
 </template>
 <style scoped>
-    @import "../assets/css/bulitipp2.css";
-</style>
\ No newline at end of file
+@import "../assets/css/bulitipp2.css";
+#hero-17-u6k7q0xIhk{
+  margin-bottom: 100px;
+}
+</style>