diff --git a/TODO.txt b/TODO.txt
index a7e263603..e7b7cf5ba 100644
--- a/TODO.txt
+++ b/TODO.txt
@@ -10,8 +10,8 @@
 * lose troops when attacked DONE 8/12/2024
 * slower to attack stronger players DONE 8/12/2024
 * move all attack related config to Settings DONE 8/12/2024
-* fix boat bugs
-* add username in front page
+* fix boat bugs DONE 8/12/2024
+* add username in front page DONE 8/12/2024
 * improve front page
 * upload and start server
 * fix enemy islands when attacking 
@@ -19,4 +19,5 @@
 * have boats not get close to shore
 * better algorithm for name render placement
 * make coasts look better
-* add shader to dim border
\ No newline at end of file
+* add shader to dim border
+* remove player.info()
\ No newline at end of file
diff --git a/src/client/Client.ts b/src/client/Client.ts
index 62fc5c9d1..f05a4fe4a 100644
--- a/src/client/Client.ts
+++ b/src/client/Client.ts
@@ -84,12 +84,21 @@ class Client {
             if (this.game != null) {
                 return
             }
-            this.game = createClientGame(uuidv4().slice(0, 4), generateUniqueID(), lobbyID, defaultConfig, map)
+            this.game = createClientGame(getUsername(), generateUniqueID(), lobbyID, defaultConfig, map)
             this.game.joinLobby()
         })
     }
 }
 
+function getUsername(): string {
+    const usernameInput = document.getElementById('username') as HTMLInputElement | null;
+    if (usernameInput) {
+        const trimmedValue = usernameInput.value.trim();
+        return trimmedValue || 'Anon'; // Return 'Anon' if the trimmed value is empty
+    }
+    return 'Anon'; // Return 'Anon' if the input element is not found
+}
+
 // Initialize the client when the DOM is loaded
 document.addEventListener('DOMContentLoaded', () => {
     new Client().initialize();
diff --git a/src/client/ClientGame.ts b/src/client/ClientGame.ts
index ca9b3bd28..7d37dc0b9 100644
--- a/src/client/ClientGame.ts
+++ b/src/client/ClientGame.ts
@@ -169,7 +169,6 @@ export class ClientGame {
                 this.sendBoatAttackIntent(targetID, cell, this.config.player().boatAttackAmount(this.myPlayer, owner))
             }
         }
-
     }
 
     private sendSpawnIntent(cell: Cell) {
diff --git a/src/client/index.html b/src/client/index.html
index 35965a4eb..c8787e00b 100644
--- a/src/client/index.html
+++ b/src/client/index.html
@@ -5,16 +5,78 @@
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>Warfront</title>
+	<style>
+		body {
+			font-family: Arial, sans-serif;
+			max-width: 800px;
+			margin: 0 auto;
+			padding: 20px;
+			background-color: #f0f0f0;
+		}
+
+		h1 {
+			text-align: center;
+			color: #333;
+		}
+
+		#username-container {
+			margin-bottom: 20px;
+		}
+
+		#username {
+			width: 100%;
+			padding: 10px;
+			font-size: 16px;
+			border: 2px solid #007bff;
+			border-radius: 5px;
+		}
+
+		#lobbies-container {
+			display: grid;
+			grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+			gap: 15px;
+		}
+
+		.lobby-button {
+			height: 100px;
+			font-size: 18px;
+			font-weight: bold;
+			border: 2px solid #007bff;
+			background-color: #ffffff;
+			color: #007bff;
+			cursor: pointer;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			transition: background-color 0.3s, color 0.3s;
+			border-radius: 5px;
+			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+		}
+
+		.lobby-button:hover {
+			background-color: #007bff;
+			color: #ffffff;
+		}
+
+		.player-count {
+			font-size: 14px;
+			margin-top: 5px;
+		}
+	</style>
 </head>
 
 <body>
 	<h1>Warfront</h1>
-	<div id="game-setup">
-		<div id="lobbies-container">
-			<h2>Available Lobbies</h2>
-			<!-- Lobby buttons will be inserted here -->
-		</div>
+	<div id="username-container">
+		<input type="text" id="username" placeholder="Enter your username">
 	</div>
+	<div id="lobbies-container">
+		<!-- Lobby buttons will be inserted here by your existing JavaScript -->
+	</div>
+
+	<!-- Your existing script file -->
+	<script src="your-existing-script.js"></script>
 </body>
 
 </html>
\ No newline at end of file
