diff --git a/web/src/components/ChatComponent.vue b/web/src/components/ChatComponent.vue
index 9773e86a..fd4bc18a 100644
--- a/web/src/components/ChatComponent.vue
+++ b/web/src/components/ChatComponent.vue
@@ -500,7 +500,7 @@ watch(
     justify-content: center;
     align-items: center;
     border-radius: 8px;
-    color: var(--c-text-light-1);
+    color: var(--gray-900);
     cursor: pointer;
     font-size: 1rem;
     width: auto;
@@ -719,7 +719,7 @@ watch(
     padding: 0;
 
     &:hover {
-      color: var(--c-text-dark-1);
+      color: var(--gray-1000);
     }
 
     &:disabled {
@@ -741,7 +741,7 @@ watch(
 
 
 .ant-dropdown-link {
-  color: var(--c-text-light-1);
+  color: var(--gray-900);
   cursor: pointer;
 }
 
@@ -758,7 +758,7 @@ watch(
 }
 
 .chat::-webkit-scrollbar-thumb {
-  background: var(--c-text-dark-2);
+  background: var(--gray-400);
   border-radius: 4px;
 }
 
diff --git a/web/src/components/DebugComponent.vue b/web/src/components/DebugComponent.vue
index 00291360..2bd5ff73 100644
--- a/web/src/components/DebugComponent.vue
+++ b/web/src/components/DebugComponent.vue
@@ -73,7 +73,7 @@
   }
 
   .error {
-    color: red;
+    color: var(--error-color);
   }
 
   .log-container {
diff --git a/web/src/layouts/AppLayout.vue b/web/src/layouts/AppLayout.vue
index e27caa1c..19e05898 100644
--- a/web/src/layouts/AppLayout.vue
+++ b/web/src/layouts/AppLayout.vue
@@ -59,7 +59,7 @@ console.log(route)
 <template>
   <div class="app-layout">
     <div class="debug-panel" >
-      <a-float-button 
+      <a-float-button
         @click="showDebug=!showDebug"
         tooltip="调试面板"
         :style="{
@@ -198,7 +198,7 @@ div.header, #app-router-view {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    width: 56px;
+    width: 52px;
     padding: 4px;
     padding-top: 10px;
     border: 1px solid transparent;
@@ -225,7 +225,6 @@ div.header, #app-router-view {
       color: var(--main-600);
       background-color: rgba(255, 255, 255, 0.8);
       backdrop-filter: blur(10px);
-      box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.05);
       border: 1px solid white;
     }
 
@@ -286,7 +285,7 @@ div.header, #app-router-view {
     .nav-item {
       text-decoration: none;
       width: 40px;
-      color: var(--c-black-soft);
+      color: var(--gray-900);
       font-size: 1rem;
       font-weight: bold;
       transition: color 0.1s ease-in-out, font-size 0.1s ease-in-out;
diff --git a/web/src/router/index.js b/web/src/router/index.js
index e34adb43..b9a41213 100644
--- a/web/src/router/index.js
+++ b/web/src/router/index.js
@@ -86,12 +86,11 @@ const router = createRouter({
           component: () => import('../views/ToolsView.vue'),
           meta: { keepAlive: true }
         },
-        // {
-        //   path: ':id',
-        //   name: 'ToolsComponent',
-        //   component: () => import('../views/ToolsFooComponent.vue'),
-        //   meta: { keepAlive: true }
-        // }
+        {
+          path: 'text_chunking',
+          name: 'TextChunking',
+          component: () => import('../components/TextChunkingComponent.vue'),
+        },
       ]
     },
     {
diff --git a/web/src/views/ChatView.vue b/web/src/views/ChatView.vue
index b436f6d4..10912054 100644
--- a/web/src/views/ChatView.vue
+++ b/web/src/views/ChatView.vue
@@ -139,7 +139,7 @@ onMounted(() => {
   border-right: 1px solid var(--main-light-3);
   overflow: hidden; /* 确保内容不溢出 */
   max-height: 100%;
-  background-color: #FAFCFD;
+  background-color: var(--bg-sider);
 
   & .actions {
     height: var(--header-height);
@@ -158,7 +158,7 @@ onMounted(() => {
       justify-content: center;
       align-items: center;
       border-radius: 8px;
-      color: var(--c-black-light-2);
+      color: var(--gray-800);
       cursor: pointer;
 
       &:hover {
@@ -184,7 +184,7 @@ onMounted(() => {
     user-select: none;
 
     &__title {
-      color: var(--c-black-light-3);
+      color: var(--gray-700);
       white-space: nowrap; /* 禁止换行 */
       overflow: hidden;    /* 超出部分隐藏 */
       text-overflow: ellipsis; /* 显示省略号 */
@@ -231,7 +231,7 @@ onMounted(() => {
 }
 
 .conversation-list::-webkit-scrollbar-thumb {
-  background: var(--c-text-dark-2);
+  background: var(--gray-400);
   border-radius: 4px;
 }
 
diff --git a/web/src/views/DataBaseInfoView.vue b/web/src/views/DataBaseInfoView.vue
index e73cbe90..b2be26f2 100644
--- a/web/src/views/DataBaseInfoView.vue
+++ b/web/src/views/DataBaseInfoView.vue
@@ -630,7 +630,7 @@ onMounted(() => {
           p {
             margin: 0;
             font-size: 15px;
-            color: var(--c-text-light-1);
+            color: var(--gray-900);
           }
 
           &.col {
@@ -682,7 +682,7 @@ onMounted(() => {
       &:disabled {
         cursor: not-allowed;
         background: var(--main-light-4);
-        color: var(--c-black-light-3);
+        color: var(--gray-700);
       }
     }
   }
@@ -746,7 +746,7 @@ onMounted(() => {
 
         .query-text {
           font-style: italic;
-          color: var(--c-text-light-1);
+          color: var(--gray-900);
         }
       }
     }
@@ -765,7 +765,7 @@ onMounted(() => {
       p {
         margin-bottom: 8px;
         line-height: 1.6;
-        color: var(--c-text-light-1);
+        color: var(--gray-900);
 
         &:last-child {
           margin-bottom: 0;
diff --git a/web/src/views/DataBaseView.vue b/web/src/views/DataBaseView.vue
index 065d00c8..fe54bfb2 100644
--- a/web/src/views/DataBaseView.vue
+++ b/web/src/views/DataBaseView.vue
@@ -10,7 +10,7 @@
     </HeaderComponent>
 
     <a-modal :open="newDatabase.open" title="新建数据库" @ok="createDatabase">
-      <h3>数据库名称<span style="color: red">*</span></h3>
+      <h3>数据库名称<span style="color: var(--error-color)">*</span></h3>
       <a-input v-model:value="newDatabase.name" placeholder="新建数据库名称" />
       <h3 style="margin-top: 20px;">数据库描述</h3>
       <a-textarea
@@ -260,14 +260,14 @@ onMounted(() => {
       }
 
       p {
-        color: var(--c-text-light-1);
+        color: var(--gray-900);
         font-size: small;
       }
     }
   }
 
   .description {
-    color: var(--c-text-light-1);
+    color: var(--gray-900);
     overflow: hidden;
     display: -webkit-box;
     -webkit-line-clamp: 1;
@@ -288,7 +288,7 @@ onMounted(() => {
   align-items: center;
   height: 100%;
   flex-direction: column;
-  color: var(--c-text-light-1);
+  color: var(--gray-900);
 }
 
 .database-container {
diff --git a/web/src/views/GraphView.vue b/web/src/views/GraphView.vue
index 90784fcc..147578fa 100644
--- a/web/src/views/GraphView.vue
+++ b/web/src/views/GraphView.vue
@@ -412,6 +412,6 @@ const graphStatusText = computed(() => {
   width: 100%;
   height: 100%;
   flex-direction: column;
-  color: var(--c-text-light-1);
+  color: var(--gray-900);
 }
 </style>