diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4658f0f..8b51d95 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.1.21
+
+- Use the official HQBase logo for the signed-out screen, favicon, and installed PWA icons.
+- Refine sidebar and dropdown controls with slimmer icons and clearer account-section separation.
+- Keep the mobile drawer within iPhone safe areas and prevent form fields from zooming on focus.
+
 ## 0.1.20
 
 - Hide the available-update banner and duplicate install action after Cloudflare accepts the update
diff --git a/app/components/layout/account-menu.tsx b/app/components/layout/account-menu.tsx
index 09f6589..30a6e59 100644
--- a/app/components/layout/account-menu.tsx
+++ b/app/components/layout/account-menu.tsx
@@ -1,4 +1,4 @@
-import { ChevronsUpDown, LogOut } from "lucide-react";
+import { ChevronDown, LogOut } from "lucide-react";
 import type * as React from "react";
 
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
@@ -53,7 +53,11 @@ export function AccountMenu({
             <span className="block truncate text-[13px] text-foreground">{user.name}</span>
             <span className="block truncate text-[11px] text-muted-foreground">{user.role}</span>
           </span>
-          <ChevronsUpDown aria-hidden="true" />
+          <ChevronDown
+            aria-hidden="true"
+            className="size-3.5 text-muted-foreground"
+            strokeWidth={1.5}
+          />
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="start" className="w-52" side="top">
@@ -64,8 +68,8 @@ export function AccountMenu({
           </div>
         </DropdownMenuLabel>
         <DropdownMenuGroup>
-          <DropdownMenuItem onSelect={() => void handleSignOut()}>
-            <LogOut />
+          <DropdownMenuItem className="gap-2" onSelect={() => void handleSignOut()}>
+            <LogOut className="size-4" strokeWidth={1.5} />
             Sign out
           </DropdownMenuItem>
         </DropdownMenuGroup>
diff --git a/app/components/layout/app-shell.tsx b/app/components/layout/app-shell.tsx
index 6ab3cb2..25ff3e7 100644
--- a/app/components/layout/app-shell.tsx
+++ b/app/components/layout/app-shell.tsx
@@ -28,7 +28,7 @@ type AppShellProps = {
 
 export function AppShell(props: AppShellProps): React.ReactElement {
   return (
-    <div className="flex h-screen overflow-hidden bg-background text-foreground">
+    <div className="flex h-screen h-[100dvh] overflow-hidden bg-background text-foreground">
       <Sidebar
         activeFolder={props.activeFolder}
         user={props.user}
diff --git a/app/components/layout/mobile-navigation.tsx b/app/components/layout/mobile-navigation.tsx
index f94575f..292725a 100644
--- a/app/components/layout/mobile-navigation.tsx
+++ b/app/components/layout/mobile-navigation.tsx
@@ -50,6 +50,7 @@ export function MobileNavigation({
         <SheetContent
           aria-describedby={undefined}
           className="w-[min(86vw,18rem)] p-0"
+          overlayClassName="before:pointer-events-none before:fixed before:inset-x-0 before:top-0 before:h-[env(safe-area-inset-top)] before:bg-background after:pointer-events-none after:fixed after:inset-x-0 after:bottom-0 after:h-[env(safe-area-inset-bottom)] after:bg-background"
           ref={drawerRef}
           side="left"
           onOpenAutoFocus={(event) => {
diff --git a/app/components/layout/sidebar.tsx b/app/components/layout/sidebar.tsx
index 54464f8..9d5b69d 100644
--- a/app/components/layout/sidebar.tsx
+++ b/app/components/layout/sidebar.tsx
@@ -41,8 +41,10 @@ export function Sidebar({
   return (
     <aside
       className={cn(
-        "w-56 shrink-0 flex-col bg-background p-3",
-        isDrawer ? "flex h-full w-full" : "hidden border-r md:flex"
+        "w-56 shrink-0 flex-col bg-background px-3 py-3",
+        isDrawer
+          ? "flex h-full w-full pb-[max(0.75rem,env(safe-area-inset-bottom))] pt-[max(0.75rem,env(safe-area-inset-top))]"
+          : "hidden border-r md:flex"
       )}
     >
       <div className="mb-7 flex h-9 items-center gap-2.5 px-2">
@@ -79,31 +81,35 @@ export function Sidebar({
             </Button>
           );
         })}
-        <div className="mt-auto flex flex-col gap-0.5 border-t pt-2">
-          {isDrawer && drawerAction ? drawerAction : null}
-          <Button
-            asChild
-            className={cn(
-              "h-8 w-full justify-start gap-2.5 px-2.5 text-[13px] font-normal text-muted-foreground",
-              isDrawer && "h-11 text-sm",
-              activeFolder === "settings" && "bg-muted text-foreground"
-            )}
-            variant="ghost"
-          >
-            <a
-              aria-current={activeFolder === "settings" ? "page" : undefined}
-              href={appRoutePath({ kind: "settings", tab: "mailboxes" })}
-              onClick={(event) => {
-                if (isModifiedNavigation(event)) return;
-                event.preventDefault();
-                onFolderChange("settings");
-              }}
+        <div className="mt-auto">
+          <div className="flex flex-col gap-0.5 border-t pt-2">
+            {isDrawer && drawerAction ? drawerAction : null}
+            <Button
+              asChild
+              className={cn(
+                "h-8 w-full justify-start gap-2.5 px-2.5 text-[13px] font-normal text-muted-foreground",
+                isDrawer && "h-11 text-sm",
+                activeFolder === "settings" && "bg-muted text-foreground"
+              )}
+              variant="ghost"
             >
-              <Settings />
-              Settings
-            </a>
-          </Button>
-          <AccountMenu drawer={isDrawer} user={user} onSignedOut={onSignedOut} />
+              <a
+                aria-current={activeFolder === "settings" ? "page" : undefined}
+                href={appRoutePath({ kind: "settings", tab: "mailboxes" })}
+                onClick={(event) => {
+                  if (isModifiedNavigation(event)) return;
+                  event.preventDefault();
+                  onFolderChange("settings");
+                }}
+              >
+                <Settings />
+                Settings
+              </a>
+            </Button>
+          </div>
+          <div className="mt-2 border-t pt-2">
+            <AccountMenu drawer={isDrawer} user={user} onSignedOut={onSignedOut} />
+          </div>
         </div>
       </nav>
     </aside>
diff --git a/app/components/ui/select.tsx b/app/components/ui/select.tsx
index cee2157..8a02711 100644
--- a/app/components/ui/select.tsx
+++ b/app/components/ui/select.tsx
@@ -24,7 +24,7 @@ export const SelectTrigger = React.forwardRef<
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <ChevronDown />
+      <ChevronDown className="size-3.5 shrink-0 text-muted-foreground" strokeWidth={1.5} />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ));
@@ -56,7 +56,7 @@ export const SelectItem = React.forwardRef<
   >
     <span className="absolute left-2 flex size-3.5 items-center justify-center">
       <SelectPrimitive.ItemIndicator>
-        <Check />
+        <Check className="size-3.5" strokeWidth={1.5} />
       </SelectPrimitive.ItemIndicator>
     </span>
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
diff --git a/app/components/ui/sheet.tsx b/app/components/ui/sheet.tsx
index 5378b43..7ab1364 100644
--- a/app/components/ui/sheet.tsx
+++ b/app/components/ui/sheet.tsx
@@ -12,15 +12,21 @@ export const SheetTitle = DialogPrimitive.Title;
 export const SheetDescription = DialogPrimitive.Description;
 
 type SheetContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+  overlayClassName?: string;
   side?: "left" | "right";
 };
 
 export const SheetContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   SheetContentProps
->(({ className, children, side = "right", ...props }, ref) => (
+>(({ className, children, overlayClassName, side = "right", ...props }, ref) => (
   <SheetPortal>
-    <DialogPrimitive.Overlay className="fixed inset-0 z-50 bg-foreground/25 data-[state=closed]:animate-overlay-out data-[state=open]:animate-overlay-in motion-reduce:animate-none" />
+    <DialogPrimitive.Overlay
+      className={cn(
+        "fixed inset-0 z-50 bg-foreground/25 data-[state=closed]:animate-overlay-out data-[state=open]:animate-overlay-in motion-reduce:animate-none",
+        overlayClassName
+      )}
+    />
     <DialogPrimitive.Content
       className={cn(
         "fixed inset-y-0 z-50 w-[min(92vw,480px)] bg-background p-5 shadow-lg motion-reduce:animate-none",
diff --git a/app/features/auth/login-page.tsx b/app/features/auth/login-page.tsx
index 4f61c11..afdba95 100644
--- a/app/features/auth/login-page.tsx
+++ b/app/features/auth/login-page.tsx
@@ -35,9 +35,7 @@ export function LoginPage({ onLogin }: LoginPageProps): React.ReactElement {
     <main className="flex min-h-screen items-center justify-center bg-background px-4 py-12">
       <div className="w-full max-w-sm">
         <div className="mb-10 flex items-center justify-center gap-2">
-          <span className="flex size-6 items-center justify-center rounded-md border bg-card font-mono text-[10px] font-semibold">
-            HQ
-          </span>
+          <img alt="" className="h-7 w-auto" src="/logo.svg" />
           <span className="text-sm font-medium">HQBase</span>
         </div>
         <Card className="bg-card/70 shadow-none">
diff --git a/app/styles.css b/app/styles.css
index 48f5dce..8dbc75d 100644
--- a/app/styles.css
+++ b/app/styles.css
@@ -75,6 +75,10 @@
     --radius: 0.5rem;
   }
 
+  html {
+    background-color: hsl(var(--background));
+  }
+
   * {
     @apply border-border;
   }
@@ -82,8 +86,22 @@
   body {
     @apply bg-background text-foreground antialiased;
     min-width: 320px;
+    min-height: 100dvh;
+    overscroll-behavior: none;
     font-feature-settings:
       "rlig" 1,
       "calt" 1;
   }
+
+  #root {
+    min-height: 100dvh;
+  }
+}
+
+@media (max-width: 767px) {
+  input:not([type="checkbox"]):not([type="radio"]),
+  textarea[class],
+  [contenteditable="true"][class] {
+    font-size: 16px;
+  }
 }
diff --git a/index.html b/index.html
index d75874b..111debb 100644
--- a/index.html
+++ b/index.html
@@ -2,17 +2,20 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover, interactive-widget=resizes-content"
+    />
     <meta name="description" content="HQBase shared webmail for your Cloudflare account." />
-    <meta name="theme-color" content="#09090b" />
+    <meta name="theme-color" content="#080808" />
     <meta name="color-scheme" content="dark" />
     <meta name="application-name" content="HQBase" />
     <meta name="mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-title" content="HQBase" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
     <link rel="manifest" href="/manifest.webmanifest" />
-    <link rel="icon" href="/icons/icon-192.png" type="image/png" />
+    <link rel="icon" href="/logo.svg" type="image/svg+xml" />
     <link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" />
     <link rel="preload" href="/fonts/Geist-Regular.woff2" as="font" type="font/woff2" crossorigin />
     <title>HQBase</title>
diff --git a/package.json b/package.json
index fd2847c..a88c01e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hqbase",
-  "version": "0.1.20",
+  "version": "0.1.21",
   "private": true,
   "type": "module",
   "packageManager": "pnpm@11.7.0",
@@ -29,6 +29,7 @@
     "test:e2e:staging": "playwright test --config playwright.config.ts app-shell-smoke.spec.ts lifecycle.spec.ts",
     "test:e2e:staging:smoke": "playwright test --config playwright.config.ts app-shell-smoke.spec.ts",
     "test:e2e:staging:lifecycle": "playwright test --config playwright.config.ts lifecycle.spec.ts",
+    "pwa:icons": "node scripts/generate-pwa-icons.mjs",
     "check": "pnpm code:check && pnpm typecheck && pnpm test && pnpm test:coverage && pnpm test:architecture && pnpm build",
     "deploy:dry-run": "pnpm build && wrangler deploy --dry-run",
     "hqbase": "node scripts/hqbase/cli.mjs",
diff --git a/public/icons/apple-touch-icon.png b/public/icons/apple-touch-icon.png
index 52d425d..d8d41fd 100644
Binary files a/public/icons/apple-touch-icon.png and b/public/icons/apple-touch-icon.png differ
diff --git a/public/icons/icon-192.png b/public/icons/icon-192.png
index 2f8fe24..be27126 100644
Binary files a/public/icons/icon-192.png and b/public/icons/icon-192.png differ
diff --git a/public/icons/icon-512.png b/public/icons/icon-512.png
index 8569bcd..58726f1 100644
Binary files a/public/icons/icon-512.png and b/public/icons/icon-512.png differ
diff --git a/public/icons/icon-maskable-512.png b/public/icons/icon-maskable-512.png
index 81a225f..dbf63d8 100644
Binary files a/public/icons/icon-maskable-512.png and b/public/icons/icon-maskable-512.png differ
diff --git a/public/manifest.webmanifest b/public/manifest.webmanifest
index 19a2f64..d57bf1a 100644
--- a/public/manifest.webmanifest
+++ b/public/manifest.webmanifest
@@ -6,8 +6,8 @@
   "start_url": "/",
   "scope": "/",
   "display": "standalone",
-  "background_color": "#09090b",
-  "theme_color": "#09090b",
+  "background_color": "#080808",
+  "theme_color": "#080808",
   "categories": ["business", "productivity", "utilities"],
   "icons": [
     {
diff --git a/public/offline.html b/public/offline.html
index 5d2b27f..74291fa 100644
--- a/public/offline.html
+++ b/public/offline.html
@@ -2,15 +2,18 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="theme-color" content="#09090b" />
-    <link rel="icon" href="/icons/icon-192.png" type="image/png" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
+    />
+    <meta name="theme-color" content="#080808" />
+    <link rel="icon" href="/logo.svg" type="image/svg+xml" />
     <title>HQBase is offline</title>
     <style>
       :root {
         color-scheme: dark;
         font-family: Geist, ui-sans-serif, system-ui, sans-serif;
-        background: #09090b;
+        background: #080808;
         color: #fafafa;
       }
       body {
@@ -47,7 +50,7 @@
         border-radius: 6px;
         padding: 0 18px;
         background: #fafafa;
-        color: #09090b;
+        color: #080808;
         font: inherit;
         font-weight: 600;
         cursor: pointer;
diff --git a/scripts/generate-pwa-icons.mjs b/scripts/generate-pwa-icons.mjs
new file mode 100644
index 0000000..ee0b896
--- /dev/null
+++ b/scripts/generate-pwa-icons.mjs
@@ -0,0 +1,53 @@
+import { readFile } from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { chromium } from "@playwright/test";
+
+const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
+const logo = await readFile(path.join(root, "public/logo.svg"), "utf8");
+const browser = await chromium.launch({ headless: true });
+
+try {
+  for (const icon of [
+    { file: "icon-512.png", logoWidth: 380, size: 512 },
+    { file: "icon-192.png", logoWidth: 143, size: 192 },
+    { file: "apple-touch-icon.png", logoWidth: 134, size: 180 },
+    { file: "icon-maskable-512.png", logoWidth: 330, size: 512 }
+  ]) {
+    const page = await browser.newPage({
+      deviceScaleFactor: 1,
+      viewport: { height: icon.size, width: icon.size }
+    });
+
+    await page.setContent(
+      `<!doctype html>
+      <style>
+        html, body {
+          width: 100%;
+          height: 100%;
+          margin: 0;
+          overflow: hidden;
+          background: #080808;
+        }
+        body {
+          display: grid;
+          place-items: center;
+        }
+        svg {
+          display: block;
+          width: ${icon.logoWidth}px;
+          height: auto;
+        }
+      </style>
+      ${logo}`,
+      { waitUntil: "load" }
+    );
+    await page.screenshot({
+      path: path.join(root, "public/icons", icon.file),
+      type: "png"
+    });
+    await page.close();
+  }
+} finally {
+  await browser.close();
+}
diff --git a/scripts/pwa/app-icon.svg b/scripts/pwa/app-icon.svg
deleted file mode 100644
index df64bc6..0000000
--- a/scripts/pwa/app-icon.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg width="198" height="129" viewBox="0 0 198 129" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <title>HQBase</title>
-  <ellipse cx="101" cy="83" rx="91" ry="27" transform="rotate(-8 101 83)" stroke="#FF9300" stroke-width="10" />
-  <path d="M40.1599 84.4498C38.2654 86.1499 35.8972 87 33.0555 87C30.1408 87 27.7363 86.1499 25.8418 84.4498C23.9473 82.7497 23 80.6246 23 78.0744V9.02367C23 6.40812 23.9473 4.25028 25.8418 2.55017C27.7363 0.850057 30.1408 0 33.0555 0C35.8972 0 38.2654 0.850057 40.1599 2.55017C42.0544 4.25028 43.0016 6.40812 43.0016 9.02367V25.1094C47.3007 23.2785 52.0005 22.363 57.1011 22.363C63.2219 22.363 68.7597 23.54 73.7145 25.894C78.7422 28.248 82.7499 31.7463 85.7374 36.389C88.5791 40.9008 90 46.2954 90 52.5727V78.0744C90 80.5592 89.0163 82.6516 87.0489 84.3517C85.1544 86.1172 82.8227 87 80.0538 87C77.2121 87 74.8075 86.1172 72.8401 84.3517C70.9456 82.6516 69.9984 80.5592 69.9984 78.0744V52.5727C69.9984 49.434 69.4154 46.982 68.2496 45.2165C67.0837 43.5163 65.5536 42.2413 63.659 41.3912C61.5459 40.4104 59.0685 39.92 56.2268 39.92C53.5307 39.92 51.1262 40.3777 49.013 41.2931C47.1185 42.1432 45.5884 43.2548 44.4225 44.628C43.4753 45.9357 43.0016 47.407 43.0016 49.0417V78.0744C43.0016 80.6246 42.0544 82.7497 40.1599 84.4498Z" fill="#FF4F00" />
-  <path d="M163.023 107.562C161.038 109.187 158.649 110 155.855 110C153.061 110 150.672 109.187 148.687 107.562C146.702 105.871 145.71 103.693 145.71 101.027V83.7635C145.342 83.9585 145.012 84.1211 144.718 84.2511C139.866 86.5269 134.499 87.6648 128.618 87.6648C121.854 87.6648 115.79 86.2343 110.423 83.3733C105.056 80.5123 100.793 76.6435 97.6314 71.7668C94.5438 66.8901 93 61.4282 93 55.3812C93 49.2691 94.6173 43.7421 97.852 38.8004C101.013 33.9238 105.35 30.0874 110.864 27.2915C116.451 24.4305 122.663 23 129.5 23C136.263 23 142.402 24.398 147.915 27.1939C153.429 29.9899 157.766 33.8262 160.927 38.7029C164.162 43.5146 165.853 48.9114 166 54.8935V101.027C166 103.693 165.008 105.871 163.023 107.562ZM121.119 68.5482C123.545 69.8487 126.339 70.4989 129.5 70.4989C132.661 70.4989 135.455 69.8487 137.881 68.5482C140.38 67.3128 142.328 65.5572 143.725 63.2814C145.195 60.9406 145.931 58.3072 145.931 55.3812C145.931 52.3901 145.195 49.7567 143.725 47.4809C142.328 45.2052 140.38 43.417 137.881 42.1166C135.455 40.8161 132.661 40.1659 129.5 40.1659C126.412 40.1659 123.619 40.8161 121.119 42.1166C118.62 43.417 116.635 45.2052 115.165 47.4809C113.694 49.7567 112.959 52.3901 112.959 55.3812C112.959 58.3072 113.694 60.9081 115.165 63.1839C116.635 65.4596 118.62 67.2478 121.119 68.5482Z" fill="#FF4F00" />
-</svg>
diff --git a/test/unit/app/layout/mail-shell.test.tsx b/test/unit/app/layout/mail-shell.test.tsx
index c3974e1..07fee63 100644
--- a/test/unit/app/layout/mail-shell.test.tsx
+++ b/test/unit/app/layout/mail-shell.test.tsx
@@ -3,6 +3,7 @@ import { describe, expect, it } from "vitest";
 import { MobileNavigation } from "@/components/layout/mobile-navigation";
 import { Sidebar } from "@/components/layout/sidebar";
 import { TopBar } from "@/components/layout/top-bar";
+import { LoginPage } from "@/features/auth/login-page";
 import { ComposeWindow } from "@/features/compose/compose-window";
 import { InboxPage } from "@/features/inbox/inbox-page";
 import { McpConnectionDetails } from "@/features/mcp/connection-dialog";
@@ -61,10 +62,19 @@ describe("mail shell", () => {
     expect(html).toContain("Open profile menu");
     expect(html).toContain("OB");
     expect(html.indexOf("Settings")).toBeLessThan(html.indexOf("Open profile menu"));
+    expect(html.match(/border-t pt-2/g)).toHaveLength(2);
+    expect(html).toContain('stroke-width="1.5"');
     expect(html).not.toContain(">HQ<");
     expect(html).not.toContain(">Mail</div>");
   });
 
+  it("uses the canonical logo on the signed-out surface", () => {
+    const html = renderToStaticMarkup(<LoginPage onLogin={() => undefined} />);
+
+    expect(html).toContain('src="/logo.svg"');
+    expect(html).not.toContain(">HQ</span>");
+  });
+
   it("uses a labelled hamburger trigger instead of a mobile folder select", () => {
     const html = renderToStaticMarkup(
       <MobileNavigation
@@ -100,6 +110,7 @@ describe("mail shell", () => {
     expect(html).toContain('aria-current="page"');
     expect(html).toContain("Connect MCP");
     expect(html.indexOf("Settings")).toBeLessThan(html.indexOf("Open profile menu"));
+    expect(html.match(/border-t pt-2/g)).toHaveLength(2);
   });
 
   it("combines the compact folder label and conversation count in one list header", () => {
diff --git a/test/unit/app/layout/mobile-shell.test.ts b/test/unit/app/layout/mobile-shell.test.ts
new file mode 100644
index 0000000..aaa759d
--- /dev/null
+++ b/test/unit/app/layout/mobile-shell.test.ts
@@ -0,0 +1,32 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+const appShell = readFileSync(
+  new URL("../../../../app/components/layout/app-shell.tsx", import.meta.url),
+  "utf8"
+);
+const mobileNavigation = readFileSync(
+  new URL("../../../../app/components/layout/mobile-navigation.tsx", import.meta.url),
+  "utf8"
+);
+const sidebar = readFileSync(
+  new URL("../../../../app/components/layout/sidebar.tsx", import.meta.url),
+  "utf8"
+);
+const styles = readFileSync(new URL("../../../../app/styles.css", import.meta.url), "utf8");
+
+describe("mobile application shell", () => {
+  it("uses dynamic viewport and sidebar-colored safe areas", () => {
+    expect(appShell).toContain("h-[100dvh]");
+    expect(mobileNavigation).toContain("safe-area-inset-top");
+    expect(mobileNavigation).toContain("safe-area-inset-bottom");
+    expect(sidebar).toContain("safe-area-inset-top");
+    expect(sidebar).toContain("safe-area-inset-bottom");
+  });
+
+  it("keeps editable field text large enough to avoid iOS focus zoom", () => {
+    expect(styles).toContain("@media (max-width: 767px)");
+    expect(styles).toContain('[contenteditable="true"][class]');
+    expect(styles).toContain("font-size: 16px");
+  });
+});
diff --git a/test/unit/app/ui/select.test.ts b/test/unit/app/ui/select.test.ts
index f8715bc..f8d0ff9 100644
--- a/test/unit/app/ui/select.test.ts
+++ b/test/unit/app/ui/select.test.ts
@@ -11,4 +11,9 @@ describe("select", () => {
     expect(source).toContain("relative z-[60]");
     expect(source).toContain("className={cn(selectContentClasses, className)}");
   });
+
+  it("uses restrained Lucide indicators", () => {
+    expect(source).toContain('className="size-3.5 shrink-0 text-muted-foreground"');
+    expect(source.match(/strokeWidth=\{1\.5\}/g)).toHaveLength(2);
+  });
 });
diff --git a/test/unit/scripts/pwa-build.test.mjs b/test/unit/scripts/pwa-build.test.mjs
index 6ac0ba0..9b023cf 100644
--- a/test/unit/scripts/pwa-build.test.mjs
+++ b/test/unit/scripts/pwa-build.test.mjs
@@ -13,16 +13,20 @@ describe("PWA build contract", () => {
     const manifest = JSON.parse(await readFile("public/manifest.webmanifest", "utf8"));
     expect(() => validateManifest(manifest)).not.toThrow();
     expect(manifest.name).toBe("HQBase");
-    expect(manifest.theme_color).toBe("#09090b");
+    expect(manifest.theme_color).toBe("#080808");
   });
 
   it("keeps lifecycle metadata revalidated and hashed assets immutable", async () => {
-    const [html, headers] = await Promise.all([
+    const [html, headers, iconGenerator] = await Promise.all([
       readFile("index.html", "utf8"),
-      readFile("public/_headers", "utf8")
+      readFile("public/_headers", "utf8"),
+      readFile("scripts/generate-pwa-icons.mjs", "utf8")
     ]);
     expect(html).toContain('rel="manifest" href="/manifest.webmanifest"');
+    expect(html).toContain('rel="icon" href="/logo.svg" type="image/svg+xml"');
     expect(html).toContain('rel="apple-touch-icon"');
+    expect(html).toContain("viewport-fit=cover");
+    expect(iconGenerator).toContain('readFile(path.join(root, "public/logo.svg"), "utf8")');
     expect(headers).toMatch(/\/service-worker\.js[\s\S]*no-cache, no-store, must-revalidate/);
     expect(headers).toMatch(/\/assets\/\*[\s\S]*max-age=31536000, immutable/);
   });