diff --git a/frontend/src/components/chat/MessageList.css b/frontend/src/components/chat/MessageList.css
index 7474d349..7511174b 100644
--- a/frontend/src/components/chat/MessageList.css
+++ b/frontend/src/components/chat/MessageList.css
@@ -1,15 +1,21 @@
 .message-list {
   flex: 1;
   overflow-y: auto;
-  padding: 24px;
-  background: #f5f5f5;
+  overflow-x: hidden;
+  padding: 20px 16px 20px 20px; /* 右侧留空给滚动条 */
+  background: linear-gradient(180deg, #f5f7fa 0%, #fafbfc 100%);
+  min-height: 0; /* 重要：让flex容器可以正确计算滚动 */
+  max-height: 100%; /* 限制最大高度 */
+  position: relative;
+  scroll-behavior: smooth; /* 平滑滚动 */
 }
 
 .message-item {
   display: flex;
   gap: 12px;
-  margin-bottom: 24px;
+  margin-bottom: 20px;
   animation: fadeIn 0.3s ease-in;
+  max-width: 100%;
 }
 
 @keyframes fadeIn {
@@ -40,14 +46,31 @@
 
 .message-body {
   background: white;
-  border-radius: 8px;
-  padding: 12px 16px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  border-radius: 12px;
+  padding: 14px 18px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  max-width: 85%;
+  word-wrap: break-word;
+  transition: box-shadow 0.2s ease;
+}
+
+.message-body:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
 }
 
 .message-user .message-body {
-  background: #e6f7ff;
-  border: 1px solid #91d5ff;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border: none;
+  color: white;
+}
+
+.message-user .user-message-text {
+  color: white;
+}
+
+.message-assistant .message-body {
+  background: white;
+  border: 1px solid #e8e8e8;
 }
 
 .user-message-text {
@@ -168,22 +191,22 @@
   border-top: 1px solid #f0f0f0;
 }
 
-/* 滚动条样式 */
+/* 滚动条样式 - 优化 */
 .message-list::-webkit-scrollbar {
-  width: 8px;
+  width: 6px;
 }
 
 .message-list::-webkit-scrollbar-track {
-  background: #f1f1f1;
-  border-radius: 4px;
+  background: transparent;
 }
 
 .message-list::-webkit-scrollbar-thumb {
-  background: #888;
-  border-radius: 4px;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
+  transition: background 0.2s;
 }
 
 .message-list::-webkit-scrollbar-thumb:hover {
-  background: #555;
+  background: rgba(0, 0, 0, 0.35);
 }
 
diff --git a/frontend/src/layouts/MainLayout.tsx b/frontend/src/layouts/MainLayout.tsx
index 4dc75845..1e103167 100644
--- a/frontend/src/layouts/MainLayout.tsx
+++ b/frontend/src/layouts/MainLayout.tsx
@@ -116,7 +116,7 @@ const MainLayout = () => {
         collapsible
         collapsed={collapsed}
         theme="light"
-        width={280}
+        width={240}
         style={{ overflow: 'auto' }}
       >
         {/* Logo区域 */}
@@ -184,11 +184,12 @@ const MainLayout = () => {
         {/* 内容区 */}
         <Content
           style={{
-            margin: '24px',
-            padding: 24,
+            margin: 0,
+            padding: 0,
             background: '#fff',
-            borderRadius: 8,
-            overflow: 'auto',
+            overflow: 'hidden',
+            display: 'flex',
+            flexDirection: 'column',
           }}
         >
           <Outlet />
diff --git a/frontend/src/pages/AgentChatPage.tsx b/frontend/src/pages/AgentChatPage.tsx
index 2fa24cd9..808d03ff 100644
--- a/frontend/src/pages/AgentChatPage.tsx
+++ b/frontend/src/pages/AgentChatPage.tsx
@@ -190,66 +190,73 @@ const AgentChatPage = () => {
 
   return (
     <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
-      {/* 标题栏 */}
-      <Card style={{ marginBottom: 16 }}>
-        <Space align="center" style={{ width: '100%', justifyContent: 'space-between' }}>
-          <Space align="center">
-            <span style={{ fontSize: 32 }}>{agent.icon}</span>
-            <div>
-              <Title level={3} style={{ marginBottom: 4 }}>
-                {agent.name}
-              </Title>
-              <Paragraph type="secondary" style={{ marginBottom: 0 }}>
-                {agent.description}
-              </Paragraph>
-              <Paragraph type="secondary" style={{ marginBottom: 0, fontSize: 12 }}>
-                分类：{agent.category} | 项目：{currentProject?.name}
-              </Paragraph>
+      {/* 顶部工具栏 - 紧凑设计 */}
+      <div style={{ 
+        padding: '12px 24px',
+        background: '#fff',
+        borderBottom: '1px solid #e8e8e8',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        flexShrink: 0,
+      }}>
+        <Space align="center" size="middle">
+          <span style={{ fontSize: 24 }}>{agent.icon}</span>
+          <div>
+            <div style={{ fontSize: 16, fontWeight: 600, lineHeight: '24px' }}>
+              {agent.name}
             </div>
-          </Space>
-
-          {/* 模型选择器 */}
-          <ModelSelector
-            value={selectedModel}
-            onChange={setSelectedModel}
-            disabled={sending}
-          />
+            <div style={{ fontSize: 12, color: '#8c8c8c', lineHeight: '20px' }}>
+              {agent.category} · {currentProject?.name}
+            </div>
+          </div>
         </Space>
-      </Card>
 
-      {/* 聊天区域 */}
-      <Card
+        {/* 模型选择器 */}
+        <ModelSelector
+          value={selectedModel}
+          onChange={setSelectedModel}
+          disabled={sending}
+        />
+      </div>
+
+      {/* 聊天区域 - 去掉Card，直接使用div */}
+      <div
         style={{
           flex: 1,
           display: 'flex',
           flexDirection: 'column',
           overflow: 'hidden',
-        }}
-        bodyStyle={{
-          flex: 1,
-          display: 'flex',
-          flexDirection: 'column',
-          padding: 0,
+          minHeight: 0,
+          background: '#fff',
         }}
       >
-        {/* 消息列表 */}
-        {messages.length === 0 && !sending ? (
-          <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#fafafa' }}>
-            <div style={{ textAlign: 'center', color: '#999' }}>
-              <RobotOutlined style={{ fontSize: 64, marginBottom: 16 }} />
-              <div style={{ fontSize: 16 }}>开始对话，我将为您提供专业的研究建议</div>
-              <div style={{ fontSize: 14, marginTop: 8 }}>
-                您可以直接输入问题，或使用@知识库功能引用文献
+        {/* 消息列表区域 */}
+        <div style={{ 
+          flex: 1, 
+          display: 'flex', 
+          flexDirection: 'column',
+          minHeight: 0, // 重要：确保可以滚动
+          overflow: 'hidden',
+        }}>
+          {messages.length === 0 && !sending ? (
+            <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#fafafa' }}>
+              <div style={{ textAlign: 'center', color: '#999' }}>
+                <RobotOutlined style={{ fontSize: 64, marginBottom: 16 }} />
+                <div style={{ fontSize: 16 }}>开始对话，我将为您提供专业的研究建议</div>
+                <div style={{ fontSize: 14, marginTop: 8 }}>
+                  您可以直接输入问题，或使用@知识库功能引用文献
+                </div>
               </div>
             </div>
-          </div>
-        ) : (
-          <MessageList
-            messages={messages}
-            loading={sending}
-            streamingContent={streamingContent}
-          />
-        )}
+          ) : (
+            <MessageList
+              messages={messages}
+              loading={sending}
+              streamingContent={streamingContent}
+            />
+          )}
+        </div>
 
         {/* 消息输入 */}
         <MessageInput
@@ -258,7 +265,7 @@ const AgentChatPage = () => {
           knowledgeBases={knowledgeBases}
           placeholder={`向${agent.name}提问...（Shift+Enter换行，Enter发送）`}
         />
-      </Card>
+      </div>
     </div>
   )
 }
diff --git a/frontend/src/pages/HistoryPage.tsx b/frontend/src/pages/HistoryPage.tsx
index 979a2ae5..654c8ce0 100644
--- a/frontend/src/pages/HistoryPage.tsx
+++ b/frontend/src/pages/HistoryPage.tsx
@@ -3,7 +3,7 @@ import { HistoryOutlined, SyncOutlined } from '@ant-design/icons'
 
 const HistoryPage = () => {
   return (
-    <div>
+    <div style={{ padding: '24px' }}>
       <Alert
         message="功能开发中"
         description="历史记录功能正在开发中，您将能够查看和管理所有对话历史..."
diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
index 6374c584..ad5eda5e 100644
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -31,7 +31,7 @@ const HomePage = () => {
   }
 
   return (
-    <div>
+    <div style={{ padding: '24px' }}>
       {/* 欢迎区域 */}
       <Card style={{ marginBottom: 24, background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' }}>
         <div style={{ color: 'white', padding: '20px 0' }}>
diff --git a/frontend/src/pages/KnowledgePage.tsx b/frontend/src/pages/KnowledgePage.tsx
index 563b8a62..203a4fb7 100644
--- a/frontend/src/pages/KnowledgePage.tsx
+++ b/frontend/src/pages/KnowledgePage.tsx
@@ -153,7 +153,7 @@ const KnowledgePage = () => {
   ]
 
   return (
-    <div>
+    <div style={{ padding: '24px' }}>
       {/* 提示信息 */}
       <Alert
         message="知识库功能说明"