diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index 53f49c95..2ff47cca 100644
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -2,15 +2,22 @@ import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { HomePage } from "./pages/home-page";
 import { LoginPage } from "./pages/login-page";
 import { ToolPage } from "./pages/tool-page";
+import { AutomatePage } from "./pages/automate-page";
+import { FullscreenGridPage } from "./pages/fullscreen-grid-page";
+import { KeyboardShortcutProvider } from "./components/common/keyboard-shortcut-provider";
 
 export function App() {
   return (
     <BrowserRouter>
-      <Routes>
-        <Route path="/login" element={<LoginPage />} />
-        <Route path="/:toolId" element={<ToolPage />} />
-        <Route path="/" element={<HomePage />} />
-      </Routes>
+      <KeyboardShortcutProvider>
+        <Routes>
+          <Route path="/login" element={<LoginPage />} />
+          <Route path="/automate" element={<AutomatePage />} />
+          <Route path="/fullscreen" element={<FullscreenGridPage />} />
+          <Route path="/:toolId" element={<ToolPage />} />
+          <Route path="/" element={<HomePage />} />
+        </Routes>
+      </KeyboardShortcutProvider>
     </BrowserRouter>
   );
 }
diff --git a/apps/web/src/components/layout/app-layout.tsx b/apps/web/src/components/layout/app-layout.tsx
index 57740a94..a8c16583 100644
--- a/apps/web/src/components/layout/app-layout.tsx
+++ b/apps/web/src/components/layout/app-layout.tsx
@@ -1,8 +1,20 @@
 import { useState } from "react";
+import { Link } from "react-router-dom";
+import {
+  LayoutGrid,
+  Workflow,
+  FolderOpen,
+  Settings as SettingsIcon,
+  Menu,
+  X,
+} from "lucide-react";
 import { Sidebar } from "./sidebar";
 import { ToolPanel } from "./tool-panel";
 import { Footer } from "./footer";
 import { Dropzone } from "../common/dropzone";
+import { SettingsDialog } from "../settings/settings-dialog";
+import { useMobile } from "@/hooks/use-mobile";
+import { cn } from "@/lib/utils";
 
 interface AppLayoutProps {
   children?: React.ReactNode;
@@ -10,21 +22,125 @@ interface AppLayoutProps {
 }
 
 export function AppLayout({ children, showToolPanel = true }: AppLayoutProps) {
-  const [_settingsOpen, setSettingsOpen] = useState(false);
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
+  const isMobile = useMobile();
 
   return (
     <div className="flex h-screen bg-background text-foreground overflow-hidden">
-      <Sidebar onSettingsClick={() => setSettingsOpen(true)} />
-      {showToolPanel && <ToolPanel />}
-      <main className="flex-1 flex flex-col overflow-hidden">
+      {/* Desktop sidebar */}
+      {!isMobile && (
+        <Sidebar onSettingsClick={() => setSettingsOpen(true)} />
+      )}
+
+      {/* Mobile sidebar overlay */}
+      {isMobile && mobileSidebarOpen && (
+        <>
+          <div
+            className="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm"
+            onClick={() => setMobileSidebarOpen(false)}
+          />
+          <div className="fixed inset-y-0 left-0 z-50 w-64 bg-background border-r border-border shadow-xl animate-in slide-in-from-left">
+            <div className="flex items-center justify-between p-3 border-b border-border">
+              <span className="text-sm font-bold text-foreground">
+                Stirling <span className="text-primary">Image</span>
+              </span>
+              <button
+                onClick={() => setMobileSidebarOpen(false)}
+                className="p-1.5 rounded-lg hover:bg-muted"
+              >
+                <X className="h-4 w-4" />
+              </button>
+            </div>
+            <div onClick={() => setMobileSidebarOpen(false)}>
+              <Sidebar
+                onSettingsClick={() => {
+                  setMobileSidebarOpen(false);
+                  setSettingsOpen(true);
+                }}
+                expanded
+              />
+            </div>
+          </div>
+        </>
+      )}
+
+      {/* Mobile top bar */}
+      {isMobile && (
+        <div className="fixed top-0 left-0 right-0 z-30 bg-background/95 backdrop-blur-sm border-b border-border px-3 py-2 flex items-center gap-3">
+          <button
+            onClick={() => setMobileSidebarOpen(true)}
+            className="p-1.5 rounded-lg hover:bg-muted"
+          >
+            <Menu className="h-5 w-5" />
+          </button>
+          <span className="text-sm font-bold text-foreground">
+            Stirling <span className="text-primary">Image</span>
+          </span>
+        </div>
+      )}
+
+      {showToolPanel && !isMobile && <ToolPanel />}
+
+      <main
+        className={cn(
+          "flex-1 flex flex-col overflow-hidden",
+          isMobile && "pt-12 pb-16"
+        )}
+      >
         <div className="flex-1 overflow-y-auto p-6 flex items-center justify-center">
           {children || <Dropzone />}
         </div>
-        <div className="text-center text-xs text-muted-foreground py-2 border-t border-border">
-          Privacy Policy
-        </div>
+        {!isMobile && (
+          <div className="text-center text-xs text-muted-foreground py-2 border-t border-border">
+            Privacy Policy
+          </div>
+        )}
       </main>
-      <Footer />
+
+      {!isMobile && <Footer />}
+
+      {/* Mobile bottom nav */}
+      {isMobile && (
+        <nav className="fixed bottom-0 left-0 right-0 z-30 bg-background/95 backdrop-blur-sm border-t border-border flex items-center justify-around px-2 py-1.5">
+          <MobileNavItem icon={LayoutGrid} label="Tools" href="/" />
+          <MobileNavItem icon={Workflow} label="Automate" href="/automate" />
+          <MobileNavItem icon={FolderOpen} label="Files" href="/files" />
+          <button
+            onClick={() => setSettingsOpen(true)}
+            className="flex flex-col items-center gap-0.5 px-3 py-1 text-muted-foreground"
+          >
+            <SettingsIcon className="h-5 w-5" />
+            <span className="text-[10px]">Settings</span>
+          </button>
+        </nav>
+      )}
+
+      {/* Settings dialog */}
+      <SettingsDialog
+        open={settingsOpen}
+        onClose={() => setSettingsOpen(false)}
+      />
     </div>
   );
 }
+
+function MobileNavItem({
+  icon: Icon,
+  label,
+  href,
+}: {
+  icon: React.ComponentType<{ className?: string }>;
+  label: string;
+  href: string;
+}) {
+  return (
+    <Link
+      to={href}
+      className="flex flex-col items-center gap-0.5 px-3 py-1 text-muted-foreground hover:text-foreground transition-colors"
+    >
+      <Icon className="h-5 w-5" />
+      <span className="text-[10px]">{label}</span>
+    </Link>
+  );
+}
diff --git a/apps/web/src/components/layout/sidebar.tsx b/apps/web/src/components/layout/sidebar.tsx
index 6e0a4bac..f5721633 100644
--- a/apps/web/src/components/layout/sidebar.tsx
+++ b/apps/web/src/components/layout/sidebar.tsx
@@ -7,6 +7,7 @@ import {
   FolderOpen,
   HelpCircle,
   Settings,
+  Grid3x3,
 } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 
@@ -18,7 +19,7 @@ interface SidebarItem {
 
 const topItems: SidebarItem[] = [
   { icon: LayoutGrid, label: "Tools", href: "/" },
-  { icon: BookOpen, label: "Reader", href: "/reader" },
+  { icon: Grid3x3, label: "Grid", href: "/fullscreen" },
   { icon: Workflow, label: "Automate", href: "/automate" },
   { icon: FolderOpen, label: "Files", href: "/files" },
 ];
@@ -30,13 +31,27 @@ const bottomItems: SidebarItem[] = [
 
 interface SidebarProps {
   onSettingsClick: () => void;
+  /** When true, renders in expanded mode (for mobile overlay). */
+  expanded?: boolean;
 }
 
-export function Sidebar({ onSettingsClick }: SidebarProps) {
+export function Sidebar({ onSettingsClick, expanded = false }: SidebarProps) {
   const location = useLocation();
 
   const renderItem = (item: SidebarItem, isActive: boolean) => {
-    const content = (
+    const content = expanded ? (
+      <div
+        className={cn(
+          "flex items-center gap-3 px-4 py-2.5 rounded-lg cursor-pointer transition-colors",
+          isActive
+            ? "bg-primary text-primary-foreground"
+            : "text-muted-foreground hover:bg-muted hover:text-foreground"
+        )}
+      >
+        <item.icon className="h-5 w-5" />
+        <span className="text-sm font-medium">{item.label}</span>
+      </div>
+    ) : (
       <div
         className={cn(
           "flex flex-col items-center gap-1 p-2 rounded-lg cursor-pointer transition-colors",
@@ -64,6 +79,18 @@ export function Sidebar({ onSettingsClick }: SidebarProps) {
     );
   };
 
+  if (expanded) {
+    return (
+      <div className="flex flex-col p-3 gap-1">
+        {topItems.map((item) =>
+          renderItem(item, location.pathname === item.href)
+        )}
+        <div className="border-t border-border my-2" />
+        {bottomItems.map((item) => renderItem(item, false))}
+      </div>
+    );
+  }
+
   return (
     <aside className="flex flex-col items-center w-16 bg-sidebar border-r border-border py-3 gap-1 shrink-0">
       <div className="flex flex-col gap-1 flex-1">
diff --git a/apps/web/src/hooks/use-mobile.ts b/apps/web/src/hooks/use-mobile.ts
new file mode 100644
index 00000000..6cd01113
--- /dev/null
+++ b/apps/web/src/hooks/use-mobile.ts
@@ -0,0 +1,22 @@
+import { useState, useEffect } from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+/**
+ * Returns true when the viewport width is below the mobile breakpoint (768px).
+ */
+export function useMobile(): boolean {
+  const [isMobile, setIsMobile] = useState(() =>
+    typeof window !== "undefined" ? window.innerWidth < MOBILE_BREAKPOINT : false
+  );
+
+  useEffect(() => {
+    const mq = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches);
+    mq.addEventListener("change", handler);
+    setIsMobile(mq.matches);
+    return () => mq.removeEventListener("change", handler);
+  }, []);
+
+  return isMobile;
+}
diff --git a/apps/web/src/pages/tool-page.tsx b/apps/web/src/pages/tool-page.tsx
index a783afe6..8e559ace 100644
--- a/apps/web/src/pages/tool-page.tsx
+++ b/apps/web/src/pages/tool-page.tsx
@@ -1,10 +1,11 @@
 import { useParams } from "react-router-dom";
-import { useMemo, useCallback } from "react";
+import { useMemo, useCallback, useState } from "react";
 import { TOOLS } from "@stirling-image/shared";
 import { AppLayout } from "@/components/layout/app-layout";
 import { Dropzone } from "@/components/common/dropzone";
 import { BeforeAfterSlider } from "@/components/common/before-after-slider";
 import { useFileStore } from "@/stores/file-store";
+import { useMobile } from "@/hooks/use-mobile";
 import { ResizeSettings } from "@/components/tools/resize-settings";
 import { CropSettings } from "@/components/tools/crop-settings";
 import { RotateSettings } from "@/components/tools/rotate-settings";
@@ -46,6 +47,7 @@ import { BlurFacesSettings } from "@/components/tools/blur-faces-settings";
 import { EraseObjectSettings } from "@/components/tools/erase-object-settings";
 import { SmartCropSettings } from "@/components/tools/smart-crop-settings";
 import * as icons from "lucide-react";
+import { cn } from "@/lib/utils";
 
 const COLOR_TOOL_IDS = new Set([
   "brightness-contrast",
@@ -111,6 +113,8 @@ export function ToolPage() {
   const { toolId } = useParams<{ toolId: string }>();
   const tool = useMemo(() => TOOLS.find((t) => t.id === toolId), [toolId]);
   const { files, setFiles, reset, processedUrl, originalBlobUrl, originalSize, processedSize } = useFileStore();
+  const isMobile = useMobile();
+  const [mobileSettingsOpen, setMobileSettingsOpen] = useState(true);
 
   const handleFiles = useCallback(
     (newFiles: File[]) => {
@@ -141,6 +145,84 @@ export function ToolPage() {
   const hasFile = files.length > 0;
   const isNoDropzone = NO_DROPZONE_TOOLS.has(tool.id);
 
+  // Mobile layout: settings above dropzone (stacked)
+  if (isMobile) {
+    return (
+      <AppLayout showToolPanel={false}>
+        <div className="flex flex-col w-full h-full">
+          {/* Tool header */}
+          <div className="flex items-center gap-3 p-4 border-b border-border shrink-0">
+            <div className="p-2 rounded-lg bg-primary text-primary-foreground">
+              <IconComponent className="h-5 w-5" />
+            </div>
+            <h2 className="font-semibold text-lg text-foreground flex-1">
+              {tool.name}
+            </h2>
+            <button
+              onClick={() => setMobileSettingsOpen(!mobileSettingsOpen)}
+              className="px-3 py-1.5 rounded-lg border border-border text-xs text-muted-foreground hover:bg-muted"
+            >
+              {mobileSettingsOpen ? "Hide Settings" : "Settings"}
+            </button>
+          </div>
+
+          {/* Collapsible settings */}
+          {mobileSettingsOpen && (
+            <div className="p-4 border-b border-border space-y-3 shrink-0 max-h-[40vh] overflow-y-auto">
+              {/* File info */}
+              {!isNoDropzone && hasFile && (
+                <div className="space-y-1">
+                  {files.map((f, i) => (
+                    <div
+                      key={i}
+                      className="flex items-center justify-between text-xs text-foreground bg-muted rounded px-2 py-1"
+                    >
+                      <span className="truncate">{f.name}</span>
+                      <span className="text-muted-foreground shrink-0 ml-2">
+                        {(f.size / 1024).toFixed(0)} KB
+                      </span>
+                    </div>
+                  ))}
+                  <button
+                    onClick={() => reset()}
+                    className="text-xs text-muted-foreground hover:text-foreground"
+                  >
+                    Clear
+                  </button>
+                </div>
+              )}
+              <ToolSettingsPanel toolId={tool.id} />
+            </div>
+          )}
+
+          {/* Dropzone / Preview */}
+          <div className="flex-1 flex items-center justify-center p-4">
+            {isNoDropzone ? (
+              <div className="text-center text-muted-foreground">
+                <p className="text-sm">Configure settings and generate.</p>
+              </div>
+            ) : processedUrl && originalBlobUrl ? (
+              <BeforeAfterSlider
+                beforeSrc={originalBlobUrl}
+                afterSrc={processedUrl}
+                beforeSize={originalSize ?? undefined}
+                afterSize={processedSize ?? undefined}
+              />
+            ) : (
+              <Dropzone
+                onFiles={handleFiles}
+                accept="image/*"
+                multiple
+                currentFiles={files}
+              />
+            )}
+          </div>
+        </div>
+      </AppLayout>
+    );
+  }
+
+  // Desktop layout: side-by-side
   return (
     <AppLayout showToolPanel={false}>
       <div className="flex h-full w-full">