diff --git a/srcs/requirements/nestjs/api_back/src/game/game.controller.ts b/srcs/requirements/nestjs/api_back/src/game/game.controller.ts
index bd7636e3..04e04e86 100644
--- a/srcs/requirements/nestjs/api_back/src/game/game.controller.ts
+++ b/srcs/requirements/nestjs/api_back/src/game/game.controller.ts
@@ -26,8 +26,9 @@ export class GameController {
 	@UseGuards(TwoFactorGuard)
 	async getMatchHistory(@Req() req, @Query('username') username: string, @Res() res)
 	{
-		console.log("DANS MATCH HISTORY")
-		console.log("usrrnmae" + username)
+		if (!username) {
+			username = req.user.username;
+		}
 		return this.gameService.getMatchHistory(username, res);
 	}
 
diff --git a/srcs/requirements/nestjs/api_back/src/game/game.service.ts b/srcs/requirements/nestjs/api_back/src/game/game.service.ts
index 0ef558a1..d90501cb 100644
--- a/srcs/requirements/nestjs/api_back/src/game/game.service.ts
+++ b/srcs/requirements/nestjs/api_back/src/game/game.service.ts
@@ -62,12 +62,9 @@ export class GameService {
 		.where('history.playerOne.id = :userOne', {userOne : user.id})
 		.orWhere('history.playerTwo.id = :userTwo', {userTwo: user.id})
 		.getMany()
-		console.log("gZZZZZZZZZZZZamehistory")
-		console.log(...gameHistory)
 		let sendableHistory : SendableMatchHistory[] = []
 		for (const history of gameHistory)
 		{
-			console.log(history.playerOne.username + 'ssssssssss')
 			sendableHistory.push(new SendableMatchHistory(history))
 		}
 		console.log("sendable history")
diff --git a/srcs/requirements/nestjs/api_back/src/users/class/matchHistory.class.ts b/srcs/requirements/nestjs/api_back/src/users/class/matchHistory.class.ts
index 90cafc65..0313543f 100644
--- a/srcs/requirements/nestjs/api_back/src/users/class/matchHistory.class.ts
+++ b/srcs/requirements/nestjs/api_back/src/users/class/matchHistory.class.ts
@@ -16,6 +16,6 @@ export class SendableMatchHistory {
 		this.playerOneUsername = matchHistory.playerOne.username;
 		this.playerTwoUsername = matchHistory.playerTwo.username;
 		this.playerOneResult = matchHistory.playerOneResult;
-    this.playerTwoResult = matchHistory.playerTwoResult;
+		this.playerTwoResult = matchHistory.playerTwoResult;
 	};
 }
\ No newline at end of file
diff --git a/srcs/requirements/svelte/api_front/src/pages/game/Game.svelte b/srcs/requirements/svelte/api_front/src/pages/game/Game.svelte
index 97eac451..169d4f6b 100644
--- a/srcs/requirements/svelte/api_front/src/pages/game/Game.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/game/Game.svelte
@@ -305,11 +305,11 @@
 
 		{#if gameState.matchStarted && !gameState.matchEnded}
 			<div class="div_game">
-				<button class="pong_button" on:click={leaveMatch}>forfeit</button>
+				<button class="pong_button margin_top" on:click={leaveMatch}>forfeit</button>
 			</div>
 		{:else if !gameState.matchStarted}
 			<div class="div_game">
-				<button class="pong_button" on:click={leaveMatch}>leave matchmaking</button>
+				<button class="pong_button margin_top" on:click={leaveMatch}>leave matchmaking</button>
 			</div>
 		{/if}
 	{/if}
@@ -470,6 +470,11 @@ canvas {
 }
 .avatar {
 	height: 5vw;
-	width: 5vw;
+    width: 5vw;
+	margin-top: 2vw;
+	margin-bottom: -2vw;
+}
+button.margin_top {
+	margin-top: 1vw;
 }
 </style>
diff --git a/srcs/requirements/svelte/api_front/src/pages/game/GameSpectator.svelte b/srcs/requirements/svelte/api_front/src/pages/game/GameSpectator.svelte
index 157f7cf5..7919080c 100644
--- a/srcs/requirements/svelte/api_front/src/pages/game/GameSpectator.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/game/GameSpectator.svelte
@@ -144,7 +144,7 @@
 
 		{#if !gameState.matchEnded}
 			<div class="div_game">
-				<button class="pong_button" on:click={leaveMatch}>leave</button>
+				<button class="pong_button margin_top" on:click={leaveMatch}>leave</button>
 			</div>
 		{/if}
 	{/if}
@@ -171,11 +171,12 @@
 
 			</fieldset>
 			{#if matchList.length !== 0}
-				<menu id="match_list">
+				<!-- <menu id="match_list"> -->
 					{#each matchList as match}
 						<MatchOngoingElem match={match} on:click={(e) => initGameSpectator(match)} />
+						<br>
 					{/each}
-				</menu>
+				<!-- </menu> -->
 			{:else}
 				<p>no match ongoing</p>
 			{/if}
@@ -263,12 +264,16 @@ canvas {
 	font-size: 1vw;
 	padding: 10px;
 }
-#match_list {
-	font-family: 'Courier New', Courier, monospace;
-	font-size: 1vw;
-}
+/* #match_list {
+	text-align: center;
+} */
 .avatar {
 	height: 5vw;
 	width: 5vw;
+	margin-top: 2vw;
+	margin-bottom: -2vw;
+}
+button.margin_top {
+	margin-top: 1vw;
 }
 </style>
diff --git a/srcs/requirements/svelte/api_front/src/pages/profile/ProfileDisplay.svelte b/srcs/requirements/svelte/api_front/src/pages/profile/ProfileDisplay.svelte
index d73a8a65..b0abc5a2 100644
--- a/srcs/requirements/svelte/api_front/src/pages/profile/ProfileDisplay.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/profile/ProfileDisplay.svelte
@@ -38,7 +38,13 @@
 	}
 
 	#setting_button {
-		margin-top: 25px;
+		margin-top: 1vw;
+		font-family: "PressStart2P";
+		background-color: #618174;
+		border-color: #071013;
+		color: white;
+		border-width: 2px;
+		font-size: 1vw;
 	}
 
 </style>
diff --git a/srcs/requirements/svelte/api_front/src/pieces/GenerateUserDisplay.svelte b/srcs/requirements/svelte/api_front/src/pieces/GenerateUserDisplay.svelte
index 621a21a9..499ef7e0 100644
--- a/srcs/requirements/svelte/api_front/src/pieces/GenerateUserDisplay.svelte
+++ b/srcs/requirements/svelte/api_front/src/pieces/GenerateUserDisplay.svelte
@@ -90,18 +90,23 @@
   div.outer{
     max-width: 960px;
     margin: 40px auto;
+    margin-top: 1vw;
   }
 
 /* The main part */
   main{
     max-width: 960px;
     margin: 40px auto;
+    margin-top: 1vw;
     text-align: center;
   }
 
   .avatar{
     width: 15vw;
     height: 15vw;
+	max-width: 130px;
+	max-height: 130px;
+	margin-bottom: 1vw;
   }
 
 /* The variable rich section */
diff --git a/srcs/requirements/svelte/api_front/src/pieces/MatchHistory.svelte b/srcs/requirements/svelte/api_front/src/pieces/MatchHistory.svelte
index e157c0da..3c165cd2 100644
--- a/srcs/requirements/svelte/api_front/src/pieces/MatchHistory.svelte
+++ b/srcs/requirements/svelte/api_front/src/pieces/MatchHistory.svelte
@@ -5,9 +5,9 @@
 	import type { MatchHistory } from "./Match";
 
 	export let user;
-	let matchList = [];
+	let matchList: MatchHistory[] = [];
+
 	onMount( async() => {
-		console.log(user.username + 'jjjjjjjjjjjjj')
 		matchList = await fetchMatchList(user.username);
 		console.log(matchList);
 		// matchList = await mockMatchList(user.username);
@@ -16,7 +16,6 @@
 	async function fetchMatchList(username: string)
 	{
 		let url = `http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/game/match/history?username=${username}`;
-		console.log(url + 'ffffffff')
 		return fetch(url)
 			.then((response) => {
 				if (!response.ok) {
@@ -96,7 +95,7 @@
 					<td>{match.playerTwoResult}</td>
 					{#await fetchAvatar(match.playerTwoUsername) then avatar}
 						<td>
-							<img class="avatar" src="{avatar}" alt="avatarOne">
+							<img class="avatar" src="{avatar}" alt="avatarTwo">
 							<br>
 							{match.playerTwoUsername}
 						</td>
diff --git a/srcs/requirements/svelte/api_front/src/pieces/MatchOngoingElem.svelte b/srcs/requirements/svelte/api_front/src/pieces/MatchOngoingElem.svelte
index 736d0d0b..2cc45537 100644
--- a/srcs/requirements/svelte/api_front/src/pieces/MatchOngoingElem.svelte
+++ b/srcs/requirements/svelte/api_front/src/pieces/MatchOngoingElem.svelte
@@ -2,6 +2,7 @@
 <script lang="ts">
 	import { onMount, onDestroy } from "svelte";
 	import { MatchOngoing, MatchOptions} from "./Match";
+	import { fetchAvatar } from "./utils.js";
 
 	export let match: MatchOngoing;
 
@@ -25,14 +26,31 @@
 </script>
 <!--  -->
 
-<li>
-	<button on:click>
-		'{match.playerOneUsername}' VS '{match.playerTwoUsername}'
-		<br/> [{matchOptionsString}]
-	</button>
-</li>
-
+	<div>
+		{#await fetchAvatar(match.playerOneUsername) then avatar}
+			<img class="avatar" src="{avatar}" alt="avatarOne">
+		{/await}
+		<button on:click class="match_elem">
+			'{match.playerOneUsername}' VS '{match.playerTwoUsername}'
+			<br/>
+			[{matchOptionsString}]
+		</button>
+		{#await fetchAvatar(match.playerTwoUsername) then avatar}
+			<img class="avatar" src="{avatar}" alt="avatarTwo">
+		{/await}
+	</div>
 
 <!--  -->
 <style>
+
+	.avatar {
+		width: 3vw;
+		height: 3vw;
+		margin-bottom: -1vw;
+	}
+
+	.match_elem {
+		margin: 1vw;
+	}
+
 </style>