diff --git a/templates/base.gohtml b/templates/base.gohtml
index f932f40..4040e8c 100644
--- a/templates/base.gohtml
+++ b/templates/base.gohtml
@@ -14,13 +14,30 @@
   <link rel="stylesheet" href="/dist/tailwind.css">
   <style>
     /* Prevent transition on load */
-    .sidebar-collapsed #mobile-menu {
-      width: 5rem !important; /* lg:w-20 */
+    @media (min-width: 1024px) {
+      #mobile-menu {
+        width: 5rem !important; /* lg:w-20 */
+      }
+
+      .nav-label-container {
+        grid-template-columns: 0fr !important;
+        opacity: 0 !important;
+        margin-left: 0 !important;
+      }
     }
-    .sidebar-collapsed .nav-label-container {
-      grid-template-columns: 0fr !important;
-      opacity: 0 !important;
-      margin-left: 0 !important;
+
+    @media (max-width: 1023px) {
+      #mobile-menu {
+        transform: translateX(-100%);
+      }
+
+      #mobile-menu[data-mobile-open='true'] {
+        transform: translateX(0);
+      }
+
+      #mobile-menu-backdrop[data-mobile-open='true'] {
+        display: block;
+      }
     }
 
     /* Re-enable transitions after initialization */
@@ -71,13 +88,44 @@
     });
   </script>
   <script>
-    // initialize sidebar state immediately to prevent layout shift/transitions
-    (function() {
-    // keep the sidebar collapsed on desktop (lg+)
-    if (window.innerWidth >= 1024) {
-      document.documentElement.classList.add('sidebar-collapsed');
-    }
-  })();
+    document.addEventListener('DOMContentLoaded', function() {
+      const menu = document.getElementById('mobile-menu');
+      const backdrop = document.getElementById('mobile-menu-backdrop');
+      const toggle = document.querySelector('[data-mobile-menu-toggle]');
+
+      if (!menu || !backdrop || !toggle) return;
+
+      const openMenu = function() {
+        menu.dataset.mobileOpen = 'true';
+        backdrop.dataset.mobileOpen = 'true';
+        backdrop.classList.remove('hidden');
+        toggle.setAttribute('aria-expanded', 'true');
+      };
+
+      const closeMenu = function() {
+        menu.dataset.mobileOpen = 'false';
+        backdrop.dataset.mobileOpen = 'false';
+        backdrop.classList.add('hidden');
+        toggle.setAttribute('aria-expanded', 'false');
+      };
+
+      toggle.addEventListener('click', function() {
+        if (menu.dataset.mobileOpen === 'true') {
+          closeMenu();
+          return;
+        }
+
+        openMenu();
+      });
+
+      backdrop.addEventListener('click', closeMenu);
+
+      menu.querySelectorAll('a, button').forEach(function(el) {
+        el.addEventListener('click', function() {
+          if (window.innerWidth < 1024) closeMenu();
+        });
+      });
+    });
 
     // Initialize sidebar state on load
     document.addEventListener('DOMContentLoaded', () => {
@@ -242,18 +290,31 @@ if (window.showToast) showToast({ message: 'Something went wrong' })
     }
   </script>
 </head>
-<body class="bg-background text-foreground">
+  <body class="bg-background text-foreground">
   <div class="flex min-h-screen flex-col">
     {{if .User}}
-      <div class="flex flex-1 overflow-hidden">
+      <header class="fixed inset-x-0 top-0 z-50 flex h-14 items-center border-b border-border bg-background-sidebar px-4 lg:hidden">
+        <button type="button" data-unstyled-button data-mobile-menu-toggle class="inline-flex items-center justify-center bg-background-button p-2 text-foreground" aria-label="Open menu" aria-controls="mobile-menu" aria-expanded="false">
+          <svg class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+            <path d="M4 6h16"></path>
+            <path d="M4 12h16"></path>
+            <path d="M4 18h16"></path>
+          </svg>
+        </button>
+        <div class="ml-3 min-w-0 flex-1 truncate text-sm font-medium text-foreground">MyAnimeList</div>
+      </header>
+
+      <div class="flex flex-1 overflow-hidden pt-14 lg:pt-0">
         <!-- Sidebar -->
-        <div id="mobile-menu" class="shrink-0 overflow-hidden w-64">
+        <div id="mobile-menu-backdrop" data-mobile-menu-backdrop class="fixed inset-0 z-40 hidden bg-black/50 lg:hidden"></div>
+
+        <div id="mobile-menu" data-mobile-open="false" class="fixed inset-y-0 left-0 z-50 w-64 shrink-0 overflow-hidden bg-background-sidebar transition-transform duration-300 lg:static lg:translate-x-0 lg:transition-none">
           {{block "sidebar" .}}
             {{template "navigation" dict "CurrentPath" .CurrentPath}}
           {{end}}
         </div>
   
-        <main class="w-full flex-1 flex flex-col h-screen overflow-y-auto">
+        <main class="w-full flex-1 flex flex-col h-[calc(100dvh-3.5rem)] overflow-y-auto lg:h-screen">
           <div class="flex-1 p-4 md:p-8">
             {{template "content" .}}
           </div>
