diff --git a/default.hbs b/default.hbs
index 3876651..573e9e9 100644
--- a/default.hbs
+++ b/default.hbs
@@ -39,9 +39,11 @@
 
     {{ghost_head}}
 </head>
-<body class="{{body_class}} font-sans antialiased" hx-boost="true">
+<body class="{{body_class}} font-sans antialiased">
+    {{!-- Mobile menu stays outside the boosted area to persist state --}}
+    {{> mobile-menu}}
 
-    <div class="min-h-screen flex flex-col">
+    <div class="min-h-screen flex flex-col" hx-boost="true">
         {{> header}}
 
         <main class="flex-grow">
@@ -49,8 +51,6 @@
         </main>
 
         {{> footer}}
-
-        {{> mobile-menu}}
     </div>
 
     {{ghost_foot}}
diff --git a/partials/mobile-menu.hbs b/partials/mobile-menu.hbs
index 73f982c..3b48555 100644
--- a/partials/mobile-menu.hbs
+++ b/partials/mobile-menu.hbs
@@ -1,7 +1,14 @@
 <div id="mobile-menu" 
     x-show="$store.mobileMenu.open"
+    x-transition:enter="transition ease-out duration-300"
+    x-transition:enter-start="-translate-x-full"
+    x-transition:enter-end="translate-x-0"
+    x-transition:leave="transition ease-in duration-300"
+    x-transition:leave-start="translate-x-0"
+    x-transition:leave-end="-translate-x-full"
     class="fixed inset-0 z-50 bg-[var(--bg-primary)] flex flex-col md:hidden"
     @click.away="$store.mobileMenu.close()"
+    hx-boost="false"
     x-cloak>
     
     <!-- Mobile Menu Header -->
