diff --git a/src/pages/[...path].vue b/src/pages/[...path].vue
new file mode 100644
index 0000000..e7a0b64
--- /dev/null
+++ b/src/pages/[...path].vue
@@ -0,0 +1,78 @@
+<script setup>
+import { onMounted } from 'vue'
+import { useRoute, RouterLink } from 'vue-router'
+import { Button } from '@/components/ui/button'
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+} from '@/components/ui/card'
+import { AlertCircle, Home, ArrowLeft } from 'lucide-vue-next'
+
+const route = useRoute()
+
+const goBack = () => {
+  if (history.length > 1) history.back()
+  else window.location.assign('/')
+}
+
+onMounted(() => {
+  document.title = '404 - 页面未找到'
+})
+</script>
+
+<template>
+  <main
+    class="relative min-h-dvh grid place-items-center px-6 py-16 bg-gradient-to-b from-background to-muted/40"
+  >
+    <!-- 背景点缀 -->
+    <div
+      aria-hidden="true"
+      class="pointer-events-none absolute inset-x-0 top-0 h-40 bg-gradient-to-b from-primary/10 to-transparent blur-2xl"
+    />
+
+    <Card class="w-full max-w-xl">
+      <CardHeader class="text-center">
+        <div
+          class="mx-auto flex size-14 items-center justify-center rounded-full border bg-background/60 shadow-sm"
+        >
+          <AlertCircle class="size-7 text-primary" />
+        </div>
+        <CardTitle class="mt-3 text-2xl">页面未找到</CardTitle>
+        <CardDescription>
+          抱歉，您访问的地址不存在或已被移动。
+        </CardDescription>
+      </CardHeader>
+
+      <CardContent class="text-center text-sm text-muted-foreground break-words">
+        <p>
+          请求路径：
+          <span class="font-medium text-foreground/80">{{ route.fullPath }}</span>
+        </p>
+      </CardContent>
+
+      <CardFooter class="flex items-center justify-center gap-3">
+        <RouterLink to="/">
+          <Button size="lg">
+            <Home class="size-4" />
+            返回首页
+          </Button>
+        </RouterLink>
+        <Button variant="outline" size="lg" @click="goBack">
+          <ArrowLeft class="size-4" />
+          返回上一页
+        </Button>
+      </CardFooter>
+    </Card>
+
+    <p class="mt-6 text-center text-xs text-muted-foreground/80 select-none">
+      错误代码：404
+    </p>
+  </main>
+</template>
+
+<style scoped>
+</style>