diff --git a/srcs/requirements/svelte/api_front/src/pages/game/Ranking.svelte b/srcs/requirements/svelte/api_front/src/pages/game/Ranking.svelte
index bdab60cb..600ba693 100644
--- a/srcs/requirements/svelte/api_front/src/pages/game/Ranking.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/game/Ranking.svelte
@@ -1,368 +1,74 @@
 
 <script lang="ts">
 	import { onMount, onDestroy } from "svelte";
-	import * as enumeration from './shared_js/enums'
-	import * as constants from './client/constants'
-	import { initPong, initGc, initMatchOptions, initStartFunction } from './client/global'
-	import { GameArea } from './client/class/GameArea';
-	import { GameComponentsClient } from './client/class/GameComponentsClient';
-	import { handleInput } from './client/handleInput';
-	import { gameLoop } from './client/gameLoop'
-	import { drawLoop } from './client/draw';
-	import { countdown } from './client/utils'
-	import { initWebSocket } from './client/ws';
-	import { initAudio } from './client/audio';
-	import { pong, gc} from './client/global'
-	import Header from '../../pieces/Header.svelte';
-	import { fade, fly } from 'svelte/transition'
-
-
+    import Header from "../../pieces/Header.svelte";
 
 	//user's stuff
-	let user;
+	let currentUser;
 	let allUsers;
-
-	//Game's stuff nest side
-	let optionsAreNotSet = true;
-	let isSomeoneIsIvited = false;
-	let playerTwoUsername = "";
-
-	//Game's stuff gameserver side
-	let sound = "on";
-	let multi_balls = false;
-	let moving_walls = false;
-	let matchOption : enumeration.MatchOptions = enumeration.MatchOptions.noOption;
-
-	//html boolean for pages
-	let showWaitPage = false;
-	let showInvitations = false;
-	let showGameOption = true;
-	let showError = false;
-
-	let isThereAnyInvitation = false;
-	let invitations = [];
-
-
-	let waitingMessage = "Please wait..."
-	let errorMessageWhenAttemptingToGetATicket = "";
-
+	let idInterval;
 	onMount( async() => {
-		user = await fetch('http://transcendance:8080/api/v2/user')
+		currentUser = await fetch('http://transcendance:8080/api/v2/user')
 		.then( x => x.json() );
-		allUsers = await fetch('http://transcendance:8080/api/v2/user/all')
+		allUsers = await fetch('http://transcendance:8080/api/v2/game/ranking')
 		.then( x => x.json() );
+		idInterval = setInterval(fetchScores, 10000);
 	})
 
 	onDestroy( async() => {
-
+		clearInterval(idInterval);
 	})
 
-	const initGame = async() => {
-		optionsAreNotSet = false
-		showWaitPage = true
-		if (multi_balls === true)
-			matchOption |= enumeration.MatchOptions.multiBalls
-		if (moving_walls === true )
-			matchOption |= enumeration.MatchOptions.movingWalls
-
-		const responseWhenGrantToken = fetch("http://transcendance:8080/api/v2/game/ticket", {
-			method : "POST",
-			headers : {'Content-Type': 'application/json'},
-			body : JSON.stringify({
-				playerOneUsername : user.username,
-				playerTwoUsername : playerTwoUsername,
-				gameOptions : matchOption,
-				isGameIsWithInvitation : isSomeoneIsIvited
-			})
-		})
-		const responseFromServer = await responseWhenGrantToken;
-		const responseInjson = await responseFromServer.json();
-		const token : string = responseInjson.token;
-		showWaitPage = false
-		if (!responseFromServer.ok)
-		{
-			errorMessageWhenAttemptingToGetATicket = responseInjson.message;
-			showError = true;
-			setTimeout(() => {
-				showError = false;
-				showWaitPage = false
-				optionsAreNotSet = true
-				playerTwoUsername = "";
-				matchOption = 0;
-			}, 5000)
-		}
-		else if (token)
-		{
-			(sound === "off") ? initAudio(true) : initAudio(false);
-			initMatchOptions(matchOption)
-			initPong(new GameArea())
-			initGc(new GameComponentsClient(matchOption, pong.ctx))
-			initStartFunction(start)
-			isSomeoneIsIvited ?
-			initWebSocket(matchOption, token, user.username, true, playerTwoUsername) :
-			initWebSocket(matchOption, token, user.username)
-		}
-	}
-
-	const initGameForPrivateParty = async(invitation : any) => {
-		optionsAreNotSet = false
-		showWaitPage = true
-		console.log("invitation : ")
-		console.log(invitation)
-		if (invitation.token)
-		{
-			initMatchOptions(matchOption)
-			initPong(new GameArea())
-			initGc(new GameComponentsClient(matchOption, pong.ctx))
-			initStartFunction(start)
-			showWaitPage = false
-			initWebSocket(matchOption, invitation.token, invitation.playerOneUsername, true, user.username)
-		}
-	}
-
-
-
-	function start() : void {
-		gc.text1.pos.assign(constants.w*0.5, constants.h*0.75);
-		countdown(constants.matchStartDelay/1000, (count: number) => {
-			gc.text1.clear();
-			gc.text1.text = `${count}`;
-			gc.text1.update();
-		}, responseWhenGrantTokenume);
-	}
-
-	function responseWhenGrantTokenume(): void {
-		gc.text1.text = "";
-		window.addEventListener('keydown', function (e) {
-			pong.addKey(e.key);
-		});
-		window.addEventListener('keyup', function (e) {
-			pong.deleteKey(e.key);
-		});
-		pong.handleInputInterval = window.setInterval(handleInput, constants.handleInputIntervalMS);
-		pong.gameLoopInterval = window.setInterval(gameLoop, constants.gameLoopIntervalMS);
-		pong.drawLoopInterval = window.setInterval(drawLoop, constants.drawLoopIntervalMS);
-	}
-
-	const showOptions = () => {
-		showGameOption = true
-		showInvitations = false
-	}
-
-	const showInvitation = async() => {
-		showGameOption = false;
-		showInvitations = true;
-		invitations = await fetch("http://transcendance:8080/api/v2/game/invitations")
-		.then(x => x.json())
-		invitations.length !== 0 ? isThereAnyInvitation = true : isThereAnyInvitation = false
-	}
-
-	const rejectInvitation = async(invitation) => {
-		await fetch("http://transcendance:8080/api/v2/game/decline",{
-			method: "POST",
-			headers: { 'Content-Type': 'application/json'},
-			body: JSON.stringify({
-				token : invitation.token
-			})
-		})
-		.then(x => x.json())
-		.catch(error => console.log(error))
-		showInvitation()
-	}
-
-	const acceptInvitation = async(invitation : any) => {
-		await fetch("http://transcendance:8080/api/v2/game/accept",{
-			method: "POST",
-			headers: { 'Content-Type': 'application/json'},
-			body: JSON.stringify({
-				token : invitation.token
-			})
-		})
-		.then(x => x.json())
-		.catch(error => {
-			console.log(error)
-
-		})
-		showInvitation()
-		initGameForPrivateParty(invitation)
+	function fetchScores() {
+		fetch('http://transcendance:8080/api/v2/game/ranking')
+		.then( x => x.json() )
+		.then( x => allUsers = x );
 	}
 
 </script>
-
 <Header />
 
-<body>
-	<div id="preload_font">.</div>
-
-	{#if showError === true}
-		<div id="div_game" in:fly="{{ y: 10, duration: 1000 }}">
-			<fieldset>
-				<legend>Error</legend>
-						<p>{errorMessageWhenAttemptingToGetATicket}</p>
-						<button id="pong_button">Retry</button>
-			</fieldset>
+<div class="container">
+	<div class="row">
+		<div class="col-12">
+			<h1>Ranking</h1>
 		</div>
-	{/if}
-
-	{#if showWaitPage === true}
-		<div id="div_game" in:fly="{{ y: 10, duration: 1000 }}">
-			<fieldset>
-				<legend>Connecting to the game...</legend>
-						<p>{waitingMessage}</p>
-			</fieldset>
-		</div>
-	{/if}
-
-
-
-{#if optionsAreNotSet}
-	{#if showGameOption === true}
-		<div id="game_option">
-			<form on:submit|preventDefault={() => initGame()}>
-				<div id="div_game">
-					<button id="pong_button" on:click={showInvitation}>Show invitations</button>
-						<fieldset>
-							<legend>game options</legend>
-							<div>
-								<input type="checkbox" id="multi_balls" name="multi_balls" bind:checked={multi_balls}>
-								<label for="multi_balls">Multiples balls</label>
-							</div>
-							<div>
-								<input type="checkbox" id="moving_walls" name="moving_walls" bind:checked={moving_walls}>
-								<label for="moving_walls">Moving walls</label>
-							</div>
-							<div>
-								<p>sound :</p>
-								<input type="radio" id="sound_on" name="sound_selector" bind:group={sound} value="on">
-								<label for="sound_on">on</label>
-								<input type="radio" id="sound_off" name="sound_selector" bind:group={sound} value="off">
-								<label for="sound_off">off</label>
-							</div>
-							<div>
-								<input type="checkbox" id="isSomeoneIsIvited" bind:checked={isSomeoneIsIvited}>
-								<label for="moving_walls">Invite a friend</label>
-							</div>
-							{#if isSomeoneIsIvited === true}
-								<select bind:value={playerTwoUsername}>
-									{#each allUsers as user }
-										<option value={user.username}>{user.username}</option>
-									{/each}
-								</select>
+	</div>
+	<div class="row">
+		<div class="col-12">
+			<table class="table table-striped">
+				<thead>
+					<tr>
+						<th scope="col">#</th>
+						<th scope="col">Username</th>
+						<th scope="col">Win</th>
+						<th scope="col">Lose</th>
+						<th scope="col">Draw</th>
+						<th scope="col">Games Played</th>
+					</tr>
+				</thead>
+				<tbody>
+					{#each allUsers as user, i}
+						<tr>
+							<th scope="row">{i + 1}</th>
+							{#if user.username === currentUser.username}
+								<td><b>You ({user.username})</b></td>
+							{:else}
+							<td>{user.username}</td>
 							{/if}
-							<div>
-								<button id="pong_button" >PLAY</button>
-							</div>
-						</fieldset>
-				</div>
-
-			</form>
+							<td>{user.stats.winGame}</td>
+							<td>{user.stats.loseGame}</td>
+							<td>{user.stats.drawGame}</td>
+							<td>{user.stats.totalGame}</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
 		</div>
-	{/if}
-
-	{#if showInvitations}
-		<div id="invitations_options" in:fly="{{ y: 10, duration: 1000 }}">
-			<div id="div_game">
-				<button id="pong_button" on:click={showOptions}>Play a Game</button>
-				<fieldset>
-					<legend>Current invitation(s)</legend>
-					{#if isThereAnyInvitation}
-							{#each invitations as invitation }
-								<div>
-									{invitation.playerOneUsername} has invited you to play a pong !
-									<button id="pong_button" on:click={() => acceptInvitation(invitation)}>V</button>
-									<button id="pong_button" on:click={() => rejectInvitation(invitation)}>X</button>
-								</div>
-							{/each}
-					{/if}
-					{#if isThereAnyInvitation === false}
-						<p>Currently, no one asked to play with you.</p>
-							<button id="pong_button" on:click={showInvitation}>Reload</button>
-					{/if}
-				</fieldset>
-			</div>
-		</div>
-	{/if}
-{/if}
-
-
-
-<div id="canvas_container">
-	<!-- <p> =) </p> -->
+	</div>
 </div>
 
-</body>
-
-
 
 <style>
 
-@font-face {
-	font-family: "Bit5x3";
-	src: url("/fonts/Bit5x3.woff2") format("woff2"),local("Bit5x3"), url("/fonts/Bit5x3.woff") format("woff");
-	font-weight: normal;
-	font-style: normal;
-	font-display: swap;
-}
-#preload_font {
-	font-family: "Bit5x3";
-	opacity:0;523LsTrY7n5EwR0s+Om0pdBPFFF5DrShb/x30XuICASgpri15boksH8kWLezj/5syRHPugI0HTGU6/TQgkUx2t7yEWCFGiEDrb/Mv6NKXirVW/W4
-	height:0;
-	width:0;
-	display:inline-block;
-}
-body {
-	margin: 0;
-	background-color: #222425;
-}
-#canvas_container {
-	text-align: center;
-	/* border: dashed rgb(245, 245, 245) 5px; */
-	/* max-height: 80vh; */
-	/* overflow: hidden; */
-}
-
-#users_name {
-	text-align: center;
-	font-family: "Bit5x3";
-	color: rgb(245, 245, 245);
-	font-size: x-large;
-}
-
-#div_game {
-	text-align: center;
-	font-family: "Bit5x3";
-	color: rgb(245, 245, 245);
-	font-size: x-large;
-}
-
-#error_notification {
-	text-align: center;
-	display: block;
-	font-family: "Bit5x3";
-	color: rgb(143, 19, 19);
-	font-size: x-large;
-}
-
-#div_game fieldset {
-	max-width: 50vw;
-	width: auto;
-	margin: 0 auto;
-}
-#div_game fieldset div {
-	padding: 10px;
-}
-#pong_button {
-	font-family: "Bit5x3";
-	color: rgb(245, 245, 245);
-	background-color: #333333;
-	font-size: x-large;
-	padding: 10px;
-}
-canvas {
-	background-color: #ff0000;
-	max-width: 75vw;
-	/* max-height: 100vh; */
-	width: 80%;
-}
-
 </style>
diff --git a/srcs/requirements/svelte/api_front/src/pieces/Header.svelte b/srcs/requirements/svelte/api_front/src/pieces/Header.svelte
index 23b4dbfa..26e483c6 100644
--- a/srcs/requirements/svelte/api_front/src/pieces/Header.svelte
+++ b/srcs/requirements/svelte/api_front/src/pieces/Header.svelte
@@ -26,6 +26,7 @@
   <nav>
 	<button on:click={() => (push('/game'))}>Game</button>
 	<button on:click={() => (push('/matchlist'))}>Match List</button>
+	<button on:click={() => (push('/ranking'))}>Ranking</button>
     {#if $location !== '/profile'}
       <button on:click={() => (push('/profile'))}>My Profile</button>
     {:else if $location === '/profile'}
diff --git a/srcs/requirements/svelte/api_front/src/routes/primaryRoutes.js b/srcs/requirements/svelte/api_front/src/routes/primaryRoutes.js
index 55ff9f47..1987df52 100644
--- a/srcs/requirements/svelte/api_front/src/routes/primaryRoutes.js
+++ b/srcs/requirements/svelte/api_front/src/routes/primaryRoutes.js
@@ -6,6 +6,7 @@ import UnauthorizedAccessPage from '../pages/UnauthorizedAccessPage.svelte';
 import { wrap } from 'svelte-spa-router/wrap'
 import TestPage from '../pages/TmpTestPage.svelte';
 import Game from '../pages/game/Game.svelte';
+import Ranking from '../pages/Ranking.svelte';
 import SpectatorMatchList from '../pages/SpectatorMatchList.svelte';
 
 
@@ -15,26 +16,7 @@ export const primaryRoutes = {
   '/2fa': TwoFactorAuthentication,
   '/game': Game,
   '/matchlist': SpectatorMatchList,
-  '/test': wrap({
-    component: TestPage,
-    conditions: [
-      async(detail) => {
-        // THIS SHIT TOTALLY WORKS
-        // Yea in the end this might be the best thing, like also from a Security point of view
-        const user = await fetch('http://transcendance:8080/api/v2/user')
-        .then((resp) => resp.json())
-
-        console.log('in /test what is in user')
-        console.log(user)
-
-        if (user && user.username)
-          return true;
-        else
-          return false;
-      }
-    ],
-
-  }),
+  '/ranking' : Ranking,
   '/profile': wrap({
     component: ProfilePage,
     conditions: [