diff --git a/src/components/tabs.astro b/src/components/tabs.astro
index 523bb88..f9d7730 100644
--- a/src/components/tabs.astro
+++ b/src/components/tabs.astro
@@ -5,7 +5,7 @@ const path = Astro.url.pathname;
 
 const pageData = Page.db.query('select route, name from pages').values();
 ---
-<nav>
+<nav id="sideNav" class="desktop">
   { pageData.map(([path, name]) => <Tab {...{path}}>{name}</Tab>) }
   <form class="editMode" hx-on::after-request="if(event.detail.successful) this.reset()">
     <input name="name" placeholder="Page name" />
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index af754ac..66ca965 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -18,6 +18,7 @@ const { tabs } = Astro.props;
   </head>
   <body>
     <div class="topbar">
+      <button class="mobile" id="navButton">☰</button>
       <Bank />
       <a href={ tabs ? "/gacha" : "/" }>{`To ${ tabs ? "Gacha" : "Quests" }`}</a>
       <button id="edit_mode">Edit Mode</button>
@@ -69,6 +70,25 @@ const { tabs } = Astro.props;
   window.addEventListener('htmx:afterRequest', () => {
     setVisibility();
   });
+
+  document.getElementById("navButton")?.addEventListener('click', (evt) => {
+    evt.preventDefault();
+    const nav = document.getElementById("sideNav");
+    if (!nav) {
+      console.warn('missing sideNav element');
+      return;
+    }
+    nav.classList.remove('desktop');
+
+    nav.style.display = 'flex';
+    nav.style.position = 'absolute';
+    nav.style.left = '0';
+    nav.style.top = '0';
+    nav.style.zIndex = '1';
+    nav.style.backgroundColor = 'white';
+    nav.style.height = '100%';
+    nav.style.borderRight = '1px solid black';
+  });
 </script>
 
 <style>
@@ -179,4 +199,15 @@ input {
     width: 1.5em;
   }
 }
+
+@media screen and (max-width: 720px) {
+  .desktop {
+    display: none !important;
+  }
+}
+@media screen and (min-width: 720px) {
+  .mobile {
+    display: none !important;
+  }
+}
 </style>
