diff --git a/web/src/assets/css/base.css b/web/src/assets/css/base.css
index 3412c057..11b11bde 100644
--- a/web/src/assets/css/base.css
+++ b/web/src/assets/css/base.css
@@ -2,48 +2,45 @@
 /* color palette from <https://github.com/vuejs/theme> */
 /* https://material-foundation.github.io/material-theme-builder/ */
 :root {
-  --main-1000: #011A26;
-  --main-900: #034A51;
-  --main-800: #034F69;
-  --main-700: #03637F;
-  --main-600: #1D7796;
-  --main-500: #2F86A8;
-  --main-400: #5099B9;
-  --main-300: #6CADCB;
-  --main-200: #8EC6E1;
-  --main-100: #ADE0F7;
-  --main-50: #CFF5FF;
-  --main-25: #E8FAFF;
-  --main-10: #F8FDFF;
-  --main-5: #FAFCFD;
+  --main-1000: #01151f;  /* 更深沉的深蓝黑 */
+  --main-900:  #023944;  /* 深海蓝 */
+  --main-800:  #035065;  /* 深蓝绿 */
+  --main-700:  #046a82;  /* 增加明度的蓝青色 */
+  --main-600:  #24839a;  /* 冷色调中略带灰 */
+  --main-500:  #3996ae;  /* 平衡且主色调友好 */
+  --main-400:  #5faec2;  /* 更加柔和的中亮蓝 */
+  --main-300:  #82c3d6;  /* 明亮通透，视觉清爽 */
+  --main-200:  #a3d8e8;  /* 比原先更清澈淡蓝 */
+  --main-100:  #c4eaf5;  /* 接近原色，但稍微柔和 */
+  --main-50:   #e1f6fb;  /* 极浅天蓝，适合背景过渡 */
+  --main-40:   #eaf3f5;  /* 淡灰蓝调 */
+  --main-30:   #f2fbfd;  /* 几近白的蓝调提示 */
+  --main-20:   #f5f9fa;  /* 比原配色更均匀些 */
+  --main-10:   #fafcfd;
+  --main-5:    #fcfefe;
+  --main-1:    #fefefe;
+  --main-0:    #ffffff;
+
+
+  --gray-10000: #000000; /* 保持纯黑 */
+  --gray-2000:  #0d0d0d; /* 更精致的暗灰，用于极深背景 */
+  --gray-1000:  #161616; /* 深灰黑，适用于主文本 */
+  --gray-900:   #1f1f1f;
+  --gray-800:   #333333; /* 标准深灰，适合背景 */
+  --gray-700:   #4d4d4d;
+  --gray-600:   #707070; /* 调和中灰，适合次要文本 */
+  --gray-500:   #999999; /* 更柔和的中灰色 */
+  --gray-400:   #bfbfbf;
+  --gray-300:   #d9d9d9; /* 修正了原300/200重复 */
+  --gray-200:   #e6e6e6; /* 稍微加深一点，便于分层 */
+  --gray-100:   #f2f2f2;
+  --gray-50:    #f7f7f7;
+  --gray-25:    #fafafa;
+  --gray-10:    #fcfcfc;
+  --gray-0:     #ffffff;
 
-  --gray-10000: #000000;
-  --gray-2000: #0F0F0F;
-  --gray-1000: #171717;
-  --gray-900: #212121;
-  --gray-800: #424242;
-  --gray-700: #616161;
-  --gray-600: #8C8C8C;
-  --gray-500: #A7A7A7;
-  --gray-400: #C4C4C4;
-  --gray-300: #EFEFEF;
-  --gray-200: #EFEFEF;
-  --gray-100: #F8F8F8;
-  --gray-50: #FBFBFB;
-  --gray-25: #FCFCFC;
-  --gray-10: #FDFDFD;
-  --gray-0: #FFFFFF;
 
   --main-color: #016179;
-  --main-color-dark: #004d5c;
-  --main-color-text: #104461;
-  --main-light-1: #0076AB;
-  --main-light-2: #DAEAED;
-  --main-light-3: #EDF0F1;
-  --main-light-4: #F2F5F5;
-  --main-light-5: #F7FAFB;
-  --main-light-6: #FAFDFD;
-  --main-light-7: #FEFFFF;
   --secondry-color: #4e616d;
   --error-color: #ba1a1a;
 
@@ -53,24 +50,3 @@
 
   --min-width: 400px;
 }
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  position: relative;
-  font-weight: normal;
-}
-
-body {
-  display: flow-root;
-  min-height: 100vh;
-  color: var(--gray-900);
-  line-height: 1.6;
-  font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans SC', 'Roboto', 'HarmonyOS Sans SC', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
-  font-size: 15px;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
diff --git a/web/src/assets/css/main.css b/web/src/assets/css/main.css
index d24ccb5c..ec7cb701 100644
--- a/web/src/assets/css/main.css
+++ b/web/src/assets/css/main.css
@@ -4,6 +4,29 @@
 
 :root {
   --header-height: 60px;
+  --min-width: 450px;
+}
+
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  position: relative;
+  font-weight: normal;
+}
+
+body {
+  display: flow-root;
+  min-height: 100vh;
+  color: var(--gray-900);
+  line-height: 1.6;
+  font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans SC', 'Roboto', 'HarmonyOS Sans SC', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 /* layout */
diff --git a/web/src/components/AgentChatComponent.vue b/web/src/components/AgentChatComponent.vue
index c3a11631..da14b926 100644
--- a/web/src/components/AgentChatComponent.vue
+++ b/web/src/components/AgentChatComponent.vue
@@ -1382,7 +1382,7 @@ const mergeMessageChunk = (chunks) => {
     justify-content: space-between;
     align-items: center;
     padding: 1rem;
-    border-bottom: 1px solid var(--main-light-3);
+    border-bottom: 1px solid var(--main-20);
 
     .header__left, .header__right, .header__center {
       display: flex;
@@ -1415,7 +1415,7 @@ const mergeMessageChunk = (chunks) => {
     }
 
     &:hover {
-      background-color: var(--main-light-3);
+      background-color: var(--main-20);
     }
 
     .nav-btn-icon {
@@ -1580,7 +1580,7 @@ const mergeMessageChunk = (chunks) => {
 .generating-indicator {
   display: flex;
   align-items: center;
-  padding: 0.75rem 1rem;
+  padding: 0.5rem 1rem 0.5rem 0.5rem;
   background: var(--gray-100);
   border-radius: 12px;
   border: 1px solid var(--gray-200);
@@ -1615,7 +1615,7 @@ const mergeMessageChunk = (chunks) => {
     }
 
     &:hover {
-      background-color: var(--main-light-3);
+      background-color: var(--main-20);
     }
 
     .nav-btn-icon {
diff --git a/web/src/components/ChatSidebarComponent.vue b/web/src/components/ChatSidebarComponent.vue
index ba624556..e830b9f4 100644
--- a/web/src/components/ChatSidebarComponent.vue
+++ b/web/src/components/ChatSidebarComponent.vue
@@ -10,50 +10,52 @@
     </div>
     <div class="conversation-list-top">
       <button type="text" @click="createNewChat" class="new-chat-btn">
-        新对话
+       <MessageSquarePlus size="20" /> 创建新对话
       </button>
     </div>
     <div class="conversation-list">
       <a-spin v-if="loading" />
-      <template v-else>
-        <div
-          v-for="chat in chatsList"
-          :key="chat.id"
-          class="conversation-item"
-          :class="{ 'active': currentChatId === chat.id }"
-          @click="selectChat(chat.id)"
-        >
-          <div class="conversation-info">
+      <template v-else-if="Object.keys(groupedChats).length > 0">
+        <div v-for="(group, groupName) in groupedChats" :key="groupName" class="chat-group">
+          <div class="chat-group-title">{{ groupName }}</div>
+          <div
+            v-for="chat in group"
+            :key="chat.id"
+            class="conversation-item"
+            :class="{ 'active': currentChatId === chat.id }"
+            @click="selectChat(chat)"
+          >
             <div class="conversation-title">{{ chat.title || '新对话' }}</div>
+            <div class="actions-mask"></div>
+            <div class="conversation-actions">
+              <a-dropdown :trigger="['click']" @click.stop>
+                <template #overlay>
+                  <a-menu>
+                    <a-menu-item key="rename" @click.stop="renameChat(chat.id)">
+                      <EditOutlined /> 重命名
+                    </a-menu-item>
+                    <a-menu-item key="delete" @click.stop="deleteChat(chat.id)" v-if="chat.id !== currentChatId">
+                      <DeleteOutlined /> 删除
+                    </a-menu-item>
+                  </a-menu>
+                </template>
+                <a-button type="text" class="more-btn" @click.stop>
+                  <MoreOutlined />
+                </a-button>
+              </a-dropdown>
+            </div>
           </div>
-          <div class="conversation-actions">
-            <a-dropdown :trigger="['click']" @click.stop>
-              <template #overlay>
-                <a-menu>
-                  <a-menu-item key="rename" @click.stop="renameChat(chat.id)">
-                    <EditOutlined /> 重命名
-                  </a-menu-item>
-                  <a-menu-item key="delete" @click.stop="deleteChat(chat.id)" v-if="chat.id !== currentChatId">
-                    <DeleteOutlined /> 删除
-                  </a-menu-item>
-                </a-menu>
-              </template>
-              <a-button type="text" class="more-btn" @click.stop>
-                <MoreOutlined />
-              </a-button>
-            </a-dropdown>
-          </div>
-        </div>
-        <div v-if="chatsList.length === 0" class="empty-list">
-          暂无对话历史
         </div>
       </template>
+      <div v-else class="empty-list">
+        暂无对话历史
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted, watch, h } from 'vue';
+import { ref, computed, h } from 'vue';
 import {
   DeleteOutlined,
   EditOutlined,
@@ -61,6 +63,12 @@ import {
 } from '@ant-design/icons-vue';
 import { message, Modal } from 'ant-design-vue';
 import { PanelLeftClose, MessageSquarePlus } from 'lucide-vue-next';
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
+import relativeTime from 'dayjs/plugin/relativeTime';
+
+dayjs.extend(relativeTime);
+dayjs.locale('zh-cn');
 
 const props = defineProps({
   currentAgentId: {
@@ -87,72 +95,95 @@ const props = defineProps({
 
 const emit = defineEmits(['create-chat', 'select-chat', 'delete-chat', 'rename-chat', 'toggle-sidebar']);
 
-// 状态变量
 const loading = ref(false);
 
-// 创建新对话
+const groupedChats = computed(() => {
+  const groups = {
+    '今天': [],
+    '七天内': [],
+    '三十天内': [],
+  };
+
+  const now = dayjs();
+  const today = now.startOf('day');
+  const sevenDaysAgo = now.subtract(7, 'day').startOf('day');
+  const thirtyDaysAgo = now.subtract(30, 'day').startOf('day');
+
+  // Sort chats by creation date, newest first
+  const sortedChats = [...props.chatsList].sort((a, b) => dayjs(b.create_at).diff(dayjs(a.create_at)));
+
+  sortedChats.forEach(chat => {
+    const chatDate = dayjs(chat.create_at);
+    if (chatDate.isAfter(today)) {
+      groups['今天'].push(chat);
+    } else if (chatDate.isAfter(sevenDaysAgo)) {
+      groups['七天内'].push(chat);
+    } else if (chatDate.isAfter(thirtyDaysAgo)) {
+      groups['三十天内'].push(chat);
+    } else {
+      const monthKey = chatDate.format('YYYY-MM');
+      if (!groups[monthKey]) {
+        groups[monthKey] = [];
+      }
+      groups[monthKey].push(chat);
+    }
+  });
+
+  // Remove empty groups
+  for (const key in groups) {
+    if (groups[key].length === 0) {
+      delete groups[key];
+    }
+  }
+
+  return groups;
+});
+
+
 const createNewChat = () => {
   emit('create-chat');
 };
 
-// 选择对话
-const selectChat = (chatId) => {
-  emit('select-chat', chatId);
+const selectChat = (chat) => {
+  console.log(chat);
+  emit('select-chat', chat.id);
 };
 
-// 删除对话
 const deleteChat = (chatId) => {
   emit('delete-chat', chatId);
 };
 
-// 重命名对话
 const renameChat = async (chatId) => {
   try {
-    // 找到当前对话
     const chat = props.chatsList.find(c => c.id === chatId);
     if (!chat) return;
 
-    // 获取新标题
-    let newTitle = '';
-    let modalInstance = null;
-
-    await new Promise((resolve, reject) => {
-      modalInstance = Modal.confirm({
-        title: '重命名对话',
-        content: h('div', {}, [
-          h('input', {
-            value: chat.title,
-            style: { width: '100%', marginTop: '10px' },
-            onInput: (e) => { newTitle = e.target.value; }
-          })
-        ]),
-        okText: '确认',
-        cancelText: '取消',
-        onOk: () => {
-          resolve();
-        },
-        onCancel: () => {
-          reject();
+    let newTitle = chat.title;
+    Modal.confirm({
+      title: '重命名对话',
+      content: h('div', { style: { marginTop: '12px' } }, [
+        h('input', {
+          value: newTitle,
+          style: { width: '100%', padding: '4px 8px', border: '1px solid #d9d9d9', borderRadius: '4px' },
+          onInput: (e) => { newTitle = e.target.value; }
+        })
+      ]),
+      okText: '确认',
+      cancelText: '取消',
+      onOk: () => {
+        if (!newTitle.trim()) {
+          message.warning('标题不能为空');
+          return Promise.reject();
         }
-      });
+        emit('rename-chat', { chatId, title: newTitle });
+      },
+      onCancel: () => {}
     });
-
-    // 确保有标题
-    if (!newTitle.trim()) {
-      message.warning('标题不能为空');
-      return;
-    }
-
-    // 通知父组件
-    emit('rename-chat', { chatId, title: newTitle });
-
   } catch (error) {
     console.error('重命名对话失败:', error);
   }
 };
 
-
-// 折叠侧边栏
 const toggleCollapse = () => {
   emit('toggle-sidebar');
 };
@@ -176,7 +207,7 @@ const toggleCollapse = () => {
   &.sidebar-open {
     width: 280px;
     max-width: 300px;
-    border-right: 1px solid #e8e8e8;
+    border-right: 1px solid var(--gray-200);
   }
 
   .sidebar-header {
@@ -185,7 +216,8 @@ const toggleCollapse = () => {
     align-items: center;
     justify-content: space-between;
     padding: 0 16px;
-    border-bottom: 1px solid #e8e8e8;
+    border-bottom: 1px solid var(--gray-200);
+    flex-shrink: 0;
 
     .header-title {
       font-weight: 500;
@@ -205,21 +237,26 @@ const toggleCollapse = () => {
   }
 
   .conversation-list-top {
-    padding: 10px;
+    padding: 8px 12px;
+    border-bottom: 1px solid var(--gray-200);
 
     .new-chat-btn {
       width: 100%;
-      padding: 8px 16px;
-      height: fit-content;
-      border-radius: 8px;
-      background-color: var(--gray-200);
+      padding: 8px 12px;
+      border-radius: 6px;
+      background-color: var(--main-50);
       color: var(--main-color);
       border: none;
       transition: all 0.2s ease;
       font-weight: 500;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
 
       &:hover {
-        background-color: var(--gray-400);
+        background-color: var(--main-100);
       }
     }
   }
@@ -227,128 +264,134 @@ const toggleCollapse = () => {
   .conversation-list {
     flex: 1;
     overflow-y: auto;
-    padding: 10px;
+    padding: 8px;
+
+    .chat-group {
+      margin-bottom: 16px;
+    }
+
+    .chat-group-title {
+      padding: 4px 8px;
+      font-size: 12px;
+      color: var(--gray-500);
+      font-weight: 500;
+      text-transform: uppercase;
+    }
 
     .conversation-item {
       display: flex;
       align-items: center;
-      justify-content: space-between;
-      padding: 4px 0px 4px 12px;
-      border-radius: 8px;
-      margin-bottom: 8px;
+      padding: 8px 12px;
+      border-radius: 6px;
+      margin: 4px 0;
       cursor: pointer;
-      transition: all 0.2s ease;
+      transition: background-color 0.2s ease;
+      position: relative;
+      overflow: hidden;
+
+      .conversation-title {
+        flex: 1;
+        font-size: 14px;
+        color: var(--gray-800);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        transition: color 0.2s ease;
+      }
+
+      .actions-mask {
+        position: absolute;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        width: 60px;
+        background: linear-gradient(to right, transparent, var(--bg-sider) 20px);
+        opacity: 0;
+        transition: opacity 0.3s ease;
+        pointer-events: none;
+      }
+
+      .conversation-actions {
+        display: flex;
+        align-items: center;
+        position: absolute;
+        right: 8px;
+        top: 50%;
+        transform: translateY(-50%);
+        opacity: 0;
+        transition: opacity 0.3s ease;
+
+        .more-btn {
+          color: var(--gray-600);
+          background-color: transparent !important;
+          &:hover {
+            color: var(--main-500);
+            background-color: transparent !important;
+          }
+        }
+      }
 
       &:hover {
-        background-color: #f0f0f0;
+        background-color: var(--gray-100);
 
-        .conversation-actions {
+        .actions-mask {
+            background: linear-gradient(to right, transparent, var(--gray-100) 20px);
+        }
+
+        .actions-mask, .conversation-actions {
           opacity: 1;
         }
       }
 
       &.active {
-        background-color: var(--gray-300);
+        background-color: var(--main-50);
 
         .conversation-title {
-          color: var(--main-700);
+          color: var(--main-600);
           font-weight: 500;
         }
-      }
-
-      .conversation-info {
-        flex: 1;
-        min-width: 0;
-
-        .conversation-title {
-          font-size: 14px;
-          color: var(--gray-900);
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-
-        .conversation-time {
-          font-size: 12px;
-          color: var(--gray-500);
-        }
-      }
-
-      .conversation-actions {
-        opacity: 0;
-        transition: opacity 0.2s ease;
-
-        .more-btn {
-          color: var(--gray-500);
-
-          &:hover {
-            color: var(--main-500);
-          }
+        .actions-mask {
+          background: linear-gradient(to right, transparent, var(--main-50) 20px);
         }
       }
     }
 
     .empty-list {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: 100px;
+      text-align: center;
+      margin-top: 20px;
       color: var(--gray-500);
       font-size: 14px;
     }
   }
 }
 
-// 滚动条美化
+// Scrollbar styling
 .conversation-list::-webkit-scrollbar {
-  width: 4px;
+  width: 5px;
 }
-
 .conversation-list::-webkit-scrollbar-track {
   background: transparent;
 }
-
 .conversation-list::-webkit-scrollbar-thumb {
   background: var(--gray-300);
-  border-radius: 4px;
+  border-radius: 5px;
 }
-
 .conversation-list::-webkit-scrollbar-thumb:hover {
   background: var(--gray-400);
 }
-</style>
 
-
-<style lang="less">
-.toggle-sidebar {
+.toggle-sidebar.nav-btn {
   cursor: pointer;
-
-  &.nav-btn {
-    height: 2.5rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 8px;
-    color: var(--gray-900);
-    cursor: pointer;
-    font-size: 15px;
-    width: auto;
-    padding: 0.5rem 1rem;
-    transition: background-color 0.3s;
-    overflow: hidden;
-
-    .text {
-      margin-left: 10px;
-    }
-
-    &:hover {
-      background-color: var(--main-light-3);
-    }
-
-    .nav-btn-icon {
-      width: 1.5rem;
-      height: 1.5rem;
-    }
+  height: 2.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 8px;
+  color: var(--gray-900);
+  padding: 0.5rem;
+  transition: background-color 0.3s;
+  &:hover {
+    background-color: var(--gray-100);
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/web/src/components/KnowledgeGraphViewer.vue b/web/src/components/KnowledgeGraphViewer.vue
index be2dbc96..9662debc 100644
--- a/web/src/components/KnowledgeGraphViewer.vue
+++ b/web/src/components/KnowledgeGraphViewer.vue
@@ -1142,7 +1142,7 @@ defineExpose({
   flex: 1;
   background: white;
   position: relative; /* 确保子元素可以相对于此容器定位 */
-  border: 1px solid var(--main-light-3);
+  border: 1px solid var(--main-20);
   border-radius: 8px;
   overflow: hidden;
 
diff --git a/web/src/components/MessageComponent.vue b/web/src/components/MessageComponent.vue
index 9e840311..87d077dd 100644
--- a/web/src/components/MessageComponent.vue
+++ b/web/src/components/MessageComponent.vue
@@ -203,7 +203,7 @@ const isEmptyAndLoading = computed(() => {
     margin-top: 10px;
     margin-bottom: 15px;
     border-radius: 8px;
-    border: 1px solid var(--main-light-3);
+    border: 1px solid var(--main-20);
 
     .reasoning-content {
       font-size: 13px;
diff --git a/web/src/components/ModelSelectorComponent.vue b/web/src/components/ModelSelectorComponent.vue
index 4d350491..71565069 100644
--- a/web/src/components/ModelSelectorComponent.vue
+++ b/web/src/components/ModelSelectorComponent.vue
@@ -107,7 +107,7 @@ const handleSelectModel = (provider, name) => {
   }
 
   &:hover {
-    background-color: var(--main-light-3);
+    background-color: var(--main-20);
   }
 }
 
diff --git a/web/src/components/ToolCallingResult/KnowledgeBaseResult.vue b/web/src/components/ToolCallingResult/KnowledgeBaseResult.vue
index 531c5246..51dd2d23 100644
--- a/web/src/components/ToolCallingResult/KnowledgeBaseResult.vue
+++ b/web/src/components/ToolCallingResult/KnowledgeBaseResult.vue
@@ -301,7 +301,7 @@ const getScoreColor = (score) => {
       }
 
       &:hover {
-        background: var(--main-25);
+        background: var(--main-30);
 
         .view-icon {
           opacity: 1;
diff --git a/web/src/layouts/AppLayout.vue b/web/src/layouts/AppLayout.vue
index 25e0d08f..fbda6f92 100644
--- a/web/src/layouts/AppLayout.vue
+++ b/web/src/layouts/AppLayout.vue
@@ -352,10 +352,9 @@ div.header, #app-router-view {
       padding: 10px 12px;
     }
     &.active {
+      text-shadow: 0 0 15px var(--main-300);
       font-weight: bold;
       color: var(--main-color);
-      background-color: white;
-      border: 1px solid white;
     }
 
     &.warning {
@@ -363,8 +362,7 @@ div.header, #app-router-view {
     }
 
     &:hover {
-      background-color: rgba(255, 255, 255, 0.8);
-      backdrop-filter: blur(10px);
+      color: var(--main-color);
     }
 
     .text {
@@ -441,8 +439,8 @@ div.header, #app-router-view {
   width: 100%;
   height: 50px;
   border-right: none;
-  border-bottom: 1px solid var(--main-light-2);
-  background-color: var(--main-light-3);
+  border-bottom: 1px solid var(--main-40);
+  background-color: var(--main-20);
   padding: 0 20px;
   gap: 24px;
 
diff --git a/web/src/views/AgentView.vue b/web/src/views/AgentView.vue
index c5c1b674..c89e58ea 100644
--- a/web/src/views/AgentView.vue
+++ b/web/src/views/AgentView.vue
@@ -2,16 +2,11 @@
   <div class="agent-view">
     <div class="agent-view-header">
       <div class="header-left">
-        <div class="header-item">
-          <a-button class="header-button" @click="toggleConf">
-            <template #icon><SettingOutlined /></template>
-          </a-button>
-        </div>
         <div class="header-item">
           <a-select
             v-model:value="selectedAgentId"
             class="agent-list"
-            style="width: 240px"
+            style="width: 220px"
             @change="selectAgent"
           >
             <a-select-option
@@ -29,6 +24,9 @@
             </a-select-option>
           </a-select>
         </div>
+        <div class="header-item">
+          <a-button class="header-button" @click="toggleConf" :icon="h(SettingOutlined)"> 配置 </a-button>
+        </div>
       </div>
       <div class="header-center">
       </div>
@@ -693,7 +691,7 @@ const toggleConf = () => {
 .agent-view-header {
   height: var(--agent-view-header-height);
   background-color: var(--bg-sider);
-  border-bottom: 1px solid var(--main-light-3);
+  border-bottom: 1px solid var(--main-20);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -790,13 +788,13 @@ const toggleConf = () => {
 
 .action-button {
   background-color: white;
-  border: 1px solid var(--main-light-3);
+  border: 1px solid var(--main-20);
   text-align: left;
   height: auto;
   padding: 8px 12px;
 
   &:hover {
-    background-color: var(--main-light-4);
+    background-color: var(--main-20);
   }
 
   &.primary-action {
@@ -805,7 +803,7 @@ const toggleConf = () => {
 
     &:disabled {
       color: var(--main-color);
-      background-color: var(--main-light-4);
+      background-color: var(--main-20);
       cursor: not-allowed;
       opacity: 0.7;
     }
@@ -1165,7 +1163,7 @@ const toggleConf = () => {
     }
 
     &:hover {
-      background-color: var(--main-light-3);
+      background-color: var(--main-20);
     }
 
     .nav-btn-icon {
diff --git a/web/src/views/DataBaseInfoView.vue b/web/src/views/DataBaseInfoView.vue
index 9ef11399..54a89cc2 100644
--- a/web/src/views/DataBaseInfoView.vue
+++ b/web/src/views/DataBaseInfoView.vue
@@ -2233,7 +2233,7 @@ const getFileIconColor = (filename) => {
   background-color: var(--gray-100);
 
   &:hover {
-    background-color: var(--main-light-4);
+    background-color: var(--main-20);
   }
 }
 
@@ -2253,8 +2253,8 @@ const getFileIconColor = (filename) => {
         cursor: pointer;
         padding: 4px 16px;
         border-radius: 8px;
-        background-color: var(--main-light-4);
-        border: 1px solid var(--main-light-3);
+        background-color: var(--main-20);
+        border: 1px solid var(--main-20);
         transition: all 0.2s ease;
 
         &.active {
@@ -2267,7 +2267,7 @@ const getFileIconColor = (filename) => {
 
     .config-controls {
       .ant-btn {
-        border-color: var(--main-light-3);
+        border-color: var(--main-20);
         color: var(--gray-700);
 
         &:hover {
@@ -2281,9 +2281,9 @@ const getFileIconColor = (filename) => {
   .ocr-config {
     margin-bottom: 16px;
     padding: 12px 16px;
-    background-color: var(--main-light-6);
+    background-color: var(--main-5);
     border-radius: 8px;
-    border: 1px solid var(--main-light-3);
+    border: 1px solid var(--main-20);
 
     .ant-form-item {
       margin-bottom: 0;
@@ -2325,9 +2325,9 @@ const getFileIconColor = (filename) => {
   .qa-split-config {
     margin-bottom: 16px;
     padding: 12px 16px;
-    background-color: var(--main-light-6);
+    background-color: var(--main-5);
     border-radius: 8px;
-    border: 1px solid var(--main-light-3);
+    border: 1px solid var(--main-20);
 
     .ant-form-item {
       margin-bottom: 12px;
@@ -2355,7 +2355,7 @@ const getFileIconColor = (filename) => {
     }
 
     .ant-input {
-      border-color: var(--main-light-3);
+      border-color: var(--main-20);
 
       &:hover,
       &:focus {
@@ -2383,7 +2383,7 @@ const getFileIconColor = (filename) => {
     margin-bottom: 20px;
 
     .ant-textarea {
-      border-color: var(--main-light-3);
+      border-color: var(--main-20);
       background-color: #fff;
       font-family: monospace;
       resize: vertical;
@@ -2405,7 +2405,7 @@ const getFileIconColor = (filename) => {
 
 .chunk-config-content {
   .params-info {
-    background-color: var(--main-light-4);
+    background-color: var(--main-20);
     border-radius: 6px;
     padding: 10px 12px;
     margin-bottom: 16px;
@@ -2511,7 +2511,7 @@ const getFileIconColor = (filename) => {
     z-index: 10;
 
     &:hover {
-      background-color: var(--main-light-2);
+      background-color: var(--main-40);
     }
   }
 
@@ -2524,7 +2524,7 @@ const getFileIconColor = (filename) => {
     z-index: 10;
 
     &:hover {
-      background-color: var(--main-light-2);
+      background-color: var(--main-40);
     }
   }
 
@@ -2595,7 +2595,7 @@ const getFileIconColor = (filename) => {
         border-radius: 4px;
 
         &:hover {
-          background-color: var(--main-light-5);
+          background-color: var(--main-5);
           color: var(--main-color);
         }
       }
@@ -2607,7 +2607,7 @@ const getFileIconColor = (filename) => {
     align-items: center;
     justify-content: space-between;
     padding: 2px 4px;
-    background-color: var(--main-light-5);
+    background-color: var(--main-5);
     border-radius: 4px;
     margin-bottom: 4px;
     flex-shrink: 0;
@@ -2631,7 +2631,7 @@ const getFileIconColor = (filename) => {
       border-radius: 3px;
 
       &:hover {
-        background-color: var(--main-light-4);
+        background-color: var(--main-20);
         color: var(--main-color);
       }
     }
@@ -2721,7 +2721,7 @@ const getFileIconColor = (filename) => {
         border-radius: 4px;
 
         &:hover {
-          background-color: var(--main-light-5);
+          background-color: var(--main-5);
           color: var(--main-color);
         }
       }
@@ -2844,7 +2844,7 @@ const getFileIconColor = (filename) => {
           font-size: 13px;
 
           &:hover {
-            background-color: var(--main-light-5);
+            background-color: var(--main-5);
             border-color: var(--main-color);
             color: var(--main-400);
           }
@@ -2928,11 +2928,11 @@ const getFileIconColor = (filename) => {
 
 /* Table row selection styling */
 :deep(.ant-table-tbody > tr.ant-table-row-selected > td) {
-  background-color: var(--main-light-5);
+  background-color: var(--main-5);
 }
 
 :deep(.ant-table-tbody > tr:hover > td) {
-  background-color: var(--main-light-6);
+  background-color: var(--main-5);
 }
 
 .panel-action-btn {
@@ -2969,7 +2969,7 @@ const getFileIconColor = (filename) => {
   &.active.expanded {
     transform: scaleX(1);
     &:hover {
-      background-color: var(--main-light-5);
+      background-color: var(--main-5);
       border-color: var(--main-color);
       color: var(--main-color);
     }
diff --git a/web/src/views/SettingView.vue b/web/src/views/SettingView.vue
index 10005286..12f84351 100644
--- a/web/src/views/SettingView.vue
+++ b/web/src/views/SettingView.vue
@@ -256,7 +256,7 @@ const openLink = (url) => {
   display: flex;
   flex-direction: column;
   align-items: center;
-  border-right: 1px solid var(--main-light-3);
+  border-right: 1px solid var(--main-20);
   gap: 8px;
   padding-top: 20px;