diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index eb32401b..e393da5f 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1382,6 +1382,27 @@
           <a href="/ledger" :class="{ 'nav-active': publicPage === 'ledger' }" @click.prevent="openPublicPage('ledger')">Ledger Logs</a>
         </nav>
 
+        <button
+          class="hamburger-button"
+          type="button"
+          :aria-label="mobileMenuOpen ? 'Close navigation' : 'Open navigation'"
+          :aria-expanded="mobileMenuOpen"
+          aria-controls="mobile-nav-panel"
+          @click="mobileMenuOpen = !mobileMenuOpen"
+        >
+          <Menu v-if="!mobileMenuOpen" :size="22" />
+          <X v-else :size="22" />
+        </button>
+
+        <div v-if="mobileMenuOpen" class="mobile-nav-overlay" aria-hidden="true" @click="mobileMenuOpen = false"></div>
+        <nav v-if="mobileMenuOpen" id="mobile-nav-panel" class="mobile-nav-panel" aria-label="Mobile navigation">
+          <a href="/product" :class="{ 'nav-active': publicPage === 'product' }" @click.prevent="mobileMenuOpen = false; openPublicPage('product')">Product <ChevronDown :size="13" /></a>
+          <a href="/solutions" :class="{ 'nav-active': publicPage === 'solutions' }" @click.prevent="mobileMenuOpen = false; openPublicPage('solutions')">Solutions <ChevronDown :size="13" /></a>
+          <a href="/marketplace" :class="{ 'nav-active': publicPage === 'marketplace' }" @click.prevent="mobileMenuOpen = false; openPublicPage('marketplace')">Marketplace</a>
+          <a href="/how-it-works" :class="{ 'nav-active': publicPage === 'how-it-works' }" @click.prevent="mobileMenuOpen = false; openPublicPage('how-it-works')">How it works</a>
+          <a href="/ledger" :class="{ 'nav-active': publicPage === 'ledger' }" @click.prevent="mobileMenuOpen = false; openPublicPage('ledger')">Ledger Logs</a>
+        </nav>
+
         <div class="nav-actions">
           <template v-if="user">
             <button class="secondary-button compact" type="button" @click="openDashboard">Dashboard</button>
@@ -2245,6 +2266,7 @@ import {
   Lock,
   LockKeyhole,
   Mail,
+  Menu,
   MessageCircle,
   MoreHorizontal,
   PenLine,
@@ -2380,6 +2402,7 @@ const authBusy = ref(false);
 const authRememberMe = ref(false);
 const authTermsAccepted = ref(true);
 const errorMessage = ref('');
+const mobileMenuOpen = ref(false);
 const showPassword = ref(false);
 const showConfirmPassword = ref(false);
 const toastMessage = ref('');
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index e30aa040..b23a616f 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -317,6 +317,74 @@ svg {
   padding: 8px 10px;
 }
 
+.hamburger-button {
+  display: none;
+  position: relative;
+  z-index: 55;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: #ffffff;
+  color: #111827;
+  padding: 0;
+  cursor: pointer;
+  flex: 0 0 auto;
+}
+
+.mobile-nav-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 45;
+  background: rgba(0, 0, 0, 0.32);
+  backdrop-filter: blur(4px);
+}
+
+.mobile-nav-panel {
+  display: none;
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 50;
+  width: min(300px, 80vw);
+  height: 100vh;
+  flex-direction: column;
+  gap: 4px;
+  border-left: 1px solid var(--line);
+  background: #ffffff;
+  box-shadow: -8px 0 32px rgba(15, 23, 42, 0.1);
+  padding: 72px 24px 24px;
+  overflow-y: auto;
+}
+
+.mobile-nav-panel a {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: #273244;
+  padding: 12px 14px;
+  font-size: 14px;
+  font-weight: 750;
+  text-decoration: none;
+  transition: background 160ms ease, color 160ms ease;
+}
+
+.mobile-nav-panel a:hover {
+  background: var(--soft);
+  color: var(--green-dark);
+}
+
+.mobile-nav-panel a.nav-active {
+  background: var(--green-soft);
+  color: var(--green-dark);
+}
+
 .dash-icon-button.light {
   border-color: var(--line);
   background: #ffffff;
@@ -6172,6 +6240,18 @@ svg {
     min-width: auto;
   }
 
+  .hamburger-button {
+    display: inline-flex;
+  }
+
+  .mobile-nav-overlay {
+    display: block;
+  }
+
+  .mobile-nav-panel {
+    display: flex;
+  }
+
   .hero-section {
     grid-template-columns: 1fr;
     padding-top: 38px;