diff --git a/web/src/components/ChatComponent.vue b/web/src/components/ChatComponent.vue
index eae4d932..3115c841 100644
--- a/web/src/components/ChatComponent.vue
+++ b/web/src/components/ChatComponent.vue
@@ -39,7 +39,9 @@
             </a-menu>
           </template>
         </a-dropdown>
-        <div class="nav-btn text" @click="state.showPanel = !state.showPanel"><SettingOutlined /></div>
+        <div class="nav-btn text" @click="state.showPanel = !state.showPanel">
+          <component :is="state.showPanel ? SettingFilled : SettingOutlined" />
+        </div>
         <div v-if="state.showPanel" class="my-panal" ref="panel">
           <div class="graphbase flex-center">
             知识库
@@ -133,6 +135,7 @@ import {
   CompassFilled,
   GoldenFilled,
   SettingOutlined,
+  SettingFilled,
 } from '@ant-design/icons-vue'
 import { marked } from 'marked';
 
diff --git a/web/src/views/ChatView.vue b/web/src/views/ChatView.vue
index 7a1c5390..1d559346 100644
--- a/web/src/views/ChatView.vue
+++ b/web/src/views/ChatView.vue
@@ -145,6 +145,7 @@ onMounted(() => {
   border-right: 1px solid #EDF4F5;
   min-width: var(--min-sider-width);
   max-width: 200px;
+  background-color: #FAFCFD;
 
   & .actions {
     height: var(--header-height);
@@ -152,10 +153,10 @@ onMounted(() => {
     justify-content: space-between;
     align-items: center;
     padding: 16px;
-    margin-bottom: 16px;
+    // margin-bottom: 16px;
     position: sticky;
     top: 0;
-    background-color: white;
+    background-color: #FAFCFD;
     z-index: 9;
 
     .action {
@@ -180,7 +181,7 @@ onMounted(() => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 16px;
+  padding: 12px;
   cursor: pointer;
   width: 100%;
   user-select: none;