diff --git a/package.json b/package.json
index 0aabdae..1a93e43 100644
--- a/package.json
+++ b/package.json
@@ -33,5 +33,8 @@
 		"vite": "^5.0.3",
 		"vitest": "^2.0.0"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"jquery": "^3.7.1"
+	}
 }
diff --git a/src/app.css b/src/app.css
index e0fe217..4ea292b 100644
--- a/src/app.css
+++ b/src/app.css
@@ -22,17 +22,18 @@ h1
 
 html
 {
-    /*background: linear-gradient(45deg, #102eff, #d2379b);*/
     background: linear-gradient(45deg, #b9b9c9, #d2379b);
     height: 100vh;
+
 }
 
 body
 {
     display: flex;
+    flex-direction: row;
+
     height: 100vh;
     align-items: center;
-    flex-direction: column;
 }
 
 .container
@@ -57,13 +58,14 @@ hr {
 nav
 {
     display: flex;
+    flex-direction: column;
     align-self: start;
-    justify-content: space-around;
+    justify-content: center;
     align-items: center;
+    gap: 3vh;
+    height: fit-content;
 
-    height: 5vh;
-
-    margin-top: 2vh;
+    margin-top: 10vh;
     margin-bottom: 2vh;
 }
 
@@ -122,4 +124,4 @@ footer
 
 footer a {
     margin-right: 2vh;
-}
\ No newline at end of file
+}
diff --git a/src/app.html b/src/app.html
index 284c860..336f516 100644
--- a/src/app.html
+++ b/src/app.html
@@ -2,9 +2,13 @@
 <html lang="en">
 	<head>
 		<title>Unluckiest</title>
+
 		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
+
+		<link rel="stylesheet" href="%sveltekit.assets%/style/menu.css" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">
diff --git a/src/lib/components/NavLink.svelte b/src/lib/components/NavLink.svelte
index b37db96..9445026 100644
--- a/src/lib/components/NavLink.svelte
+++ b/src/lib/components/NavLink.svelte
@@ -12,7 +12,7 @@
 
     a
     {
-        color: #303633;
+        color: #f1ecec;
         display: flex;
         justify-content: center;
         align-items: center;
@@ -30,7 +30,7 @@
     a:hover
     {
         transform: scale(1.1);
-        color: #f1ecec;
+        color: #303633;
     }
 
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 940375a..e80cc7b 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,20 +1,41 @@
 <script>
 	import '../app.css';
+
     import github_mark from '$lib/assets/github-mark-white.svg';
     import twitter_mark from '$lib/assets/twitter-mark-white.svg';
+
     import NavLink from "$lib/components/NavLink.svelte";
+    import {onMount} from "svelte";
+
+    onMount(async () => {
+        const jQuery = await import('jquery');
+        const $ = jQuery.default;
+
+        window.$ = $;
+        window.jQuery = $;
+
+        window.$(".menu-collapsed").click(function () {
+            window.$(this).toggleClass("menu-expanded");
+        });
+    });
+
 </script>
 
-<nav>
-    <NavLink --background-color="#f1ecec" link="/">Leaderboard</NavLink>
-    <NavLink --background-color="#f1ecec" link="/play">Play</NavLink>
-    <NavLink --background-color="#f1ecec" link="/about">About</NavLink>
-</nav>
+<div class="menu-collapsed">
+    <div class="burger"></div>
+    <nav>
 
-<hr/>
+        <NavLink --background-color="#f1ecec" link="/">Leaderboard</NavLink>
+        <NavLink --background-color="#f1ecec" link="/play">Play</NavLink>
+        <NavLink --background-color="#f1ecec" link="/about">About</NavLink>
+
+    </nav>
+</div>
 
 <div class="container">
-    <slot></slot>
+    <div class="row">
+        <slot></slot>
+    </div>
 </div>
 
 <footer>
diff --git a/static/style/menu.css b/static/style/menu.css
new file mode 100644
index 0000000..353d8b8
--- /dev/null
+++ b/static/style/menu.css
@@ -0,0 +1,94 @@
+.b-a, .burger:after, .burger:before, .burger {
+    transition: all 0.25s;
+    content: "";
+    position: absolute;
+    left: 0;
+    height: 6px;
+    width: 30px;
+    border-radius: 15px;
+    background-color: rgba(255, 255, 255, 0.95);
+}
+
+.menu-collapsed {
+    transition: all 0.25s;
+    position: fixed;
+    top: 10px;
+    left: 9px;
+    height: 36px;
+    width: 36px;
+    z-index: 1;
+    cursor: pointer;
+}
+.menu-collapsed a {
+    transition: all 0s;
+    position: fixed;
+    left: -9000px;
+}
+
+.burger {
+    position: fixed;
+    left: 12px;
+    top: 24px;
+}
+
+.burger:before {
+    top: -8px;
+}
+
+.burger:after {
+    top: 8px;
+}
+
+.b-a-expanded, .menu-expanded .burger:after, .menu-expanded .burger:before {
+    transition: all 0.25s;
+    top: 0px;
+}
+
+.menu-expanded {
+    transition: all 0.25s;
+    text-align: center;
+    line-height: 200px;
+    height: 100%;
+    width: 100%;
+    border-radius: 0px;
+    top: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.85);
+}
+
+.menu-expanded a {
+    transition: all 0s;
+    position: relative;
+    left: 0;
+    z-index: 2;
+}
+
+.menu-expanded a {
+    transition: all 0.15s;
+    text-decoration: none;
+    font-size: 2em;
+    padding: 5px;
+    color: #fff;
+    display: block;
+}
+
+.menu-expanded a:hover {
+    background-color: rgba(255, 255, 255, 0.8);
+    transition: all 0.15s;
+    letter-spacing: 2px;
+    color: #333;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+.menu-expanded .burger {
+    background-color: transparent;
+    transition: all 0.25s;
+}
+
+.menu-expanded .burger:before {
+    transform: rotate(45deg);
+}
+
+.menu-expanded .burger:after {
+    transform: rotate(-45deg);
+}
\ No newline at end of file
