diff --git a/programmieren/spiele/index.html b/programmieren/spiele/index.html
index 044b769..f042b25 100644
--- a/programmieren/spiele/index.html
+++ b/programmieren/spiele/index.html
@@ -1,32 +1,86 @@
-<html>
-	<head>
-		<title>Creative Crafter</title>
-		<link href="" rel="stylesheet">
-		<style>
-			@font-face {
-				font-family: "Titillium";
-				src: url("/Titillium-Web-Regular.ttf");
-			  }
-			body {
-				font-family: 'Titillium';
-			}
-			h1 {
-				text-align: center;
-			}
-			h2 {
-				text-align: center;
-			}
-		</style>
-	</head>
-	<body>
-		<h1><img src="/icons/Controller.png" height="150svh">
-		<br/>
-		Creative Crafter</h1>
-		
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Creative Crafter</title>
+    <link href="" rel="stylesheet">
+    <style>
+        @font-face {
+            font-family: "Titillium";
+            src: url("/Titillium-Web-Regular.ttf");
+        }
+        body {
+            font-family: 'Titillium';
+            height: 100%;
+            margin: 0;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+            background-color: #e6f7ff; /* Leichtes Blau */
+        }
+        h1 {
+            text-align: center;
+        }
+        h2 {
+            text-align: center;
+        }
+        h1, h2, h3 {
+            text-align: center;
+        }
+        .category-container {
+            width: 80%;
+            max-width: 800px;
+            margin-top: 20px;
+        }
+        .category {
+            padding: 15px;
+            border: 1px solid #ccc;
+            border-radius: 8px;
+            margin: 10px 0;
+            background-color: #fff;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            text-align: left;
+        }
+        .category-title {
+            font-size: 1.2em;
+            font-weight: bold;
+            margin-bottom: 5px;
+        }
+        .category-description {
+            font-size: 1em;
+            margin-bottom: 10px;
+        }
+        .category a {
+            color: #007bff;
+            text-decoration: none;
+        }
+        .category a:hover {
+            text-decoration: underline;
+        }
+    </style>
+</head>
+<body>
+    <h1><img src="/icons/Controller.png" height="150svh"><br/>Creative Crafter</h1>
 
-		
-
-
-	
-	</body>
-</html>
\ No newline at end of file
+    <h1>Meine Spiele</h1>
+    <div class="category-container">
+        <div class="category">
+            <div class="category-title">Abenteuer</div>
+            <div class="category-description">Erlebe spannende Abenteuer in verschiedenen Welten und setze dich gegen deine Gegner durch.</div>
+            <a href="/programmieren/spiele/abenteuer">Mehr erfahren</a>
+        </div>
+        <div class="category">
+            <div class="category-title">Puzzle</div>
+            <div class="category-description">Teste deine Logik und Problemlösungsfähigkeiten mit unseren herausfordernden Puzzlespielen.</div>
+            <a href="/programmieren/spiele/puzzle">Mehr erfahren</a>
+        </div>
+        <div class="category">
+            <div class="category-title">Action</div>
+            <div class="category-description">Actiongeladene Spiele, die dein Adrenalin in die Höhe treiben. Kämpfe, schieße und erobere!</div>
+            <a href="/programmieren/spiele/action">Mehr erfahren</a>
+        </div>
+    </div>
+</body>
+</html>
