diff --git a/public/index.html b/public/index.html
index 3e5a139..57564ef 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,15 +1,23 @@
 <!DOCTYPE html>
 <html lang="">
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
+    />
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong
+        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
+        properly without JavaScript enabled. Please enable it to
+        continue.</strong
+      >
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
diff --git a/src/App.vue b/src/App.vue
index 591a031..0691f0f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,26 +1,62 @@
 <template>
-  <img alt="Vue logo" src="./assets/logo.png">
-  <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <div id="app">
+    <h1>Team Dienste</h1>
+    <div class="container">
+      <DutyDisplay :duties="duties" />
+    </div>
+  </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import DutyDisplay from './components/DutyDisplay.vue';
 
 export default {
   name: 'App',
   components: {
-    HelloWorld
-  }
-}
+    DutyDisplay
+  },
+  data() {
+    return {
+      duties: [
+        { week: 1, courtDuty: ["Jason", "Tim", "Jacob"], cashDuty: ["Simon", "Max", "Dima"] },
+          { week: 2, courtDuty: ["Niclas, Bruno"], cashDuty: ["Oleksandr", "Volodymyr", "Jonathan"] },
+          { week: 3, courtDuty: ["Benedikt", "MJ"], cashDuty: ["Jason", "Tim", "Jacob"] },
+          { week: 4, courtDuty: ["Ali", "Niklas"], cashDuty: ["Niclas", "Bruno"] },
+          { week: 5, courtDuty: ["Daniel", "Stephan"], cashDuty: ["Benedikt", "MJ"] },
+          { week: 6, courtDuty: ["Kieran", "Marcel"], cashDuty: ["Ali, Niklas"] },
+          { week: 7, courtDuty: ["Simon", "Max", "Dima"], cashDuty: ["Daniel", "Stephan"] },
+          { week: 8, courtDuty: ["Oleksandr", "Volodymyr", "Jonathan"], cashDuty: ["Kieran", "Marcel"]}
+      ],
+    };
+  },
+};
 </script>
 
 <style>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
   text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+  background-color: #f4f4f9;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+h1 {
+  color: #34495e;
+  margin-top: 20px;
+  font-size: 2.5em;
+}
+
+.container {
+  background-color: white;
+  padding: 20px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  border-radius: 10px;
+  max-width: 800px;
+  width: 100%;
+  margin-top: 20px;
 }
 </style>
diff --git a/src/components/DutyDisplay.vue b/src/components/DutyDisplay.vue
new file mode 100644
index 0000000..7c14c20
--- /dev/null
+++ b/src/components/DutyDisplay.vue
@@ -0,0 +1,98 @@
+<template>
+  <div class="duties">
+    <h2>Dienste für Woche {{ currentWeek }}</h2>
+    <div class="duty-container">
+      <div class="duty-section">
+        <div class="section-header">
+          <i class="fas fa-basketball-ball"></i>
+          <h3>Hallendienst</h3>
+        </div>
+        <ul>
+          <li v-for="person in currentDuties.courtDuty" :key="person">{{ person }}</li>
+        </ul>
+      </div>
+      <div class="duty-section">
+        <div class="section-header">
+          <i class="fas fa-money-bill-wave"></i>
+          <h3>Kassendienst</h3>
+        </div>
+        <ul>
+          <li v-for="person in currentDuties.cashDuty" :key="person">{{ person }}</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    duties: {
+      type: Array,
+      required: true
+    }
+  },
+  computed: {
+    currentWeek() {
+      const currentDate = new Date();
+      const start = new Date(currentDate.getFullYear(), 0, 1);
+      const diff = currentDate - start;
+      const oneWeek = 1000 * 60 * 60 * 24 * 7;
+      return Math.ceil(diff / oneWeek);
+    },
+    currentDuties() {
+      return this.duties.find(duty => duty.week === (this.currentWeek + 6) % this.duties.length);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.duties {
+  text-align: center;
+}
+
+.duty-container {
+  display: flex;
+  gap: 30px;
+  justify-content: space-around;
+  margin-top: 20px;
+}
+
+.duty-section {
+  background-color: #ecf0f1;
+  padding: 15px;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  width: 45%;
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 15px;
+}
+
+.section-header i {
+  margin-right: 10px;
+  font-size: 1.5em;
+  color: #2980b9;
+}
+
+h3 {
+  color: #16a085;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+}
+
+li {
+  background-color: #bdc3c7;
+  margin: 5px 0;
+  padding: 8px;
+  border-radius: 4px;
+}
+</style>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 879051a..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
