diff --git a/frontend/src/app/homepage/homepage/homepage.component.css b/frontend/src/app/homepage/homepage/homepage.component.css
index e69de29..8b13789 100644
--- a/frontend/src/app/homepage/homepage/homepage.component.css
+++ b/frontend/src/app/homepage/homepage/homepage.component.css
@@ -0,0 +1 @@
+
diff --git a/frontend/src/app/homepage/homepage/homepage.component.html b/frontend/src/app/homepage/homepage/homepage.component.html
index c0b2cc7..301581a 100644
--- a/frontend/src/app/homepage/homepage/homepage.component.html
+++ b/frontend/src/app/homepage/homepage/homepage.component.html
@@ -3,33 +3,32 @@
   <div class="container mx-auto px-4 py-3 flex justify-between items-center">
     <!-- logo goes here -->
     <div class="flex gap-4">
-      <button (click)="onLogout()" class="px-6 py-2 text-black bg-amber-500 hover:bg-amber-400 rounded-full font-bold transition-all duration-300 hover:shadow-lg hover:shadow-amber-500/20">
+      <button (click)="onLogout()" class="btn-primary">
         Ausloggen
       </button>
     </div>
     <div>
-      <button (click)="openUserInfo()" class="px-6 py-2 text-black bg-amber-500 hover:bg-amber-400 rounded-full font-bold transition-all duration-300 hover:shadow-lg hover:shadow-amber-500/20">
+      <button (click)="openUserInfo()" class="btn-primary">
         Benutzer
       </button>
     </div>
   </div>
-<!-- Todo Dropdown für Benutzermenu (Dailytracker) -->
 </nav>
-<!-- Spiele mit Vorschau, Name und "Jetzt spielen" Button -->
-<div class="gird grid-col-3">
-  <div class="w-full h-full">
+
+<div class="grid grid-cols-3">
+  <div class="w-1/3 h-1/4">
     <p>Spiel Vorschau</p>
     <p>Spiel Name</p>
-    <button type="button" >Jetzt spielen</button>
+    <button type="button" class="btn-primary">Jetzt spielen</button>
   </div>
-  <div class="w-full h-full">
+  <div class="w-1/3 h-1/4">
     <p>Spiel Vorschau</p>
     <p>Spiel Name</p>
-    <button type="button" >Jetzt spielen</button>
+    <button type="button" class="btn-primary">Jetzt spielen</button>
   </div>
-  <div class="w-full h-full">
+  <div class="w-1/3 h-1/4">
     <p>Spiel Vorschau</p>
     <p>Spiel Name</p>
-    <button type="button" >Jetzt spielen</button>
+    <button type="button" class="btn-primary">Jetzt spielen</button>
   </div>
 </div>
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index f1d8c73..ecb1a02 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -1 +1,10 @@
 @import "tailwindcss";
+
+
+.btn-primary {
+  @apply px-4 py-2 cursor-pointer relative font-bold rounded-lg transition-all duration-300 ease-out transform-gpu hover:scale-105 will-change-transform bg-gradient-to-r from-emerald-500 to-emerald-400 text-black hover:shadow-xl hover:shadow-emerald-500/20
+}
+.btn-secondary {
+  @apply px-4 py-2 cursor-pointer relative font-bold rounded-lg transition-all duration-300 ease-out transform-gpu hover:scale-105 will-change-transform bg-white/10 text-white hover:bg-white/20
+}
+