diff --git a/package.components.json b/package.components.json
index d231f5b9..51214f89 100644
--- a/package.components.json
+++ b/package.components.json
@@ -1,6 +1,6 @@
 {
   "name": "@umami/components",
-  "version": "0.128.0",
+  "version": "0.129.0",
   "description": "Umami React components.",
   "author": "Mike Cao <mike@mikecao.com>",
   "license": "MIT",
diff --git a/src/app/(main)/App.tsx b/src/app/(main)/App.tsx
index 16676523..32218d11 100644
--- a/src/app/(main)/App.tsx
+++ b/src/app/(main)/App.tsx
@@ -29,7 +29,12 @@ export function App({ children }) {
   }
 
   return (
-    <Grid columns={{ xs: '1fr', lg: 'auto 1fr' }} height="100vh" width="100%">
+    <Grid
+      columns={{ xs: '1fr', lg: 'auto 1fr' }}
+      rows={{ xs: 'auto 1fr', lg: '1fr' }}
+      height={{ xs: 'auto', lg: '100vh' }}
+      width="100%"
+    >
       <Row display={{ xs: 'flex', lg: 'none' }} alignItems="center" gap padding="3">
         <MobileNav />
       </Row>
diff --git a/src/app/(main)/MobileNav.tsx b/src/app/(main)/MobileNav.tsx
index 9e5565c0..32751f0e 100644
--- a/src/app/(main)/MobileNav.tsx
+++ b/src/app/(main)/MobileNav.tsx
@@ -16,6 +16,7 @@ import { useMessages, useNavigation } from '@/components/hooks';
 import Link from 'next/link';
 import { WebsiteNav } from '@/app/(main)/websites/[websiteId]/WebsiteNav';
 import { Logo } from '@/components/svg';
+import { NavButton } from '@/components/input/NavButton';
 
 export function MobileNav() {
   const { formatMessage, labels } = useMessages();
@@ -53,6 +54,7 @@ export function MobileNav() {
         <Modal position="left" offset="80px">
           <Dialog variant="sheet">
             <NavMenu padding="3">
+              <NavButton />
               {links.map(link => {
                 return (
                   <Link key={link.id} href={link.path}>