diff --git a/public/index.html b/public/index.html
index 0b0a41de4d7dd0a18ab3a6fb8057a82da3c7825e..d98b75e5bc71453b96a5381056c9648e6837c012 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,6 +4,106 @@
<title>Connect4 - Lobby</title>
<style>
/* Add CSS styles for lobby */
+ body {
+ margin: 0;
+ padding: 0;
+ background: linear-gradient(135deg, #2c3e50, #3498db);
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ color: white;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ min-height: 100vh;
+}
+
+h1 {
+ margin: 30px 0 10px;
+ font-size: 3rem;
+ letter-spacing: 2px;
+}
+
+#login {
+ margin-bottom: 20px;
+}
+
+#nameInput {
+ padding: 10px 20px;
+ border-radius: 10px;
+ border: none;
+ font-size: 1rem;
+ width: 250px;
+}
+
+#rooms {
+ width: 80%;
+ max-width: 800px;
+ margin: 20px auto;
+}
+
+#rooms h2 {
+ font-size: 2rem;
+ margin-bottom: 10px;
+}
+
+#roomList {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+ gap: 15px;
+ margin-top: 10px;
+}
+
+.room {
+ background-color: rgba(255, 255, 255, 0.1);
+ border-radius: 12px;
+ padding: 15px;
+ box-shadow: 0 0 10px rgba(0,0,0,0.3);
+}
+
+.room span {
+ display: block;
+ margin-bottom: 8px;
+ font-weight: bold;
+}
+
+.room button {
+ background-color: #e67e22;
+ border: none;
+ padding: 8px 16px;
+ border-radius: 8px;
+ color: white;
+ font-weight: bold;
+ cursor: pointer;
+ transition: background 0.3s;
+}
+
+.room button:hover {
+ background-color: #d35400;
+}
+
+#hall-of-fame {
+ margin-top: 40px;
+ width: 80%;
+ max-width: 600px;
+}
+
+#hall-of-fame h2 {
+ font-size: 1.8rem;
+ margin-bottom: 10px;
+}
+
+#hof-list {
+ list-style: none;
+ padding: 0;
+}
+
+#hof-list li {
+ margin: 5px 0;
+ background-color: rgba(255, 255, 255, 0.1);
+ padding: 8px 12px;
+ border-radius: 8px;
+}
+
</style>
</head>
<body>