diff --git a/back/volume/src/pong/game/Ball.ts b/back/volume/src/pong/game/Ball.ts
index a81aae6..69633b8 100644
--- a/back/volume/src/pong/game/Ball.ts
+++ b/back/volume/src/pong/game/Ball.ts
@@ -1,7 +1,11 @@
 import { type Paddle } from './Paddle'
 import { type Point, Rect } from './utils'
 import { type MapDtoValidated } from '../dtos/MapDtoValidated'
-import { DEFAULT_BALL_SIZE, DEFAULT_BALL_INITIAL_SPEED, GAME_TICKS } from './constants'
+import {
+  DEFAULT_BALL_SIZE,
+  DEFAULT_BALL_INITIAL_SPEED,
+  GAME_TICKS
+} from './constants'
 
 export class Ball {
   rect: Rect
diff --git a/front/volume/src/App.svelte b/front/volume/src/App.svelte
index 3a9fb49..960a2c4 100644
--- a/front/volume/src/App.svelte
+++ b/front/volume/src/App.svelte
@@ -171,109 +171,104 @@
   }
 </script>
 
-  <div>
-    {#if $store === null}
-      <div class="login-div">
-        <h3 class="test">
-          Please log in with 42 api to access the website.
-        </h3>
-        <img class="img-42" src="https://translate.intra.42.fr/assets/42_logo-7dfc9110a5319a308863b96bda33cea995046d1731cebb735e41b16255106c12.svg" alt="logo_42">
-        <button class="login-button" type="button" on:click={login}>Log In</button>
-      </div>
-    {:else if $store.twoFA === true && $store.isVerified === false}
-      <h1><button type="button" on:click={verify}>verify</button></h1>
-    {:else}
-      <Navbar
-        {clickProfile}
-        {clickHistory}
-        {clickFriends}
-        {clickChannels}
-        {clickLeaderboard}
+<div>
+  {#if $store === null}
+    <div class="login-div">
+      <h3 class="test">Please log in with 42 api to access the website.</h3>
+      <img
+        class="img-42"
+        src="https://translate.intra.42.fr/assets/42_logo-7dfc9110a5319a308863b96bda33cea995046d1731cebb735e41b16255106c12.svg"
+        alt="logo_42"
       />
-      {#if appState.includes(APPSTATE.CHANNELS)}
-        {#if appState.replace(APPSTATE.CHANNELS, "") !== ""}
-          <div
-            on:click={() => setAppState(APPSTATE.CHANNELS)}
-            on:keydown={() => setAppState(APPSTATE.CHANNELS)}
-          >
-            <Chat
-              chatMessages={selectedChannel.messages}
-              on:view-profile={openIdProfile}
-              on:add-friend={addFriend}
-              on:invite-to-game={pong.inviteToGame}
-            />
-          </div>
-        {:else}
-          <div on:click={resetAppState} on:keydown={resetAppState}>
-            <Channels {channels} onSelectChannel={handleSelectChannel} />
-          </div>
-        {/if}
-      {/if}
-      {#if appState === APPSTATE.LEADERBOARD}
-        <div on:click={resetAppState} on:keydown={resetAppState}>
-          <Leaderboard {leaderboard} />
-        </div>
-      {/if}
-      {#if appState === APPSTATE.FRIENDS}
+      <button class="login-button" type="button" on:click={login}>Log In</button
+      >
+    </div>
+  {:else if $store.twoFA === true && $store.isVerified === false}
+    <h1><button type="button" on:click={verify}>verify</button></h1>
+  {:else}
+    <Navbar
+      {clickProfile}
+      {clickHistory}
+      {clickFriends}
+      {clickChannels}
+      {clickLeaderboard}
+    />
+    {#if appState.includes(APPSTATE.CHANNELS)}
+      {#if appState.replace(APPSTATE.CHANNELS, "") !== ""}
         <div
-          on:click={() => {
-            resetAppState();
-            clearInterval(friendsInterval);
-          }}
-          on:keydown={() => {
-            resetAppState();
-            clearInterval(friendsInterval);
-          }}
+          on:click={() => setAppState(APPSTATE.CHANNELS)}
+          on:keydown={() => setAppState(APPSTATE.CHANNELS)}
         >
-          <Friends {friends} {invits} />
-        </div>
-      {/if}
-      {#if appState === APPSTATE.HISTORY}
-        <div on:click={resetAppState} on:keydown={resetAppState}>
-          <MatchHistory />
-        </div>
-      {/if}
-      {#if appState === APPSTATE.HISTORY_ID}
-        <div
-          on:click={() => setAppState(APPSTATE.PROFILE)}
-          on:keydown={() => setAppState(APPSTATE.PROFILE)}
-        >
-          <MatchHistory username={userProfile.username} />
-        </div>
-      {/if}
-      {#if appState === APPSTATE.PROFILE}
-        <div on:click={resetAppState} on:keydown={resetAppState}>
-          <Profile
-            user={userProfile}
-            edit={1}
-            on:view-history={openIdHistory}
+          <Chat
+            chatMessages={selectedChannel.messages}
+            on:view-profile={openIdProfile}
+            on:add-friend={addFriend}
+            on:invite-to-game={pong.inviteToGame}
           />
         </div>
-      {/if}
-      {#if appState === APPSTATE.PROFILE_ID}
-        <div
-          on:click={() =>
-            setAppState(APPSTATE.CHANNELS + "#" + selectedChannel.name)}
-          on:keydown={() =>
-            setAppState(APPSTATE.CHANNELS + "#" + selectedChannel.name)}
-        >
-          <Profile
-            user={userProfile}
-            edit={0}
-            on:view-history={openIdHistory}
-          />
+      {:else}
+        <div on:click={resetAppState} on:keydown={resetAppState}>
+          <Channels {channels} onSelectChannel={handleSelectChannel} />
         </div>
       {/if}
+    {/if}
+    {#if appState === APPSTATE.LEADERBOARD}
+      <div on:click={resetAppState} on:keydown={resetAppState}>
+        <Leaderboard {leaderboard} />
+      </div>
+    {/if}
+    {#if appState === APPSTATE.FRIENDS}
+      <div
+        on:click={() => {
+          resetAppState();
+          clearInterval(friendsInterval);
+        }}
+        on:keydown={() => {
+          resetAppState();
+          clearInterval(friendsInterval);
+        }}
+      >
+        <Friends {friends} {invits} />
+      </div>
+    {/if}
+    {#if appState === APPSTATE.HISTORY}
+      <div on:click={resetAppState} on:keydown={resetAppState}>
+        <MatchHistory />
+      </div>
+    {/if}
+    {#if appState === APPSTATE.HISTORY_ID}
+      <div
+        on:click={() => setAppState(APPSTATE.PROFILE)}
+        on:keydown={() => setAppState(APPSTATE.PROFILE)}
+      >
+        <MatchHistory username={userProfile.username} />
+      </div>
+    {/if}
+    {#if appState === APPSTATE.PROFILE}
+      <div on:click={resetAppState} on:keydown={resetAppState}>
+        <Profile user={userProfile} edit={1} on:view-history={openIdHistory} />
+      </div>
+    {/if}
+    {#if appState === APPSTATE.PROFILE_ID}
+      <div
+        on:click={() =>
+          setAppState(APPSTATE.CHANNELS + "#" + selectedChannel.name)}
+        on:keydown={() =>
+          setAppState(APPSTATE.CHANNELS + "#" + selectedChannel.name)}
+      >
+        <Profile user={userProfile} edit={0} on:view-history={openIdHistory} />
+      </div>
+    {/if}
 
-      {#if fakemenu}
-        <FakeLogin bind:username={usernameFake} bind:ftId={ftIdFake} />
-        <button on:click={impersonate}>Impersonate</button>
-        <button on:click={() => (fakemenu = false)}>No impersonate</button>
-      {:else}
-        <Pong bind:this={pong} {appState} {setAppState} {fakeUser} />
-      {/if}
+    {#if fakemenu}
+      <FakeLogin bind:username={usernameFake} bind:ftId={ftIdFake} />
+      <button on:click={impersonate}>Impersonate</button>
+      <button on:click={() => (fakemenu = false)}>No impersonate</button>
+    {:else}
+      <Pong bind:this={pong} {appState} {setAppState} {fakeUser} />
     {/if}
-  </div>
+  {/if}
+</div>
 
 <style>
   .login-div {
diff --git a/front/volume/src/components/Channels.svelte b/front/volume/src/components/Channels.svelte
index 0bed000..1a4d2a0 100644
--- a/front/volume/src/components/Channels.svelte
+++ b/front/volume/src/components/Channels.svelte
@@ -63,7 +63,7 @@
       channels = channels.filter((c) => c.id !== id);
     }
     // TODO: save to database
-  }
+  };
 
   //--------------------------------------------------------------------------------/
 </script>
@@ -77,8 +77,11 @@
           <li>
             <span>{_channels.name}</span>
             <button on:click={() => selectChat(_channels.id)}>Enter</button>
-            <button on:click={() => removeChannel(_channels.id)} on:keydown={() => removeChannel(_channels.id)}>delete</button>
-        {/each}
+            <button
+              on:click={() => removeChannel(_channels.id)}
+              on:keydown={() => removeChannel(_channels.id)}>delete</button
+            >
+          </li>{/each}
       {:else}
         <p>No channels available</p>
       {/if}
diff --git a/front/volume/src/components/Chat.svelte b/front/volume/src/components/Chat.svelte
index b0abbd9..d3bc755 100644
--- a/front/volume/src/components/Chat.svelte
+++ b/front/volume/src/components/Chat.svelte
@@ -9,7 +9,7 @@
   import type { Player } from "./Profile.svelte";
   interface User {
     username: string;
-  } 
+  }
 </script>
 
 <script lang="ts">
@@ -59,16 +59,16 @@
     showChatMembers = !showChatMembers;
   }
   let chatMembers: Array<User> = [
-    { username: "user1"},
-    { username: "user2"},
-    { username: "user3"},
-    { username: "user4"},
-    { username: "user5"},
-    { username: "user6"},
-    { username: "user7"},
-    { username: "user8"},
-    { username: "user9"},
-  ]
+    { username: "user1" },
+    { username: "user2" },
+    { username: "user3" },
+    { username: "user4" },
+    { username: "user5" },
+    { username: "user6" },
+    { username: "user7" },
+    { username: "user8" },
+    { username: "user9" },
+  ];
   // let chatMembers: Array<Player> = [];
   // async function getChatMembers() {
   //   console.log("Getting chat members");
@@ -105,19 +105,29 @@
       >
         <ul>
           <li>
-            <button on:click={() => dispatch("send-message", selectedUser)}>Send Message</button>
+            <button on:click={() => dispatch("send-message", selectedUser)}
+              >Send Message</button
+            >
           </li>
           <li>
-            <button on:click={() => dispatch("view-profile", selectedUser)}>View Profile</button>
+            <button on:click={() => dispatch("view-profile", selectedUser)}
+              >View Profile</button
+            >
           </li>
           <li>
-            <button on:click={() => dispatch("add-friend", selectedUser)}>Add Friend</button>
+            <button on:click={() => dispatch("add-friend", selectedUser)}
+              >Add Friend</button
+            >
           </li>
           <li>
-            <button on:click={() => dispatch("invite-to-game", selectedUser)}>Invite to Game</button>
+            <button on:click={() => dispatch("invite-to-game", selectedUser)}
+              >Invite to Game</button
+            >
           </li>
           <li>
-            <button on:click={() => dispatch("block-user", selectedUser)}>Block User</button>
+            <button on:click={() => dispatch("block-user", selectedUser)}
+              >Block User</button
+            >
           </li>
           <li><button on:click={closeProfileMenu}>Close</button></li>
         </ul>
@@ -129,9 +139,16 @@
         <img src="img/send.png" alt="send" />
       </button>
     </form>
-    <button on:click|stopPropagation={toggleChatMembers} on:keydown|stopPropagation>Chat Members</button>
+    <button
+      on:click|stopPropagation={toggleChatMembers}
+      on:keydown|stopPropagation>Chat Members</button
+    >
     {#if showChatMembers}
-      <div class="chatMembers" on:click|stopPropagation on:keydown|stopPropagation>
+      <div
+        class="chatMembers"
+        on:click|stopPropagation
+        on:keydown|stopPropagation
+      >
         <div>
           <ul>
             {#each chatMembers as member}
@@ -141,7 +158,7 @@
                   <button>ban</button>
                   <button>kick</button>
                   <button>mute</button>
-                  <button>admin</button>                  
+                  <button>admin</button>
                 </p>
               </li>
             {/each}
diff --git a/front/volume/src/components/Pong/Game.ts b/front/volume/src/components/Pong/Game.ts
index 5c87ee3..4088ea9 100644
--- a/front/volume/src/components/Pong/Game.ts
+++ b/front/volume/src/components/Pong/Game.ts
@@ -24,9 +24,9 @@ export class Game {
   ranked: boolean;
   youAreReady: boolean;
 
-  private readonly score_audio = new Audio('audio/score.wav');
-  private readonly paddle_hit_audio = new Audio('audio/paddle_hit.wav');
-  private readonly edge_hit_audio = new Audio('audio/edge_hit.wav');
+  private readonly score_audio = new Audio("audio/score.wav");
+  private readonly paddle_hit_audio = new Audio("audio/paddle_hit.wav");
+  private readonly edge_hit_audio = new Audio("audio/edge_hit.wav");
 
   constructor(
     renderCanvas: HTMLCanvasElement,
@@ -112,7 +112,7 @@ export class Game {
         this.edge_hit_audio.play();
       }
       this.ball.speed = data.ballSpeed;
-      
+
       this.ball.rect.center = data.ballPosition;
 
       for (let i = 0; i < data.scores.length; i++) {
diff --git a/front/volume/src/components/Pong/constants.ts b/front/volume/src/components/Pong/constants.ts
index 1dacbe4..3d4ca37 100644
--- a/front/volume/src/components/Pong/constants.ts
+++ b/front/volume/src/components/Pong/constants.ts
@@ -1,21 +1,21 @@
-import { Point } from './utils'
+import { Point } from "./utils";
 
 export const GAME_EVENTS = {
-  START_GAME: 'START_GAME',
-  READY: 'READY',
-  GAME_TICK: 'GAME_TICK',
-  PLAYER_MOVE: 'PLAYER_MOVE',
-  GET_GAME_INFO: 'GET_GAME_INFO',
-  CREATE_GAME: 'CREATE_GAME',
-  REGISTER_PLAYER: 'REGISTER_PLAYER',
-  MATCHMAKING: 'MATCHMAKING',
-  LEAVE_GAME: 'LEAVE_GAME'
-}
+  START_GAME: "START_GAME",
+  READY: "READY",
+  GAME_TICK: "GAME_TICK",
+  PLAYER_MOVE: "PLAYER_MOVE",
+  GET_GAME_INFO: "GET_GAME_INFO",
+  CREATE_GAME: "CREATE_GAME",
+  REGISTER_PLAYER: "REGISTER_PLAYER",
+  MATCHMAKING: "MATCHMAKING",
+  LEAVE_GAME: "LEAVE_GAME",
+};
 
-export const DEFAULT_MAP_SIZE = new Point(500, 400)
-export const DEFAULT_PADDLE_SIZE = new Point(6, 30)
-export const DEFAULT_BALL_SIZE = new Point(10, 10)
-export const DEFAULT_BALL_INITIAL_SPEED = new Point(10, 2)
-export const DEFAULT_PLAYER_X_OFFSET = 50
-export const DEFAULT_WIN_SCORE = 5
-export const GAME_TICKS = 30
+export const DEFAULT_MAP_SIZE = new Point(500, 400);
+export const DEFAULT_PADDLE_SIZE = new Point(6, 30);
+export const DEFAULT_BALL_SIZE = new Point(10, 10);
+export const DEFAULT_BALL_INITIAL_SPEED = new Point(10, 2);
+export const DEFAULT_PLAYER_X_OFFSET = 50;
+export const DEFAULT_WIN_SCORE = 5;
+export const GAME_TICKS = 30;