diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 94a12276..5860a8bf 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,4 +1,4 @@
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 import { Lora, Inter, Geist_Mono } from "next/font/google";
 import { Providers } from "./providers";
 import { NavBar } from "../components/NavBar";
@@ -29,6 +29,12 @@ const appDescription =
   "Tokenise your story from day 1. Publish plots, drive trading, earn royalties from every trade — powered by the market, not a platform.";
 const themeColor = "#E8DFD0";
 
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  viewportFit: "cover",
+};
+
 export const metadata: Metadata = {
   metadataBase: new URL(appUrl),
   title: appName,
diff --git a/src/components/MobileActionBar.tsx b/src/components/MobileActionBar.tsx
index d58fd69b..a32c16ad 100644
--- a/src/components/MobileActionBar.tsx
+++ b/src/components/MobileActionBar.tsx
@@ -33,7 +33,7 @@ export function MobileActionBar({
 
       {/* Bottom sheet */}
       {open && (
-        <div className="fixed inset-x-0 bottom-0 z-50 max-h-[80vh] overflow-y-auto rounded-t-lg border-t border-[var(--border)] bg-[var(--bg)] p-4">
+        <div className="fixed inset-x-0 bottom-0 z-50 max-h-[80vh] overflow-y-auto rounded-t-lg border-t border-[var(--border)] bg-[var(--bg)] p-4 pb-[calc(1rem+env(safe-area-inset-bottom))]">
           <div className="mb-3 flex items-center justify-between">
             <span className="text-foreground text-sm font-medium capitalize">
               {open}
diff --git a/src/components/ReadingMode.tsx b/src/components/ReadingMode.tsx
index d1257c7a..0178c935 100644
--- a/src/components/ReadingMode.tsx
+++ b/src/components/ReadingMode.tsx
@@ -115,7 +115,7 @@ export function ReadingMode({
 
       {/* Bottom navigation */}
       <nav
-        className="flex items-center justify-between px-4 py-3 sm:px-6"
+        className="flex items-center justify-between px-4 pt-3 pb-[calc(0.75rem+env(safe-area-inset-bottom))] sm:px-6"
         style={{ borderTop: "1px solid var(--border)" }}
       >
         {hasPrev ? (