diff --git a/README.md b/README.md
index 8c69050..1feccd5 100644
--- a/README.md
+++ b/README.md
@@ -1,24 +1,29 @@
-# hallendienst
+# Volleyball
 
 ## Project setup
+
 ```
 npm install
 ```
 
 ### Compiles and hot-reloads for development
+
 ```
 npm run serve
 ```
 
 ### Compiles and minifies for production
+
 ```
 npm run build
 ```
 
 ### Lints and fixes files
+
 ```
 npm run lint
 ```
 
 ### Customize configuration
+
 See [Configuration Reference](https://cli.vuejs.org/config/).
diff --git a/src/App.vue b/src/App.vue
index 7de7a92..b20ae86 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,11 +1,17 @@
 <template>
   <div id="app">
     <h1>DJK Saarbrücken-Rastpfuhl - Herren 1</h1>
-    <div class="container">
-      <DutyDisplay :duties="duties" />
-    </div>
-    <div class="container">
-      <GameDisplay :games="games" />
+
+    <div class="main-container">
+      <!-- DutyDisplay Component -->
+      <SectionContainer title="Mannschaftsdienste">
+        <DutyDisplay :duties="duties" />
+      </SectionContainer>
+
+      <!-- GameDisplay Component -->
+      <SectionContainer title="Anstehende Spiele">
+        <GameDisplay :games="games" />
+      </SectionContainer>
     </div>
   </div>
 </template>
@@ -13,190 +19,71 @@
 <script>
 import DutyDisplay from "./components/DutyDisplay.vue";
 import GameDisplay from "./components/GameDisplay.vue";
+import SectionContainer from "./components/SectionContainer.vue"; // New reusable container
+import { duties, games } from "./data"; // Importing duties and games
 
 export default {
   name: "App",
   components: {
     DutyDisplay,
     GameDisplay,
+    SectionContainer, // Reusable container for sections
   },
   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"],
-        },
-      ],
-      games: [
-        {
-          date: "2024-09-21",
-          gameNr: 1,
-          team1: "Tv Saarwellingen",
-          team2: "DJK Saarbrücken-Rastpfuhl",
-          host: 1,
-        },
-        {
-          date: "2024-09-28",
-          gameNr: 1,
-          team1: "DJK Saarbrücken-Rastpfuhl",
-          team2: "SVK Blieskastel-Zweibrücken",
-          host: 1,
-        },
-        {
-          date: "2024-09-28",
-          gameNr: 2,
-          team1: "DJK Saarbrücken-Rastpfuhl",
-          team2: "TV Klarenthal",
-          host: 1,
-        },
-        {
-          date: "2024-11-02",
-          gameNr: 1,
-          team1: "TV Düppenweiler",
-          team2: "DJK Saarbrücken-Rastpfuhl",
-          host: 1,
-        },
-        {
-          date: "2024-11-09",
-          gameNr: 1,
-          team1: "DJK Saarbrücken-Rastpfuhl",
-          team2: "TV Brebach",
-          host: 1,
-        },
-        {
-          date: "2024-11-09",
-          gameNr: 2,
-          team1: "DJK Saarbrücken-Rastpfuhl",
-          team2: "TV 06 Limbach",
-          host: 1,
-        },
-        {
-          date: "2024-11-30",
-          gameNr: 2,
-          team1: "TV Saarwellingen 2",
-          team2: "DJK Saarbrücken-Rastpfuhl",
-          host: 1,
-        },
-        {
-          date: "2024-12-14",
-          gameNr: 2,
-          team1: "TV Wiesbach 2",
-          team2: "DJK Saarbrücken-Rastpfuhl",
-          host: 1,
-        },
-        {
-          date: "2025-01-11",
-          gameNr: 1,
-          team1: "TV Klarenthal",
-          team2: "DJK Saarbrücken-Rastpfuhl",
-          host: 1,
-        },
-        {
-          date: "2025-01-18",
-          gameNr: 1,
-          team1: "TV Brebach",
-          team2: "DJK Saarbrücken-Rastpfuhl",
-          host: 1,
-        },
-        {
-          date: "2025-02-01",
-          gameNr: 1,
-          team1: "DJK Saarbrücken-Rastpfuhl",
-          team2: "TV Düppenweiler",
-          host: 1,
-        },
-        {
-          date: "2025-02-01",
-          gameNr: 2,
-          team1: "DJK Saarbrücken-Rastpfuhl",
-          team2: "TV Wiesbach 2",
-          host: 1,
-        },
-        {
-          date: "2025-02-15",
-          gameNr: 1,
-          team1: "TV 06 Limbach",
-          team2: "DJK Saarbrücken-Rastpfuhl",
-          host: 1,
-        },
-        {
-          date: "2025-03-08",
-          gameNr: 1,
-          team1: "SVK Blieskastel-Zweibrücken",
-          team2: "DJK Saarbrücken-Rastpfuhl",
-          host: 2,
-        },
-        {
-          date: "2025-03-08",
-          gameNr: 2,
-          team1: "TV Saarwellingen",
-          team2: "DJK Saarbrücken-Rastpfuhl",
-          host: 2,
-        },
-      ],
+      duties, // Use imported duties data
+      games, // Use imported games data
     };
   },
 };
 </script>
 
-<style>
+<style scoped>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   text-align: center;
   background-color: #f4f4f9;
   min-height: 100vh;
+  padding: 20px;
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
+  justify-content: center; /* Center content vertically */
+  align-items: center; /* Center content horizontally */
 }
 
 h1 {
   color: #34495e;
-  margin-top: 20px;
+  margin-bottom: 40px;
   font-size: 2.5em;
+  font-weight: bold;
 }
 
-.container {
-  background-color: white;
-  padding: 20px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  border-radius: 10px;
-  max-width: 800px;
+.main-container {
+  display: flex;
+  flex-direction: column; /* Stack items vertically */
+  gap: 20px;
   width: 100%;
-  margin-top: 20px;
+  max-width: 1200px;
+  align-items: center; /* Center the containers horizontally */
+}
+
+@media (max-width: 768px) {
+  #app {
+    padding: 10px; /* Reduce padding on mobile */
+  }
+
+  h1 {
+    font-size: 2em; /* Smaller heading on mobile */
+  }
+
+  .main-container {
+    gap: 20px; /* Consistent spacing between sections */
+  }
+}
+
+@media (max-width: 480px) {
+  h1 {
+    font-size: 1.8em; /* Further reduce font size for smaller screens */
+  }
 }
 </style>
diff --git a/src/assets/global.css b/src/assets/global.css
new file mode 100644
index 0000000..a40a941
--- /dev/null
+++ b/src/assets/global.css
@@ -0,0 +1,52 @@
+.section-container {
+  background-color: white;
+  padding: 20px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  border-radius: 10px;
+  width: 100%;
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+h1,
+h2 {
+  color: #34495e;
+  font-weight: bold;
+}
+
+h2 {
+  font-size: 1.8em;
+  text-transform: uppercase;
+  border-bottom: 2px solid #16a085;
+  padding-bottom: 10px;
+  text-align: left;
+  color: #16a085;
+}
+
+@media (max-width: 768px) {
+  h1 {
+    font-size: 2em;
+  }
+
+  h2 {
+    font-size: 1.5em;
+  }
+
+  .section-container {
+    padding: 15px;
+  }
+}
+
+@media (max-width: 480px) {
+  h1 {
+    font-size: 1.8em;
+  }
+
+  h2 {
+    font-size: 1.3em;
+  }
+
+  .section-container {
+    padding: 10px;
+  }
+}
diff --git a/src/components/DutyDisplay.vue b/src/components/DutyDisplay.vue
index d8113ec..b27c9a2 100644
--- a/src/components/DutyDisplay.vue
+++ b/src/components/DutyDisplay.vue
@@ -1,33 +1,30 @@
 <template>
-  <div class="duties">
-    <h2>Mannschaftsdienste für Woche {{ currentWeek }}</h2>
-    <div class="duty-container">
-      <div class="duty-section">
-        <div class="icon-top-right">
-          <i class="fa-solid fa-house"></i>
-        </div>
-        <div class="section-header">
-          <h3>Hallendienst</h3>
-        </div>
-        <ul>
-          <li v-for="person in currentDuties.courtDuty" :key="person">
-            {{ person }}
-          </li>
-        </ul>
+  <div class="duty-container">
+    <div class="duty-section">
+      <div class="icon-top-right">
+        <i class="fa-solid fa-house"></i>
       </div>
-      <div class="duty-section">
-        <div class="icon-top-right">
-          <i class="fas fa-money-bill-wave"></i>
-        </div>
-        <div class="section-header">
-          <h3>Kassendienst</h3>
-        </div>
-        <ul>
-          <li v-for="person in currentDuties.cashDuty" :key="person">
-            {{ person }}
-          </li>
-        </ul>
+      <div class="section-header">
+        <h3>Hallendienst</h3>
       </div>
+      <ul>
+        <li v-for="person in currentDuties.courtDuty" :key="person">
+          {{ person }}
+        </li>
+      </ul>
+    </div>
+    <div class="duty-section">
+      <div class="icon-top-right">
+        <i class="fas fa-money-bill-wave"></i>
+      </div>
+      <div class="section-header">
+        <h3>Kassendienst</h3>
+      </div>
+      <ul>
+        <li v-for="person in currentDuties.cashDuty" :key="person">
+          {{ person }}
+        </li>
+      </ul>
     </div>
   </div>
 </template>
diff --git a/src/components/GameDisplay.vue b/src/components/GameDisplay.vue
index 75a9ba2..320ab5b 100644
--- a/src/components/GameDisplay.vue
+++ b/src/components/GameDisplay.vue
@@ -1,35 +1,28 @@
 <template>
-  <div class="games">
-    <h2>Anstehende Spiele</h2>
-    <div v-if="upcomingGames.length" class="game-cards">
-      <div
-        class="game-card"
-        v-for="(game, index) in upcomingGames"
-        :key="index"
-      >
-        <div class="icon-top-right">
-          <i class="fa-solid fa-volleyball"></i>
-        </div>
-        <h3>{{ formatDate(game.date) }} - Spiel {{ game.gameNr }}</h3>
-        <div class="teams">
-          <div class="team">
-            <i :class="getIconClass(game.team1)"></i>
-            <p>{{ game.team1 }}</p>
-          </div>
-          <p class="versus">VS</p>
-          <div class="team">
-            <i :class="getIconClass(game.team2)"></i>
-            <p>{{ game.team2 }}</p>
-          </div>
-        </div>
-        <p class="host">
-          <strong>Gastgeber:</strong>
-          {{ game.host === 1 ? game.team1 : game.team2 }}
-        </p>
+  <div v-if="upcomingGames.length" class="game-cards">
+    <div class="game-card" v-for="(game, index) in upcomingGames" :key="index">
+      <div class="icon-top-right">
+        <i class="fa-solid fa-volleyball"></i>
       </div>
+      <h3>{{ formatDate(game.date) }} - Spiel {{ game.gameNr }}</h3>
+      <div class="teams">
+        <div class="team">
+          <i :class="getIconClass(game.team1)"></i>
+          <p>{{ game.team1 }}</p>
+        </div>
+        <p class="versus">VS</p>
+        <div class="team">
+          <i :class="getIconClass(game.team2)"></i>
+          <p>{{ game.team2 }}</p>
+        </div>
+      </div>
+      <p class="host">
+        <strong>Gastgeber:</strong>
+        {{ game.host === 1 ? game.team1 : game.team2 }}
+      </p>
     </div>
-    <p v-else>No upcoming games</p>
   </div>
+  <p v-else>No upcoming games</p>
 </template>
 
 <script>
diff --git a/src/components/SectionContainer.vue b/src/components/SectionContainer.vue
new file mode 100644
index 0000000..c60a289
--- /dev/null
+++ b/src/components/SectionContainer.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="section-container">
+    <h2>{{ title }}</h2>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SectionContainer",
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<style scoped></style>
diff --git a/src/data.js b/src/data.js
new file mode 100644
index 0000000..576ca08
--- /dev/null
+++ b/src/data.js
@@ -0,0 +1,146 @@
+export const 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"],
+    },
+];
+
+export const games = [
+    {
+        date: "2024-09-21",
+        gameNr: 1,
+        team1: "Tv Saarwellingen",
+        team2: "DJK Saarbrücken-Rastpfuhl",
+        host: 1,
+    },
+    {
+        date: "2024-09-28",
+        gameNr: 1,
+        team1: "DJK Saarbrücken-Rastpfuhl",
+        team2: "SVK Blieskastel-Zweibrücken",
+        host: 1,
+    },
+    {
+        date: "2024-09-28",
+        gameNr: 2,
+        team1: "DJK Saarbrücken-Rastpfuhl",
+        team2: "TV Klarenthal",
+        host: 1,
+    },
+    {
+        date: "2024-11-02",
+        gameNr: 1,
+        team1: "TV Düppenweiler",
+        team2: "DJK Saarbrücken-Rastpfuhl",
+        host: 1,
+    },
+    {
+        date: "2024-11-09",
+        gameNr: 1,
+        team1: "DJK Saarbrücken-Rastpfuhl",
+        team2: "TV Brebach",
+        host: 1,
+    },
+    {
+        date: "2024-11-09",
+        gameNr: 2,
+        team1: "DJK Saarbrücken-Rastpfuhl",
+        team2: "TV 06 Limbach",
+        host: 1,
+    },
+    {
+        date: "2024-11-30",
+        gameNr: 2,
+        team1: "TV Saarwellingen 2",
+        team2: "DJK Saarbrücken-Rastpfuhl",
+        host: 1,
+    },
+    {
+        date: "2024-12-14",
+        gameNr: 2,
+        team1: "TV Wiesbach 2",
+        team2: "DJK Saarbrücken-Rastpfuhl",
+        host: 1,
+    },
+    {
+        date: "2025-01-11",
+        gameNr: 1,
+        team1: "TV Klarenthal",
+        team2: "DJK Saarbrücken-Rastpfuhl",
+        host: 1,
+    },
+    {
+        date: "2025-01-18",
+        gameNr: 1,
+        team1: "TV Brebach",
+        team2: "DJK Saarbrücken-Rastpfuhl",
+        host: 1,
+    },
+    {
+        date: "2025-02-01",
+        gameNr: 1,
+        team1: "DJK Saarbrücken-Rastpfuhl",
+        team2: "TV Düppenweiler",
+        host: 1,
+    },
+    {
+        date: "2025-02-01",
+        gameNr: 2,
+        team1: "DJK Saarbrücken-Rastpfuhl",
+        team2: "TV Wiesbach 2",
+        host: 1,
+    },
+    {
+        date: "2025-02-15",
+        gameNr: 1,
+        team1: "TV 06 Limbach",
+        team2: "DJK Saarbrücken-Rastpfuhl",
+        host: 1,
+    },
+    {
+        date: "2025-03-08",
+        gameNr: 1,
+        team1: "SVK Blieskastel-Zweibrücken",
+        team2: "DJK Saarbrücken-Rastpfuhl",
+        host: 2,
+    },
+    {
+        date: "2025-03-08",
+        gameNr: 2,
+        team1: "TV Saarwellingen",
+        team2: "DJK Saarbrücken-Rastpfuhl",
+        host: 2,
+    },
+];
diff --git a/src/main.js b/src/main.js
index 01433bc..4611ed9 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,4 +1,5 @@
-import { createApp } from 'vue'
-import App from './App.vue'
+import { createApp } from "vue";
+import App from "./App.vue";
+import "./assets/global.css";
 
-createApp(App).mount('#app')
+createApp(App).mount("#app");