diff --git a/src/app/(legacy)/layout.tsx b/src/app/(legacy)/layout.tsx
index 7fbebd9..48f613f 100644
--- a/src/app/(legacy)/layout.tsx
+++ b/src/app/(legacy)/layout.tsx
@@ -1 +1,5 @@
-export { default, metadata, viewport } from "@/components/layout/site-document";
+import { SiteShell } from "@/components/layout/site-shell";
+
+export default function LegacyLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+  return <SiteShell locale="zh-Hans">{children}</SiteShell>;
+}
diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
index 490d8c0..a1fccf3 100644
--- a/src/app/[locale]/layout.tsx
+++ b/src/app/[locale]/layout.tsx
@@ -1,8 +1,7 @@
 import { notFound } from "next/navigation";
-import SiteDocument from "@/components/layout/site-document";
+import { SiteShell } from "@/components/layout/site-shell";
 import { getLocaleMessages, locales, matchLocale } from "@/lib/i18n";
 
-export { viewport } from "@/components/layout/site-document";
 export const dynamicParams = false;
 
 export function generateStaticParams() {
@@ -39,5 +38,5 @@ export default async function LocaleLayout({ children, params }: {
   const { locale } = await params;
   const canonicalLocale = matchLocale(locale);
   if (!canonicalLocale) notFound();
-  return <SiteDocument locale={canonicalLocale}>{children}</SiteDocument>;
+  return <SiteShell locale={canonicalLocale}>{children}</SiteShell>;
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
new file mode 100644
index 0000000..e2a664f
--- /dev/null
+++ b/src/app/layout.tsx
@@ -0,0 +1,7 @@
+import SiteDocument from "@/components/layout/site-document";
+
+export { metadata, viewport } from "@/components/layout/site-document";
+
+export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+  return <SiteDocument>{children}</SiteDocument>;
+}
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
new file mode 100644
index 0000000..47fe7e8
--- /dev/null
+++ b/src/app/not-found.tsx
@@ -0,0 +1,6 @@
+import { SiteShell } from "@/components/layout/site-shell";
+import { HttpStatusPage } from "@/components/status/http-status-page";
+
+export default function NotFound() {
+  return <SiteShell locale="zh-Hans"><HttpStatusPage code={404} /></SiteShell>;
+}
diff --git a/src/components/layout/site-document.tsx b/src/components/layout/site-document.tsx
index a0c18f7..81814c6 100644
--- a/src/components/layout/site-document.tsx
+++ b/src/components/layout/site-document.tsx
@@ -1,11 +1,5 @@
 import type { Metadata, Viewport } from "next";
-import { Suspense } from "react";
 import "@/app/globals.css";
-import type { Locale } from "@/lib/i18n";
-import { LocaleProvider } from "@/components/layout/locale-context";
-import { SiteFooter } from "@/components/layout/site-footer";
-import { SiteHeader } from "@/components/layout/site-header";
-import { LocaleUrlSync } from "@/components/layout/locale-url-sync";
 
 export const metadata: Metadata = {
   title: {
@@ -25,10 +19,9 @@ export const viewport: Viewport = {
 
 export default function RootLayout({
   children,
-  locale = "zh-Hans",
-}: Readonly<{ children: React.ReactNode; locale?: Locale }>) {
+}: Readonly<{ children: React.ReactNode }>) {
   return (
-    <html lang={locale} suppressHydrationWarning>
+    <html lang="zh-Hans" suppressHydrationWarning>
       <head>
         {/* Run during HTML parsing, before the body can paint. */}
         <script
@@ -82,12 +75,7 @@ export default function RootLayout({
           })();` }}
         />
       </head>
-      <body>
-        <LocaleProvider locale={locale}>
-        <Suspense fallback={null}><LocaleUrlSync /></Suspense>
-        <SiteHeader />{children}<SiteFooter />
-        </LocaleProvider>
-      </body>
+      <body>{children}</body>
     </html>
   );
 }
diff --git a/src/components/layout/site-shell.tsx b/src/components/layout/site-shell.tsx
new file mode 100644
index 0000000..159a7c8
--- /dev/null
+++ b/src/components/layout/site-shell.tsx
@@ -0,0 +1,15 @@
+import { Suspense } from "react";
+import type { Locale } from "@/lib/i18n";
+import { LocaleProvider } from "@/components/layout/locale-context";
+import { LocaleUrlSync } from "@/components/layout/locale-url-sync";
+import { SiteFooter } from "@/components/layout/site-footer";
+import { SiteHeader } from "@/components/layout/site-header";
+
+export function SiteShell({ children, locale }: { children: React.ReactNode; locale: Locale }) {
+  return (
+    <LocaleProvider locale={locale}>
+      <Suspense fallback={null}><LocaleUrlSync /></Suspense>
+      <SiteHeader />{children}<SiteFooter />
+    </LocaleProvider>
+  );
+}