diff --git a/static/admin.html b/static/admin.html
index b5a728f..d9138e1 100644
--- a/static/admin.html
+++ b/static/admin.html
@@ -135,16 +135,29 @@
         <!-- Main App Interface -->
         <div v-if="isLoggedIn" class="flex flex-1 h-full overflow-hidden bg-slate-50">
             
+            <!-- Mobile Overlay -->
+            <transition name="fade">
+                <div v-if="isSidebarOpen" @click="isSidebarOpen = false" class="fixed inset-0 bg-slate-900/50 z-40 lg:hidden backdrop-blur-sm"></div>
+            </transition>
+
             <!-- Sidebar -->
-            <aside class="w-72 bg-white border-r border-slate-200 flex flex-col shadow-sm z-10">
-                <div class="p-8 pb-4">
+            <aside :class="[
+                'fixed inset-y-0 left-0 z-50 w-72 bg-white border-r border-slate-200 flex flex-col shadow-sm transition-transform duration-300 ease-in-out lg:static lg:translate-x-0',
+                isSidebarOpen ? 'translate-x-0' : '-translate-x-full'
+            ]">
+                <!-- Close Button (Mobile Only) -->
+                <button @click="isSidebarOpen = false" class="absolute top-4 right-4 lg:hidden text-slate-400 hover:text-slate-600 p-2 rounded-full hover:bg-slate-100 transition-colors z-20">
+                    <i class="fas fa-times text-lg"></i>
+                </button>
+
+                <div class="p-8 pb-4 relative">
                     <div class="flex items-center gap-3 text-slate-800 mb-8">
                         <div class="w-10 h-10 bg-gradient-to-br from-blue-600 to-indigo-600 rounded-lg flex items-center justify-center shadow-md shadow-blue-200">
                             <i class="fas fa-layer-group text-white text-lg"></i>
                         </div>
                         <div>
                             <h2 class="font-bold text-lg leading-tight tracking-tight">SAM3 Admin</h2>
-                            <p class="text-[10px] text-slate-400 font-bold tracking-widest uppercase mt-0.5">Quantum Track AI</p>
+                            <p class="text-xs text-slate-400 font-bold tracking-widest uppercase mt-0.5">Quantum Track AI</p>
                         </div>
                     </div>
                     
@@ -203,10 +216,15 @@
             <!-- Main Content -->
             <main class="flex-1 overflow-y-auto overflow-x-hidden relative scroll-smooth">
                 <!-- Header -->
-                <header class="sticky top-0 z-20 bg-white/80 backdrop-blur-md border-b border-slate-200 px-8 py-4 flex justify-between items-center shadow-sm">
-                    <div>
-                        <h1 class="text-2xl font-bold text-slate-800">{{ getPageTitle(currentTab) }}</h1>
-                        <p class="text-sm text-slate-500 mt-0.5">{{ getPageSubtitle(currentTab) }}</p>
+                <header class="sticky top-0 z-20 bg-white/80 backdrop-blur-md border-b border-slate-200 px-4 md:px-8 py-4 flex justify-between items-center shadow-sm transition-all">
+                    <div class="flex items-center gap-3">
+                        <button @click="isSidebarOpen = true" class="lg:hidden p-2 -ml-2 text-slate-500 hover:text-blue-600 hover:bg-slate-100 rounded-lg transition-colors active:scale-95">
+                            <i class="fas fa-bars text-xl"></i>
+                        </button>
+                        <div>
+                            <h1 class="text-xl md:text-2xl font-bold text-slate-800 transition-all">{{ getPageTitle(currentTab) }}</h1>
+                            <p class="text-xs md:text-sm text-slate-500 mt-0.5 hidden sm:block">{{ getPageSubtitle(currentTab) }}</p>
+                        </div>
                     </div>
                     <div class="flex items-center gap-4">
                         <div class="bg-white border border-slate-200 rounded-full px-4 py-1.5 flex items-center gap-2 shadow-sm">
@@ -216,13 +234,13 @@
                             </span>
                             <span class="text-sm font-medium text-slate-600">系统正常</span>
                         </div>
-                        <button @click="refreshData" class="p-2.5 text-slate-400 hover:text-blue-600 transition-colors rounded-full hover:bg-slate-100 active:scale-95" title="刷新数据">
+                        <button @click="refreshData" class="p-3 text-slate-400 hover:text-blue-600 transition-colors rounded-full hover:bg-slate-100 active:scale-95" title="刷新数据">
                             <i class="fas fa-sync-alt" :class="{'fa-spin': isLoading}"></i>
                         </button>
                     </div>
                 </header>
 
-                <div class="p-8 max-w-7xl mx-auto min-h-[calc(100vh-88px)]">
+                <div class="p-4 md:p-8 max-w-7xl mx-auto min-h-[calc(100vh-88px)] transition-all">
                     <transition name="slide-up" mode="out-in">
                         
                         <!-- Dashboard Tab -->
@@ -325,7 +343,7 @@
                                         </div>
                                     </div>
                                     <div class="flex items-center text-xs text-slate-400">
-                                        <span class="bg-purple-100 text-purple-700 px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wide">Qwen-VL Engine</span>
+                                        <span class="bg-purple-100 text-purple-700 px-2 py-0.5 rounded text-xs font-bold uppercase tracking-wide">Qwen-VL Engine</span>
                                     </div>
                                 </div>
                             </div>
@@ -403,7 +421,7 @@
                                                         <i class="fas fa-link text-2xl mb-2"></i>
                                                         <span class="text-xs truncate max-w-[200px]">{{ tarotImageUrl }}</span>
                                                     </div>
-                                                    <button @click.prevent="clearTarotInput" class="absolute top-2 right-2 bg-white/80 p-1.5 rounded-full hover:bg-white text-slate-600 shadow-sm">
+                                                    <button @click.prevent="clearTarotInput" class="absolute top-2 right-2 bg-white/80 p-2.5 rounded-full hover:bg-white text-slate-600 shadow-sm">
                                                         <i class="fas fa-times"></i>
                                                     </button>
                                                 </div>
@@ -499,7 +517,7 @@
                                                             class="text-xs font-bold px-2 py-0.5 rounded">
                                                             {{ card.recognition?.position || '未知' }}
                                                         </span>
-                                                        <span v-if="card.is_rotated" class="text-[10px] text-slate-400 bg-slate-100 px-1.5 rounded" title="已自动矫正方向">
+                                                        <span v-if="card.is_rotated" class="text-xs text-slate-400 bg-slate-100 px-1.5 rounded" title="已自动矫正方向">
                                                             <i class="fas fa-sync-alt"></i> Auto-Rotated
                                                         </span>
                                                     </div>
@@ -561,7 +579,7 @@
                                                     </div>
                                                     <div v-if="record.final_prompt && record.final_prompt !== record.prompt" class="text-xs text-slate-500 bg-slate-50 p-1.5 rounded border border-slate-100">
                                                         <div class="flex items-center gap-1 mb-0.5 text-purple-600 font-medium">
-                                                            <i class="fas fa-magic text-[10px]"></i> 优化后 Prompt
+                                                            <i class="fas fa-magic text-xs"></i> 优化后 Prompt
                                                         </div>
                                                         <div class="italic line-clamp-2" :title="record.final_prompt">{{ record.final_prompt }}</div>
                                                     </div>
@@ -581,7 +599,7 @@
                                             </td>
                                             <td class="px-6 py-4 text-center">
                                                 <button v-if="record.result_path" @click="viewResult(record.result_path)" 
-                                                    class="text-blue-600 hover:text-blue-800 hover:bg-blue-50 p-2 rounded-lg transition-all" title="查看结果">
+                                                    class="text-blue-600 hover:text-blue-800 hover:bg-blue-50 p-3 rounded-lg transition-all" title="查看结果">
                                                     <i class="fas fa-external-link-alt"></i>
                                                 </button>
                                                 <span v-else class="text-slate-300 cursor-not-allowed"><i class="fas fa-eye-slash"></i></span>
@@ -616,7 +634,7 @@
                                     </button>
                                 </div>
                                 <div class="flex gap-2">
-                                    <button @click="fetchFiles" class="p-2 text-slate-400 hover:text-blue-600 transition-colors rounded hover:bg-slate-50">
+                                    <button @click="fetchFiles" class="p-3 text-slate-400 hover:text-blue-600 transition-colors rounded hover:bg-slate-50">
                                         <i class="fas fa-sync-alt"></i>
                                     </button>
                                 </div>
@@ -630,7 +648,7 @@
                                     <div v-if="file.is_dir" @click="enterDir(file.name)" class="flex flex-col items-center w-full h-full justify-center">
                                         <i class="fas fa-folder text-yellow-400 text-5xl mb-2 drop-shadow-sm group-hover:scale-110 transition-transform"></i>
                                         <span class="text-xs font-medium text-slate-700 truncate w-full text-center px-2">{{ file.name }}</span>
-                                        <span class="text-[10px] text-slate-400">{{ file.count }} 项</span>
+                                        <span class="text-xs text-slate-400">{{ file.count }} 项</span>
                                     </div>
                                     
                                     <!-- Image -->
@@ -639,19 +657,19 @@
                                             <img :src="file.url" class="w-full h-full object-contain" loading="lazy">
                                         </div>
                                         <span class="text-xs font-medium text-slate-700 truncate w-full text-center px-1">{{ file.name }}</span>
-                                        <span class="text-[10px] text-slate-400 font-mono mt-0.5 bg-slate-100 px-1.5 rounded">{{ formatBytes(file.size) }}</span>
+                                        <span class="text-xs text-slate-400 font-mono mt-0.5 bg-slate-100 px-1.5 rounded">{{ formatBytes(file.size) }}</span>
                                     </div>
 
                                     <!-- Other -->
                                     <div v-else class="flex flex-col items-center w-full h-full justify-center">
                                         <i class="fas fa-file-alt text-slate-300 text-4xl mb-2"></i>
                                         <span class="text-xs font-medium text-slate-700 truncate w-full text-center px-1">{{ file.name }}</span>
-                                        <span class="text-[10px] text-slate-400 font-mono mt-0.5 bg-slate-100 px-1.5 rounded">{{ formatBytes(file.size) }}</span>
+                                        <span class="text-xs text-slate-400 font-mono mt-0.5 bg-slate-100 px-1.5 rounded">{{ formatBytes(file.size) }}</span>
                                     </div>
 
                                     <!-- Delete Action -->
                                     <button @click.stop="deleteFile(file.name)" 
-                                        class="absolute top-2 right-2 w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all transform scale-90 group-hover:scale-100 hover:bg-red-600 shadow-sm z-10">
+                                        class="absolute top-2 right-2 w-8 h-8 bg-red-500 text-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all transform scale-90 group-hover:scale-100 hover:bg-red-600 shadow-sm z-10">
                                         <i class="fas fa-times text-xs"></i>
                                     </button>
                                 </div>
@@ -927,6 +945,7 @@
             setup() {
                 // State
                 const isLoggedIn = ref(false);
+                const isSidebarOpen = ref(false);
                 const password = ref('');
                 const loginError = ref('');
                 const currentTab = ref('dashboard');
@@ -1400,6 +1419,7 @@
                 const switchTab = (tab) => {
                     const prevTab = currentTab.value;
                     currentTab.value = tab;
+                    isSidebarOpen.value = false; // Close sidebar on mobile
                     
                     // GPU Monitor Logic
                     if (tab === 'gpu') {
@@ -1696,7 +1716,7 @@
                 });
 
                 return {
-                    isLoggedIn, password, loginError, login, logout,
+                    isLoggedIn, isSidebarOpen, password, loginError, login, logout,
                     currentTab, switchTab, history, files, currentPath,
                     enterDir, navigateUp, deleteFile, triggerCleanup,
                     viewResult, previewImage, isImage, previewUrl,