diff --git a/index.html b/index.html
index 1f2bd47..b68e7ca 100644
--- a/index.html
+++ b/index.html
@@ -5,8 +5,9 @@
   <meta charset="UTF-8" />
   <link rel="icon" type="image/png" href="/favicon.png" />
   <link rel="apple-touch-icon" href="/favicon.png" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <meta name="theme-color" content="#0F6CBD" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+  <meta name="theme-color" content="#faf9f8" media="(prefers-color-scheme: light)" />
+  <meta name="theme-color" content="#1c1c1c" media="(prefers-color-scheme: dark)" />
 </head>
 
 <body>
diff --git a/src/components/site-header.tsx b/src/components/site-header.tsx
index 35b405e..8c05e16 100644
--- a/src/components/site-header.tsx
+++ b/src/components/site-header.tsx
@@ -35,11 +35,16 @@ export function SiteHeader() {
 
   return (
     <header
-      className={`fl-acrylic sticky top-0 z-40 transition-all no-print ${
-        scrolled ? 'shadow-[0_1px_0_var(--fl-stroke)]' : ''
-      }`}
+      className="sticky top-0 z-40 no-print"
+      style={{ paddingTop: 'env(safe-area-inset-top)' }}
     >
-      <div className="mx-auto max-w-[1180px] px-5 md:px-8 h-14 flex items-center justify-between gap-4">
+      <div
+        aria-hidden
+        className={`fl-acrylic absolute inset-0 pointer-events-none transition-shadow ${
+          scrolled ? 'shadow-[0_1px_0_var(--fl-stroke)]' : ''
+        }`}
+      />
+      <div className="relative mx-auto max-w-[1180px] px-5 md:px-8 h-14 flex items-center justify-between gap-4">
         <a href="/" data-route className="flex items-center gap-2.5">
           <div
             className="grid h-8 w-8 place-items-center rounded-md text-[12px] font-semibold tracking-tight"
diff --git a/src/lib/hooks.ts b/src/lib/hooks.ts
index 3cd2b68..b8d1f8b 100644
--- a/src/lib/hooks.ts
+++ b/src/lib/hooks.ts
@@ -18,6 +18,13 @@ export function useTheme(): [Theme, (next: Theme) => void, () => void] {
     root.classList.toggle('dark', theme === 'dark')
     root.style.colorScheme = theme
     window.localStorage.setItem(THEME_KEY, theme)
+
+    const color = theme === 'dark' ? '#1c1c1c' : '#faf9f8'
+    document
+      .querySelectorAll<HTMLMetaElement>('meta[name="theme-color"]')
+      .forEach((m) => {
+        m.setAttribute('content', color)
+      })
   }, [theme])
 
   const toggle = () => setTheme((t) => (t === 'dark' ? 'light' : 'dark'))
