diff --git a/src/front/static/ts/main.ts b/src/front/static/ts/main.ts
index 910e75e..dd8847a 100644
--- a/src/front/static/ts/main.ts
+++ b/src/front/static/ts/main.ts
@@ -3,20 +3,53 @@ export async function isLogged(): boolean {
 		method: "GET",
 		credentials: "include",
 	});
-	if (uuid_req.status == 200)
+	if (uuid_req.status === 200)
 	{
 		let uuid = await uuid_req.json();
 		document.cookie = `uuid=${uuid.user};max-age=${60*60*24*7}`;
 
 		const old_button = document.getElementById("profile-button");
-		const logged_dropdown = document.createElement("button");
-		logged_dropdown.innerHTML = "logged in, more like locked in ahah i'm gonna kill myself the 12th of October";
-		logged_dropdown.classList.add("text-neutral-900", "hover:text-neutral-700", "dark:text-white", "dark:hover:text-neutral-400");
-		logged_dropdown.id = "profile-button";
 
-		// add the dropdown button and the dropdown logic
+		const dropdown = document.createElement("div");
+		dropdown.classList.add("relative", "inline-block", "group");
+		dropdown.id = "profile-button";
+		const button_dropdown = dropdown.appendChild(document.createElement("button"));
+		button_dropdown.innerHTML = uuid.user;
+		button_dropdown.classList.add("text-neutral-900", "group-hover:text-neutral-700", "dark:text-white", "dark:group-hover:text-neutral-400");
 
-		old_button.replaceWith(logged_dropdown);
+		const menu_div = dropdown.appendChild(document.createElement("div"));
+		menu_div.classList.add("float:right", "hidden", "absolute", "right-0", "bg-[#f9f9f9]",  "min-w-[160px]", "shadow-lg", "z-10",  "group-hover:block");
+
+		const profile_a = menu_div.appendChild(document.createElement("a"));
+		const settings_a = menu_div.appendChild(document.createElement("a"));
+		const logout_button = menu_div.appendChild(document.createElement("button"));
+
+		profile_a.text = "profile";
+		profile_a.classList.add("block", "no-underline", "px-4", "py-3");
+		profile_a.href = "/profile";
+		profile_a.setAttribute("data-link", "");
+
+		settings_a.text = "settings";
+		settings_a.classList.add("block", "no-underline", "px-4", "py-3");
+		settings_a.href = "/settings";
+		settings_a.setAttribute("data-link", "");
+
+		logout_button.innerHTML = "logout";
+		logout_button.classList.add("block", "no-underline", "px-4", "py-3");
+		logout_button.id = "logout-button";
+		//document.getElementById("logout-button")?.addEventListener("click", async () => {
+		logout_button.addEventListener("click", async () => {
+			let req = await fetch("http://localhost:3001/logout", {
+				method: "GET",
+				credentials: "include",
+			});
+			if (req.status === 200)
+				isLogged();
+			else
+				console.error("logout failed");
+		});
+
+		old_button.replaceWith(dropdown);
 		return true;
 	}
 	else // 401
diff --git a/src/front/static/ts/views/Game.ts b/src/front/static/ts/views/Game.ts
index b814e1b..41fe224 100644
--- a/src/front/static/ts/views/Game.ts
+++ b/src/front/static/ts/views/Game.ts
@@ -1,4 +1,5 @@
 import Aview from "./Aview.ts"
+import { isLogged } from "../main.js"
 
 export default class extends Aview {
 	
@@ -13,10 +14,13 @@ export default class extends Aview {
 
 	async getHTML() {
 		return `
-			<script type="module" src="static/ts/pong-logic.ts"></script>
-			<div class="text-center p-5 bg-white rounded-xl shadow space-y-4">
-				<canvas id="gameCanvas" class="rounded-md" width="400" height="400"></canvas>
-				<div id="game-buttons" class="hidden flex">
+			<div class="text-center p-5 bg-white rounded-xl shadow">
+				<div id="player-inputs" class="flex row">
+					<input type="text" id="player1" placeholder="Player 1" class="bg-white text-neutral-900 border rounded-md w-full px-4 py-2 mr-2 focus:outline-none focus:ring-2 focus:ring-blue-500" required></input>
+					<input type="text" id="player2" placeholder="Player 2" class="bg-white text-neutral-900 border rounded-md w-full px-4 py-2 ml-2 focus:outline-none focus:ring-2 focus:ring-blue-500" required></input>
+				</div>
+				<canvas id="gameCanvas" class="hidden rounded-md" width="400" height="400"></canvas>
+				<div id="game-buttons" class="hidden flex mt-4">
 					<button id="game-retry" class="bg-blue-600 text-white hover:bg-blue-500 w-full mx-4 py-2 rounded-md transition-colors">play again</button>
 					<a id="game-back" class="bg-gray-600 text-white hover:bg-gray-500 w-full mx-4 py-2 rounded-md transition-colors" href="/pong" data-link>back</a>
 				</div>
@@ -32,6 +36,8 @@ export default class extends Aview {
 		let match_over: boolean = false;
 		let p1_score: number = 0;
 		let p2_score: number = 0;
+		let p1_name: string;
+		let p2_name: string;
 
 		let countdown: number = 3;
 		let countdownTimer: number = 0;
@@ -46,7 +52,7 @@ export default class extends Aview {
 
 		let leftPaddleY: number = canvas.height / 2 - paddleHeight / 2;
 		let rightPaddleY: number = canvas.height / 2 - paddleHeight / 2;
-		let paddleSpeed: number = 727 * 0.69;
+		const paddleSpeed: number = 727 * 0.69;
 		let ballX: number = canvas.width / 2;
 		let ballY: number = canvas.height / 2;
 		let ballSpeed: number = 200;
@@ -154,13 +160,14 @@ export default class extends Aview {
 				ctx.fillRect(ballX, ballY, ballSize, ballSize);
 
 			ctx.font = "24px sans-serif";
-			ctx.fillText(`${p1_score} - ${p2_score}`, canvas.width / 2 - 20, 30);
+			let text_score = `${p1_name} ${p1_score} - ${p2_score} ${p2_name}`;
+			ctx.fillText(text_score, canvas.width / 2 - (ctx.measureText(text_score).width / 2), 30);
 
 			if (match_over)
 			{
-				ctx.font = "48px sans-serif";
-				const winner = p1_score > p2_score ? "Player 1" : "Player 2";
-				ctx.fillText(`${winner} won :D`, canvas.width / 2 - 150, canvas.height / 2 + 22);
+				ctx.font = "32px sans-serif";
+				const winner = `${p1_score > p2_score ? p1_name : p2_name} won :D`;
+				ctx.fillText(winner, canvas.width / 2 - (ctx.measureText(winner).width / 2), canvas.height / 2 + 16);
 				document.getElementById("game-buttons").classList.remove("hidden");
 			}
 		}
@@ -216,6 +223,13 @@ export default class extends Aview {
 			countdownTimer = performance.now();
 		});
 
+		p1_name = "Player 1";
+		p2_name = "Player 2";
+		if (await isLogged())
+		{
+			p1_name = document.cookie.match(new RegExp('(^| )' + "uuid" + '=([^;]+)'))[2];
+		}
+
 		// --------------------------------------------------------------------------------------------------------------------------------------------------------
 		//
 		// insert logic to set both names
diff --git a/src/front/static/ts/views/LoginPage.ts b/src/front/static/ts/views/LoginPage.ts
index fd7ba3e..7b069c6 100644
--- a/src/front/static/ts/views/LoginPage.ts
+++ b/src/front/static/ts/views/LoginPage.ts
@@ -11,18 +11,18 @@ export default class extends Aview {
 
 	async getHTML() {
 		return `
-		<div class="text-center p-10 bg-white dark:bg-neutral-800 rounded-xl shadow space-y-4 flex flex-col">
+		<form method="dialog" class="text-center p-10 bg-white dark:bg-neutral-800 rounded-xl shadow space-y-4 flex flex-col">
 			<h1 class="text-4xl font-bold text-blue-600">login</h1>
 
-			<input type="text" placeholder="username" id="username" class="bg-white text-neutral-900 border rounded-md w-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"></input>
-			<input type="password" id="password" placeholder="password" class="bg-white text-neutral-900 border w-full px-4 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></input>
+			<input type="text" id="username" placeholder="username" class="bg-white text-neutral-900 border rounded-md w-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" required></input>
+			<input type="password" id="password" placeholder="password" class="bg-white text-neutral-900 border w-full px-4 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required></input>
 			<p id="login-error-message" class="hidden text-red-700 dark:text-red-500"></p>
 			<button id="login-button" type="submit" class="bg-blue-600 text-white hover:bg-blue-500 w-full py-2 rounded-md transition-colors">login</button>
 
 			<a class="text-gray-400 dark:text-gray-600 underline" href="/register" data-link>
 				register
 			</a>
-		</div>
+		</form>
 		`;
 	}
 
diff --git a/src/front/static/ts/views/RegisterPage.ts b/src/front/static/ts/views/RegisterPage.ts
index 0701662..96f0d69 100644
--- a/src/front/static/ts/views/RegisterPage.ts
+++ b/src/front/static/ts/views/RegisterPage.ts
@@ -11,18 +11,18 @@ export default class extends Aview {
 
 	async getHTML() {
 		return `
-		<div class="text-center p-10 bg-white dark:bg-neutral-800 rounded-xl shadow space-y-4 flex flex-col">
+		<form method="dialog" class="text-center p-10 bg-white dark:bg-neutral-800 rounded-xl shadow space-y-4 flex flex-col">
 			<h1 class="text-4xl font-bold text-blue-600">register</h1>
 
-			<input type="text" id="username" placeholder="username" class="bg-white text-neutral-900 border rounded-md w-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"></input>
-			<input type="password" id="password" placeholder="password" class="bg-white text-neutral-900 border w-full px-4 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></input>
+			<input type="text" id="username" placeholder="username" class="bg-white text-neutral-900 border rounded-md w-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" required></input>
+			<input type="password" id="password" placeholder="password" class="bg-white text-neutral-900 border w-full px-4 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required></input>
 			<p id="login-error-message" class="hidden text-red-700 dark:text-red-500"></p>
 			<button id="register-button" type="submit" class="bg-blue-600 text-white hover:bg-blue-500 w-full py-2 rounded-md transition-colors">register</button>
 
 			<a class="text-gray-400 dark:text-gray-600 underline" href="/login" data-link>
 				i already have an account
 			</a>
-		</div>
+		</form>
 		`;
 	}