diff --git a/package-lock.json b/package-lock.json
index 4f7bb91..a9613de 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,8 @@
       "name": "svelte-app",
       "version": "1.0.0",
       "dependencies": {
-        "sirv-cli": "^2.0.0"
+        "sirv-cli": "^2.0.0",
+        "svelte-routing": "^1.6.0"
       },
       "devDependencies": {
         "@rollup/plugin-commonjs": "^17.0.0",
@@ -385,6 +386,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/dedent-js": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dedent-js/-/dedent-js-1.0.1.tgz",
+      "integrity": "sha512-OUepMozQULMLUmhxS95Vudo0jb0UchLimi3+pQ2plj61Fcy8axbP9hbiD4Sz6DPqn6XG3kfmziVfQ1rSys5AJQ=="
+    },
     "node_modules/deepmerge": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.0.tgz",
@@ -674,6 +680,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/lower-case": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+      "dependencies": {
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.25.9",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
@@ -717,6 +731,15 @@
         "node": ">=10"
       }
     },
+    "node_modules/no-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+      "dependencies": {
+        "lower-case": "^2.0.2",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -741,6 +764,15 @@
       "integrity": "sha512-k41FwbcLnlgnFh69f4qdUfvDQ+5vaSDnVPFI/y5XuhKRq97EnVVneO9F1ESVCdiVu4fCS2L8usX3mU331hB7pg==",
       "dev": true
     },
+    "node_modules/pascal-case": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
+      "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
@@ -1042,11 +1074,34 @@
       "version": "3.55.1",
       "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.55.1.tgz",
       "integrity": "sha512-S+87/P0Ve67HxKkEV23iCdAh/SX1xiSfjF1HOglno/YTbSTW7RniICMCofWGdJJbdjw3S+0PfFb1JtGfTXE0oQ==",
-      "dev": true,
       "engines": {
         "node": ">= 8"
       }
     },
+    "node_modules/svelte-routing": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/svelte-routing/-/svelte-routing-1.6.0.tgz",
+      "integrity": "sha512-+DbrSGttLA6lan7oWFz1MjyGabdn3tPRqn8Osyc471ut2UgCrzM5x1qViNMc2gahOP6fKbKK1aNtZMJEQP2vHQ==",
+      "dependencies": {
+        "svelte2tsx": "^0.1.157"
+      },
+      "peerDependencies": {
+        "svelte": "^3.20.x"
+      }
+    },
+    "node_modules/svelte2tsx": {
+      "version": "0.1.193",
+      "resolved": "https://registry.npmjs.org/svelte2tsx/-/svelte2tsx-0.1.193.tgz",
+      "integrity": "sha512-vzy4YQNYDnoqp2iZPnJy7kpPAY6y121L0HKrSBjU/IWW7DQ6T7RMJed2VVHFmVYm0zAGYMDl9urPc6R4DDUyhg==",
+      "dependencies": {
+        "dedent-js": "^1.0.1",
+        "pascal-case": "^3.1.1"
+      },
+      "peerDependencies": {
+        "svelte": "^3.24",
+        "typescript": "^4.1.2"
+      }
+    },
     "node_modules/terser": {
       "version": "5.16.3",
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.16.3.tgz",
@@ -1093,6 +1148,24 @@
         "node": ">=6"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
+      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
+    },
+    "node_modules/typescript": {
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+      "peer": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
diff --git a/package.json b/package.json
index 490c9d0..e6549c7 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "svelte": "^3.0.0"
   },
   "dependencies": {
-    "sirv-cli": "^2.0.0"
+    "sirv-cli": "^2.0.0",
+    "svelte-routing": "^1.6.0"
   }
 }
diff --git a/public/img/pong.png b/public/img/pong.png
new file mode 100644
index 0000000..72657d3
Binary files /dev/null and b/public/img/pong.png differ
diff --git a/src/App.svelte b/src/App.svelte
index 2a83e77..1e4e42f 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -4,6 +4,7 @@
 	import MatchHistory from './components/MatchHistory.svelte';
 	import Friends from './components/Friends.svelte';
 	import Spectate from './components/Spectate.svelte';
+	import Play from './components/Play.svelte';
 	let isProfileOpen = false; 
 	function clickProfile() {
 	  isProfileOpen = true;
@@ -68,6 +69,7 @@
 		<Profile username="Alice" wins={10} losses={5} elo={256} rank={23} is2faEnabled={false} />
 	  </div>
 	{/if}
+	<Play />
 </main>
 
 <style>
diff --git a/src/components/Friends.svelte b/src/components/Friends.svelte
index 87aa821..e09a816 100644
--- a/src/components/Friends.svelte
+++ b/src/components/Friends.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <div class="overlay">
-    <div class="friends">
+    <div class="friends" on:click|stopPropagation on:keydown|stopPropagation>
         <div>
             {#if friends.length > 0}
                 {#each friends.slice(0, 10) as friends}
diff --git a/src/components/MatchHistory.svelte b/src/components/MatchHistory.svelte
index 2fb1aef..06a1d0b 100644
--- a/src/components/MatchHistory.svelte
+++ b/src/components/MatchHistory.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <div class="overlay">
-    <div class="history">
+    <div class="history" on:click|stopPropagation on:keydown|stopPropagation>
         <div>
             {#if matches.length > 0}
                 {#each matches.slice(0, 10) as match}
diff --git a/src/components/NavBar.svelte b/src/components/NavBar.svelte
index 6d5f90d..0b6629d 100644
--- a/src/components/NavBar.svelte
+++ b/src/components/NavBar.svelte
@@ -1,12 +1,11 @@
 <script lang="ts">
   export let links = [
-    { text: "Home", url: "/" },
-    { text: "Play", url: "/Play" },
-    { text: "Spectate", url: "/Spectate"},
-    { text: "Chat", url: "/Chat"},
-    { text: "History", url: "/History"},
-    { text: "Friends", url: "/Friends"},
-    { text: "Profile", url: "/Profile" }
+    { text: "Home" , url : "img/pong.png" },
+    { text: "Spectate" },
+    { text: "Chat" },
+    { text: "History" },
+    { text: "Friends" },
+    { text: "Profile" }
   ];
   export let clickProfile = () => {};
   export let clickHistory = () => {};
@@ -17,38 +16,39 @@
 <nav class="navigation-bar">
   <ul>
     {#each links as link}
-      {#if link.text === "Profile" || link.text === "History" || link.text === "Friends" || link.text === "Spectate"}
-        {#if link.text === "Spectate"}
-          <li>
-            <button on:click={clickSpectate}>
-              <p>Spectate</p>
-            </button>
-          </li>
-        {/if}
-        {#if link.text === "Friends"}
-          <li>
-            <button on:click={clickFriends}>
-              <p>Friends</p>
-            </button>
-          </li>
-        {/if}
-        {#if link.text === "Profile"}
-          <li>
-            <button on:click={clickProfile}>
-              <img src="img/profileicon.png" alt="profile icon">
-            </button>
-          </li>
-        {/if}
-        {#if link.text === "History"}
-          <li>
-            <button on:click={clickHistory}>
-              <p>History</p>
-            </button>
-          </li>
-        {/if}
-      {:else}
+      {#if link.text === "Spectate"}
         <li>
-          <a href={link.url}>{link.text}</a>
+          <button on:click={clickSpectate}>
+            <p>Spectate</p>
+          </button>
+        </li>
+      {/if}
+      {#if link.text === "Friends"}
+        <li>
+          <button on:click={clickFriends}>
+            <p>Friends</p>
+          </button>
+        </li>
+      {/if}
+      {#if link.text === "Profile"}
+        <li>
+          <button on:click={clickProfile}>
+            <img src="img/profileicon.png" alt="profile icon">
+          </button>
+        </li>
+      {/if}
+      {#if link.text === "History"}
+        <li>
+          <button on:click={clickHistory}>
+            <p>History</p>
+          </button>
+        </li>
+      {/if}
+      {#if link.text === "Home"}
+        <li>
+          <a href="/">
+            <img src="img/pong.png" alt="home-icon">
+          </a>
         </li>
       {/if}
     {/each}
@@ -76,16 +76,15 @@
     margin: 0 1rem;
   }
 
-  .navigation-bar a {
-    text-decoration: none;
-    color: #333;
-  }
-
   .navigation-bar img {
     width: 2rem;
     height: 2rem;
   }
 
+  .navigation-bar button {
+    border: none;
+  }
+
   @media (max-width: 768px) {
     .navigation-bar {
         flex-direction: column;
diff --git a/src/components/Play.svelte b/src/components/Play.svelte
new file mode 100644
index 0000000..f777267
--- /dev/null
+++ b/src/components/Play.svelte
@@ -0,0 +1,37 @@
+<script>
+    // import { navigate } from 'svelte-routing';
+
+    // function handleMatchmakingClick() {
+    //   navigate('/matchmaking');
+    // }
+  
+    // function handlePlayWithFriendClick() {
+    //   navigate('/play-with-friend');
+    // }
+</script>
+<!-- dr -->
+<main>
+    <h1>Choose a gamemode</h1>
+    <!-- <button on:click={handleMatchmakingClick}>Matchmaking</button>
+    <button on:click={handlePlayWithFriendClick}>Play with a friend</button> -->
+    <button>Matchmaking</button>
+    <button>Play with a friend</button>
+</main>
+
+<style>
+    main {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    h1 {
+        margin-bottom: 2rem;
+    }
+    
+    button {
+        font-size: 1.5rem;
+        padding: 1rem 2rem;
+        margin-bottom: 1rem;
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/Profile.svelte b/src/components/Profile.svelte
index f15e2ba..4d11c61 100644
--- a/src/components/Profile.svelte
+++ b/src/components/Profile.svelte
@@ -11,7 +11,7 @@
 </script>
 
 <div class="overlay">
-    <div class="profile">
+    <div class="profile" on:click|stopPropagation on:keydown|stopPropagation>
         <div class="profile-header">
         <img class="profile-img" src="img/profileicon.png" alt="Profile Icon">
         <h3>{username}</h3>
diff --git a/src/components/Spectate.svelte b/src/components/Spectate.svelte
index 5094dde..072c25c 100644
--- a/src/components/Spectate.svelte
+++ b/src/components/Spectate.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <div class="overlay">
-    <div class="spectate">
+    <div class="spectate" on:click|stopPropagation on:keydown|stopPropagation>
         <div>
             {#if spectate.length > 0}
                 {#each spectate.slice(0, 10) as spectate}