diff --git a/src/app/sw.ts b/src/app/sw.ts
index ddb9afc5..e35c1510 100644
--- a/src/app/sw.ts
+++ b/src/app/sw.ts
@@ -17,9 +17,9 @@
  *   - clientsClaim: true    新 SW 立即接管所有打开的 client
  *   - navigationPreload:    用 preload API 加速文档请求（资源请求 SW 完成前先发）
  *
- * Offline fallback：`/~offline` 路由（next.config.ts Serwist 配置里也登记了
- * `additionalPrecacheEntries`，双保险）。注意本项目目前**没实现**这个路由，
- * 真要落地需要新增 src/app/~/offline/page.tsx —— 未做。
+ * Offline fallback：`/~offline` 路由（serwist route handler 里也登记了
+ * `additionalPrecacheEntries`，双保险）。对应页面：
+ * `src/app/~offline/page.tsx`。
  */
 import { defaultCache } from "@serwist/turbopack/worker";
 import type { PrecacheEntry, SerwistGlobalConfig } from "serwist";
@@ -51,4 +51,4 @@ const serwist = new Serwist({
   },
 });
 
-serwist.addEventListeners();
\ No newline at end of file
+serwist.addEventListeners();
diff --git a/src/app/~offline/page.tsx b/src/app/~offline/page.tsx
new file mode 100644
index 00000000..cf412b6b
--- /dev/null
+++ b/src/app/~offline/page.tsx
@@ -0,0 +1,84 @@
+import Link from "next/link";
+
+import { ROUTES } from "@/router/routes";
+
+export default function OfflinePage() {
+  return (
+    <main
+      style={{
+        minHeight: "100dvh",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "2rem",
+        background:
+          "radial-gradient(circle at 20% 20%, rgba(246, 87, 160, 0.18), transparent 32%), #fcf3f4",
+      }}
+    >
+      <section
+        style={{
+          width: "min(100%, 420px)",
+          border: "1px solid rgba(246, 87, 160, 0.18)",
+          borderRadius: "28px",
+          padding: "2rem",
+          background: "rgba(255, 255, 255, 0.86)",
+          boxShadow: "0 18px 48px rgba(246, 87, 160, 0.16)",
+          textAlign: "center",
+        }}
+      >
+        <p
+          style={{
+            margin: "0 0 0.5rem",
+            color: "#f657a0",
+            fontSize: "0.875rem",
+            fontWeight: 700,
+            letterSpacing: "0.08em",
+            textTransform: "uppercase",
+          }}
+        >
+          Offline
+        </p>
+        <h1
+          style={{
+            margin: 0,
+            color: "#1e1e1e",
+            fontSize: "2rem",
+            lineHeight: 1.1,
+          }}
+        >
+          You are offline
+        </h1>
+        <p
+          style={{
+            margin: "1rem 0 1.5rem",
+            color: "#6b5b62",
+            fontSize: "1rem",
+            lineHeight: 1.6,
+          }}
+        >
+          Check your connection, then return to CozSweet when the network is
+          available again.
+        </p>
+        <Link
+          href={ROUTES.splash}
+          style={{
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            minHeight: "44px",
+            padding: "0 1.25rem",
+            borderRadius: "999px",
+            background: "linear-gradient(135deg, #ff67e0, #f657a0)",
+            color: "#fff",
+            fontSize: "0.95rem",
+            fontWeight: 700,
+            textDecoration: "none",
+            boxShadow: "0 10px 22px rgba(246, 87, 160, 0.28)",
+          }}
+        >
+          Back to start
+        </Link>
+      </section>
+    </main>
+  );
+}