diff --git a/deno.lock b/deno.lock
index 585ac98..236c493 100644
--- a/deno.lock
+++ b/deno.lock
@@ -4582,6 +4582,7 @@
         "npm:@tanstack/solid-router@^1.170.15",
         "npm:@tanstack/solid-start@^1.168.25",
         "npm:@vite-pwa/assets-generator@^1.0.2",
+        "npm:@yeungkc/unocss-preset-safe-area@^0.0.11",
         "npm:class-variance-authority@~0.7.1",
         "npm:kysely@~0.29.2",
         "npm:motion@^12.40.0",
diff --git a/package.json b/package.json
index 419d78f..9dea34a 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
       "@tanstack/solid-router": "^1.170.15",
       "@tanstack/solid-start": "^1.168.25",
       "@vite-pwa/assets-generator": "^1.0.2",
+      "@yeungkc/unocss-preset-safe-area": "^0.0.11",
       "class-variance-authority": "^0.7.1",
       "kysely": "^0.29.2",
       "motion": "^12.40.0",
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index c0eae83..9afb6c4 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -20,7 +20,7 @@ export const Route = createFileRoute("/")({
     });
 
     return (
-      <div class="flex min-h-dvh flex-col gap-4 overflow-x-hidden bg-pink-50">
+      <div class="pt+safe-1 flex min-h-dvh flex-col gap-4 overflow-x-hidden bg-pink-50">
         <AppHeader onSelectedDateChanged={setSelectedDate} />
 
         <Show when={daysUntilToday() === 0}>
diff --git a/uno.config.ts b/uno.config.ts
index 970c8d6..dcceed9 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -1,8 +1,10 @@
-import { defineConfig, presetIcons, presetWind4 } from "unocss";
+import { presetSafeArea } from "@yeungkc/unocss-preset-safe-area";
+import { defineConfig, Preset, presetIcons, presetWind4 } from "unocss";
 
 export default defineConfig({
   presets: [
     presetWind4(),
+    presetSafeArea() as Preset,
     presetIcons({
       collections: {
         solar: () => import("@iconify-json/solar/icons.json", { with: { type: "json" } }).then((p) => p.default),