diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index 060f9a7..a997d09 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -93,6 +93,9 @@
   /* Strong ease-in-out for on-screen movement */
   --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
 
+  /* iOS-like drawer curve (from Ionic Framework) */
+  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
+
   /* Global Scrollbar Colors */
   --scrollbar-track: transparent;
   --scrollbar-thumb: oklch(0.8 0 0);
diff --git a/apps/web/components/docs/header.tsx b/apps/web/components/docs/header.tsx
index 28057f4..52cbc8a 100644
--- a/apps/web/components/docs/header.tsx
+++ b/apps/web/components/docs/header.tsx
@@ -12,7 +12,6 @@ export const Header = () => (
       className="mx-auto flex h-14 w-full max-w-[1200px] items-center justify-between px-4 lg:px-14"
     >
       <div className="flex items-center gap-2">
-        <DocsMobileNav tree={source.getPageTree()} />
         <Link className="flex items-center gap-1.5 font-medium" href="/">
           <Logo aria-hidden="true" className="size-4" />
           Docker Doctor
@@ -23,6 +22,8 @@ export const Header = () => (
         <ChangelogButton />
         <DocsButton />
       </div>
+
+      <DocsMobileNav tree={source.getPageTree()} />
     </nav>
   </header>
 );
diff --git a/apps/web/components/docs/mobile-nav.tsx b/apps/web/components/docs/mobile-nav.tsx
index 278ed1f..0602047 100644
--- a/apps/web/components/docs/mobile-nav.tsx
+++ b/apps/web/components/docs/mobile-nav.tsx
@@ -57,7 +57,7 @@ export const DocsMobileNav = ({ tree }: DocsMobileNavProps) => {
         aria-controls="docs-mobile-menu"
         aria-haspopup="dialog"
         aria-label="Open documentation menu"
-        className="-ms-1 flex size-9 items-center justify-center rounded-lg text-muted-foreground hover:bg-muted/50 hover:text-foreground lg:hidden"
+        className="-me-1 flex size-9 items-center justify-center rounded-lg text-muted-foreground transition-transform duration-150 hover:bg-muted/50 hover:text-foreground active:scale-[0.97] lg:hidden"
         onClick={openMenu}
         type="button"
       >
@@ -66,7 +66,7 @@ export const DocsMobileNav = ({ tree }: DocsMobileNavProps) => {
 
       <dialog
         aria-label="Documentation"
-        className="fixed inset-y-0 left-0 z-50 m-0 h-dvh max-h-dvh w-[min(19rem,85vw)] max-w-none -translate-x-full border-dashed border-e bg-background text-foreground transition-[transform,overlay,display] transition-discrete duration-200 ease-[var(--ease-out)] backdrop:bg-black/40 open:translate-x-0 starting:open:-translate-x-full"
+        className="fixed inset-y-0 right-0 left-auto z-50 m-0 h-dvh max-h-dvh w-[min(19rem,85vw)] max-w-none translate-x-full border-dashed border-s bg-background text-foreground transition-[transform,overlay,display] transition-discrete duration-350 ease-[var(--ease-drawer)] backdrop:bg-black/40 backdrop:opacity-0 backdrop:transition-[opacity,overlay,display] backdrop:transition-discrete backdrop:duration-350 backdrop:ease-[var(--ease-drawer)] open:translate-x-0 open:backdrop:opacity-100 starting:open:translate-x-full starting:open:backdrop:opacity-0 motion-reduce:transition-none motion-reduce:backdrop:transition-none"
         id="docs-mobile-menu"
         onClose={() => {
           document.body.style.overflow = "";
@@ -84,7 +84,7 @@ export const DocsMobileNav = ({ tree }: DocsMobileNavProps) => {
             </Link>
             <button
               aria-label="Close menu"
-              className="-me-1 flex size-9 items-center justify-center rounded-lg text-muted-foreground hover:bg-muted/50 hover:text-foreground"
+              className="-me-1 flex size-9 items-center justify-center rounded-lg text-muted-foreground transition-transform duration-150 hover:bg-muted/50 hover:text-foreground active:scale-[0.97]"
               onClick={closeMenu}
               type="button"
             >