diff --git a/src/lib/stores.svelte.ts b/src/lib/stores.svelte.ts
index a7b83a6..75707ee 100644
--- a/src/lib/stores.svelte.ts
+++ b/src/lib/stores.svelte.ts
@@ -29,4 +29,4 @@ export function persisted<T>(key: string, default_value: T) {
 }
 
 // Dark/Light Mode
-export const theme = persisted<string>("theme", "light");
+export const theme = persisted<string>("theme", "dark");
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 4d2bb76..edb2739 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
   import "../app.css";
+  import { fade } from "svelte/transition";
   import { theme } from "$lib/stores.svelte";
 
+  let is_menu_open = $state(false);
   let theme_style = $derived(theme.value === "light"
     ? "text-black absolute inset-0 -z-10 h-full w-full bg-white bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:16px_16px]"
     : "text-white absolute top-0 z-[-2] h-screen w-screen bg-[#000000] bg-[radial-gradient(#ffffff33_1px,#00091d_1px)] bg-[size:20px_20px]"
@@ -12,12 +14,56 @@
   }
 </script>
 
-<div class={theme_style}>
-  <slot />
-  <button onclick={() => { theme.value = getTheme("dark", "light") }}>
-    <img
-      src={getTheme("/moon.svg", "/light-bulb.svg")} 
-      alt="Theme toggle button"
-    />
-  </button>
+<div class={`${theme_style} flex flex-col w-full h-full min-w-screen min-h-screen p-8`}>
+  <main class="p-4 w-full h-full">
+    <slot />
+  </main>
+
+  <aside class="z-50 absolute inset-x-0 bottom-0 !text-black flex w-full h-fit items-end justify-between p-8">
+    <div class="flex flex-col justify-start gap-4">
+      {#if is_menu_open}
+        <menu 
+          transition:fade={{ duration: 150 }}
+          class={`${getTheme("border-black", "border-[#00091d]")} w-fit border z-50 flex flex-col items-start gap-2 h-fit p-2 rounded-xl bg-white`}
+        >
+          <button class="line-through flex gap-2 text-start w-full h-full rounded-xl pl-2 pr-5 py-2 hover:bg-slate-500/10 transition-all duration-150 items-center">
+            <img src="/shooting-star.svg" alt="Item 1" class="w-8 h-8" />
+            Try a new list
+          </button>
+          <button class="line-through flex gap-2 text-start w-full h-full rounded-xl pl-2 pr-5 py-2 hover:bg-slate-500/10 transition-all duration-150 items-center">
+            <img src="/sparkles-line.svg" alt="Item 2" class="w-8 h-8" />
+            AI Suggestions 
+          </button>
+        </menu>
+      {/if}
+      <nav class={`${getTheme("border-black", "border-[#00091d]")} border z-50 flex self-center items-center gap-4 mx-auto w-fit h-fit p-2 rounded-xl bg-white`}>
+        <button 
+          onclick={() => is_menu_open = !is_menu_open} 
+          class="w-full h-fit hover:bg-slate-500/10 rounded-full"
+        >
+          <img src="/menu-line.svg" alt="Menu" class="w-12 h-12" />
+        </button>
+
+        <a href="/explore" class="items-center h-fit w-full hover:bg-slate-500/10 rounded-full">
+          <img src="/planet-rocket.svg" alt="Explore Page" class="w-12 h-12"/>
+        </a>
+
+        <a href="/login" class="items-center h-fit w-full hover:bg-slate-500/10 rounded-full">
+          <img src="/login-line.svg" alt="Login" class="w-12 h-12"/>
+        </a>
+      </nav>
+    </div>
+
+
+    <button 
+      onclick={() => { theme.value = getTheme("dark", "light") }}
+      class={`${getTheme("border-black", "border-[#00091d]")} border w-fit h-fit p-2 bg-white rounded-xl`}
+    >
+      <img
+        src={getTheme("/moon.svg", "/light-bulb.svg")} 
+        alt="Theme toggle button"
+        class="w-12 h-12 hover:bg-slate-500/10 rounded-full"
+      />
+    </button>
+  </aside>
 </div>
diff --git a/static/link-line.svg b/static/link-line.svg
new file mode 100644
index 0000000..8edf9de
--- /dev/null
+++ b/static/link-line.svg
@@ -0,0 +1 @@
+<svg width="512" height="512" viewBox="0 0 512 512" style="color:currentColor" xmlns="http://www.w3.org/2000/svg" class="h-full w-full"><rect width="512" height="512" x="0" y="0" rx="30" fill="transparent" stroke="transparent" stroke-width="0" stroke-opacity="100%" paint-order="stroke"></rect><svg width="256px" height="256px" viewBox="0 0 24 24" fill="currentColor" x="128" y="128" role="img" style="display:inline-block;vertical-align:middle" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 8h2c1.333 0 4 .8 4 4s-2.667 4-4 4h-2M9 8H7c-1.333 0-4 .8-4 4s2.667 4 4 4h2m-1-4h8"/></g></svg></svg>
\ No newline at end of file
diff --git a/static/moon.svg b/static/moon.svg
index f20d3be..972e24a 100644
--- a/static/moon.svg
+++ b/static/moon.svg
@@ -1 +1 @@
-<svg width="512" height="512" viewBox="0 0 512 512" style="color:currentColor" xmlns="http://www.w3.org/2000/svg" class="h-full w-full"><rect width="512" height="512" x="0" y="0" rx="30" fill="transparent" stroke="transparent" stroke-width="0" stroke-opacity="100%" paint-order="stroke"></rect><svg width="256px" height="256px" viewBox="0 0 24 24" fill="currentColor" x="128" y="128" role="img" style="display:inline-block;vertical-align:middle" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><path fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.353 3C5.849 4.408 3 7.463 3 11.47A9.53 9.53 0 0 0 12.53 21c4.007 0 7.062-2.849 8.47-6.353C8.17 17.065 8.14 8.14 9.353 3z"/></g></svg></svg>
\ No newline at end of file
+<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="fill-inherit h-full w-full"><rect width="512" height="512" x="0" y="0" rx="30" fill="transparent" stroke="transparent" stroke-width="0" stroke-opacity="100%" paint-order="stroke"></rect><svg width="256px" height="256px" viewBox="0 0 24 24" fill="currentColor" x="128" y="128" role="img" style="display:inline-block;vertical-align:middle" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><path fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.353 3C5.849 4.408 3 7.463 3 11.47A9.53 9.53 0 0 0 12.53 21c4.007 0 7.062-2.849 8.47-6.353C8.17 17.065 8.14 8.14 9.353 3z"/></g></svg></svg>