diff --git a/package.json b/package.json
index db28ef61..78ee9268 100644
--- a/package.json
+++ b/package.json
@@ -78,7 +78,7 @@
     "@react-spring/web": "^10.0.3",
     "@svgr/cli": "^8.1.0",
     "@tanstack/react-query": "^5.90.2",
-    "@umami/react-zen": "^0.195.0",
+    "@umami/react-zen": "^0.196.0",
     "@umami/redis-client": "^0.29.0",
     "bcryptjs": "^3.0.2",
     "chalk": "^5.6.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5b3d9103..f3bc7fb2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -45,8 +45,8 @@ importers:
         specifier: ^5.90.2
         version: 5.90.2(react@19.1.1)
       '@umami/react-zen':
-        specifier: ^0.195.0
-        version: 0.195.0(@babel/core@7.28.3)(@types/react@19.1.16)(babel-plugin-react-compiler@19.1.0-rc.2)(immer@10.1.3)(use-sync-external-store@1.6.0(react@19.1.1))
+        specifier: ^0.196.0
+        version: 0.196.0(@babel/core@7.28.3)(@types/react@19.1.16)(babel-plugin-react-compiler@19.1.0-rc.2)(immer@10.1.3)(use-sync-external-store@1.6.0(react@19.1.1))
       '@umami/redis-client':
         specifier: ^0.29.0
         version: 0.29.0
@@ -2756,8 +2756,8 @@ packages:
     resolution: {integrity: sha512-qsaFBA3e09MIDAGFUrTk+dzqtfv1XPVz8t8d1f0ybTzrCY7BKiMC5cjrl1O/P7UmHsNyW90EYSkU/ZWpmXelag==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@umami/react-zen@0.195.0':
-    resolution: {integrity: sha512-DI/o0AOwq6wfWEx+PgXFQ8xV0NJFP9xY1qd0+cv2Bme9Bho0U5+vxyFPkHawJyC7bfMDi3BgC7JHgTqeCqE99A==}
+  '@umami/react-zen@0.196.0':
+    resolution: {integrity: sha512-CLxrDAJOdo+0aJAclOq7naIDg+2I5wP9wXxAFhxhQVPXHV8yUHqH9Ula632cLMo51JYp0l+eEtOtuimpuKX3jg==}
 
   '@umami/redis-client@0.29.0':
     resolution: {integrity: sha512-Jaqh++jskqDB7ny75pfC02OvKp1JTS4asGDsFrRL3qy8sxL3PAl9+/mybCJe4/6vWrXDJKqpgkSfUDJq2bFjyw==}
@@ -10387,7 +10387,7 @@ snapshots:
       '@typescript-eslint/types': 8.45.0
       eslint-visitor-keys: 4.2.1
 
-  '@umami/react-zen@0.195.0(@babel/core@7.28.3)(@types/react@19.1.16)(babel-plugin-react-compiler@19.1.0-rc.2)(immer@10.1.3)(use-sync-external-store@1.6.0(react@19.1.1))':
+  '@umami/react-zen@0.196.0(@babel/core@7.28.3)(@types/react@19.1.16)(babel-plugin-react-compiler@19.1.0-rc.2)(immer@10.1.3)(use-sync-external-store@1.6.0(react@19.1.1))':
     dependencies:
       '@fontsource/jetbrains-mono': 5.2.8
       '@internationalized/date': 3.10.0
diff --git a/src/app/(main)/App.tsx b/src/app/(main)/App.tsx
index b32b2785..ee95850b 100644
--- a/src/app/(main)/App.tsx
+++ b/src/app/(main)/App.tsx
@@ -1,9 +1,10 @@
 'use client';
-import { Grid, Loading, Column, Row } from '@umami/react-zen';
+import { Grid, Loading, Column, Row, List, ListItem } from '@umami/react-zen';
 import Script from 'next/script';
 import { UpdateNotice } from './UpdateNotice';
 import { SideNav } from '@/app/(main)/SideNav';
 import { useLoginQuery, useConfig, useNavigation } from '@/components/hooks';
+import { MobileMenuButton } from '@/components/input/MobileMenuButton';
 
 export function App({ children }) {
   const { user, isLoading, error } = useLoginQuery();
@@ -29,7 +30,15 @@ export function App({ children }) {
 
   return (
     <Grid columns={{ xs: '1fr', lg: 'auto 1fr' }} height="100vh" width="100%" backgroundColor="2">
-      <Row display={{ xs: 'flex', lg: 'none' }} alignItems="center" gap></Row>
+      <Row display={{ xs: 'flex', lg: 'none' }} alignItems="center" gap padding>
+        <MobileMenuButton>
+          <List>
+            <ListItem>Websites</ListItem>
+            <ListItem>Links</ListItem>
+            <ListItem>Pixels</ListItem>
+          </List>
+        </MobileMenuButton>
+      </Row>
       <Column display={{ xs: 'none', lg: 'flex' }}>
         <SideNav />
       </Column>
diff --git a/src/components/common/PageHeader.tsx b/src/components/common/PageHeader.tsx
index 27d33a72..8905d0cd 100644
--- a/src/components/common/PageHeader.tsx
+++ b/src/components/common/PageHeader.tsx
@@ -37,7 +37,7 @@ export function PageHeader({
               {icon}
             </Icon>
           )}
-          {title && <Heading size="4">{title}</Heading>}
+          {title && <Heading size={{ xs: '2', md: '3', lg: '4' }}>{title}</Heading>}
         </Row>
         {description && (
           <Text color="muted" truncate style={{ maxWidth: 600 }} title={description}>
diff --git a/src/components/input/MobileMenuButton.tsx b/src/components/input/MobileMenuButton.tsx
new file mode 100644
index 00000000..8994922b
--- /dev/null
+++ b/src/components/input/MobileMenuButton.tsx
@@ -0,0 +1,18 @@
+import { Button, Icon, DialogTrigger, Dialog, Modal } from '@umami/react-zen';
+import { Menu } from '@/components/icons';
+import { ReactNode } from 'react';
+
+export function MobileMenuButton({ children }: { children: ReactNode }) {
+  return (
+    <DialogTrigger>
+      <Button>
+        <Icon>
+          <Menu />
+        </Icon>
+      </Button>
+      <Modal position="left" offset="20px">
+        <Dialog variant="sheet">{children}</Dialog>
+      </Modal>
+    </DialogTrigger>
+  );
+}