diff --git a/srcs/requirements/svelte/api_front/src/pages/game/Game.Luke.svelte b/srcs/requirements/svelte/api_front/src/pages/game/Game.Luke.svelte
deleted file mode 100644
index dd096e4c..00000000
--- a/srcs/requirements/svelte/api_front/src/pages/game/Game.Luke.svelte
+++ /dev/null
@@ -1,186 +0,0 @@
-
-<script lang="ts">
-	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'
-
-	let optionsAreNotSet = true
-
-	let sound = "on"; // possible de faire un boolean avec svelte et radio buttons ?
-	let multi_balls = false;
-	let moving_walls = false;
-	let matchOptions : enumeration.MatchOptions = enumeration.MatchOptions.noOption;
-
-	const init = async() => {
-		// WIP nest, fetch token generation
-		// const address = "http://transcendance:8080";
-		// const responsePromise = fetch(address + "/token");
-
-		if (sound === "off") {
-			initAudio(true);
-		}
-		else if (sound === "on") {
-			initAudio(false);
-		}
-		console.log(sound); //debug
-
-		if (multi_balls === true) {
-			matchOptions |= enumeration.MatchOptions.multiBalls;
-		}
-		if (moving_walls === true) {
-			matchOptions |= enumeration.MatchOptions.movingWalls;
-		}
-		initMatchOptions(matchOptions);
-		optionsAreNotSet = false;
-
-		initPong(new GameArea());
-		initGc(new GameComponentsClient(matchOptions, pong.ctx));
-		initStartFunction(start);
-
-		// const response = await responsePromise;
-		// if (!response.ok) {
-		// 	console.log("Token retrieve failed"); // TODO: error message
-		// 	return;
-		// }
-		// const responseJson = await response.json();
-		initWebSocket(matchOptions, "yolo", "usernamePLACEHOLDER");
-		// ou est stocké le username dans le front svelte ?
-	}
-
-	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();
-		}, resume);
-	}
-
-	function resume(): 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.handleInputInterval = window.setInterval(sendLoop, c.sendLoopIntervalMS);
-		pong.gameLoopInterval = window.setInterval(gameLoop, constants.gameLoopIntervalMS);
-		pong.drawLoopInterval = window.setInterval(drawLoop, constants.drawLoopIntervalMS);
-	}
-</script>
-
-<head>
-	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-</head>
-
-<body>
-{#if optionsAreNotSet}
-	<form on:submit|preventDefault={init}>
-		<div id="div_game_options">
-			<fieldset>
-				<legend>game options</legend>
-				<div>
-					<input type="checkbox" id="multi_balls" name="multi_balls">
-					<label for="multi_balls">multiples balls</label>
-				</div>
-				<div>
-					<input type="checkbox" id="moving_walls" name="moving_walls">
-					<label for="moving_walls">moving walls</label>
-				</div>
-				<div>
-					<!-- svelte-ignore a11y-label-has-associated-control -->
-					<label>sound :</label>
-					<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>
-					<button id="play_pong_button">PLAY</button>
-				</div>
-			</fieldset>
-		</div>
-	</form>
-	<div id="div_game_instructions">
-		<h2>--- keys ---</h2>
-		<p>move up: 'w' or 'up arrow'</p>
-		<p>move down: 's' OR 'down arrow'</p>
-		<p>grid on/off: 'g'</p>
-	</div>
-{/if}
-
-	<div id="canvas_container">
-		<!-- <p> =) </p> -->
-	</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;
-}
-body {
-	margin: 0;
-	background-color: #222425;
-}
-#canvas_container {
-	margin-top: 20px;
-	text-align: center;
-	/* border: dashed rgb(245, 245, 245) 5px; */
-	/* max-height: 80vh; */
-	/* overflow: hidden; */
-}
-#div_game_instructions {
-	text-align: center;
-	font-family: "Bit5x3";
-	color: rgb(245, 245, 245);
-	font-size: large;
-}
-#div_game_options {
-	margin-top: 20px;
-	text-align: center;
-	font-family: "Bit5x3";
-	color: rgb(245, 245, 245);
-	font-size: x-large;
-}
-#div_game_options fieldset {
-	max-width: 50vw;
-	width: auto;
-	margin: 0 auto;
-}
-#div_game_options fieldset div {
-	padding: 10px;
-}
-#play_pong_button {
-	font-family: "Bit5x3";
-	color: rgb(245, 245, 245);
-	background-color: #333333;
-	font-size: x-large;
-	padding: 10px;
-}
-canvas {
-	background-color: #333333;
-	max-width: 75vw;
-	/* max-height: 100vh; */
-	width: 80%;
-}
-
-</style>
diff --git a/srcs/requirements/svelte/api_front/src/pages/game/Ranking.svelte b/srcs/requirements/svelte/api_front/src/pages/game/Ranking.svelte
new file mode 100644
index 00000000..b45a42ac
--- /dev/null
+++ b/srcs/requirements/svelte/api_front/src/pages/game/Ranking.svelte
@@ -0,0 +1,368 @@
+
+<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'
+
+
+
+	//user's stuff
+	let user;
+	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 = "";
+
+	onMount( async() => {
+		user = await fetch('http://transcendance:8080/api/v2/user')
+		.then( x => x.json() );
+		allUsers = await fetch('http://transcendance:8080/api/v2/user/all')
+		.then( x => x.json() );
+	})
+
+	onDestroy( async() => {
+
+	})
+
+	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)
+	}
+
+</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>
+	{/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>
+							{/if}
+							<div>
+								<button id="pong_button" >PLAY</button>
+							</div>
+						</fieldset>
+				</div>
+
+			</form>
+		</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>
+
+</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;
+	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>
