diff --git a/django/src/games/pong.py b/django/src/games/pong.py
index 02fbf7c9..1f802c9d 100644
--- a/django/src/games/pong.py
+++ b/django/src/games/pong.py
@@ -1,7 +1,6 @@
 import asyncio
 import json
 import random
-import uuid
 import redis.asyncio as redis
 import logging
 from typing import Any, List
@@ -44,9 +43,8 @@ async def initialize_game(self):
         query_params = parse_qs(self.scope["query_string"].decode())
         self.mode = self.check_missing_param(query_params, "mode")
         player_needed = self.check_missing_param(query_params, "player_needed")
-        room_id = query_params.get("room_id", [None])[0]
-        self.host = room_id is None
-        self.room_id = room_id or str(uuid.uuid4())
+        self.room_id = self.check_missing_param(query_params, "room_id")
+        self.host = self.check_missing_param(query_params, "host") == "True"
         self.group_name = f"pong_{self.room_id}"
         self.pad_n = "pad_1" if self.host else "pad_2"
 
@@ -116,10 +114,6 @@ async def game_join(self, event):
             self.info.players.append(event["content"]["user"])
             if len(self.info.players) == self.info.player_needed:
                 await self.redis.set(self.room_id, 1)
-            await self.send_message("group", "game_info", self.info.__dict__)
-
-    async def game_info(self, event):
-        await self.send_message("client", args=event)
 
     async def game_ready(self, event):
         if self.host:
diff --git a/django/src/games/templates/pong.html b/django/src/games/templates/pong.html
index 2334fd7e..972ae7be 100644
--- a/django/src/games/templates/pong.html
+++ b/django/src/games/templates/pong.html
@@ -1,278 +1,61 @@
 {% extends "./extends/base.html" %}
 
 {% block content %}
-<div class="h-100 d-flex flex-column justify-content-center align-items-center">
-	<div id="main" game-menu>
-		<button menu-id="local">Local Play</button>
-		<button menu-id="online">Online Play</button>
+<div class="container">
+	<div game-menu="main">
+		<button class="btn btn-primary" menu-id="local">Local Play</button>
+		<button class="btn btn-danger" menu-id="online">Online Play</button>
 	</div>
 
-	<div id="local" game-menu>
-		<button join-mode="local">Play with a Friend</button>
-		<button join-mode="ai">Play with AI</button>
+	<div game-menu="local">
+		<a class="btn btn-primary text-decoration-none" data-route href="/pong/local">Play with a Friend</a>
+		<a class="btn btn-danger text-decoration-none" data-route href="/pong/ai">Play with an AI</a>
 	</div>
 
-	<div id="online" game-menu>
-		<button join-mode="online">Create a Room</button>
-		<button menu-id="join">Join a Room</button>
-		<button>Join a Tournament</button>
+	<div game-menu="online">
+		<a class="btn btn-primary text-decoration-none" data-route href="/pong/online">Create a Room</a>
+		<button class="btn btn-danger text-decoration-none" menu-id="join">Join a Room</button>
+		<a class="btn btn-warning text-decoration-none" data-route href="/tounament/pong">Join a Tournament</a>
 	</div>
 
-	<div id="join" game-menu>
-		<form id="join-form">
-			<input type="text" id="join-id" placeholder="Room Id">
-			<button id="join-form-btn">Join</button>
+	<div game-menu="join">
+		<form class="form-group" id="join-form">
+			<input class="form-control" type="text" id="join-id" placeholder="Room Id">
+			<button type="submit" class="btn btn-primary">Join</button>
 		</form>
 	</div>
 
-	<div id="game" game-menu>
-		<div id="room-id">
-		</div>
-		<canvas id="pong-canvas" class="game-canvas"></canvas>
-	</div>
-
-	<button id="ready-btn">Ready</button>
-	<button id="back-btn" menu-id="main">Back to Main Menu</button>
+	<button class="btn btn-success" id="back-btn" menu-id="main">Back</button>
 </div>
 
 <script>
 	const url = "pong"
-	const canvas = document.getElementById('pong-canvas');
-	const ctx = canvas.getContext('2d');
 	const backBtn = document.getElementById("back-btn");
-	const readyBtn = document.getElementById('ready-btn');
-	let upKey = "w";
-	let downKey = "s";
-	let socket;
-	let padN;
-	let secondPlayer;
-	let roomId;
-	let run;
-	let ready;
-	let gameState;
-	let keyInterval;
-	let pointerLock;
-	const mouseSensitivity = 1;
-
-	function resetGame(showMain = true) {
-		if (socket) {
-			sendToWebSocket("game_stop");
-			socket.close();
-		}
-		socket = undefined;
-		padN = "";
-		secondPlayer = false;
-		roomId = "";
-		run = false;
-		ready = false;
-		gameState = undefined;
-		keyInterval = null;
-		document.getElementById("room-id").innerText = "";
-		document.getElementById('join-id').value = "";
-		pointerLock = false;
-		document.exitPointerLock();
-		if (showMain)
-			showMenu("main");
-	}
 
 	function showMenu(menuId) {
 		document.querySelectorAll("[game-menu]").forEach(menu => {
-			menu.style.display = menu.id === menuId ? "block" : "none";
-			menu.querySelectorAll("[menu-id]").forEach(btn => {
-				btn.disabled = menu.id !== menuId;
-			});
+			menu.style.display = menu.getAttribute("game-menu") === menuId ? "block" : "none";
 		});
-		toggleBtn(backBtn, menuId === "main");
-		toggleBtn(readyBtn, menuId !== "game");
-	}
-
-	function toggleBtn(btn, condition) {
-		condition ? btn.classList.add("hidden") : btn.classList.remove("hidden");
-		btn.disabled = condition;
-	}
-
-	function joinRoom(mode) {
-		let args = {
-			"mode": mode,
-			"room_id": roomId,
-			"player_needed": mode === "online" ? 2 : 1,
-		};
-		secondPlayer = mode === "local";
-		socket = wsConnect(wsCreateUrl(url, args), onMessage, resetGame);
-	}
-
-	function sendToWebSocket(type, args = {}) {
-		socket.send(JSON.stringify({ type, content: args }));
-	}
-
-	function onMessage(data) {
-		switch (data.type) {
-			case 'game_pad': padN = data.content.game_pad; break;
-			case 'game_info': handleGameInfo(data); break;
-			case 'game_start': handleGameStart(); break;
-			case 'game_state': handleGameState(data); break;
-			case 'game_stop': handleGameStop(data); break;
-			case 'game_error': handleGameError(data); break;
-		}
-	}
-
-	function handleGameInfo(data) {
-		roomId = data.content.room_id;
-		document.getElementById("room-id").innerText = `Room Id: ${roomId}`;
-		canvasResize(canvas);
-		showMenu("game");
-		if (data.content.players.length !== data.content.player_needed)
-			drawCenteredText("Waiting for second player");
-	}
-
-	function handleGameStart() {
-		run = true;
-		if (secondPlayer) {
-			canvas.click()
-		}
-	}
-
-	function handleGameState(data) {
-		gameState = data.content;
-		renderGame();
-	}
-
-	function handleGameStop(data) {
-		resetGame(false);
-		ctx.clearRect(0, 0, canvas.width, canvas.height);
-		if (data?.content?.winner)
-			drawCenteredText(`Winner: ${data.content.winner}`)
-		else
-			drawCenteredText("Sorry, your mate left :'(");
-	}
-
-	function handleGameError(data) {
-		console.error(data.content.error);
-		resetGame();
-	}
-
-	function canvasResize(canvas) {
-		const style = getComputedStyle(canvas);
-		canvas.width = parseInt(style.width);
-		canvas.height = parseInt(style.height);
-	}
-
-	function renderGame() {
-		ctx.clearRect(0, 0, canvas.width, canvas.height);
-		drawBall(gameState.ball);
-		drawPad(gameState.pad_1);
-		drawPad(gameState.pad_2);
-		drawText(`P1: ${gameState.score[0]}`, 20, 20);
-		drawText(`P2: ${gameState.score[1]}`, canvas.width - 80, 20);
-	}
-
-	function drawBall(ball) {
-		const radius = ball.radius * Math.min(canvas.width, canvas.height);
-		ctx.beginPath();
-		ctx.arc(ball.x * canvas.width, ball.y * canvas.height, radius, 0, Math.PI * 2);
-		ctx.fillStyle = ball.color;
-		ctx.fill();
-		ctx.closePath();
-	}
-
-	function drawPad(pad) {
-		ctx.fillStyle = pad.color;
-		ctx.fillRect(pad.x * canvas.width, pad.y * canvas.height, pad.width * canvas.width, pad.height * canvas.height);
+		menuId === "main" ? backBtn.classList.add("hidden") : backBtn.classList.remove("hidden");
 	}
 
-	function drawText(text, x, y, color = "white", font = "20px Arial") {
-		ctx.fillStyle = color;
-		ctx.font = font;
-		ctx.fillText(text, x, y);
-	}
-
-	function drawCenteredText(text, color = "white", font = "20px Arial") {
-		ctx.font = font;
-		const textWidth = ctx.measureText(text).width;
-		const x = (canvas.width - textWidth) / 2;
-		const y = canvas.height / 2;
-		drawText(text, x, y, color, font);
-	}
-
-	function initializeEvents() {
-		document.querySelectorAll('[menu-id]').forEach(element => {
-			element.addEventListener("click", (e) => {
-				e.preventDefault();
-				showMenu(element.getAttribute("menu-id"));
-				if (element.id && element.id === "back-btn")
-					resetGame();
-			});
-		});
-
-		document.querySelectorAll("[join-mode]").forEach(element => {
-			element.addEventListener("click", (e) => {
-				e.preventDefault();
-				joinRoom(element.getAttribute("join-mode"));
-			});
-		});
-
-		document.getElementById("join-form").addEventListener("submit", e => {
+	document.querySelectorAll('[menu-id]').forEach(element => {
+		element.addEventListener("click", (e) => {
 			e.preventDefault();
-			roomId = document.getElementById('join-id').value.trim();
-			document.getElementById('join-id').value = "";
-			if (roomId !== "")
-				joinRoom("online");
-			else
-				console.error('Room ID cannot be empty.');
-		});
-
-		readyBtn.addEventListener("click", e => {
-			toggleBtn(readyBtn, true);
-			sendToWebSocket("game_ready", {
-				"pad_n": padN,
-			});
+			showMenu(element.getAttribute("menu-id"));
 		});
+	});
 
-		canvas.onclick = () => {
-			if (run && !pointerLock)
-				canvas.requestPointerLock()
-		}
-
-		window.onresize = () => {
-			canvasResize(canvas);
-			if (run)
-				renderGame();
-		};
-
-		document.onkeydown = e => {
-			if (run && (e.key === upKey || e.key === downKey)) {
-				e.preventDefault();
-				if (!keyInterval) {
-					let direction = e.key === upKey ? "up" : "down";
-					sendToWebSocket("game_move", { "pad_n": padN, "direction": direction });
-					keyInterval = setInterval(() => {
-						sendToWebSocket("game_move", { "pad_n": padN, "direction": direction });
-					}, 30);
-				}
-			}
-		};
-
-		document.onkeyup = e => {
-			if (e.key === upKey || e.key === downKey) {
-				clearInterval(keyInterval);
-				keyInterval = null;
-			}
-		};
-
-		document.onmousemove = e => {
-			if (secondPlayer && run && pointerLock) {
-				let direction = e.movementY < 0 ? "up" : "down";
-				if (Math.abs(e.movementY) * mouseSensitivity >= 1)
-					sendToWebSocket("game_move", { "pad_n": "pad_2", "direction": direction });
-			}
-		};
-
-		document.onpointerlockchange = () => {
-			pointerLock = document.pointerLockElement === canvas
-		};
-	}
+	document.getElementById("join-form").addEventListener("submit", e => {
+		e.preventDefault();
+		const roomId = document.getElementById('join-id').value.trim();
+		document.getElementById('join-id').value = "";
+		if (roomId !== "")
+			route(`/pong/online/${roomId}`);
+		else
+			console.error('Room ID cannot be empty.');
+	});
 
-	initializeEvents();
-	resetGame();
+	showMenu("main");
 </script>
 {% endblock %}
diff --git a/django/src/games/templates/pong_game.html b/django/src/games/templates/pong_game.html
new file mode 100644
index 00000000..19c00197
--- /dev/null
+++ b/django/src/games/templates/pong_game.html
@@ -0,0 +1,196 @@
+{% extends "./extends/base.html" %}
+
+{% block content %}
+<div class="container">
+	<div id="game">
+		<p>Roomd Id: {{room_id}}</p>
+		<canvas id="pong-canvas" class="game-canvas"></canvas>
+	</div>
+
+	<button class="btn btn-primary" id="ready-btn">Ready</button>
+	<button class="btn btn-success" id="back-btn">Back</button>
+</div>
+
+<script>
+	const canvas = document.getElementById('pong-canvas');
+	const ctx = canvas.getContext('2d');
+	const readyBtn = document.getElementById('ready-btn');
+	const mode = "{{mode}}";
+	const localGame = mode === "local";
+	let socket = wsConnect(wsCreateUrl("pong", {
+			"mode": mode,
+			"room_id": "{{room_id}}",
+			"host": "{{host}}",
+			"player_needed": mode === "online" ? 2 : 1,
+	}), onMessage, exit);
+	let upKey = "w";
+	let downKey = "s";
+	let padN = "";
+	let run = false;
+	let ready = false;
+	let gameState;
+	let keyInterval = null;
+	let pointerLock = false;
+	const mouseSensitivity = 1;
+
+	function exit(goBack = true) {
+		if (socket) {
+			sendToWebSocket("game_stop");
+			socket.close();
+			socket = undefined;
+		}
+		document.exitPointerLock();
+		if (goBack)
+			route("/pong");
+	}
+
+	function sendToWebSocket(type, args = {}) {
+		socket.send(JSON.stringify({ type, content: args }));
+	}
+
+	function onMessage(data) {
+		switch (data.type) {
+			case 'game_pad': handleGamePad(data); break;
+			case 'game_start': handleGameStart(); break;
+			case 'game_state': handleGameState(data); break;
+			case 'game_stop': handleGameStop(data); break;
+			case 'game_error': handleGameError(data); break;
+		}
+	}
+
+	function handleGamePad(data) {
+		padN = data.content.game_pad
+		canvasResize(canvas);
+		if (!localGame)
+			drawCenteredText("Waiting for second player");
+	}
+
+	function handleGameStart() {
+		run = true;
+		if (localGame) {
+			canvas.click()
+		}
+	}
+
+	function handleGameState(data) {
+		gameState = data.content;
+		renderGame();
+	}
+
+	function handleGameStop(data) {
+		exit(false);
+		ctx.clearRect(0, 0, canvas.width, canvas.height);
+		if (data?.content?.winner)
+			drawCenteredText(`Winner: ${data.content.winner}`)
+		else
+			drawCenteredText("Sorry, your mate left :'(");
+	}
+
+	function handleGameError(data) {
+		console.error(data.content.error);
+		exit();
+	}
+
+	function canvasResize(canvas) {
+		const style = getComputedStyle(canvas);
+		canvas.width = parseInt(style.width);
+		canvas.height = parseInt(style.height);
+	}
+
+	function renderGame() {
+		ctx.clearRect(0, 0, canvas.width, canvas.height);
+		drawBall(gameState.ball);
+		drawPad(gameState.pad_1);
+		drawPad(gameState.pad_2);
+		drawText(`P1: ${gameState.score[0]}`, 20, 20);
+		drawText(`P2: ${gameState.score[1]}`, canvas.width - 80, 20);
+	}
+
+	function drawBall(ball) {
+		const radius = ball.radius * Math.min(canvas.width, canvas.height);
+		ctx.beginPath();
+		ctx.arc(ball.x * canvas.width, ball.y * canvas.height, radius, 0, Math.PI * 2);
+		ctx.fillStyle = ball.color;
+		ctx.fill();
+		ctx.closePath();
+	}
+
+	function drawPad(pad) {
+		ctx.fillStyle = pad.color;
+		ctx.fillRect(pad.x * canvas.width, pad.y * canvas.height, pad.width * canvas.width, pad.height * canvas.height);
+	}
+
+	function drawText(text, x, y, color = "white", font = "20px Arial") {
+		ctx.fillStyle = color;
+		ctx.font = font;
+		ctx.fillText(text, x, y);
+	}
+
+	function drawCenteredText(text, color = "white", font = "20px Arial") {
+		ctx.font = font;
+		const textWidth = ctx.measureText(text).width;
+		const x = (canvas.width - textWidth) / 2;
+		const y = canvas.height / 2;
+		drawText(text, x, y, color, font);
+	}
+
+	function initializeEvents() {
+		readyBtn.addEventListener("click", e => {
+			readyBtn.classList.add("hidden");
+			readyBtn.disabled = true;
+			sendToWebSocket("game_ready", {
+				"pad_n": padN,
+			});
+		});
+
+		document.getElementById('back-btn').onclick = exit;
+
+		window.onresize = () => {
+			canvasResize(canvas);
+			if (run)
+				renderGame();
+		};
+
+		document.onkeydown = e => {
+			if (run && (e.key === upKey || e.key === downKey)) {
+				e.preventDefault();
+				if (!keyInterval) {
+					let direction = e.key === upKey ? "up" : "down";
+					sendToWebSocket("game_move", { "pad_n": padN, "direction": direction });
+					keyInterval = setInterval(() => {
+						sendToWebSocket("game_move", { "pad_n": padN, "direction": direction });
+					}, 30);
+				}
+			}
+		};
+
+		document.onkeyup = e => {
+			if (e.key === upKey || e.key === downKey) {
+				clearInterval(keyInterval);
+				keyInterval = null;
+			}
+		};
+
+		if (localGame) {
+			canvas.onclick = () => {
+				if (run && !pointerLock)
+					canvas.requestPointerLock()
+			}
+
+			document.onmousemove = e => {
+				if (run && pointerLock) {
+					let direction = e.movementY < 0 ? "up" : "down";
+					if (Math.abs(e.movementY) * mouseSensitivity >= 1)
+					sendToWebSocket("game_move", { "pad_n": "pad_2", "direction": direction });
+				}
+			};
+
+			document.onpointerlockchange = () => {
+				pointerLock = document.pointerLockElement === canvas
+			};
+		}
+	}
+
+	initializeEvents();
+</script>
+{% endblock %}
diff --git a/django/src/games/tests.py b/django/src/games/tests.py
index 1365bb1d..709fc22f 100644
--- a/django/src/games/tests.py
+++ b/django/src/games/tests.py
@@ -39,15 +39,13 @@ async def test_websocket_connect(self):
         Test if the websocket consumer connects successfully.
         """
         user = await sync_to_async(get_user_model().objects.create_user)(username='testuser', password='password123')
-        communicator = WebsocketCommunicator(Consumer.as_asgi(), "/ws/pong/?mode=local&player_needed=1")
+        communicator = WebsocketCommunicator(Consumer.as_asgi(), "/ws/pong/?mode=local&player_needed=1&host=True&room_id=1")
         communicator.scope['user'] = user
 
         connected, _ = await communicator.connect()
         self.assertTrue(connected)
         response = await communicator.receive_json_from()
         self.assertEqual(response["type"], "game_pad")
-        response = await communicator.receive_json_from()
-        self.assertEqual(response["type"], "game_info")
 
         await communicator.disconnect()
 
@@ -56,15 +54,13 @@ async def test_invalid_message(self):
         Test if the consumer handles invalid messages properly.
         """
         user = await sync_to_async(get_user_model().objects.create_user)(username='testuser', password='password123')
-        communicator = WebsocketCommunicator(Consumer.as_asgi(), "/ws/pong/?mode=local&player_needed=1")
+        communicator = WebsocketCommunicator(Consumer.as_asgi(), "/ws/pong/?mode=local&player_needed=1&host=True&room_id=1")
         communicator.scope['user'] = user
 
         connected, _ = await communicator.connect()
         self.assertTrue(connected)
         response = await communicator.receive_json_from()
         self.assertEqual(response["type"], "game_pad")
-        response = await communicator.receive_json_from()
-        self.assertEqual(response["type"], "game_info")
 
         await communicator.send_json_to({})
         response = await communicator.receive_json_from()
@@ -88,15 +84,13 @@ async def test_websocket_receive_game_ready(self):
         Test if the consumer can send and receive messages, such as 'game_ready'.
         """
         user = await sync_to_async(get_user_model().objects.create_user)(username='testuser', password='password123')
-        communicator = WebsocketCommunicator(Consumer.as_asgi(), "/ws/pong/?mode=local&player_needed=1")
+        communicator = WebsocketCommunicator(Consumer.as_asgi(), "/ws/pong/?mode=local&player_needed=1&host=True&room_id=1")
         communicator.scope['user'] = user
 
         connected, _ = await communicator.connect()
         self.assertTrue(connected)
         response = await communicator.receive_json_from()
         self.assertEqual(response["type"], "game_pad")
-        response = await communicator.receive_json_from()
-        self.assertEqual(response["type"], "game_info")
 
         await communicator.send_json_to({"type": "game_ready", "content": {}})
         response = await communicator.receive_json_from()
diff --git a/django/src/pages/urls.py b/django/src/pages/urls.py
index afca1a70..b6ce2471 100644
--- a/django/src/pages/urls.py
+++ b/django/src/pages/urls.py
@@ -4,6 +4,9 @@
 urlpatterns = [
 	path('index/', views.index),
 	path('pong/', views.pong),
+	path('pong/local/', views.pong_local),
+    path('pong/online/', views.pong_online),
+    path('pong/online/<uuid:id>/', views.pong_online),
 	path('login/', views.login),
 	path('register/', views.register),
 	path('authorize/', views.authorize),
diff --git a/django/src/pages/views.py b/django/src/pages/views.py
index 2e085598..8d42820d 100644
--- a/django/src/pages/views.py
+++ b/django/src/pages/views.py
@@ -1,3 +1,4 @@
+from uuid import uuid4
 from django.views.decorators.http import require_GET
 from django.http import JsonResponse, HttpRequest
 from django.template.loader import get_template
@@ -27,6 +28,34 @@ def index(request):
 def pong(request):
 	return create_response(request, 'pong.html', title="Pong", need_authentication=True)
 
+@require_GET
+def pong_local(request):
+	return create_response(
+		request=request,
+		template_name='pong_game.html',
+		title="Local Pong",
+		context={
+			"mode": "local",
+			"room_id": str(uuid4()),
+			"host": True,
+		},
+		need_authentication=True,
+	)
+
+@require_GET
+def pong_online(request, id=None):
+	return create_response(
+		request=request,
+		template_name='pong_game.html',
+		title="Local Pong",
+		context={
+			"mode": "online",
+			"room_id": str(uuid4()) if id == None else id,
+			"host": True if id == None else False,
+		},
+		need_authentication=True,
+	)
+
 @require_GET
 def login(request: HttpRequest):
 	if (request.user.is_authenticated):