diff --git a/web/src/assets/base.css b/web/src/assets/base.css
index ae96fdf7..07b2e258 100644
--- a/web/src/assets/base.css
+++ b/web/src/assets/base.css
@@ -1,3 +1,4 @@
+
 /* color palette from <https://github.com/vuejs/theme> */
 /* https://material-foundation.github.io/material-theme-builder/ */
 :root {
@@ -29,6 +30,7 @@
   --gray-200: #EFF1F2;
   --gray-100: #F8FAFB;
   --gray-50: #FBFDFE;
+  --gray-25: #FCFEFF;
   --gray-10: #FDFEFF;
   --gray-0: #FFFFFF;
 
diff --git a/web/src/components/AgentMessageComponent.vue b/web/src/components/AgentMessageComponent.vue
index 12242123..ed4e2cb1 100644
--- a/web/src/components/AgentMessageComponent.vue
+++ b/web/src/components/AgentMessageComponent.vue
@@ -230,8 +230,7 @@ const toggleToolCall = (toolCallId) => {
     margin-bottom: 15px;
     border-radius: 12px;
     border: 1px solid var(--gray-200);
-    background-color: var(--gray-50);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
+    background-color: var(--gray-25);
     overflow: hidden;
     transition: all 0.2s ease;
 
@@ -248,12 +247,12 @@ const toggleToolCall = (toolCallId) => {
         border: none;
 
         .ant-collapse-header {
-          padding: 12px 16px;
-          background-color: var(--gray-100);
+          padding: 8px 12px;
+          // background-color: var(--gray-100);
           font-size: 14px;
           font-weight: 500;
           color: var(--gray-800);
-          border-bottom: 1px solid var(--gray-200);
+          // border-bottom: 1px solid var(--gray-200);
           transition: all 0.2s ease;
 
           &:hover {
@@ -317,21 +316,22 @@ const toggleToolCall = (toolCallId) => {
   }
 
   :deep(.tool-call-display) {
-    background-color: var(--gray-50);
+    background-color: var(--gray-25);
     border: 1px solid var(--gray-200);
     border-radius: 12px;
     overflow: hidden;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
     transition: all 0.2s ease;
 
     &:hover {
+      background-color: var(--gray-50);
+      border: 1px solid var(--gray-200);
       border-color: var(--main-300);
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
     }
 
     .tool-header {
-      padding: 12px 16px;
-      background-color: var(--gray-100);
+      padding: 8px 12px;
+      // background-color: var(--gray-100);
       font-size: 14px;
       font-weight: 500;
       color: var(--gray-800);
@@ -508,6 +508,15 @@ const toggleToolCall = (toolCallId) => {
   //   padding-left: 1rem;
   // }
 
+  cite {
+    font-size: 12px;
+    color: var(--gray-700);
+    font-style: normal;
+    background-color: var(--gray-200);
+    border-radius: 4px;
+    outline: 2px solid var(--gray-200);
+  }
+
   a {
     color: var(--main-700);
   }
diff --git a/web/src/components/ToolCallingResult/KnowledgeBaseResult.vue b/web/src/components/ToolCallingResult/KnowledgeBaseResult.vue
index c3d619c5..531c5246 100644
--- a/web/src/components/ToolCallingResult/KnowledgeBaseResult.vue
+++ b/web/src/components/ToolCallingResult/KnowledgeBaseResult.vue
@@ -328,7 +328,7 @@ const getScoreColor = (score) => {
           .score-item {
             font-size: 11px;
             color: var(--gray-700);
-            background: var(--main-10);
+            // background: var(--main-10);
             padding: 1px 4px;
             border-radius: 4px;
             white-space: nowrap;
diff --git a/web/src/views/AgentView.vue b/web/src/views/AgentView.vue
index fa290037..37ac801b 100644
--- a/web/src/views/AgentView.vue
+++ b/web/src/views/AgentView.vue
@@ -693,8 +693,6 @@ const toggleSidebar = () => {
 }
 
 .config-modal-content {
-  max-height: 70vh;
-  overflow-y: auto;
   user-select: text;
 
   div[role="alert"] {