diff --git a/front/volume/src/App.svelte b/front/volume/src/App.svelte
index 46f829e..f2c7126 100644
--- a/front/volume/src/App.svelte
+++ b/front/volume/src/App.svelte
@@ -1,3 +1,19 @@
+<script lang="ts" context="module">
+  export enum APPSTATE {
+    HOME = "/",
+    PROFILE = "/profile",
+    HISTORY = "/history",
+    FRIENDS = "/friends",
+    SPECTATE = "/spectate",
+    CHANNELS = "/channels",
+    LEADERBOARD = "/leaderboard",
+    SPECTATE_GAME = "/spectate_game",
+    CREATE_GAME = "/create-game",
+    MATCHMAKING = "/matchmaking",
+    PROFILE_ID = "/profile_id",
+  }
+</script>
+
 <script lang="ts">
   import { onMount } from "svelte";
   import Navbar from "./components/NavBar.svelte";
@@ -5,7 +21,6 @@
   import Profile from "./components/Profile.svelte";
   import MatchHistory from "./components/MatchHistory.svelte";
   import Friends, { addFriend } from "./components/Friends.svelte";
-  import Spectate from "./components/Spectate.svelte";
   import Chat from "./components/Chat.svelte";
   import Channels from "./components/Channels.svelte";
   import Leaderboard from "./components/Leaderboard.svelte";
@@ -14,12 +29,31 @@
   import type { Player } from "./components/Profile.svelte";
   import type { Match } from "./components/MatchHistory.svelte";
   import type { Friend } from "./components/Friends.svelte";
-  import type { SpectateType } from "./components/Spectate.svelte";
   import type { ChannelsType } from "./components/Channels.svelte";
 
   import { store, getUser, login, API_URL } from "./Auth";
   import FakeLogin from "./FakeLogin.svelte";
 
+  // Single Page Application config
+  let appState: string = APPSTATE.HOME;
+
+  history.replaceState({ appState: "" }, "", "/");
+  window.onpopstate = (e: PopStateEvent) => {
+    if (e.state) {
+      appState = e.state.appState;
+    }
+  };
+
+  function resetAppState() {
+    setAppState(APPSTATE.HOME);
+  }
+
+  function setAppState(newState: APPSTATE | string) {
+    if (newState === appState) return;
+    appState = newState;
+    history.pushState({ appState }, "", appState);
+  }
+
   // PROFILE
   onMount(() => {
     getUser();
@@ -27,16 +61,13 @@
   setInterval(() => {
     getUser();
   }, 15000);
-  let isProfileOpen = false;
   function clickProfile() {
-    isProfileOpen = true;
+    setAppState(APPSTATE.PROFILE);
   }
 
   let userProfile: Player;
-  let isIdProfileOpen = false;
   async function openIdProfile(event: CustomEvent<string>) {
     console.log("Opening profile: " + event.detail);
-    isIdProfileOpen = true;
     const res = await fetch(API_URL + "/user/" + event.detail, {
       method: "get",
       mode: "cors",
@@ -45,13 +76,13 @@
       referrerPolicy: "no-referrer",
     });
     userProfile = await res.json();
+    setAppState(APPSTATE.PROFILE_ID);
   }
 
   // HISTORY
   let matches: Array<Match>;
-  let isHistoryOpen = false;
   async function clickHistory() {
-    isHistoryOpen = true;
+    setAppState(APPSTATE.HISTORY);
     matches = await getHistory();
   }
 
@@ -83,9 +114,8 @@
     return await response.json();
   }
 
-  let isFriendOpen = false;
   async function clickFriends() {
-    isFriendOpen = true;
+    setAppState(APPSTATE.FRIENDS);
     friends = await getFriends();
     invits = await getInvits();
     friendsInterval = setInterval(async () => {
@@ -94,24 +124,9 @@
     }, 5000);
   }
 
-  // SPECTATE
-  let isSpectateOpen = false;
-  function clickSpectate() {
-    isSpectateOpen = true;
-  }
-  let spectate: Array<SpectateType> = [
-    { player1: "Alice", player2: "Bob", id: "1" },
-    { player1: "Alice", player2: "Bob", id: "4" },
-    { player1: "Alice", player2: "Bob", id: "6" },
-    { player1: "Alice", player2: "Bob", id: "8" },
-    { player1: "Alice", player2: "Bob", id: "2" },
-    { player1: "Alice", player2: "Bob", id: "3" },
-  ];
-
   // CHANNELS
-  let isChannelsOpen = false;
   function clickChannels() {
-    isChannelsOpen = true;
+    setAppState(APPSTATE.CHANNELS);
   }
   let channels: Array<ChannelsType> = [
     { id: "1", name: "General", messages: [], privacy: "public", password: "" },
@@ -127,8 +142,10 @@
   let selectedChannel: ChannelsType;
   const handleSelectChannel = (channel: ChannelsType) => {
     selectedChannel = channel;
+    setAppState(APPSTATE.CHANNELS + "#" + channel.name);
   };
 
+  // LEADERBOARD
   let leaderboard: Array<Player> = [];
 
   export async function getLeader(): Promise<Player[]> {
@@ -139,11 +156,9 @@
     return await response.json();
   }
 
-  // LEADERBOARD
-  let isLeaderboardOpen = false;
   async function clickLeaderboard() {
-    isLeaderboardOpen = true;
     leaderboard = await getLeader();
+    setAppState(APPSTATE.LEADERBOARD);
   }
 
   // GAME
@@ -174,15 +189,14 @@
         {clickProfile}
         {clickHistory}
         {clickFriends}
-        {clickSpectate}
         {clickChannels}
         {clickLeaderboard}
       />
-      {#if isChannelsOpen}
-        {#if selectedChannel}
+      {#if appState.includes(APPSTATE.CHANNELS)}
+        {#if appState.replace(APPSTATE.CHANNELS, "") !== ""}
           <div
-            on:click={() => (selectedChannel = undefined)}
-            on:keydown={() => (selectedChannel = undefined)}
+            on:click={() => setAppState(APPSTATE.CHANNELS)}
+            on:keydown={() => setAppState(APPSTATE.CHANNELS)}
           >
             <Chat
               chatMessages={selectedChannel.messages}
@@ -191,67 +205,43 @@
               on:invite-to-game={pong.inviteToGame}
             />
           </div>
-        {/if}
-        {#if !selectedChannel}
-          <div
-            on:click={() => (isChannelsOpen = false)}
-            on:keydown={() => (isChannelsOpen = false)}
-          >
+        {:else}
+          <div on:click={resetAppState} on:keydown={resetAppState}>
             <Channels {channels} onSelectChannel={handleSelectChannel} />
           </div>
         {/if}
       {/if}
-      {#if isSpectateOpen}
-        <div
-          on:click={() => (isSpectateOpen = false)}
-          on:keydown={() => (isSpectateOpen = false)}
-        >
-          <Spectate {spectate} />
-        </div>
-      {/if}
-      {#if isLeaderboardOpen}
-        <div
-          on:click={() => (isLeaderboardOpen = false)}
-          on:keydown={() => (isLeaderboardOpen = false)}
-        >
+      {#if appState === APPSTATE.LEADERBOARD}
+        <div on:click={resetAppState} on:keydown={resetAppState}>
           <Leaderboard {leaderboard} />
         </div>
       {/if}
-      {#if isFriendOpen}
+      {#if appState === APPSTATE.FRIENDS}
         <div
           on:click={() => {
-            isFriendOpen = false;
+            resetAppState();
             clearInterval(friendsInterval);
           }}
           on:keydown={() => {
-            isFriendOpen = false;
+            resetAppState();
             clearInterval(friendsInterval);
           }}
         >
           <Friends {friends} {invits} />
         </div>
       {/if}
-      {#if isHistoryOpen}
-        <div
-          on:click={() => (isHistoryOpen = false)}
-          on:keydown={() => (isHistoryOpen = false)}
-        >
+      {#if appState === APPSTATE.HISTORY}
+        <div on:click={resetAppState} on:keydown={resetAppState}>
           <MatchHistory {matches} />
         </div>
       {/if}
-      {#if isProfileOpen}
-        <div
-          on:click={() => (isProfileOpen = false)}
-          on:keydown={() => (isProfileOpen = false)}
-        >
+      {#if appState === APPSTATE.PROFILE}
+        <div on:click={resetAppState} on:keydown={resetAppState}>
           <Profile user={$store} edit={1} />
         </div>
       {/if}
-      {#if isIdProfileOpen}
-        <div
-          on:click={() => (isIdProfileOpen = false)}
-          on:keydown={() => (isIdProfileOpen = false)}
-        >
+      {#if appState === APPSTATE.PROFILE_ID}
+        <div on:click={resetAppState} on:keydown={resetAppState}>
           <Profile user={userProfile} edit={0} />
         </div>
       {/if}
@@ -261,7 +251,7 @@
         <button on:click={impersonate}>Impersonate</button>
         <button on:click={() => (fakemenu = false)}>No impersonate</button>
       {:else}
-        <Pong bind:this={pong} {fakeUser} />
+        <Pong bind:this={pong} {appState} {setAppState} {fakeUser} />
       {/if}
     {/if}
   </div>
diff --git a/front/volume/src/components/NavBar.svelte b/front/volume/src/components/NavBar.svelte
index 001ceeb..02072fa 100644
--- a/front/volume/src/components/NavBar.svelte
+++ b/front/volume/src/components/NavBar.svelte
@@ -16,7 +16,6 @@
   export let clickProfile = () => {};
   export let clickHistory = () => {};
   export let clickFriends = () => {};
-  export let clickSpectate = () => {};
   export let clickChannels = () => {};
   export let clickLeaderboard = () => {};
 </script>
@@ -29,11 +28,6 @@
           <button on:click={clickLeaderboard}> Leaderboard </button>
         </li>
       {/if}
-      {#if link.text === "Spectate"}
-        <li>
-          <button on:click={clickSpectate}> Spectate </button>
-        </li>
-      {/if}
       {#if link.text === "Channels"}
         <li>
           <button on:click={clickChannels}> Channels </button>
diff --git a/front/volume/src/components/Pong/Pong.svelte b/front/volume/src/components/Pong/Pong.svelte
index 75470df..74c81a9 100644
--- a/front/volume/src/components/Pong/Pong.svelte
+++ b/front/volume/src/components/Pong/Pong.svelte
@@ -10,22 +10,22 @@
   import type { MatchmakingDto } from "./dtos/MatchmakingDto";
   import { getUser, store } from "../../Auth";
   import ColorPicker from "./ColorPicker.svelte";
+  import { APPSTATE } from "../../App.svelte";
 
   export function inviteToGame(event: CustomEvent<string>) {
-    createMatchWindow = true;
+    setAppState(APPSTATE.CREATE_GAME);
     invitedUsername = event.detail;
   }
 
   export let fakeUser: boolean;
+  export let appState: string;
+  export let setAppState: (newState: APPSTATE | string) => void;
 
   const SERVER_URL = `ws://${import.meta.env.VITE_HOST}:${
     import.meta.env.VITE_BACK_PORT
   }`;
 
-  let createMatchWindow: boolean = false;
-  let spectateWindow: boolean = false;
   let gamePlaying: boolean = false;
-  let matchmaking: boolean = false;
   let connected: boolean = false;
   let loggedIn: boolean = false;
   let failedLogIn: boolean = false;
@@ -87,7 +87,11 @@
       } else if (event == GAME_EVENTS.CREATE_GAME) {
         if (data) gamePlaying = true;
       } else if (event == GAME_EVENTS.MATCHMAKING) {
-        matchmaking = data.matchmaking;
+        if (data.matchmaking && appState !== APPSTATE.MATCHMAKING) {
+          setAppState(APPSTATE.MATCHMAKING);
+        } else if (!data.matchmaking && appState === APPSTATE.MATCHMAKING) {
+          setAppState(APPSTATE.HOME);
+        }
       } else if (event == GAME_EVENTS.SPECTATE) {
         if (data) {
           gamePlaying = true;
@@ -141,9 +145,7 @@
   }
 
   function resetMenus() {
-    createMatchWindow = false;
-    spectateWindow = false;
-    matchmaking = false;
+    setAppState(APPSTATE.HOME);
     game.youAreReady = false;
   }
 
@@ -152,6 +154,16 @@
       game.updateColors(elementsColor, backgroundColor);
     }
   }
+
+  $: {
+    if (socket && socket.readyState) {
+      if (appState === APPSTATE.MATCHMAKING) {
+        startMatchmaking();
+      } else if (appState !== APPSTATE.MATCHMAKING) {
+        stopMatchmaking();
+      }
+    }
+  }
 </script>
 
 <main>
@@ -161,30 +173,32 @@
   {:else if loggedIn}
     <h1>Choose a gamemode</h1>
     <button on:click={startMatchmaking}>Matchmaking</button>
-    <button on:click={() => (createMatchWindow = true)}
+    <button on:click={() => setAppState(APPSTATE.CREATE_GAME)}
       >Play with a friend</button
     >
-    <button on:click={() => (spectateWindow = true)}>Spectate a friend</button>
+    <button on:click={() => setAppState(APPSTATE.SPECTATE_GAME)}
+      >Spectate a friend</button
+    >
     <label for="colorPicker">Elements color:</label>
     <ColorPicker bind:color={elementsColor} />
     <label for="colorPicker">Background color:</label>
     <ColorPicker bind:color={backgroundColor} />
 
-    {#if matchmaking}
+    {#if appState === APPSTATE.MATCHMAKING}
       <div on:click={stopMatchmaking} on:keydown={stopMatchmaking}>
         <Matchmaking {stopMatchmaking} />
       </div>
-    {:else if createMatchWindow}
+    {:else if appState === APPSTATE.CREATE_GAME}
       <div
-        on:click={() => (createMatchWindow = false)}
-        on:keydown={() => (createMatchWindow = false)}
+        on:click={() => setAppState(APPSTATE.HOME)}
+        on:keydown={() => setAppState(APPSTATE.HOME)}
       >
         <GameCreation {socket} {invitedUsername} />
       </div>
-    {:else if spectateWindow}
+    {:else if appState === APPSTATE.SPECTATE_GAME}
       <div
-        on:click={() => (spectateWindow = false)}
-        on:keydown={() => (spectateWindow = false)}
+        on:click={() => setAppState(APPSTATE.HOME)}
+        on:keydown={() => setAppState(APPSTATE.HOME)}
       >
         <SpectateFriend {socket} />
       </div>
diff --git a/front/volume/src/components/Spectate.svelte b/front/volume/src/components/Spectate.svelte
deleted file mode 100644
index f0d1806..0000000
--- a/front/volume/src/components/Spectate.svelte
+++ /dev/null
@@ -1,55 +0,0 @@
-<script lang="ts" context="module">
-  export interface SpectateType {
-    id: string;
-    player1: string;
-    player2: string;
-  }
-</script>
-
-<script lang="ts">
-  export let spectate: Array<SpectateType> = [];
-  export let watch = (id: string) => {
-    console.log(id);
-  };
-</script>
-
-<div class="overlay">
-  <div class="spectate" on:click|stopPropagation on:keydown|stopPropagation>
-    <div>
-      {#if spectate.length > 0}
-        <h2>Monkey spectating</h2>
-        {#each spectate.slice(0, 10) as _spectate}
-          <li>
-            <span>{_spectate.player1} VS {_spectate.player2}</span>
-            <button on:click={() => watch(_spectate.id)}>Spectate</button>
-          </li>
-        {/each}
-      {:else}
-        <p>No matches to spectate</p>
-      {/if}
-    </div>
-  </div>
-</div>
-
-<style>
-  .overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
-    z-index: 9998;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .spectate {
-    background-color: #fff;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    padding: 1rem;
-    width: 300px;
-  }
-</style>