diff --git a/src/front/static/ts/main.ts b/src/front/static/ts/main.ts
index dd8847a..0443d91 100644
--- a/src/front/static/ts/main.ts
+++ b/src/front/static/ts/main.ts
@@ -85,6 +85,8 @@ const routes = [
 	{ path: "/login", view: () => import("./views/LoginPage.ts") },
 	{ path: "/register", view: () => import("./views/RegisterPage.ts") },
 
+	{ path: "/profile", view: () => import("./views/Profile.ts") },
+
 	{ path: "/tetris", view: () => import("./views/Tetris.ts") },
 ];
 
diff --git a/src/front/static/ts/views/Game.ts b/src/front/static/ts/views/Game.ts
index 41fe224..5988cc4 100644
--- a/src/front/static/ts/views/Game.ts
+++ b/src/front/static/ts/views/Game.ts
@@ -14,12 +14,14 @@ export default class extends Aview {
 
 	async getHTML() {
 		return `
-			<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 id="main-div" class="text-center p-5 bg-white rounded-xl shadow">
+				<div id="player-inputs" class="flex flex-col space-y-4">
+					<div class="flex 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>
+					<button id="game-start" class="bg-blue-600 text-white hover:bg-blue-500 w-full py-2 rounded-md transition-colors">play</button>
 				</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>
@@ -42,19 +44,19 @@ export default class extends Aview {
 		let countdown: number = 3;
 		let countdownTimer: number = 0;
 
-		const canvas = document.getElementById("gameCanvas") as HTMLCanvasElement;
-		const ctx = canvas.getContext("2d");
+		let canvas;
+		let ctx;
 
 		const paddleOffset: number = 15;
 		const paddleHeight: number = 100;
 		const paddleWidth: number = 10;
 		const ballSize: number = 10;
 
-		let leftPaddleY: number = canvas.height / 2 - paddleHeight / 2;
-		let rightPaddleY: number = canvas.height / 2 - paddleHeight / 2;
 		const paddleSpeed: number = 727 * 0.69;
-		let ballX: number = canvas.width / 2;
-		let ballY: number = canvas.height / 2;
+		let leftPaddleY: number;
+		let rightPaddleY: number;
+		let ballX: number;
+		let ballY: number;
 		let ballSpeed: number = 200;
 		let ballSpeedX: number = 300;
 		let ballSpeedY: number = 10;
@@ -222,20 +224,36 @@ export default class extends Aview {
 			countdown = 3;
 			countdownTimer = performance.now();
 		});
+		let p1_input = document.getElementById("player1");
+		let p2_input = document.getElementById("player2");
 
-		p1_name = "Player 1";
-		p2_name = "Player 2";
+		p2_input.value = "Player 2";
 		if (await isLogged())
-		{
-			p1_name = document.cookie.match(new RegExp('(^| )' + "uuid" + '=([^;]+)'))[2];
-		}
+			p1_input.value = document.cookie.match(new RegExp('(^| )' + "uuid" + '=([^;]+)'))[2];
+		else
+			p1_input.value = "Player 1";
 
-		// --------------------------------------------------------------------------------------------------------------------------------------------------------
-		//
-		// insert logic to set both names
-		//
-		// --------------------------------------------------------------------------------------------------------------------------------------------------------
+		document.getElementById("game-start")?.addEventListener("click", () => {
+			p1_name = p1_input.value;
+			p2_name = p2_input.value;
+			document.getElementById("player-inputs").remove();
 
-		requestAnimationFrame(gameLoop);
+			canvas = document.createElement("canvas");
+			canvas.id = "gameCanvas";
+			canvas.classList.add("rounded-md");
+
+			document.getElementById("main-div").prepend(canvas);
+
+			ctx = canvas.getContext("2d");
+			ctx.canvas.width  = 600;
+			ctx.canvas.height = 600;
+
+			leftPaddleY = canvas.height / 2 - paddleHeight / 2;
+			rightPaddleY = canvas.height / 2 - paddleHeight / 2;
+			ballX = canvas.width / 2;
+			ballY = canvas.height / 2;
+
+			requestAnimationFrame(gameLoop);
+		});
 	}
 }
diff --git a/src/front/static/ts/views/MainMenu.ts b/src/front/static/ts/views/MainMenu.ts
index 9d00ee0..ce2946f 100644
--- a/src/front/static/ts/views/MainMenu.ts
+++ b/src/front/static/ts/views/MainMenu.ts
@@ -13,7 +13,7 @@ export default class extends Aview {
 		<div class="text-center p-10 bg-white dark:bg-neutral-800 rounded-xl shadow space-y-4">
 			<h1 class="text-4xl font-bold text-blue-800 dark:text-blue-300">knl_meowscendence :D</h1>
 			<p class="text-gray-900 dark:text-white text-lg pb-4">i like pong</p>
-			<a class="bg-blue-600 hover:bg-blue-500 text-white px-4 py-2 rounded" href="/pong" data-link>
+			<a class="bg-blue-600 hover:bg-blue-500 text-white px-4 py-2 rounded transition-colors" href="/pong" data-link>
 				Pong
 			</a>
 		</div>
diff --git a/src/front/static/ts/views/PongMenu.ts b/src/front/static/ts/views/PongMenu.ts
index 718b1c0..5b9eee7 100644
--- a/src/front/static/ts/views/PongMenu.ts
+++ b/src/front/static/ts/views/PongMenu.ts
@@ -13,10 +13,10 @@ export default class extends Aview {
 		<div class="text-center p-12 bg-white dark:bg-neutral-800 rounded-xl shadow space-y-4">
 			<p class="text-gray-700 dark:text-white text-3xl font-bold pb-4">pong is funny yay</p>
 			<div class="flex flex-col space-y-4">
-				<a class="bg-red-500 hover:bg-red-400 text-white px-4 py-2 rounded" href="/pong/local" data-link>
+				<a class="bg-red-500 hover:bg-red-400 text-white px-4 py-2 rounded transition-colors" href="/pong/local" data-link>
 					local match
 				</a>
-				<a class="bg-red-500 hover:bg-red-400 text-white px-4 py-2 rounded" href="/pong/tournament" data-link>
+				<a class="bg-red-500 hover:bg-red-400 text-white px-4 py-2 rounded transition-colors" href="/pong/tournament" data-link>
 					local tournament
 				</a>
 			</div>
diff --git a/src/front/static/ts/views/Profile.ts b/src/front/static/ts/views/Profile.ts
new file mode 100644
index 0000000..d81aba9
--- /dev/null
+++ b/src/front/static/ts/views/Profile.ts
@@ -0,0 +1,24 @@
+import Aview from "./Aview.ts"
+import { isLogged, navigationManager } from "../main.ts"
+
+export default class extends Aview {
+
+	constructor()
+	{
+		super();
+		if (!isLogged())
+			navigationManager("/login");
+		this.setTitle("profile");
+	}
+
+	async getHTML() {
+		return `
+		<div id="main-window" class="text-center p-10 bg-white dark:bg-neutral-800 rounded-xl shadow space-y-4">
+		</div>
+		`;
+	}
+
+	async run() {
+		const main = document.getElementById("main-window");
+	}
+}