diff --git a/GUI/src/Home.vue b/GUI/src/Home.vue
index 3ec7485..91d5eb9 100644
--- a/GUI/src/Home.vue
+++ b/GUI/src/Home.vue
@@ -3,51 +3,106 @@ let buttons = [
     {
         name: "Lokaler Multiplayer",
         icon: "mdi-account-switch",
-        color: "red"
+        color: "red",
     },
     {
         name: "Lokal gegen Bot",
         icon: "mdi-robot-angry-outline",
-        color: "green"
+        color: "green",
     },
     {
         name: "Online Multiplayer",
         icon: "mdi-web",
-        color: "blue"
-    }
+        color: "blue",
+    },
 ]
 </script>
 
 <template>
-    <v-container class="fill-height d-flex justify-center align-center flex-column" fluid>
-        <div class="compact-stack">
-            <h1 class="mb-0 text-center">Wähle deinen <br><span class="text-yellow">Spielmodus</span></h1>
-            <v-row justify="center" align="center" >
-                <v-col cols="12" class="text-center">
-                    <div v-for="button of buttons" :key="button.name" class="py-1">
-                        <v-btn :color="button.color" size="x-large" min-width="325" class="justify-start" rounded="xl">
-                            <template v-slot:prepend>
-                                <div class="d-flex justify-start" style="width: 30px;">
-                                    <v-icon :icon="button.icon"></v-icon>
-                                </div>
-                            </template>
+    <v-container class="fill-height d-flex justify-center align-center" fluid>
+        <div class="homepage-content">
+            <div class="title-section text-center">
+                <h1 class="main-title">Wähle deinen</h1>
+                <h1 class="main-title highlight-title">Spielmodus</h1>
+            </div>
 
-                            <span class="flex-grow-1 text-center">
-                                {{ button.name }}
-                            </span>
-                        </v-btn>
-                    </div>
-                </v-col>
-            </v-row>
+            <div class="button-section">
+                <v-btn
+                    v-for="button of buttons"
+                    :key="button.name"
+                    :color="button.color"
+                    size="x-large"
+                    min-width="340"
+                    rounded="xl"
+                    class="mode-btn justify-start"
+                    elevation="8"
+                >
+                    <template v-slot:prepend>
+                        <div class="d-flex justify-start" style="width: 32px">
+                            <v-icon :icon="button.icon" size="24"></v-icon>
+                        </div>
+                    </template>
+
+                    <span class="flex-grow-1 text-center btn-label">
+                        {{ button.name }}
+                    </span>
+                </v-btn>
+            </div>
         </div>
     </v-container>
 </template>
 
 <style scoped>
-.compact-stack {
+.homepage-content {
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 10vh;
+    gap: 8vh;
 }
-</style>
\ No newline at end of file
+
+.title-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.main-title {
+    font-family: "Roboto", sans-serif;
+    font-size: 3rem;
+    font-weight: 300;
+    letter-spacing: 2px;
+    line-height: 1.2;
+    text-transform: uppercase;
+}
+
+.highlight-title {
+    font-weight: 700;
+    font-size: 3.5rem;
+    color: #fdd835;
+    letter-spacing: 4px;
+}
+
+.button-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+    width: 100%;
+}
+
+.mode-btn {
+    font-family: "Roboto", sans-serif;
+    font-weight: 500;
+    letter-spacing: 1px;
+    text-transform: none;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.mode-btn:hover {
+    transform: scale(1.05);
+}
+
+.btn-label {
+    font-size: 1.05rem;
+}
+</style>