diff --git a/public/404.html b/public/404.html
new file mode 100644
index 0000000..8a32c09
--- /dev/null
+++ b/public/404.html
@@ -0,0 +1,66 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>404 - 页面未找到</title>
+    <meta name="robots" content="noindex" />
+    <style>
+      :root { color-scheme: light dark; }
+      html, body { height: 100%; }
+      body {
+        margin: 0; display: grid; place-items: center; font: 14px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
+        background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.05));
+      }
+      .card {
+        width: min(560px, 92vw);
+        border: 1px solid rgba(125,125,125,.25);
+        border-radius: 14px;
+        background: rgba(255,255,255,.7);
+        -webkit-backdrop-filter: blur(6px);
+        backdrop-filter: blur(6px);
+        padding: 24px;
+        box-shadow: 0 10px 25px rgba(0,0,0,.08);
+        color: #1f2937;
+      }
+      .row { display:flex; justify-content:center; align-items:center; gap:10px; }
+      @media (prefers-color-scheme: dark) {
+        .card { background: rgba(24,24,27,.6); color: #e5e7eb; border-color: rgba(255,255,255,.12); }
+      }
+      .title { font-size: 22px; font-weight: 700; margin: 8px 0 4px; }
+      .desc { color: #6b7280; margin: 0 0 8px; }
+      .hint { font-size: 12px; color: #9ca3af; text-align: center; margin-top: 10px; }
+      .actions { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
+      .btn {
+        appearance: none; border: 1px solid rgba(125,125,125,.35); background: rgba(255,255,255,.9);
+        color: #111827; padding: 10px 16px; border-radius: 8px; cursor: pointer; font-weight: 600;
+      }
+      .btn.primary { background: #111827; color: white; border-color: #111827; }
+      .btn:active { transform: translateY(1px); }
+      @media (prefers-color-scheme: dark) {
+        .btn { background: rgba(63,63,70,.8); color: #e5e7eb; border-color: rgba(255,255,255,.14); }
+        .btn.primary { background: #3b82f6; border-color: #3b82f6; }
+      }
+    </style>
+  </head>
+  <body>
+    <main class="card">
+  <div class="row">
+        <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" x2="12" y1="8" y2="12"></line><line x1="12" x2="12.01" y1="16" y2="16"></line></svg>
+        <div>
+          <div class="title">页面未找到</div>
+          <div class="desc">即将为您跳转到首页。如果未跳转，请使用下面的按钮。</div>
+        </div>
+      </div>
+      <div class="actions">
+        <button class="btn primary" onclick="location.assign('/')">返回首页</button>
+        <button class="btn" onclick="history.length>1?history.back():location.assign('/')">返回上一页</button>
+      </div>
+      <p class="hint">错误代码：404</p>
+    </main>
+    <script>
+      // 对于静态托管（如 GitHub Pages、Vercel 静态导出），尝试回退到 SPA 入口
+      setTimeout(function(){location.replace('/')}, 1500)
+    </script>
+  </body>
+</html>
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>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index aea5c23..58bf0e0 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -431,7 +431,7 @@ onMounted(async () => {
                     <ChevronDown class="h-3.5 w-3.5" :class="{ 'rotate-180': open }" />
                   </Button>
                 </template>
-                <DropdownItem @click="$router.push('/device-management')" :style="{
+                <DropdownItem :href="accountStore.profile.providerInfo.website" target="_blank" :style="{
                   backgroundColor: (accountStore.profile.providerInfo.color || '#999') + '22',
                   color: accountStore.profile.providerInfo.color || 'inherit',
                   border: `1px solid ${(accountStore.profile.providerInfo.color || '#999')}55`
