diff --git a/src/components/chat-container/chat-container.scss b/src/components/chat-container/chat-container.scss
index f7e664db88a9fa73c97a60e1c09d735c4f7e7f31..1efd5e4089259282d1a6ee12e14cacf7a8a9ba6f 100644
--- a/src/components/chat-container/chat-container.scss
+++ b/src/components/chat-container/chat-container.scss
@@ -16,7 +16,10 @@ $ai-chat: (
   // 样式2
   'color-2': #4d6bfe,
   'background-color-2': rgb(219 234 254),
-  'hover-background-color-2': #c3daf8
+  'hover-background-color-2': #c3daf8,
+  'scroll-bar-width': 8px,
+  'scroll-bar-height': 8px,
+  'scroll-bar-radius': 4px,
 );
 
 @include b(chat-container) {
@@ -53,6 +56,15 @@ $ai-chat: (
     justify-content: center;
     margin: 8px;
   }
+
+  *::-webkit-scrollbar {
+    width: getCssVar('ai-chat', 'scroll-bar-width');
+    height: getCssVar('ai-chat', 'scroll-bar-height');
+  }
+
+  *::-webkit-scrollbar-thumb {
+    border-radius: getCssVar('ai-chat', 'scroll-bar-radius');
+  }
 }
 
 @include b(chat-container-header) {
@@ -119,6 +131,10 @@ $ai-chat: (
     bottom: 118px;
     width: 100%;
     margin: 0;
+
+    &.is-has-materials {
+      bottom: 180px;
+    }
   }
   .#{bem(chat-messages)} {
     padding-bottom: 48px;
diff --git a/src/components/chat-input/chat-input.scss b/src/components/chat-input/chat-input.scss
index 1e7ceb29ce5599705a78513c5f05b0f8e5210835..09699c8bdd32bf8eee20b110d70d2c82e646cac8 100644
--- a/src/components/chat-input/chat-input.scss
+++ b/src/components/chat-input/chat-input.scss
@@ -1,5 +1,5 @@
 @include b(chat-input-material-wrapper) {
-  max-height: 6em;
+  max-height: 90px;
   padding: 4px;
   overflow: hidden auto;
   font-size: 16px;
@@ -28,13 +28,13 @@
 
   // 设置滚动条样式
   &::-webkit-scrollbar {
-    width: 6px;
+    width: getCssVar('ai-chat', 'scroll-bar-width');
+    height: getCssVar('ai-chat', 'scroll-bar-height');
   }
 
   // 滚动条轨道
   &::-webkit-scrollbar-thumb {
-    // 设置滚动条颜色
-    background-color: #ccc;
+    background-color: getCssVar(color, fill, 2);
     border-radius: #{getCssVar('ai-chat', 'border-radius')};
   }
 }
diff --git a/src/components/chat-message-item/markdown-message/markdown-message.scss b/src/components/chat-message-item/markdown-message/markdown-message.scss
index ce6e04b180d1688923792d1fa6c6d85928cfd4c1..bf0cf3917a8c66fefc4345ebbb2e97a97b5116f9 100644
--- a/src/components/chat-message-item/markdown-message/markdown-message.scss
+++ b/src/components/chat-message-item/markdown-message/markdown-message.scss
@@ -4,6 +4,24 @@
   .cherry {
     border-radius: #{getCssVar('ai-chat', 'border-radius')};
     box-shadow: none;
+
+    *::-webkit-scrollbar {
+      width: getCssVar('ai-chat', 'scroll-bar-width');
+      height: getCssVar('ai-chat', 'scroll-bar-height');
+    }
+
+    *::-webkit-scrollbar-thumb {
+      background-color: getCssVar(color, fill, 2);
+      border-radius: getCssVar('ai-chat', 'scroll-bar-radius');
+    }
+
+    *::-webkit-scrollbar-thumb:hover {
+      background-color: getCssVar(color, fill, 2);
+    }
+  }
+
+  .cherry-markdown pre {
+    background-color: getCssVar(ai-chat, background, color);
   }
 
   .cherry-markdown pre {
@@ -15,7 +33,7 @@
     border: 0;
 
     figure {
-      max-width: 400px;
+      max-width: 1200px;
 
       > svg {
         width: 100%;
diff --git a/src/components/chat-messages/chat-messages.scss b/src/components/chat-messages/chat-messages.scss
index 26111919663f5355961119342e3d87679d9b1f5a..b9acd8dbc3f88aef19c45b416e49847de6df45e5 100644
--- a/src/components/chat-messages/chat-messages.scss
+++ b/src/components/chat-messages/chat-messages.scss
@@ -1,9 +1,8 @@
 @include b(chat-messages) {
-  margin: 6px;
   width: calc(100% - 12px);
   height: calc(100% - 12px);
-  overflow-x: hidden;
-  overflow-y: auto;
+  margin: 6px;
+  overflow: hidden auto;
 
   // 设置滚动条样式
   &::-webkit-scrollbar {
@@ -12,8 +11,7 @@
 
   // 滚动条轨道
   &::-webkit-scrollbar-thumb {
-    // 设置滚动条颜色
-    background-color: #ccc;
+    background-color: getCssVar(color, fill, 2);
     border-radius: #{getCssVar('ai-chat', 'border-radius')};
   }
 }
diff --git a/src/components/chat-toolbar/chat-toolbar.tsx b/src/components/chat-toolbar/chat-toolbar.tsx
index c91a123ebeeb15ffa5f0638d3a8bd8bde3ed70e8..562dd4212c1b9bf389baa211e5a94ab76eb3b26f 100644
--- a/src/components/chat-toolbar/chat-toolbar.tsx
+++ b/src/components/chat-toolbar/chat-toolbar.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable no-nested-ternary */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useContext, useMemo } from 'preact/hooks';
+import { useComputed } from '@preact/signals';
 import { Namespace } from '../../utils';
 import { IChatToolbarItem } from '../../interface';
 import { AiChatController } from '../../controller';
@@ -81,6 +82,10 @@ export const ChatToolbar = (props: ChatToolbarProps) => {
     },
   ];
 
+  const hasMaterials = useComputed(() => {
+    return props.controller.materials.value.length > 0;
+  });
+
   /**
    * 回答默认工具栏
    *
@@ -217,7 +222,12 @@ export const ChatToolbar = (props: ChatToolbarProps) => {
   }, [data?.state, data?.completed]);
 
   return (
-    <div className={`${ns.b()} ${ns.e(style)} ${className || ''}`}>
+    <div
+      className={`${ns.b()} ${ns.is(
+        'has-materials',
+        hasMaterials.value,
+      )} ${ns.e(style)} ${className || ''}`}
+    >
       {toolbarItems.map((item, index) => {
         if (hidden(item)) return;
         return (
diff --git a/src/components/chat-topic-item/chat-topic-item.scss b/src/components/chat-topic-item/chat-topic-item.scss
index ef4c2452f52ea0fa8edbd7927d5a10c55b04fd11..464bcb6372781f4c1af6da0388b89faef6e1f8d4 100644
--- a/src/components/chat-topic-item/chat-topic-item.scss
+++ b/src/components/chat-topic-item/chat-topic-item.scss
@@ -2,9 +2,10 @@
   position: relative;
   display: flex;
   align-items: center;
-  height: 38px;
+  height: 32px;
   padding: 0 8px;
   margin-top: 4px;
+  font-size: getCssVar(font-size, regular);
   cursor: pointer;
   border-radius: 8px;