diff --git a/backend/server.js b/backend/server.js
index 262c74a..1542547 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -125,9 +125,55 @@ class PixivServer {
         logger.debug(`代理端口: ${process.env.PROXY_PORT || '未设置'}`);
       }
       logger.info('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
+      
+      // 自动打开浏览器
+      if (process.env.AUTO_OPEN_BROWSER === 'true') {
+        this.openBrowser();
+      }
     });
   }
 
+  /**
+   * 打开浏览器
+   */
+  openBrowser() {
+    const url = `http://localhost:${this.port}`;
+    logger.info(`正在打开浏览器: ${url}`);
+    
+    const { spawn } = require('child_process');
+    const os = require('os');
+    
+    let command;
+    let args = [url];
+    
+    switch (os.platform()) {
+      case 'win32':
+        command = 'cmd';
+        args = ['/c', 'start', '""', url];
+        break;
+      case 'darwin':
+        command = 'open';
+        break;
+      case 'linux':
+        command = 'xdg-open';
+        break;
+      default:
+        logger.warn('不支持的操作系统，无法自动打开浏览器');
+        return;
+    }
+    
+    try {
+      const child = spawn(command, args, { 
+        detached: true, 
+        stdio: 'ignore' 
+      });
+      child.unref();
+      logger.info('浏览器已打开');
+    } catch (error) {
+      logger.warn('打开浏览器失败:', error.message);
+    }
+  }
+
   /**
    * 优雅关闭
    */
diff --git a/backend/start.js b/backend/start.js
index 3b083bc..c48b02d 100644
--- a/backend/start.js
+++ b/backend/start.js
@@ -36,6 +36,9 @@ function parseArguments() {
       if (['ERROR', 'WARN', 'INFO', 'DEBUG', 'TRACE'].includes(level)) {
         options.logLevel = level;
       }
+    } else if (arg.startsWith('--auto-open-browser=')) {
+      const value = arg.split('=')[1].toLowerCase();
+      options.autoOpenBrowser = value === 'true';
     } 
     // 处理 --key value 格式（向后兼容）
     else if (arg === '--proxy-port' && i + 1 < args.length) {
@@ -56,6 +59,10 @@ function parseArguments() {
         options.logLevel = level;
       }
       i++; // 跳过下一个参数
+    } else if (arg === '--auto-open-browser' && i + 1 < args.length) {
+      const value = args[i + 1].toLowerCase();
+      options.autoOpenBrowser = value === 'true';
+      i++; // 跳过下一个参数
     }
   }
 
@@ -94,6 +101,12 @@ if (cliOptions.logLevel) {
   logger.info(`日志级别: ${cliOptions.logLevel}`);
 }
 
+// 设置自动打开浏览器选项
+if (cliOptions.autoOpenBrowser !== undefined) {
+  process.env.AUTO_OPEN_BROWSER = cliOptions.autoOpenBrowser.toString();
+  logger.info(`自动打开浏览器: ${cliOptions.autoOpenBrowser ? '启用' : '禁用'}`);
+}
+
 logger.info('启动 Pixiv 后端服务器...');
 
 // 创建服务器实例
diff --git a/scripts/create-portable.js b/scripts/create-portable.js
index 96e7e59..d1624b0 100644
--- a/scripts/create-portable.js
+++ b/scripts/create-portable.js
@@ -47,6 +47,13 @@ REM TRACE: Show all level messages (most detailed)
 REM ========================================
 set LOG_LEVEL=INFO
 
+REM ========================================
+REM Auto Open Browser Configuration - Options: true, false
+REM true:  Automatically open browser when server starts
+REM false: Do not automatically open browser (default)
+REM ========================================
+set AUTO_OPEN_BROWSER=false
+
 echo.
 echo ========================================
 echo Pixiv Manager Starting...
@@ -69,9 +76,9 @@ echo.
 
 REM Start server and pass proxy port, server port and log level
 if "%PROXY_PORT%"=="" (
-  pixiv-manager.exe --server-port=%SERVER_PORT% --log-level=%LOG_LEVEL%
+  pixiv-manager.exe --server-port=%SERVER_PORT% --log-level=%LOG_LEVEL% --auto-open-browser=%AUTO_OPEN_BROWSER%
 ) else (
-  pixiv-manager.exe --proxy-port=%PROXY_PORT% --server-port=%SERVER_PORT% --log-level=%LOG_LEVEL%
+  pixiv-manager.exe --proxy-port=%PROXY_PORT% --server-port=%SERVER_PORT% --log-level=%LOG_LEVEL% --auto-open-browser=%AUTO_OPEN_BROWSER%
 )
 
 echo.
@@ -111,6 +118,11 @@ pause
 - DEBUG: 显示调试信息及以上级别信息
 - TRACE: 显示所有级别信息（最详细）
 
+### 自动打开浏览器设置
+修改（AUTO_OPEN_BROWSER=xxxx）的值来启用或禁用自动打开浏览器功能：
+- true: 启动服务器后自动打开浏览器
+- false: 不自动打开浏览器（默认）
+
 ## 注意事项
 
 - 首次运行可能需要几秒钟启动时间
diff --git a/ui/src/assets/theme.css b/ui/src/assets/theme.css
index 413f78d..671ac62 100644
--- a/ui/src/assets/theme.css
+++ b/ui/src/assets/theme.css
@@ -34,6 +34,7 @@
   --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
   --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
   
   /* 过渡动画 */
   --transition-fast: 0.15s ease;
@@ -45,6 +46,7 @@
   --radius-md: 0.375rem;
   --radius-lg: 0.5rem;
   --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
   
   /* 间距 */
   --spacing-xs: 0.25rem;
@@ -53,6 +55,13 @@
   --spacing-lg: 1rem;
   --spacing-xl: 1.5rem;
   --spacing-2xl: 2rem;
+  --spacing-3xl: 3rem;
+  
+  /* 渐变色 */
+  --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
+  --gradient-secondary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
+  --gradient-warning: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
 }
 
 /* 暗色主题 */
@@ -400,8 +409,8 @@
 /* 切换开关 */
 .toggle-switch {
   position: relative;
-  width: 28px;
-  height: 14px;
+  width: 44px;
+  height: 24px;
 }
 
 .toggle-switch input {
@@ -419,19 +428,21 @@
   bottom: 0;
   background-color: var(--color-border);
   transition: var(--transition-normal);
-  border-radius: 14px;
+  border-radius: 24px;
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 .toggle-slider:before {
   position: absolute;
   content: "";
-  height: 10px;
-  width: 10px;
-  left: 2px;
-  bottom: 2px;
+  height: 18px;
+  width: 18px;
+  left: 3px;
+  bottom: 3px;
   border-radius: 50%;
   background-color: white;
   transition: var(--transition-normal);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
 .toggle-switch input:checked + .toggle-slider {
@@ -439,11 +450,15 @@
 }
 
 .toggle-switch input:focus + .toggle-slider {
-  box-shadow: 0 0 1px var(--color-primary);
+  box-shadow: 0 0 0 2px var(--color-primary-light);
 }
 
 .toggle-switch input:checked + .toggle-slider:before {
-  transform: translateX(14px);
+  transform: translateX(20px);
+}
+
+.toggle-switch:hover .toggle-slider {
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 2px var(--color-primary-light);
 }
 
 /* 加载状态 */
diff --git a/ui/src/views/HomeView.vue b/ui/src/views/HomeView.vue
index a752ef7..726a71f 100644
--- a/ui/src/views/HomeView.vue
+++ b/ui/src/views/HomeView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { useAuthStore } from '@/stores/auth';
 import RandomRecommendations from '@/components/home/RandomRecommendations.vue';
 
@@ -7,8 +7,39 @@ const authStore = useAuthStore();
 
 const isLoggedIn = computed(() => authStore.isLoggedIn);
 
+// 随机推荐开关状态
+const showRecommendations = ref(true);
+
+// 从本地存储加载设置
+const loadSettings = () => {
+  const saved = localStorage.getItem('pixiv-home-settings');
+  if (saved) {
+    try {
+      const settings = JSON.parse(saved);
+      showRecommendations.value = settings.showRecommendations !== false;
+    } catch (e) {
+      console.warn('Failed to parse saved settings:', e);
+    }
+  }
+};
+
+// 保存设置到本地存储
+const saveSettings = () => {
+  const settings = {
+    showRecommendations: showRecommendations.value
+  };
+  localStorage.setItem('pixiv-home-settings', JSON.stringify(settings));
+};
+
+// 切换推荐显示状态
+const toggleRecommendations = () => {
+  showRecommendations.value = !showRecommendations.value;
+  saveSettings();
+};
+
 onMounted(async () => {
   await authStore.fetchLoginStatus();
+  loadSettings();
 });
 </script>
 
@@ -37,8 +68,33 @@ onMounted(async () => {
     </div>
 
     <!-- 随机推荐区域 -->
-    <div class="recommendations-section">
-      <RandomRecommendations v-if="isLoggedIn" />
+    <div v-if="isLoggedIn" class="recommendations-section">
+      <div class="container">
+        <div class="recommendations-header">
+          <h2 class="section-title">随机推荐</h2>
+          <div class="recommendations-toggle">
+            <label class="toggle-label">
+              <span class="toggle-text">显示推荐</span>
+              <div class="toggle-switch">
+                <input 
+                  type="checkbox" 
+                  :checked="showRecommendations"
+                  @change="toggleRecommendations"
+                >
+                <span class="toggle-slider"></span>
+              </div>
+            </label>
+          </div>
+        </div>
+        
+        <div v-if="showRecommendations" class="recommendations-content">
+          <RandomRecommendations />
+        </div>
+        
+        <div v-else class="recommendations-disabled">
+          <p class="disabled-message">随机推荐已关闭，您可以通过上方开关重新启用</p>
+        </div>
+      </div>
     </div>
 
     <div class="features-section">
@@ -120,7 +176,7 @@ onMounted(async () => {
 }
 
 .hero-section {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
   color: white;
   padding: 4rem 0;
   text-align: center;
@@ -129,79 +185,89 @@ onMounted(async () => {
 .hero-content {
   max-width: 800px;
   margin: 0 auto;
-  padding: 0 2rem;
+  padding: 0 var(--spacing-2xl);
 }
 
 .hero-title {
   font-size: 3rem;
   font-weight: 700;
-  margin-bottom: 1rem;
+  margin-bottom: var(--spacing-lg);
   line-height: 1.2;
 }
 
 .hero-subtitle {
   font-size: 1.25rem;
-  margin-bottom: 2rem;
+  margin-bottom: var(--spacing-2xl);
   opacity: 0.9;
   line-height: 1.6;
 }
 
 .hero-actions {
   display: flex;
-  gap: 1rem;
+  gap: var(--spacing-lg);
   justify-content: center;
   flex-wrap: wrap;
 }
 
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.75rem 1.5rem;
-  border-radius: 0.5rem;
-  font-weight: 600;
-  text-decoration: none;
-  transition: all 0.2s;
-  border: none;
-  cursor: pointer;
-  font-size: 1rem;
-}
-
-.btn-primary {
-  background: #3b82f6;
-  color: white;
-}
-
-.btn-primary:hover {
-  background: #2563eb;
-  transform: translateY(-1px);
-}
-
-.btn-secondary {
-  background: rgba(255, 255, 255, 0.1);
-  color: white;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-}
-
-.btn-secondary:hover {
-  background: rgba(255, 255, 255, 0.2);
-  transform: translateY(-1px);
-}
-
 .container {
   max-width: 1200px;
   margin: 0 auto;
-  padding: 0 2rem;
+  padding: 0 var(--spacing-2xl);
 }
 
 .recommendations-section {
-  padding: 2rem 0;
-  background: white;
+  padding: var(--spacing-2xl) 0;
+  background: var(--color-bg-primary);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.recommendations-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--spacing-2xl);
+}
+
+.recommendations-toggle {
+  display: flex;
+  align-items: center;
+}
+
+.toggle-label {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  cursor: pointer;
+  user-select: none;
+}
+
+.toggle-text {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-text-secondary);
+}
+
+.recommendations-content {
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+.recommendations-disabled {
+  text-align: center;
+  padding: var(--spacing-2xl);
+  background: var(--color-bg-secondary);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-border);
+}
+
+.disabled-message {
+  color: var(--color-text-secondary);
+  font-size: 0.875rem;
+  margin: 0;
 }
 
 .features-section {
   padding: 4rem 0;
-  background: #f8fafc;
+  background: var(--color-bg-secondary);
 }
 
 .section-title {
@@ -209,38 +275,47 @@ onMounted(async () => {
   font-size: 2.5rem;
   font-weight: 700;
   margin-bottom: 3rem;
-  color: #1f2937;
+  color: var(--color-text-primary);
 }
 
 .features-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 2rem;
+  gap: var(--spacing-2xl);
 }
 
 .feature-card {
-  background: white;
-  padding: 2rem;
-  border-radius: 1rem;
+  background: var(--color-bg-primary);
+  padding: var(--spacing-2xl);
+  border-radius: var(--radius-xl);
   text-align: center;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-  transition: transform 0.2s;
+  box-shadow: var(--shadow-md);
+  transition: all var(--transition-normal);
+  border: 1px solid var(--color-border);
 }
 
 .feature-card:hover {
   transform: translateY(-4px);
+  box-shadow: var(--shadow-lg);
+  border-color: var(--color-primary);
 }
 
 .feature-icon {
   width: 4rem;
   height: 4rem;
-  margin: 0 auto 1.5rem;
-  background: #3b82f6;
+  margin: 0 auto var(--spacing-xl);
+  background: var(--color-primary);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
+  transition: all var(--transition-normal);
+}
+
+.feature-card:hover .feature-icon {
+  background: var(--color-primary-dark);
+  transform: scale(1.1);
 }
 
 .feature-icon svg {
@@ -251,16 +326,25 @@ onMounted(async () => {
 .feature-title {
   font-size: 1.25rem;
   font-weight: 600;
-  margin-bottom: 1rem;
-  color: #1f2937;
+  margin-bottom: var(--spacing-lg);
+  color: var(--color-text-primary);
 }
 
 .feature-description {
-  color: #6b7280;
+  color: var(--color-text-secondary);
   line-height: 1.6;
 }
 
-
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
 
 @media (max-width: 768px) {
   .hero-title {
@@ -285,6 +369,15 @@ onMounted(async () => {
     grid-template-columns: 1fr;
   }
 
+  .recommendations-header {
+    flex-direction: column;
+    gap: var(--spacing-lg);
+    align-items: stretch;
+  }
 
+  .section-title {
+    font-size: 2rem;
+    margin-bottom: var(--spacing-xl);
+  }
 }
 </style>