diff --git a/frontend/src/ui/App.tsx b/frontend/src/ui/App.tsx
index 45b944e..17f2c5d 100644
--- a/frontend/src/ui/App.tsx
+++ b/frontend/src/ui/App.tsx
@@ -2,10 +2,11 @@
 
 import { Loader2 } from "lucide-react";
 import { useEffect, useState } from "react";
-import { openHome, readRoute, type AppRoute } from "@/application/route";
+import { readRoute, type AppRoute } from "@/application/route";
 import { BrandMark } from "@/ui/components/BrandMark";
 import { CanvasWorkspace } from "@/ui/pages/CanvasWorkspace";
 import { HomePage } from "@/ui/pages/HomePage";
+import { NotFoundPage } from "@/ui/pages/NotFoundPage";
 import { ProjectsRoutePage } from "@/ui/pages/ProjectsRoutePage";
 import { useAuth } from "@/ui/auth/AuthProvider";
 
@@ -45,127 +46,6 @@ export function App() {
   return <HomePage />;
 }
 
-function NotFoundPage() {
-  const handleHome = () => {
-    openHome();
-  };
-
-  return (
-    <main className="not-found-shell">
-      <section className="not-found-content">
-        <NotFoundMark />
-        <h1>404：页面未找到！</h1>
-        <p>我们到处都找过了，但找不到您要找的页面。</p>
-        <button type="button" onClick={handleHome}>
-          返回首页
-        </button>
-      </section>
-    </main>
-  );
-}
-
-function NotFoundMark() {
-  return (
-    <svg className="not-found-mark" xmlns="http://www.w3.org/2000/svg" width="279" height="128" fill="none" viewBox="0 0 279 128" aria-label="404">
-      <g clipPath="url(#missing_svg_a)">
-        <g filter="url(#missing_svg_b)">
-          <path stroke="#FFAE62" strokeLinecap="round" strokeOpacity="0.5" strokeWidth="20.671" d="M53 12v90" />
-        </g>
-        <g filter="url(#missing_svg_c)">
-          <path stroke="#FFAE62" strokeLinecap="round" strokeOpacity="0.5" strokeWidth="20.671" d="M53.5 11.5 14.843 60.29c-5.193 6.555-.525 16.21 7.838 16.21H74" />
-        </g>
-        <g filter="url(#missing_svg_d)">
-          <path stroke="#FFAE62" strokeLinecap="round" strokeOpacity="0.5" strokeWidth="20.671" d="M231 12v90" />
-        </g>
-        <g filter="url(#missing_svg_e)">
-          <path stroke="#FFAE62" strokeLinecap="round" strokeOpacity="0.5" strokeWidth="20.671" d="m231.5 11.5-38.657 48.79c-5.193 6.555-.525 16.21 7.838 16.21H252" />
-        </g>
-        <g filter="url(#missing_svg_f)">
-          <circle cx="231.089" cy="101.089" r="6.291" stroke="#fff" strokeWidth="3.595" />
-        </g>
-        <circle cx="231.089" cy="101.089" r="7.19" stroke="#fff" strokeWidth="1.798" />
-        <g filter="url(#missing_svg_g)">
-          <path fill="#2F3640" d="m231.748 101.191 16.029 1.702c.874.093 1.188 1.204.492 1.741l-5.784 4.455a.97.97 0 0 0-.344.511l-1.954 7.034c-.235.847-1.383.974-1.798.199l-7.604-14.214a.974.974 0 0 1 .963-1.428" />
-          <path stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="0.723" d="m231.748 101.191 16.029 1.702c.874.093 1.188 1.204.492 1.741l-5.784 4.455a.97.97 0 0 0-.344.511l-1.954 7.034c-.235.847-1.383.974-1.798.199l-7.604-14.214a.974.974 0 0 1 .963-1.428" />
-        </g>
-        <g filter="url(#missing_svg_h)">
-          <ellipse cx="131.5" cy="57" stroke="#FFAE62" strokeLinecap="round" strokeOpacity="0.5" strokeWidth="20.671" rx="29.5" ry="40" />
-        </g>
-      </g>
-      <defs>
-        <filter id="missing_svg_b" width="20.672" height="110.672" x="42.664" y="1.664" colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse">
-          <feFlood floodOpacity="0" result="BackgroundImageFix" />
-          <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
-          <feOffset />
-          <feGaussianBlur stdDeviation="4.494" />
-          <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic" />
-          <feColorMatrix values="0 0 0 0 0.623529 0 0 0 0 0.458824 0 0 0 0 0.309804 0 0 0 0.2 0" />
-          <feBlend in2="shape" result="innerShadow" />
-        </filter>
-        <filter id="missing_svg_c" width="82.027" height="85.672" x="2.309" y="1.164" colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse">
-          <feFlood floodOpacity="0" result="BackgroundImageFix" />
-          <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
-          <feOffset />
-          <feGaussianBlur stdDeviation="4.494" />
-          <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic" />
-          <feColorMatrix values="0 0 0 0 0.623529 0 0 0 0 0.458824 0 0 0 0 0.309804 0 0 0 0.2 0" />
-          <feBlend in2="shape" result="innerShadow" />
-        </filter>
-        <filter id="missing_svg_d" width="20.672" height="110.672" x="220.664" y="1.664" colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse">
-          <feFlood floodOpacity="0" result="BackgroundImageFix" />
-          <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
-          <feOffset />
-          <feGaussianBlur stdDeviation="4.494" />
-          <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic" />
-          <feColorMatrix values="0 0 0 0 0.623529 0 0 0 0 0.458824 0 0 0 0 0.309804 0 0 0 0.2 0" />
-          <feBlend in2="shape" result="innerShadow" />
-        </filter>
-        <filter id="missing_svg_e" width="82.027" height="85.672" x="180.309" y="1.164" colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse">
-          <feFlood floodOpacity="0" result="BackgroundImageFix" />
-          <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
-          <feOffset />
-          <feGaussianBlur stdDeviation="4.494" />
-          <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic" />
-          <feColorMatrix values="0 0 0 0 0.623529 0 0 0 0 0.458824 0 0 0 0 0.309804 0 0 0 0.2 0" />
-          <feBlend in2="shape" result="innerShadow" />
-        </filter>
-        <filter id="missing_svg_f" width="26.601" height="26.603" x="217.787" y="87.787" colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse">
-          <feFlood floodOpacity="0" result="BackgroundImageFix" />
-          <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-          <feGaussianBlur result="foregroundBlur" stdDeviation="2.606" />
-        </filter>
-        <filter id="missing_svg_g" width="30.279" height="28.458" x="224.519" y="100.822" colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse">
-          <feFlood floodOpacity="0" result="BackgroundImageFix" />
-          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
-          <feOffset dy="5.786" />
-          <feGaussianBlur stdDeviation="2.893" />
-          <feComposite in2="hardAlpha" operator="out" />
-          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
-          <feBlend in2="BackgroundImageFix" result="dropShadow" />
-          <feBlend in="SourceGraphic" in2="dropShadow" result="shape" />
-        </filter>
-        <filter id="missing_svg_h" width="79.672" height="100.672" x="91.664" y="6.664" colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse">
-          <feFlood floodOpacity="0" result="BackgroundImageFix" />
-          <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
-          <feOffset />
-          <feGaussianBlur stdDeviation="4.494" />
-          <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic" />
-          <feColorMatrix values="0 0 0 0 0.623529 0 0 0 0 0.458824 0 0 0 0 0.309804 0 0 0 0.2 0" />
-          <feBlend in2="shape" result="innerShadow" />
-        </filter>
-        <clipPath id="missing_svg_a">
-          <path fill="#fff" d="M0 0h279v128H0z" />
-        </clipPath>
-      </defs>
-    </svg>
-  );
-}
-
 function ProjectAuthPreview() {
   return (
     <div className="project-auth-shell" aria-hidden="true">
diff --git a/frontend/src/ui/pages/NotFoundPage/index.css b/frontend/src/ui/pages/NotFoundPage/index.css
new file mode 100644
index 0000000..1c45099
--- /dev/null
+++ b/frontend/src/ui/pages/NotFoundPage/index.css
@@ -0,0 +1,83 @@
+.not-found-shell {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 24px;
+  color: #101827;
+  background: #fff;
+}
+
+.not-found-content {
+  width: min(520px, 100%);
+  display: grid;
+  justify-items: center;
+  text-align: center;
+}
+
+.not-found-mark {
+  width: min(280px, 72vw);
+  height: auto;
+  margin-bottom: 57px;
+}
+
+.not-found-content h1 {
+  margin: 0;
+  color: #111827;
+  font-size: 32px;
+  line-height: 1.25;
+  font-weight: 800;
+  letter-spacing: 0;
+}
+
+.not-found-content p {
+  margin: 16px 0 32px;
+  color: #6b7280;
+  font-size: 14px;
+  line-height: 1.5;
+  font-weight: 500;
+}
+
+.not-found-content button {
+  min-width: 128px;
+  height: 42px;
+  padding: 0 26px;
+  border-radius: 12px;
+  color: #fff;
+  background: #030303;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1;
+  transition: transform 0.16s ease, background 0.16s ease;
+}
+
+.not-found-content button:hover {
+  background: #171717;
+  transform: translateY(-1px);
+}
+
+@media (max-width: 760px) {
+  .not-found-shell {
+    padding: 44px 22px;
+  }
+
+  .not-found-mark {
+    margin-bottom: 44px;
+  }
+
+  .not-found-content h1 {
+    font-size: 28px;
+  }
+
+  .not-found-content p {
+    margin: 14px 0 28px;
+    font-size: 14px;
+  }
+
+  .not-found-content button {
+    min-width: 120px;
+    height: 40px;
+    border-radius: 12px;
+    font-size: 15px;
+  }
+}
diff --git a/frontend/src/ui/pages/NotFoundPage/index.tsx b/frontend/src/ui/pages/NotFoundPage/index.tsx
new file mode 100644
index 0000000..232c03c
--- /dev/null
+++ b/frontend/src/ui/pages/NotFoundPage/index.tsx
@@ -0,0 +1,123 @@
+"use client";
+
+import { openHome } from "@/application/route";
+import { useI18n } from "@/i18n/i18n";
+
+export function NotFoundPage() {
+  const { t } = useI18n();
+
+  return (
+    <main className="not-found-shell">
+      <section className="not-found-content">
+        <NotFoundMark label={t("notFoundIllustration")} />
+        <h1>{t("notFoundTitle")}</h1>
+        <p>{t("notFoundDescription")}</p>
+        <button type="button" onClick={openHome}>
+          {t("backHome")}
+        </button>
+      </section>
+    </main>
+  );
+}
+
+function NotFoundMark({ label }: { label: string }) {
+  return (
+    <svg className="not-found-mark" xmlns="http://www.w3.org/2000/svg" width="279" height="128" fill="none" viewBox="0 0 279 128" aria-label={label}>
+      <g clipPath="url(#missing_svg_a)">
+        <g filter="url(#missing_svg_b)">
+          <path stroke="#FFAE62" strokeLinecap="round" strokeOpacity="0.5" strokeWidth="20.671" d="M53 12v90" />
+        </g>
+        <g filter="url(#missing_svg_c)">
+          <path stroke="#FFAE62" strokeLinecap="round" strokeOpacity="0.5" strokeWidth="20.671" d="M53.5 11.5 14.843 60.29c-5.193 6.555-.525 16.21 7.838 16.21H74" />
+        </g>
+        <g filter="url(#missing_svg_d)">
+          <path stroke="#FFAE62" strokeLinecap="round" strokeOpacity="0.5" strokeWidth="20.671" d="M231 12v90" />
+        </g>
+        <g filter="url(#missing_svg_e)">
+          <path stroke="#FFAE62" strokeLinecap="round" strokeOpacity="0.5" strokeWidth="20.671" d="m231.5 11.5-38.657 48.79c-5.193 6.555-.525 16.21 7.838 16.21H252" />
+        </g>
+        <g filter="url(#missing_svg_f)">
+          <circle cx="231.089" cy="101.089" r="6.291" stroke="#fff" strokeWidth="3.595" />
+        </g>
+        <circle cx="231.089" cy="101.089" r="7.19" stroke="#fff" strokeWidth="1.798" />
+        <g filter="url(#missing_svg_g)">
+          <path fill="#2F3640" d="m231.748 101.191 16.029 1.702c.874.093 1.188 1.204.492 1.741l-5.784 4.455a.97.97 0 0 0-.344.511l-1.954 7.034c-.235.847-1.383.974-1.798.199l-7.604-14.214a.974.974 0 0 1 .963-1.428" />
+          <path stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="0.723" d="m231.748 101.191 16.029 1.702c.874.093 1.188 1.204.492 1.741l-5.784 4.455a.97.97 0 0 0-.344.511l-1.954 7.034c-.235.847-1.383.974-1.798.199l-7.604-14.214a.974.974 0 0 1 .963-1.428" />
+        </g>
+        <g filter="url(#missing_svg_h)">
+          <ellipse cx="131.5" cy="57" stroke="#FFAE62" strokeLinecap="round" strokeOpacity="0.5" strokeWidth="20.671" rx="29.5" ry="40" />
+        </g>
+      </g>
+      <defs>
+        <filter id="missing_svg_b" width="20.672" height="110.672" x="42.664" y="1.664" colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse">
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset />
+          <feGaussianBlur stdDeviation="4.494" />
+          <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic" />
+          <feColorMatrix values="0 0 0 0 0.623529 0 0 0 0 0.458824 0 0 0 0 0.309804 0 0 0 0.2 0" />
+          <feBlend in2="shape" result="innerShadow" />
+        </filter>
+        <filter id="missing_svg_c" width="82.027" height="85.672" x="2.309" y="1.164" colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse">
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset />
+          <feGaussianBlur stdDeviation="4.494" />
+          <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic" />
+          <feColorMatrix values="0 0 0 0 0.623529 0 0 0 0 0.458824 0 0 0 0 0.309804 0 0 0 0.2 0" />
+          <feBlend in2="shape" result="innerShadow" />
+        </filter>
+        <filter id="missing_svg_d" width="20.672" height="110.672" x="220.664" y="1.664" colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse">
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset />
+          <feGaussianBlur stdDeviation="4.494" />
+          <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic" />
+          <feColorMatrix values="0 0 0 0 0.623529 0 0 0 0 0.458824 0 0 0 0 0.309804 0 0 0 0.2 0" />
+          <feBlend in2="shape" result="innerShadow" />
+        </filter>
+        <filter id="missing_svg_e" width="82.027" height="85.672" x="180.309" y="1.164" colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse">
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset />
+          <feGaussianBlur stdDeviation="4.494" />
+          <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic" />
+          <feColorMatrix values="0 0 0 0 0.623529 0 0 0 0 0.458824 0 0 0 0 0.309804 0 0 0 0.2 0" />
+          <feBlend in2="shape" result="innerShadow" />
+        </filter>
+        <filter id="missing_svg_f" width="26.601" height="26.603" x="217.787" y="87.787" colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse">
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+          <feGaussianBlur result="foregroundBlur" stdDeviation="2.606" />
+        </filter>
+        <filter id="missing_svg_g" width="30.279" height="28.458" x="224.519" y="100.822" colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse">
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="5.786" />
+          <feGaussianBlur stdDeviation="2.893" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
+          <feBlend in2="BackgroundImageFix" result="dropShadow" />
+          <feBlend in="SourceGraphic" in2="dropShadow" result="shape" />
+        </filter>
+        <filter id="missing_svg_h" width="79.672" height="100.672" x="91.664" y="6.664" colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse">
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset />
+          <feGaussianBlur stdDeviation="4.494" />
+          <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic" />
+          <feColorMatrix values="0 0 0 0 0.623529 0 0 0 0 0.458824 0 0 0 0 0.309804 0 0 0 0.2 0" />
+          <feBlend in2="shape" result="innerShadow" />
+        </filter>
+        <clipPath id="missing_svg_a">
+          <path fill="#fff" d="M0 0h279v128H0z" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/frontend/src/ui/styles.css b/frontend/src/ui/styles.css
index bbce2b6..fff5d98 100644
--- a/frontend/src/ui/styles.css
+++ b/frontend/src/ui/styles.css
@@ -1,6 +1,7 @@
 @import "./components/ProjectThumb/index.css";
 @import "./components/ProjectCard/index.css";
 @import "./pages/ProjectsPage/index.css";
+@import "./pages/NotFoundPage/index.css";
 @import "./components/DeleteProjectDialog/index.css";
 @import "./components/AccountManagementDialog/index.css";
 @import "./components/WorkspaceTitle/index.css";
@@ -889,64 +890,6 @@ button:disabled {
   font-weight: 800;
 }
 
-.not-found-shell {
-  min-height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 48px 24px;
-  color: #101827;
-  background: #fff;
-}
-
-.not-found-content {
-  width: min(520px, 100%);
-  display: grid;
-  justify-items: center;
-  text-align: center;
-}
-
-.not-found-mark {
-  width: min(280px, 72vw);
-  height: auto;
-  margin-bottom: 57px;
-}
-
-.not-found-content h1 {
-  margin: 0;
-  color: #111827;
-  font-size: 32px;
-  line-height: 1.25;
-  font-weight: 800;
-  letter-spacing: 0;
-}
-
-.not-found-content p {
-  margin: 16px 0 32px;
-  color: #6b7280;
-  font-size: 14px;
-  line-height: 1.5;
-  font-weight: 500;
-}
-
-.not-found-content button {
-  min-width: 128px;
-  height: 42px;
-  padding: 0 26px;
-  border-radius: 12px;
-  color: #fff;
-  background: #030303;
-  font-size: 16px;
-  font-weight: 700;
-  line-height: 1;
-  transition: transform 0.16s ease, background 0.16s ease;
-}
-
-.not-found-content button:hover {
-  background: #171717;
-  transform: translateY(-1px);
-}
-
 .project-auth-shell {
   width: 100vw;
   height: 100vh;
@@ -1215,29 +1158,6 @@ button:disabled {
     display: none;
   }
 
-  .not-found-shell {
-    padding: 44px 22px;
-  }
-
-  .not-found-mark {
-    margin-bottom: 44px;
-  }
-
-  .not-found-content h1 {
-    font-size: 28px;
-  }
-
-  .not-found-content p {
-    margin: 14px 0 28px;
-    font-size: 14px;
-  }
-
-  .not-found-content button {
-    min-width: 120px;
-    height: 40px;
-    border-radius: 12px;
-    font-size: 15px;
-  }
 }
 
 .workspace-shell {