diff --git a/components/nav/mobile/footer.js b/components/nav/mobile/footer.js
index fdc76d02..67a60c96 100644
--- a/components/nav/mobile/footer.js
+++ b/components/nav/mobile/footer.js
@@ -47,7 +47,7 @@ export default function BottomBar ({ sub }) {
   }
 
   return (
-    <div className={classNames('d-block d-md-none', styles.footer)}>
+    <div className={classNames('d-block d-md-none', styles.footer, styles.footerPadding)}>
       <Navbar className='container px-0'>
         <Nav className={styles.footerNav}>
           <Offcanvas me={me} {...props} />
diff --git a/components/nav/mobile/footer.module.css b/components/nav/mobile/footer.module.css
index d35fbf62..879f66fb 100644
--- a/components/nav/mobile/footer.module.css
+++ b/components/nav/mobile/footer.module.css
@@ -6,6 +6,9 @@
     background-color: var(--bs-body-bg);
     border-top: 1px solid var(--theme-toolbarActive);
     z-index: 1000;
+}
+
+.footerPadding {
     padding-bottom: env(safe-area-inset-bottom);
 }
 
diff --git a/components/nav/mobile/offcanvas.js b/components/nav/mobile/offcanvas.js
index 908b2921..c539d166 100644
--- a/components/nav/mobile/offcanvas.js
+++ b/components/nav/mobile/offcanvas.js
@@ -6,6 +6,8 @@ import { useServiceWorker } from '@/components/serviceworker'
 import { signOut } from 'next-auth/react'
 import { LoginButtons, NavWalletSummary } from '../common'
 import AnonIcon from '@/svgs/spy-fill.svg'
+import styles from './footer.module.css'
+import classNames from 'classnames'
 
 export default function OffCanvas ({ me, dropNavKey }) {
   const [show, setShow] = useState(false)
@@ -94,16 +96,18 @@ export default function OffCanvas ({ me, dropNavKey }) {
                 </>
                 )
               : <LoginButtons />}
-            <Navbar className='container d-flex flex-row px-0 p-2 mt-auto text-muted'>
-              <Nav>
-                <Link href={`/${me?.name || 'anon'}`} className='d-flex flex-row p-2 mt-auto text-muted'>
-                  <MeImage />
-                  <div className='ms-2'>
-                    @{me?.name || 'anon'}
-                  </div>
-                </Link>
-              </Nav>
-            </Navbar>
+            <div className={classNames(styles.footerPadding, 'mt-auto')}>
+              <Navbar className={classNames('container d-flex flex-row px-0 text-muted')}>
+                <Nav>
+                  <Link href={`/${me?.name || 'anon'}`} className='d-flex flex-row p-2 mt-auto text-muted'>
+                    <MeImage />
+                    <div className='ms-2'>
+                      @{me?.name || 'anon'}
+                    </div>
+                  </Link>
+                </Nav>
+              </Navbar>
+            </div>
           </div>
         </Offcanvas.Body>
       </Offcanvas>