diff --git a/src/renderer/styles/index.css b/src/renderer/styles/index.css
index ebcdea7..a1c9e3f 100644
--- a/src/renderer/styles/index.css
+++ b/src/renderer/styles/index.css
@@ -1,5 +1,6 @@
 @import "tailwindcss";
 @import "./theme/index.css";
+@import "./tailwind.css";
 @plugin "@tailwindcss/typography";
 
 .bg {
@@ -58,60 +59,73 @@ body {
   border-radius: 10px;
   border: 1px solid #E5E8EE;
 }
+
 .el-table {
-  margin-top: 0!important;
+  margin-top: 0 !important;
 }
+
 .el-table th.el-table__cell {
-  background-color: #F5F7FA!important;
+  background-color: #F5F7FA !important;
 }
+
 .el-dialog {
-  padding: 0!important;
-  border-radius: 20px!important;
+  padding: 0 !important;
+  border-radius: 20px !important;
 }
+
 .el-dialog__header {
-  padding: 16px 20px!important;
+  padding: 16px 20px !important;
   border-bottom: 1px solid #E5E8EE;
 }
+
 .el-dialog__title {
   font-weight: 600;
   font-size: 14px;
   color: #171717;
 }
+
 .el-dialog__close {
   font-size: 14px;
   font-weight: 600;
   color: #525866;
 }
+
 .dialog-footer {
-  padding: 16px 20px!important;
+  padding: 16px 20px !important;
   border-top: 1px solid #E5E8EE;
 }
+
 .dialog-footer .el-button {
-  border-radius: 8px!important;
-  padding: 8px 10px!important;
+  border-radius: 8px !important;
+  padding: 8px 10px !important;
   font-weight: 500;
   font-size: 14px;
 }
+
 .dialog-footer .el-button--primary {
-  background: #2B7FFF!important;
-  border-color: #2B7FFF!important;
+  background: #2B7FFF !important;
+  border-color: #2B7FFF !important;
 }
-.el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.el-form-item__label:before, .el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.el-form-item__label-wrap>.el-form-item__label:before {
-  content: ""!important;
-  margin-left: 0px!important;
+
+.el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.el-form-item__label:before,
+.el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.el-form-item__label-wrap>.el-form-item__label:before {
+  content: "" !important;
+  margin-left: 0px !important;
 }
 
 .el-form-item__label {
   font-weight: 400;
-  font-size: 14px!important;
-  color: #171717!important;
+  font-size: 14px !important;
+  color: #171717 !important;
 }
+
 .el-input__wrapper {
-  border-radius: 8px!important;
+  border-radius: 8px !important;
   /* border: 1px solid #E5E8EE; */
 }
 
-.el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.el-form-item__label:after, .el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.el-form-item__label-wrap>.el-form-item__label:after {
+.el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.el-form-item__label:after,
+.el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.el-form-item__label-wrap>.el-form-item__label:after {
   content: "*";
   color: #FF4949;
   margin-left: 3px;
diff --git a/src/renderer/styles/tailwind.css b/src/renderer/styles/tailwind.css
new file mode 100644
index 0000000..4dfaa52
--- /dev/null
+++ b/src/renderer/styles/tailwind.css
@@ -0,0 +1,34 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+
+  /* Firefox */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(0, 0, 0, 0.08) transparent;
+  }
+
+  /* Webkit */
+  *::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  *::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.08);
+    border-radius: 9999px;
+    border: 2px solid transparent;
+    /* 产生内边距，mac 风格关键 */
+    background-clip: padding-box;
+  }
+
+  *::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(0, 0, 0, 0.16);
+  }
+}
\ No newline at end of file
diff --git a/src/renderer/views/home/ChatGuide.vue b/src/renderer/views/home/ChatGuide.vue
index e1c7a14..be36b5a 100644
--- a/src/renderer/views/home/ChatGuide.vue
+++ b/src/renderer/views/home/ChatGuide.vue
@@ -1,121 +1,80 @@
 <template>
-  <div class="chat-guide">
-    <div class="hero-area">
-      <h1 class="greet">你好，<br/>我今天能帮你什么？</h1>
+  <!-- 页面根节点：不滚动 -->
+  <div class="h-full bg-white overflow-hidden">
 
-      <div class="input-wrap">
-        <div class="tag">智能问数</div>
-        <div class="fake-input">
-          <div class="placeholder">给我发布或者布置任务</div>
-          <div class="actions">
-            <button class="link">🔗</button>
-            <button class="send">✈</button>
+    <!-- 唯一滚动容器 -->
+    <div class="h-full overflow-y-auto">
+
+      <!-- Hero：吸顶 -->
+      <div class="sticky top-0 z-20 bg-white px-12 pt-10 pb-6
+               max-[800px]:px-5">
+        <h1 class="text-[28px] font-bold mb-7 leading-tight">
+          你好，<br />
+          我今天能帮你什么？
+        </h1>
+
+        <!-- input -->
+        <div class="flex flex-col gap-3">
+          <div class="inline-flex items-center justify-center w-[108px]
+                   px-3 py-1.5 rounded-2xl border border-[#E5E8EE]
+                   text-[13px] text-[#333]">
+            智能问数
+          </div>
+
+          <div class="h-[174px] bg-white rounded-lg border border-[#eef2f6]
+                   shadow-[0_1px_0_rgba(0,0,0,0.03)]
+                   p-[18px] flex flex-col justify-between">
+            <div class="text-[#bfc9d4]">
+              给我发布或者布置任务
+            </div>
+
+            <div class="flex justify-between items-center">
+              <button class="text-[#9fb0c4]">🔗</button>
+              <button class="bg-[#f1f6fb] px-2.5 py-1.5 rounded-md">
+                ✈
+              </button>
+            </div>
+          </div>
+
+          <!-- header -->
+          <div class="flex justify-between items-center mt-4">
+            <h3 class="text-base font-semibold">任务中心</h3>
+            <a class="text-[#3b82f6] text-[13px] cursor-pointer">
+              编辑
+            </a>
           </div>
         </div>
       </div>
-      <div class="task-header">
-        <h3>任务中心</h3>
-        <a class="edit">编辑</a>
-      </div>
-    </div>
 
-    <div class="task-area">
-      <div class="task-list">
-        <div class="task-card" v-for="n in 14" :key="n">
-          <div class="task-icon">销</div>
-          <div class="task-body">
-            <div class="task-title">每日销售数据</div>
-            <div class="task-desc">分析用于销售渠道每日数据汇总及简要展示</div>
+      <!-- 内容区 -->
+      <div class="px-12 pb-10 pt-4
+               max-[800px]:px-5">
+        <div class="grid grid-cols-2 gap-4
+                 max-[800px]:grid-cols-1">
+          <div v-for="n in 14" :key="n" class="flex gap-3 items-start p-3.5
+                   rounded-[10px] border border-[#dfeaf6] bg-white">
+            <div class="w-11 h-11 bg-[#EFF6FF] rounded-lg
+                     border border-dashed border-[#9fc0e8]
+                     flex items-center justify-center
+                     text-[#3b82f6] text-[23px]">
+              销
+            </div>
+
+            <div>
+              <div class="font-semibold">
+                每日销售数据
+              </div>
+              <div class="text-[#9aa5b1] text-[13px] mt-1.5">
+                分析用于销售渠道每日数据汇总及简要展示
+              </div>
+            </div>
           </div>
         </div>
       </div>
+
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 </script>
-
-<style scoped>
-.chat-guide {
-  height: 100%;
-  overflow: visible;
-  background: #fff;
-  padding: 40px 48px;
-  box-sizing: border-box;
-}
-
-.hero-area {
-  position: sticky;
-  top: 0;
-  background: #ffffff;
-  padding-top: 24px;
-  padding-bottom: 24px;
-  z-index: 10;
-}
-
-.greet {
-  font-size: 28px;
-  font-weight: 700;
-  margin: 0 0 28px 0;
-}
-
-.input-wrap { display:flex; flex-direction:column; align-items:stretch; gap:12px }
-.tag {
-  display:inline-flex;
-  align-items:center;
-  justify-content:center;
-  width: 108px;
-  padding:6px 10px;
-  border-radius: 16px;
-  background: transparent;
-  color:#333;
-  font-size:13px;
-  border: 1px solid #E5E8EE;
-  box-sizing: border-box;
-}
-
-.fake-input {
-  height: 174px;
-  background: #fff;
-  border-radius: 8px;
-  padding: 18px;
-  border: 1px solid #eef2f6;
-  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
-  display:flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-.placeholder { color:#bfc9d4 }
-.actions { display:flex; justify-content: space-between; align-items: center; width:100% }
-.actions .link { background:transparent; border:none; color:#9fb0c4 }
-.actions .send { background:#f1f6fb; border:none; padding:6px 10px; border-radius:6px }
-
-.task-area { margin-top: 20px }
-.task-header { display:flex; justify-content:space-between; align-items:center; margin:16px 0 }
-.task-header h3 { margin:0; font-size:16px }
-.task-header .edit { color:#3b82f6; font-size:13px }
-
-.task-list { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px }
-.task-card {
-  display:flex;
-  gap:12px;
-  align-items:flex-start;
-  padding: 14px;
-  border-radius: 10px;
-  border: 1px solid #dfeaf6;
-  background:#fff;
-}
-.task-icon { width:44px;height:44px;background: #EFF6FF; border-radius:8px;border:1px dashed #9fc0e8;display:flex;align-items:center;justify-content:center;color:#3b82f6; font-size: 23px; }
-.task-title { font-weight:600 }
-.task-desc { color:#9aa5b1; font-size:13px; margin-top:6px }
-
-/* make content under hero scroll while hero stays sticky */
-.chat-guide::before{ content:''; display:block; height:8px }
-
-@media (max-width: 800px){
-  .chat-guide { padding:20px }
-  .task-list { grid-template-columns: 1fr }
-}
-
-</style>
diff --git a/src/renderer/views/home/HomeTab.vue b/src/renderer/views/home/HomeTab.vue
index 99e6a8c..79dd20a 100644
--- a/src/renderer/views/home/HomeTab.vue
+++ b/src/renderer/views/home/HomeTab.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="bg-white h-full w-full p-[20px]">
-    <div class="home-tab">
-      <message-list />
-      <div class="main-area">
+    <div class="flex h-full w-full flex-col md:flex-row">
+      <message-list class="flex-none w-64" />
+      <div class="flex-1 overflow-auto p-5">
         <chat-guide />
       </div>
     </div>
@@ -13,25 +13,3 @@
 import MessageList from './MessageList.vue'
 import ChatGuide from './ChatGuide.vue'
 </script>
-
-<style scoped>
-.home-tab {
-  display: flex;
-  height: 100%;
-  width: 100%;
-}
-.home-tab > :first-child { flex: 0 0 260px }
-.main-area { flex: 1 1 auto; overflow: auto; padding: 20px }
-
-/* match MessageList scrollbar: 8px, subtle thumb */
-.main-area { scrollbar-width: auto }
-.main-area::-webkit-scrollbar { width: 8px }
-.main-area::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.05); border-radius: 8px }
-.main-area::-webkit-scrollbar-track { background: transparent }
-
-@media (max-width: 900px) {
-  .home-tab { flex-direction: column }
-  .home-tab > :first-child { flex: none; width: 100% }
-  .main-area { padding: 12px }
-}
-</style>
\ No newline at end of file
diff --git a/src/renderer/views/home/MessageList.vue b/src/renderer/views/home/MessageList.vue
index c246314..717237a 100644
--- a/src/renderer/views/home/MessageList.vue
+++ b/src/renderer/views/home/MessageList.vue
@@ -1,29 +1,34 @@
 <template>
-	<aside class="msg-list">
-		<header class="msg-list__header">
-			<div class="brand">
-        <img class="logo" src="@assets/images/login/white_logo.png"/>
-				<div class="title">YINIAN</div>
+	<aside class="w-64 h-screen box-border flex flex-col">
+		<header class="flex items-center justify-between mb-3">
+			<div class="flex items-center gap-2">
+				<img class="w-20 h-20 rounded-md object-cover" src="@assets/images/login/white_logo.png" />
+				<div class="font-bold text-gray-800">YINIAN</div>
 			</div>
 		</header>
-		<div class="new-row">
-			<button class="new-btn">＋ 新对话</button>
+
+		<div class="mb-3 pl-4 pr-4">
+			<button class="bg-white rounded-lg px-3 py-2 border shadow-sm w-full text-center">＋ 新对话</button>
 		</div>
 
-		<div class="sections">
-			<section v-for="group in groups" :key="group.title" class="group">
-				<div class="group__title">
+		<div class="overflow-y-auto p-4">
+			<section v-for="group in groups" :key="group.title" class="mb-3">
+				<div class="flex items-center justify-between text-sm text-gray-500 py-2">
 					<span>{{ group.title }}</span>
-					<span class="toggle">▾</span>
+					<span class="text-gray-400 mr-4">▾</span>
 				</div>
 
-				<ul class="items">
-					<li v-for="item in group.items" :key="item.id" :class="['item', { active: item.id === selectedId }]" @click="select(item.id)">
-						<span class="dot"></span>
-						<div class="content">
-							<div class="text">{{ item.title }}</div>
+				<ul class="list-none p-1 mr-4">
+					<li v-for="item in group.items" :key="item.id" @click="select(item.id)" :class="[
+						'flex items-center gap-2 p-2 text-gray-600 rounded-lg cursor-pointer transition-colors',
+						item.id === selectedId ? 'bg-white shadow-md border border-gray-200' : 'hover:bg-gray-50'
+					]">
+						<span class="w-2 h-2 rounded-full bg-sky-200 flex-none"></span>
+						<div class="flex-1 min-w-0">
+							<div class="truncate text-sm">{{ item.title }}</div>
 						</div>
-						<button v-if="item.id === selectedId" class="more">…</button>
+						<button v-if="item.id === selectedId"
+							class="bg-transparent border-0 text-gray-500 text-lg px-1 py-0">…</button>
 					</li>
 				</ul>
 			</section>
@@ -55,144 +60,48 @@ const groups = ref([
 			{ id: 8, title: '这是一段对话这是一段对话' },
 			{ id: 9, title: '这是一段对话这是一段对话' }
 		]
-  },
-  {
+	},
+	{
 		title: '近15天',
 		items: [
-			{ id: 1, title: '这是一段对话' },
-			{ id: 2, title: '这是一段对话' },
-			{ id: 3, title: '这是一段对话这是一段对话这是一段对话' },
-			{ id: 4, title: '这是一段对话这是一段对话' },
-			{ id: 5, title: '这是一段对话这是一段对话' }
+			{ id: 10, title: '这是一段对话' },
+			{ id: 11, title: '这是一段对话' },
+			{ id: 12, title: '这是一段对话这是一段对话这是一段对话' },
+			{ id: 13, title: '这是一段对话这是一段对话' },
+			{ id: 14, title: '这是一段对话这是一段对话' }
 		]
 	},
 	{
 		title: '近30天',
 		items: [
-			{ id: 6, title: '这是一段对话' },
-			{ id: 7, title: '这是一段对话' },
-			{ id: 8, title: '这是一段对话这是一段对话' },
-			{ id: 9, title: '这是一段对话这是一段对话' }
+			{ id: 15, title: '这是一段对话' },
+			{ id: 16, title: '这是一段对话' },
+			{ id: 17, title: '这是一段对话这是一段对话' },
+			{ id: 18, title: '这是一段对话这是一段对话' }
 		]
-  },
-  {
+	},
+	{
 		title: '近60天',
 		items: [
-			{ id: 1, title: '这是一段对话' },
-			{ id: 2, title: '这是一段对话' },
-			{ id: 3, title: '这是一段对话这是一段对话这是一段对话' },
-			{ id: 4, title: '这是一段对话这是一段对话' },
-			{ id: 5, title: '这是一段对话这是一段对话' }
+			{ id: 19, title: '这是一段对话' },
+			{ id: 20, title: '这是一段对话' },
+			{ id: 21, title: '这是一段对话这是一段对话这是一段对话' },
+			{ id: 22, title: '这是一段对话这是一段对话' },
+			{ id: 23, title: '这是一段对话这是一段对话' }
 		]
 	},
 	{
 		title: '近90天',
 		items: [
-			{ id: 6, title: '这是一段对话' },
-			{ id: 7, title: '这是一段对话' },
-			{ id: 8, title: '这是一段对话这是一段对话' },
-			{ id: 9, title: '这是一段对话这是一段对话' }
+			{ id: 24, title: '这是一段对话' },
+			{ id: 25, title: '这是一段对话' },
+			{ id: 26, title: '这是一段对话这是一段对话' },
+			{ id: 27, title: '这是一段对话这是一段对话' }
 		]
-  },
+	}
 ])
 
 function select(id: number) {
 	selectedId.value = id
 }
 </script>
-
-<style scoped>
-:root {
-	--bg: red;
-	--muted: #1c4b7d;
-	--dot: #BEDBFF;
-	--border: #E5E6EB;
-	--active-bg: #ffffff;
-	--accent: #4fc3f7;
-}
-.msg-list {
-	width: 260px;
-	height: 100vh;
-	background: var(--bg);
-	padding: 16px;
-	box-sizing: border-box;
-	display: flex;
-	flex-direction: column;
-}
-.msg-list__header {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	margin-bottom: 12px;
-}
-.brand {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-}
-.logo {
-	width: 40px;
-	height: 40px;
-	border-radius: 8px;
-	object-fit:cover;
-}
-.title { font-weight:700; color:#2b2f33 }
-.chev { color:var(--muted); transform: rotate(180deg); font-size:14px }
-.new-btn {
-	background: white;
-	border-radius: 8px;
-	padding: 8px 12px;
-	border: none;
-	box-shadow: 0 1px 0 rgba(0,0,0,0.04);
-	cursor: pointer;
-}
-
-.new-row { margin: 12px }
-.new-row .new-btn { width: 100%; display: block; text-align: center; border: 1px solid #E5E6EB; }
-
-.sections { overflow-y: auto; padding-right: 6px }
-.group { margin-bottom: 12px }
-.group__title {
-	color: var(--muted);
-	font-size: 13px;
-	display:flex;
-	align-items:center;
-	justify-content: space-between;
-	padding: 8px 2px;
-}
-.items { list-style:none; padding: 4px 0; margin:0 }
-.item {
-	display:flex;
-	align-items:center;
-	gap:8px;
-	padding: 10px 8px;
-	color:#4a5560;
-	border-radius: 8px;
-	cursor: pointer;
-	transition: background .12s;
-}
-.item:not(.active):hover { background: rgba(0,0,0,0.02) }
-.item.active { background: var(--active-bg); box-shadow: 0 4px 8px rgba(17,24,39,0.06); border: 1px solid #E5E6EB; }
-.dot {
-	width:8px;
-	height:8px;
-	border-radius:50%;
-	background: #BEDBFF;
-	flex: 0 0 8px;
-}
-.content { flex:1; min-width:0 }
-.text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size:14px }
-.more {
-	background: transparent;
-	border: none;
-	color: var(--muted);
-	font-size: 18px;
-	padding: 4px 6px;
-	cursor: pointer;
-}
-
-/* scrollbar small */
-.sections::-webkit-scrollbar { width: 8px }
-.sections::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.05); border-radius: 8px }
-
-</style>