diff --git a/srcs/requirements/nestjs/api_back/src/auth/42/authentication.module.ts b/srcs/requirements/nestjs/api_back/src/auth/42/authentication.module.ts
index ed3df23a..d7982f81 100644
--- a/srcs/requirements/nestjs/api_back/src/auth/42/authentication.module.ts
+++ b/srcs/requirements/nestjs/api_back/src/auth/42/authentication.module.ts
@@ -12,18 +12,9 @@ import { SessionSerializer } from './utils/serializer';
 
 @Module({
 	  imports: [TypeOrmModule.forFeature([User, Friendship]), UsersModule,
-	//   JwtModule.registerAsync({
-	// 	useFactory: async (configService: ConfigService) => {
-	// 		return {
-	// 		  signOptions: { expiresIn: '1h' },
-	// 		  secret: process.env.JWT_SECRET,
-	// 		};
-	// 	}
-	// })
 	],
 	  providers: [AuthenticationService, FortyTwoStrategy, UsersService, SessionSerializer, FriendshipService
-	// JwtStrategy
-],
+	],
 	  exports: [AuthenticationService],
 	  controllers: [AuthenticationController],
 })
diff --git a/srcs/requirements/nestjs/api_back/src/users/entities/user.entity.ts b/srcs/requirements/nestjs/api_back/src/users/entities/user.entity.ts
index 9b2bc897..c25401cf 100644
--- a/srcs/requirements/nestjs/api_back/src/users/entities/user.entity.ts
+++ b/srcs/requirements/nestjs/api_back/src/users/entities/user.entity.ts
@@ -15,7 +15,7 @@ export class User {
 	@Column({unique: true})
 	fortyTwoId: string;
 
-	@Column()
+	@Column({unique: true})
 	username: string;
 
 	@Column()
diff --git a/srcs/requirements/nestjs/api_back/src/users/users.controller.ts b/srcs/requirements/nestjs/api_back/src/users/users.controller.ts
index 1a07db8e..0db08095 100644
--- a/srcs/requirements/nestjs/api_back/src/users/users.controller.ts
+++ b/srcs/requirements/nestjs/api_back/src/users/users.controller.ts
@@ -58,7 +58,7 @@ export class UsersController {
 	@Patch()
 	async update(@Req() req, @Body(new ValidationPipe()) usersUpdateDto: UpdateUsersDto, @Res() response : Response) {
 		console.log('user.controller updating user info')
-		const user = await this.usersService.update(req.user.id, usersUpdateDto);
+		const user = await this.usersService.update(req.user.id, usersUpdateDto, req.user.username);
 		if (user.isEnabledTwoFactorAuth === false && user.isTwoFactorAuthenticated === true)
 			this.usersService.setIsTwoFactorAuthenticatedWhenLogout(user.id);
 		if (user.isEnabledTwoFactorAuth === true && user.isTwoFactorAuthenticated === false)
diff --git a/srcs/requirements/nestjs/api_back/src/users/users.service.ts b/srcs/requirements/nestjs/api_back/src/users/users.service.ts
index c698bed8..680075da 100644
--- a/srcs/requirements/nestjs/api_back/src/users/users.service.ts
+++ b/srcs/requirements/nestjs/api_back/src/users/users.service.ts
@@ -55,12 +55,9 @@ export class UsersService {
 	}
 
 	async isUsernameExists(usernameToSearch: string): Promise<boolean> {
-		// console.log('searching for username: ' + usernameToSearch)
-
-		const user = await this.userRepository.findOneBy({username : usernameToSearch});
-
-		// console.log({...user})
-
+		const user = await this.userRepository.createQueryBuilder('user')
+		.where('LOWER(user.username) = LOWER(:username)', {username : usernameToSearch})
+		.getOne()
 		if (!user)
 			return false;
 		return true;
@@ -101,10 +98,9 @@ export class UsersService {
 		return this.userRepository.save(user);
 	}
 
-	async update(id: number, updateUserDto: UpdateUsersDto) {
-		// console.log(`Update user ${id} with ${updateUserDto.isEnabledTwoFactorAuth}`);
-		// console.log({...updateUserDto})
-		if (await this.isUsernameExists(updateUserDto.username) === true) {
+	async update(id: number, updateUserDto: UpdateUsersDto, username : string) {
+		console.log("Maj user username : " + username + " updateuser dto " + updateUserDto.username  )
+		if (await this.isUsernameExists(updateUserDto.username) === true && updateUserDto.username !== username) {
 			// console.log('updating username ' + updateUserDto.username + ' but it already is in use')
 			throw new HttpException(`The username is already in use.`,HttpStatus.CONFLICT);
 		}
diff --git a/srcs/requirements/svelte/api_front/public/fonts/PressStart2P.woff b/srcs/requirements/svelte/api_front/public/fonts/PressStart2P.woff
new file mode 100644
index 00000000..281bd651
Binary files /dev/null and b/srcs/requirements/svelte/api_front/public/fonts/PressStart2P.woff differ
diff --git a/srcs/requirements/svelte/api_front/public/fonts/PressStart2P.woff2 b/srcs/requirements/svelte/api_front/public/fonts/PressStart2P.woff2
new file mode 100644
index 00000000..44b75566
Binary files /dev/null and b/srcs/requirements/svelte/api_front/public/fonts/PressStart2P.woff2 differ
diff --git a/srcs/requirements/svelte/api_front/public/global.css b/srcs/requirements/svelte/api_front/public/global.css
index 151d0d36..4a77fd07 100644
--- a/srcs/requirements/svelte/api_front/public/global.css
+++ b/srcs/requirements/svelte/api_front/public/global.css
@@ -16,11 +16,11 @@ body {
 }
 
 @font-face {
-	font-family: "Bit5x3";
+	font-family: "PressStart2P";
 	src:
-		url("./fonts/Bit5x3.woff2") format("woff2"),
-		local("Bit5x3"),
-		url("./fonts/Bit5x3.woff") format("woff");
+		url("./fonts/PressStart2P.woff2") format("woff2"),
+		local("PressStart2P"),
+		url("./fonts/PressStart2P.woff") format("woff");
 	font-weight: normal;
 	font-style: normal;
 	font-display: swap;
@@ -42,8 +42,8 @@ a:visited {
 
 .background-pages {
 	background-color: #333;
-	font-family: "Bit5x3";
-	font-size: 2vw;
+	font-family: "PressStart2P";
+	font-size: 1vw;
 	color: white;
 }
 
diff --git a/srcs/requirements/svelte/api_front/src/pages/SplashPage.svelte b/srcs/requirements/svelte/api_front/src/pages/SplashPage.svelte
index c57a677c..1f409dbd 100644
--- a/srcs/requirements/svelte/api_front/src/pages/SplashPage.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/SplashPage.svelte
@@ -77,8 +77,8 @@
   border-color: #071013;
   border-width: 2px;
   color: white;
-  font-family: "Bit5x3";
-  font-size: x-large;
+  font-family: "PressStart2P";
+  font-size: 1vw;
 	padding: 10px;
 }
 
@@ -87,8 +87,8 @@
   border-color: #071013;
   border-width: 2px;
   color: white;
-  font-family: "Bit5x3";
-  font-size: x-large;
+  font-family: "PressStart2P";
+  font-size: 1vw;
 	padding: 10px;
 }
 
diff --git a/srcs/requirements/svelte/api_front/src/pages/TwoFactorAuthentication.svelte b/srcs/requirements/svelte/api_front/src/pages/TwoFactorAuthentication.svelte
index cbf4d74c..428f589c 100644
--- a/srcs/requirements/svelte/api_front/src/pages/TwoFactorAuthentication.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/TwoFactorAuthentication.svelte
@@ -103,7 +103,7 @@
 
   .error {
     font-weight: bold;
-    font-size: 0.8em;
+    font-size: 1vw;
     color: red;
   }
 </style>
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 1b28fd70..ccb4242a 100644
--- a/srcs/requirements/svelte/api_front/src/pages/game/Game.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/game/Game.svelte
@@ -393,7 +393,16 @@
 </div> <!-- div "game_page" -->
 
 <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;
+}
 .dim_background {
 	background-color: #222;
 }
@@ -423,15 +432,16 @@ canvas {
 	/* background-color: #ff0000; */
 	background-color: #333;
 	max-width: 75vw;
+	font-family: "Bit5x3";
 	/* max-height: 100vh; */
 	width: 80%;
 }
 
 .div_game {
 	text-align: center;
-	font-family: "Bit5x3";
+	font-family: "PressStart2P";
 	color: rgb(245, 245, 245);
-	font-size: x-large;
+	font-size: 1vw;
 }
 .div_game fieldset {
 	max-width: 50vw;
@@ -442,10 +452,10 @@ canvas {
 	padding: 10px;
 }
 .pong_button {
-	font-family: "Bit5x3";
+	font-family: "PressStart2P";
 	color: rgb(245, 245, 245);
 	background-color: #333333;
-	font-size: x-large;
+	font-size: 1vw;
 	padding: 10px;
 }
 .avatar {
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 337cb4a4..b4a6dee9 100644
--- a/srcs/requirements/svelte/api_front/src/pages/game/GameSpectator.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/game/GameSpectator.svelte
@@ -179,6 +179,16 @@
 
 <!--  -->
 <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;
+}
 
 .dim_background {
 	background-color: #222;
@@ -203,15 +213,16 @@ canvas {
 	/* background-color: #ff0000; */
 	background-color: #333333;
 	max-width: 75vw;
+	font-family: "Bit5x3";
 	/* max-height: 100vh; */
 	width: 80%;
 }
 
 .div_game {
 	text-align: center;
-	font-family: "Bit5x3";
+	font-family: "PressStart2P";
 	color: rgb(245, 245, 245);
-	font-size: x-large;
+	font-size: 1vw;
 }
 .div_game fieldset {
 	max-width: 50vw;
@@ -222,15 +233,15 @@ canvas {
 	padding: 10px;
 }
 .pong_button {
-	font-family: "Bit5x3";
+	font-family: "PressStart2P";
 	color: rgb(245, 245, 245);
 	background-color: #333333;
-	font-size: x-large;
+	font-size: 1vw;
 	padding: 10px;
 }
 #match_list {
 	font-family: 'Courier New', Courier, monospace;
-	font-size: large;
+	font-size: 1vw;
 }
 .avatar {
     min-height: 100px;
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 033da320..2aec424f 100644
--- a/srcs/requirements/svelte/api_front/src/pages/game/Ranking.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/game/Ranking.svelte
@@ -79,7 +79,7 @@
 	.stats-table {
 		margin-left: auto;
 		margin-right: auto;
-		font-size: 0.9em;
+		font-size: 1vw;
 		min-width: 400px;
 	}
 
@@ -91,6 +91,9 @@
 	.stats-table th,
 	.stats-table td {
 		padding: 12px 15px;
+		size: 10vw;
+		max-width: 10vw;
+		overflow-wrap: break-word;
 	}
 
 	.stats-table tbody tr {
diff --git a/srcs/requirements/svelte/api_front/src/pages/profile/ProfileSettings.svelte b/srcs/requirements/svelte/api_front/src/pages/profile/ProfileSettings.svelte
index e5822e3d..95cc047b 100644
--- a/srcs/requirements/svelte/api_front/src/pages/profile/ProfileSettings.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/profile/ProfileSettings.svelte
@@ -32,20 +32,10 @@
 
 	const settingsHandler = async() =>
 	{
-		// TODO Luke <--> Eric : Explications
-		// I don't really care which i use at this point...
-		// if (set.username === nameTmp) {
-		if ((set.username.trim() === '') && set.tfa === user.isEnabledTwoFactorAuth) {
-			errors.username = 'Invalid new username';
-			return;
-		}
-		else if ((set.username.trim() === '') && set.tfa !== user.isEnabledTwoFactorAuth) {
+		if ((set.username.trim() === '')) {
 			set.username = user.username
 		}
-		else {
-			errors.username = '';
-		}
-
+		errors.username = ''
 		await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`,
 			{
 				method: 'PATCH',
@@ -60,6 +50,7 @@
 		)
 		.then((response) => {
 			if (!response.ok) {
+				success.username = ''
 				errors.username = "Something went wrong";
 				if (response.status === 409) {
 					errors.username = `${set.username} is already in use, pick a different one.`;
@@ -68,6 +59,7 @@
 			}
 			else {
 				if (response.status === 200) {
+					errors.username = ''
 					success.username = "Your changes have been saved";
 				}
 				else if (response.status === 201) {
@@ -210,13 +202,13 @@
 
 
   .error{
-    font-size: 0.8em;
+    font-size: 1vw;
     font-weight: bold;
     color: red;
   }
 
   .success{
-	font-size: 0.8em;
+	font-size: 1vw;
     font-weight: bold;
     color: green;
   }
diff --git a/srcs/requirements/svelte/api_front/src/pages/profile/ProfileUsers.svelte b/srcs/requirements/svelte/api_front/src/pages/profile/ProfileUsers.svelte
index f5a215fb..0f25495b 100644
--- a/srcs/requirements/svelte/api_front/src/pages/profile/ProfileUsers.svelte
+++ b/srcs/requirements/svelte/api_front/src/pages/profile/ProfileUsers.svelte
@@ -430,7 +430,7 @@
 
   div.top-grid{
     display: grid;
-    grid-template-columns: repeat(12, 1fr);
+    grid-template-columns: repeat(8, 1fr);
     /* max-height: calc(100vh - 30vh); */
     height: 85vh;
     /* margin: 0; */
@@ -440,12 +440,15 @@
     grid-column: 1 / span 2;
     background: #FB8B24;
     padding: 1vw;
+    font-size: smaller;
     max-width: 100%;
     max-height: 100%;
     box-sizing: border-box;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     border-right: 4px solid #071013;
+    border-bottom: 4px solid #071013;
+    overflow-wrap: break-word;
   }
 
   div.sidebar-item{
diff --git a/srcs/requirements/svelte/api_front/src/pieces/GenerateUserDisplay.svelte b/srcs/requirements/svelte/api_front/src/pieces/GenerateUserDisplay.svelte
index 46606ced..691fa01a 100644
--- a/srcs/requirements/svelte/api_front/src/pieces/GenerateUserDisplay.svelte
+++ b/srcs/requirements/svelte/api_front/src/pieces/GenerateUserDisplay.svelte
@@ -153,7 +153,7 @@
   }
 
   .error{
-    font-size: 0.8em;
+    font-size: 1vw;
     font-weight: bold;
     color: red;
   }
diff --git a/srcs/requirements/svelte/api_front/src/pieces/Header.svelte b/srcs/requirements/svelte/api_front/src/pieces/Header.svelte
index 91fe75bf..7949e05f 100644
--- a/srcs/requirements/svelte/api_front/src/pieces/Header.svelte
+++ b/srcs/requirements/svelte/api_front/src/pieces/Header.svelte
@@ -54,9 +54,9 @@
     background-color: #444;
     border-color: #071013;
     color: white;
-    font-family: "Bit5x3";
+    font-family: "PressStart2P";
     border-width: 2px;
-    font-size: 2vw;
+    font-size: 1vw;
   }
 
 
@@ -64,9 +64,9 @@
     background-color: #008c8c;
     border-color: #071013;
     color: white;
-    font-family: "Bit5x3";
+    font-family: "PressStart2P";
     border-width: 2px;
-    font-size: 2vw;
+    font-size: 1vw;
   }
 
   .header {