diff --git a/apps/jingrow/frontend/src/locales/zh-CN.json b/apps/jingrow/frontend/src/locales/zh-CN.json
index 6da542d..4e390d9 100644
--- a/apps/jingrow/frontend/src/locales/zh-CN.json
+++ b/apps/jingrow/frontend/src/locales/zh-CN.json
@@ -876,6 +876,49 @@
   "View details feature coming soon": "查看详情功能即将推出",
   "Install feature coming soon": "安装功能即将推出",
   "Publish app feature coming soon": "发布应用功能即将推出",
+
+  "Environment Configuration": "环境配置",
+  "Only system administrators can view and edit environment configuration": "仅系统管理员可以查看和编辑环境配置",
+  "Jingrow API Configuration": "Jingrow API 配置",
+  "Jingrow Server URL": "Jingrow 服务器地址",
+  "Jingrow API Key": "Jingrow API 密钥",
+  "Jingrow API Secret": "Jingrow API 密钥",
+  "Jingrow Session Cookie": "Jingrow 会话 Cookie",
+  "Jingrow Cloud Configuration": "Jingrow Cloud 配置",
+  "Cloud URL": "Cloud 地址",
+  "Cloud API URL": "Cloud API 地址",
+  "Cloud API Key": "Cloud API 密钥",
+  "Cloud API Secret": "Cloud API 密钥",
+  "Database Configuration": "数据库配置",
+  "DB Host": "数据库主机",
+  "DB Port": "数据库端口",
+  "DB Name": "数据库名称",
+  "DB User": "数据库用户",
+  "DB Password": "数据库密码",
+  "DB Type": "数据库类型",
+  "Qdrant Configuration": "Qdrant 配置",
+  "Qdrant Host": "Qdrant 主机",
+  "Qdrant Port": "Qdrant 端口",
+  "Runtime Configuration": "运行时配置",
+  "Run Mode": "运行模式",
+  "Environment": "环境",
+  "Log Level": "日志级别",
+  "Backend": "后端配置",
+  "Other": "其他",
+  "Backend Host": "后端主机",
+  "Backend Port": "后端端口",
+  "Backend Reload": "后端热重载",
+  "Dramatiq": "Dramatiq 任务队列",
+  "Worker Processes": "工作进程数",
+  "Worker Threads": "工作线程数",
+  "Watch": "监听文件变化",
+  "Save Environment Configuration": "保存环境配置",
+  "Environment configuration loaded": "环境配置已加载",
+  "Environment configuration saved": "环境配置已保存",
+  "Failed to load environment configuration": "加载环境配置失败",
+  "Failed to save environment configuration": "保存环境配置失败",
+  "Refresh": "刷新",
+  "Save": "保存",
   "Publish App": "发布应用",
   "Active": "活跃",
   "View detailed information about the application": "查看应用的详细信息",
diff --git a/apps/jingrow/frontend/src/views/Settings.vue b/apps/jingrow/frontend/src/views/Settings.vue
index f0f48a0..450d352 100644
--- a/apps/jingrow/frontend/src/views/Settings.vue
+++ b/apps/jingrow/frontend/src/views/Settings.vue
@@ -1,12 +1,36 @@
 <template>
   <div class="settings-page">
     <div class="page-header">
-      <h1 class="page-title">{{ t('Settings') }}</h1>
-      <p class="page-description">{{ t('System settings') }}</p>
+      <n-space justify="space-between" align="center">
+        <div>
+          <h1 class="page-title">{{ t('Settings') }}</h1>
+        </div>
+        <n-space v-if="isAdmin">
+          <n-button type="default" @click="loadEnvironmentConfig" :loading="envConfigLoading">
+            <template #icon>
+              <n-icon><Icon icon="tabler:refresh" /></n-icon>
+            </template>
+          </n-button>
+          <n-button type="primary" class="save-btn-brand" :loading="envConfigSaving" @click="saveEnvironmentConfig">
+            <template #icon>
+              <n-icon><Icon icon="tabler:check" /></n-icon>
+            </template>
+            {{ t('Save') }}
+          </n-button>
+        </n-space>
+        <n-space v-else>
+          <n-button type="primary" class="save-btn-brand" @click="saveSystemSettings">
+            <template #icon>
+              <n-icon><Icon icon="tabler:check" /></n-icon>
+            </template>
+            {{ t('Save') }}
+          </n-button>
+        </n-space>
+      </n-space>
     </div>
 
-    <n-grid :cols="1" :x-gap="24" :y-gap="24">
-      <!-- 系统设置 -->
+    <n-grid :cols="2" :x-gap="24" :y-gap="24">
+      <!-- 左栏：系统设置 -->
       <n-grid-item>
         <n-card :title="t('System Settings')">
           <n-form :model="systemSettings" label-placement="left" label-width="120px">
@@ -49,16 +73,11 @@
                 :placeholder="t('Select timezone')"
               />
             </n-form-item>
-            <n-form-item>
-              <n-button type="primary" @click="saveSystemSettings">
-                {{ t('Save settings') }}
-              </n-button>
-            </n-form-item>
           </n-form>
         </n-card>
       </n-grid-item>
 
-      <!-- 环境配置（仅系统管理员可见） -->
+      <!-- 右栏：环境配置（仅系统管理员可见） -->
       <n-grid-item v-if="isAdmin">
         <n-card :title="t('Environment Configuration')">
           <n-alert type="warning" style="margin-bottom: 16px">
@@ -72,106 +91,101 @@
           >
             <n-collapse>
               <n-collapse-item name="jingrow" :title="t('Jingrow API Configuration')">
-                <n-form-item label="Jingrow Server URL">
+                <n-form-item :label="t('Jingrow Server URL')">
                   <n-input v-model:value="envConfig.jingrow_server_url" placeholder="https://example.jingrow.com" />
                 </n-form-item>
-                <n-form-item label="Jingrow API Key">
+                <n-form-item :label="t('Jingrow API Key')">
                   <n-input v-model:value="envConfig.jingrow_api_key" type="password" show-password-on="click" />
                 </n-form-item>
-                <n-form-item label="Jingrow API Secret">
+                <n-form-item :label="t('Jingrow API Secret')">
                   <n-input v-model:value="envConfig.jingrow_api_secret" type="password" show-password-on="click" />
                 </n-form-item>
-                <n-form-item label="Jingrow Session Cookie">
+                <n-form-item :label="t('Jingrow Session Cookie')">
                   <n-input v-model:value="envConfig.jingrow_session_cookie" />
                 </n-form-item>
               </n-collapse-item>
 
               <n-collapse-item name="cloud" :title="t('Jingrow Cloud Configuration')">
-                <n-form-item label="Cloud URL">
+                <n-form-item :label="t('Cloud URL')">
                   <n-input v-model:value="envConfig.jingrow_cloud_url" />
                 </n-form-item>
-                <n-form-item label="Cloud API URL">
+                <n-form-item :label="t('Cloud API URL')">
                   <n-input v-model:value="envConfig.jingrow_cloud_api_url" />
                 </n-form-item>
-                <n-form-item label="Cloud API Key">
+                <n-form-item :label="t('Cloud API Key')">
                   <n-input v-model:value="envConfig.jingrow_cloud_api_key" type="password" show-password-on="click" />
                 </n-form-item>
-                <n-form-item label="Cloud API Secret">
+                <n-form-item :label="t('Cloud API Secret')">
                   <n-input v-model:value="envConfig.jingrow_cloud_api_secret" type="password" show-password-on="click" />
                 </n-form-item>
               </n-collapse-item>
 
               <n-collapse-item name="database" :title="t('Database Configuration')">
-                <n-form-item label="DB Host">
+                <n-form-item :label="t('DB Host')">
                   <n-input v-model:value="envConfig.jingrow_db_host" />
                 </n-form-item>
-                <n-form-item label="DB Port">
+                <n-form-item :label="t('DB Port')">
                   <n-input v-model:value="envConfig.jingrow_db_port" />
                 </n-form-item>
-                <n-form-item label="DB Name">
+                <n-form-item :label="t('DB Name')">
                   <n-input v-model:value="envConfig.jingrow_db_name" />
                 </n-form-item>
-                <n-form-item label="DB User">
+                <n-form-item :label="t('DB User')">
                   <n-input v-model:value="envConfig.jingrow_db_user" />
                 </n-form-item>
-                <n-form-item label="DB Password">
+                <n-form-item :label="t('DB Password')">
                   <n-input v-model:value="envConfig.jingrow_db_password" type="password" show-password-on="click" />
                 </n-form-item>
-                <n-form-item label="DB Type">
+                <n-form-item :label="t('DB Type')">
                   <n-select v-model:value="envConfig.jingrow_db_type" :options="dbTypeOptions" style="width: 200px" />
                 </n-form-item>
               </n-collapse-item>
 
               <n-collapse-item name="qdrant" :title="t('Qdrant Configuration')">
-                <n-form-item label="Qdrant Host">
+                <n-form-item :label="t('Qdrant Host')">
                   <n-input v-model:value="envConfig.qdrant_host" />
                 </n-form-item>
-                <n-form-item label="Qdrant Port">
+                <n-form-item :label="t('Qdrant Port')">
                   <n-input-number v-model:value="envConfig.qdrant_port" :min="1" :max="65535" />
                 </n-form-item>
               </n-collapse-item>
 
-              <n-collapse-item name="runtime" :title="t('Runtime Configuration')">
-                <n-form-item label="Run Mode">
-                  <n-select v-model:value="envConfig.run_mode" :options="runModeOptions" style="width: 200px" />
-                </n-form-item>
-                <n-form-item label="Environment">
-                  <n-select v-model:value="envConfig.environment" :options="environmentOptions" style="width: 200px" />
-                </n-form-item>
-                <n-form-item label="Log Level">
-                  <n-select v-model:value="envConfig.log_level" :options="logLevelOptions" style="width: 200px" />
-                </n-form-item>
-                <n-form-item label="Backend Host">
+              <n-collapse-item name="backend" :title="t('Backend')">
+                <n-form-item :label="t('Backend Host')">
                   <n-input v-model:value="envConfig.backend_host" />
                 </n-form-item>
-                <n-form-item label="Backend Port">
+                <n-form-item :label="t('Backend Port')">
                   <n-input-number v-model:value="envConfig.backend_port" :min="1" :max="65535" />
                 </n-form-item>
-                <n-form-item label="Backend Reload">
+                <n-form-item :label="t('Backend Reload')">
                   <n-switch v-model:value="envConfig.backend_reload" />
                 </n-form-item>
-                <n-form-item label="Worker Processes">
+              </n-collapse-item>
+
+              <n-collapse-item name="dramatiq" :title="t('Dramatiq')">
+                <n-form-item :label="t('Worker Processes')">
                   <n-input-number v-model:value="envConfig.worker_processes" :min="1" :max="32" />
                 </n-form-item>
-                <n-form-item label="Worker Threads">
+                <n-form-item :label="t('Worker Threads')">
                   <n-input-number v-model:value="envConfig.worker_threads" :min="1" :max="32" />
                 </n-form-item>
-                <n-form-item label="Watch">
+                <n-form-item :label="t('Watch')">
                   <n-switch v-model:value="envConfig.watch" />
                 </n-form-item>
               </n-collapse-item>
-            </n-collapse>
 
-            <n-form-item style="margin-top: 16px">
-              <n-space>
-                <n-button type="primary" :loading="envConfigSaving" @click="saveEnvironmentConfig">
-                  {{ t('Save Environment Configuration') }}
-                </n-button>
-                <n-button @click="loadEnvironmentConfig">
-                  {{ t('Refresh') }}
-                </n-button>
-              </n-space>
-            </n-form-item>
+              <n-collapse-item name="runtime" :title="t('Other')">
+                <n-form-item :label="t('Run Mode')">
+                  <n-select v-model:value="envConfig.run_mode" :options="runModeOptions" style="width: 200px" />
+                </n-form-item>
+                <n-form-item :label="t('Environment')">
+                  <n-select v-model:value="envConfig.environment" :options="environmentOptions" style="width: 200px" />
+                </n-form-item>
+                <n-form-item :label="t('Log Level')">
+                  <n-select v-model:value="envConfig.log_level" :options="logLevelOptions" style="width: 200px" />
+                </n-form-item>
+              </n-collapse-item>
+            </n-collapse>
           </n-form>
         </n-card>
       </n-grid-item>
@@ -196,8 +210,10 @@ import {
   NCollapse,
   NCollapseItem,
   NSpace,
+  NIcon,
   useMessage 
 } from 'naive-ui'
+import { Icon } from '@iconify/vue'
 import { getCurrentLocale, setLocale, locales, initLocale, t } from '../shared/i18n'
 import { useAuthStore } from '../shared/stores/auth'
 import { getEnvironmentConfig, updateEnvironmentConfig, type EnvironmentConfig } from '../shared/api/system'
@@ -380,16 +396,89 @@ onMounted(async () => {
   font-size: 28px;
   font-weight: 700;
   color: #1f2937;
-  margin: 0 0 8px 0;
-}
-
-.page-description {
-  font-size: 16px;
-  color: #6b7280;
   margin: 0;
 }
 
+/* 保存按钮 - 使用柔和的品牌色系，与 pagetype 详情页保存按钮一致 */
+.save-btn-brand {
+  background: #e6f8f0 !important;
+  border: 1px solid #1fc76f !important;
+  color: #0d684b !important;
+}
+
+.save-btn-brand :deep(.n-button__border) {
+  border: none !important;
+  border-color: transparent !important;
+}
+
+.save-btn-brand :deep(.n-button__state-border) {
+  border: none !important;
+  border-color: transparent !important;
+}
+
+.save-btn-brand:hover {
+  background: #dcfce7 !important;
+  border-color: #1fc76f !important;
+  border: 1px solid #1fc76f !important;
+  color: #166534 !important;
+  box-shadow: 0 2px 8px rgba(31, 199, 111, 0.15) !important;
+}
+
+.save-btn-brand:hover :deep(.n-button__border),
+.save-btn-brand:hover :deep(.n-button__state-border) {
+  border: none !important;
+  border-color: transparent !important;
+}
+
+.save-btn-brand:focus {
+  background: #dcfce7 !important;
+  border-color: #1fc76f !important;
+  border: 1px solid #1fc76f !important;
+  color: #166534 !important;
+  box-shadow: 0 0 0 2px rgba(31, 199, 111, 0.2) !important;
+}
+
+.save-btn-brand:focus :deep(.n-button__border),
+.save-btn-brand:focus :deep(.n-button__state-border) {
+  border: none !important;
+  border-color: transparent !important;
+}
+
+.save-btn-brand:active {
+  background: #1fc76f !important;
+  border-color: #1fc76f !important;
+  border: 1px solid #1fc76f !important;
+  color: white !important;
+  box-shadow: 0 1px 4px rgba(31, 199, 111, 0.2) !important;
+}
+
+.save-btn-brand:active :deep(.n-button__border),
+.save-btn-brand:active :deep(.n-button__state-border) {
+  border-color: transparent !important;
+}
+
+.save-btn-brand:disabled {
+  background: #f1f5f9 !important;
+  border: 1px solid #e2e8f0 !important;
+  border-color: #e2e8f0 !important;
+  color: #94a3b8 !important;
+  opacity: 0.6 !important;
+  cursor: not-allowed !important;
+}
+
+.save-btn-brand:disabled :deep(.n-button__border),
+.save-btn-brand:disabled :deep(.n-button__state-border) {
+  border: none !important;
+  border-color: transparent !important;
+}
+
 /* 响应式设计 */
+@media (max-width: 1200px) {
+  .settings-page :deep(.n-grid) {
+    grid-template-columns: 1fr !important;
+  }
+}
+
 @media (max-width: 768px) {
   .settings-page {
     padding: 0 12px;