diff --git a/src/renderer/src/assets/styles/color.scss b/src/renderer/src/assets/styles/color.scss
index 517160e76c..96eb426be3 100644
--- a/src/renderer/src/assets/styles/color.scss
+++ b/src/renderer/src/assets/styles/color.scss
@@ -58,16 +58,6 @@
   --navbar-background-mac: rgba(20, 20, 20, 0.55);
   --navbar-background: #1f1f1f;
 
-  --navbar-height: 44px;
-  --sidebar-width: 50px;
-  --status-bar-height: 40px;
-  --input-bar-height: 100px;
-
-  --assistants-width: 275px;
-  --topic-list-width: 275px;
-  --settings-width: 250px;
-  --scrollbar-width: 5px;
-
   --chat-background: transparent;
   --chat-background-user: rgba(255, 255, 255, 0.08);
   --chat-background-assistant: transparent;
@@ -146,11 +136,6 @@
   --chat-text-user: var(--color-text);
 }
 
-[navbar-position='left'] {
-  --navbar-height: 42px;
-  --list-item-border-radius: 20px;
-}
-
 [navbar-position='left'][theme-mode='light'] {
   --color-list-item: #eee;
   --color-list-item-hover: #f5f5f5;
diff --git a/src/renderer/src/assets/styles/index.scss b/src/renderer/src/assets/styles/index.scss
index 974457dc4d..9efd4b67e9 100644
--- a/src/renderer/src/assets/styles/index.scss
+++ b/src/renderer/src/assets/styles/index.scss
@@ -6,6 +6,7 @@
 @use './container.scss';
 @use './animation.scss';
 @use './richtext.scss';
+@use './responsive.scss';
 @import '../fonts/icon-fonts/iconfont.css';
 @import '../fonts/ubuntu/ubuntu.css';
 @import '../fonts/country-flag-fonts/flag.css';
diff --git a/src/renderer/src/assets/styles/responsive.scss b/src/renderer/src/assets/styles/responsive.scss
new file mode 100644
index 0000000000..c5ed80433d
--- /dev/null
+++ b/src/renderer/src/assets/styles/responsive.scss
@@ -0,0 +1,27 @@
+// xl, xxl, default style
+:root {
+  --navbar-height: 44px;
+  --sidebar-width: 50px;
+  --status-bar-height: 40px;
+  --input-bar-height: 100px;
+
+  --assistants-width: 275px;
+  --topic-list-width: 275px;
+  --settings-width: 250px;
+
+  --scrollbar-width: 5px;
+}
+
+[navbar-position='left'] {
+  --navbar-height: 42px;
+  --list-item-border-radius: 20px;
+}
+
+// lg
+@media (max-width: 1080px) {
+  :root {
+    --assistants-width: 210px;
+    --topic-list-width: 210px;
+    --settings-width: 210px;
+  }
+}
diff --git a/src/renderer/src/pages/home/ChatNavbar.tsx b/src/renderer/src/pages/home/ChatNavbar.tsx
index 4b4f94909f..63ed16f989 100644
--- a/src/renderer/src/pages/home/ChatNavbar.tsx
+++ b/src/renderer/src/pages/home/ChatNavbar.tsx
@@ -98,16 +98,16 @@ const HeaderNavbar: FC<Props> = ({ activeAssistant, setActiveAssistant, activeTo
       </HStack>
       <HStack alignItems="center" gap={8}>
         <UpdateAppButton />
-        <Tooltip title={t('chat.assistant.search.placeholder')} mouseEnterDelay={0.8}>
-          <NarrowIcon onClick={() => SearchPopup.show()}>
-            <Search size={18} />
-          </NarrowIcon>
-        </Tooltip>
         <Tooltip title={t('navbar.expand')} mouseEnterDelay={0.8}>
           <NarrowIcon onClick={handleNarrowModeToggle}>
             <i className="iconfont icon-icon-adaptive-width"></i>
           </NarrowIcon>
         </Tooltip>
+        <Tooltip title={t('chat.assistant.search.placeholder')} mouseEnterDelay={0.8}>
+          <NavbarIcon onClick={() => SearchPopup.show()}>
+            <Search size={18} />
+          </NavbarIcon>
+        </Tooltip>
         {topicPosition === 'right' && !showTopics && (
           <Tooltip title={t('navbar.show_sidebar')} mouseEnterDelay={2}>
             <NavbarIcon onClick={toggleShowTopics}>
diff --git a/src/renderer/src/pages/home/Tabs/components/AssistantItem.tsx b/src/renderer/src/pages/home/Tabs/components/AssistantItem.tsx
index 1d8e12626a..7951700aa6 100644
--- a/src/renderer/src/pages/home/Tabs/components/AssistantItem.tsx
+++ b/src/renderer/src/pages/home/Tabs/components/AssistantItem.tsx
@@ -389,6 +389,7 @@ const Container = styled.div`
   border-radius: var(--list-item-border-radius);
   border: 0.5px solid transparent;
   width: calc(var(--assistants-width) - 20px);
+
   &:hover {
     background-color: var(--color-list-item-hover);
   }
diff --git a/src/renderer/src/pages/home/Tabs/index.tsx b/src/renderer/src/pages/home/Tabs/index.tsx
index f7314d746a..9362288df7 100644
--- a/src/renderer/src/pages/home/Tabs/index.tsx
+++ b/src/renderer/src/pages/home/Tabs/index.tsx
@@ -153,8 +153,8 @@ const HomeTabs: FC<Props> = ({
 const Container = styled.div`
   display: flex;
   flex-direction: column;
-  max-width: var(--assistants-width);
-  min-width: var(--assistants-width);
+  width: var(--assistants-width);
+  transition: width 0.3s;
   height: calc(100vh - var(--navbar-height));
 
   &.right {
@@ -179,6 +179,7 @@ const Container = styled.div`
 
 const TabContent = styled.div`
   display: flex;
+  transition: width 0.3s;
   flex: 1;
   flex-direction: column;
   overflow-y: hidden;
diff --git a/src/renderer/src/utils/style.ts b/src/renderer/src/utils/style.ts
index 8050904cd1..a95fa93dd2 100644
--- a/src/renderer/src/utils/style.ts
+++ b/src/renderer/src/utils/style.ts
@@ -141,3 +141,63 @@ export function getForegroundColor(backgroundColor: HexColor): HexColor {
 
   return luminance > 0.179 ? '#000000' : '#FFFFFF'
 }
+
+// 用于ts方式控制响应式样式，暂时没用上
+// 目前应该设计到lg就足够
+// 应该和 file://./../assets/styles/responsive.scss 保持一致
+/**
+ * 断点配置对象，定义了不同屏幕尺寸的最小宽度（单位：像素）
+ *
+ * @property {number} xs - 超小屏幕断点，起始于 0px
+ * @property {number} sm - 小屏幕断点，起始于 576px
+ * @property {number} md - 中等屏幕断点，起始于 768px
+ * @property {number} lg - 大屏幕断点，起始于 1080px
+ * @property {number} xl - 超大屏幕断点，起始于 1200px
+ * @property {number} xxl - 超超大屏幕断点，起始于 1400px
+ */
+// export const breakpoints = {
+//   xs: 0,
+//   sm: 576,
+//   md: 768,
+//   lg: 1080,
+//   xl: 1200,
+//   xxl: 1400
+// } as const
+
+// type MediaQueryFunction = (styles: string) => string
+// type MediaQueries = Record<keyof typeof breakpoints, MediaQueryFunction>
+
+/**
+ * 媒体查询工具对象，用于生成响应式样式的媒体查询字符串
+ *
+ * @example
+ * // 使用示例：
+ * ```ts
+ * const styles = {
+ *   color: 'red',
+ *   [media.md]: `
+ *     color: blue;
+ *   `,
+ *   [media.lg]: `
+ *     color: green;
+ *   `
+ * }
+ * ```
+ *
+ * 生成的CSS将包含：
+ * ```css
+ *   color: red;
+ *   @media (max-width: 768px) { color: blue; }
+ *   @media (max-width: 992px) { color: green; }
+ * ```
+ */
+// Not using for now
+// export const media = objectKeys(breakpoints).reduce<MediaQueries>((acc, label) => {
+//   const key = label
+//   acc[key] = (styles: string): string => `
+//     @media (max-width: ${breakpoints[key]}px) {
+//       ${styles}
+//     }
+//   `
+//   return acc
+// }, {} as MediaQueries)