diff --git a/default.hbs b/default.hbs
index 83fb1c8..87a268c 100644
--- a/default.hbs
+++ b/default.hbs
@@ -10,6 +10,11 @@
             });
             document.documentElement.setAttribute('data-theme', this.theme);
             document.documentElement.classList.remove('hidden');
+
+            // Close mobile menu on navigation
+            document.addEventListener('htmx:beforeRequest', () => {
+                this.mobileMenuOpen = false;
+            });
         }
     }"
     :data-theme="theme"
@@ -28,24 +33,23 @@
 
     {{ghost_head}}
 </head>
-<body class="{{body_class}} font-sans antialiased">
-    
-    {{!-- The Mobile Menu is outside the HTMX swap container to keep state alive --}}
+<body 
+    class="{{body_class}} font-sans antialiased min-h-screen flex flex-col"
+    hx-boost="true"
+    hx-target="#main-content"
+    hx-select="#main-content"
+    hx-swap="innerHTML show:top"
+>
+    {{!-- Mobile menu is outside the swap target and stays alive --}}
     {{> mobile-menu}}
 
-    {{!-- 
-        We target only this container for HTMX page swaps. 
-        This keeps root Alpine state (like mobileMenuOpen) persistent.
-    --}}
-    <div id="viewport" class="min-h-screen flex flex-col" hx-boost="true" hx-target="#viewport" hx-select="#viewport">
-        {{> header}}
+    {{> header}}
 
-        <main class="flex-grow">
-            {{{body}}}
-        </main>
+    <main id="main-content" class="flex-grow">
+        {{{body}}}
+    </main>
 
-        {{> footer}}
-    </div>
+    {{> footer}}
 
     {{ghost_foot}}
     <script src="{{asset "js/ghost-config.js"}}"></script>
