diff --git a/index.html b/index.html
index 257f3c4..a10620c 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,46 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="color-scheme" content="light dark" />
+    <script>
+      // 在 CSS 加载前尽早应用系统深色模式，避免首次渲染闪烁
+      (function () {
+        try {
+          var root = document.documentElement;
+          var storageKey = 'theme';
+          var hasLocal = false;
+          try {
+            hasLocal = localStorage.getItem(storageKey) != null;
+          } catch (_) {}
+
+          var prefersDark = false;
+          try {
+            prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+          } catch (_) {}
+
+          var initialDark = hasLocal
+            ? localStorage.getItem(storageKey) === 'dark'
+            : prefersDark;
+
+          root.classList.toggle('dark', !!initialDark);
+
+          // 跟随系统主题变化（若未手动设置主题）
+          var mq;
+          try {
+            mq = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');
+          } catch (_) {}
+          if (mq) {
+            var onChange = function (e) {
+              var locked = false;
+              try { locked = localStorage.getItem(storageKey) != null; } catch (_) {}
+              if (!locked) root.classList.toggle('dark', e.matches);
+            };
+            if (mq.addEventListener) mq.addEventListener('change', onChange);
+            else if (mq.addListener) mq.addListener(onChange);
+          }
+        } catch (_) {}
+      })();
+    </script>
     <title>Classworks KV</title>
   </head>
   <body>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index f4dce8d..c65f05f 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -736,7 +736,7 @@ onMounted(async () => {
                 :show-hint="true"
                 :show-strength="false"
                 :required="!accountStore.isAuthenticated"
-              />
+              /><br/>
               <p v-if="accountStore.isAuthenticated" class="text-xs text-muted-foreground mt-2">
                 已登录绑定账户，无需输入密码
               </p>
diff --git a/src/pages/password-manager.vue b/src/pages/password-manager.vue
index 12b6d7f..3f6fb8d 100644
--- a/src/pages/password-manager.vue
+++ b/src/pages/password-manager.vue
@@ -391,11 +391,11 @@ onMounted(async () => {
       <h2 class="text-xl font-semibold mt-12 mb-4">设备管理</h2>
 
       <!-- 设备重置卡片 -->
-      <Card class="mb-6 border-red-200 dark:border-red-900">
+      <Card class="mb-6 ">
         <CardHeader>
           <CardTitle class="text-lg flex items-center gap-2">
-            <Smartphone class="h-5 w-5 text-red-500" />
-            重置设备
+            <Smartphone class="h-5 w-5" />
+            更换设备
           </CardTitle>
           <CardDescription>
             更换新的设备标识。
@@ -410,7 +410,7 @@ onMounted(async () => {
               @click="showResetDeviceDialog = true"
             >
               <RefreshCw class="h-4 w-4" />
-              重置设备
+              更换设备
             </Button>
           </div>
         </CardContent>
