diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index 4f68775..e25a488 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -21,8 +21,8 @@ import {
   CloudServerOutlined,
   CloudUploadOutlined,
   HistoryOutlined,
-  LeftOutlined,
-  RightOutlined,
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
 } from "@ant-design/icons";
 import { createStyles } from "antd-style";
 import zhCN from "antd/locale/zh_CN";
@@ -136,12 +136,13 @@ const useStyles = createStyles(({ token, css }) => ({
       background: ${token.colorPrimary};
     }
   `,
-  collapseButton: css`
-    position: fixed;
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 1000;
-    transition: left 0.2s;
+  siderCloseButton: css`
+    flex-shrink: 0;
+  `,
+  headerLeft: css`
+    display: flex;
+    align-items: center;
+    gap: 12px;
   `,
 }));
 
@@ -217,6 +218,15 @@ const App: React.FC = () => {
                     />
                     <span className={styles.logoText}>Kintone Manager</span>
                   </div>
+                  <Tooltip title="收起侧边栏" mouseEnterDelay={0.5}>
+                    <Button
+                      type="text"
+                      icon={<MenuFoldOutlined />}
+                      onClick={toggleSider}
+                      className={styles.siderCloseButton}
+                      size="small"
+                    />
+                  </Tooltip>
                 </div>
                 <div className={styles.siderContent}>
                   <div
@@ -247,35 +257,29 @@ const App: React.FC = () => {
             )}
           </Sider>
 
-          {/* Collapse/Expand Button */}
-          <div
-            className={styles.collapseButton}
-            style={{ left: siderCollapsed ? 0 : siderWidth }}
-          >
-            <Tooltip title={siderCollapsed ? "展开侧边栏" : "收起侧边栏"}>
-              <Button
-                type="default"
-                icon={siderCollapsed ? <RightOutlined /> : <LeftOutlined />}
-                onClick={toggleSider}
-                style={{
-                  borderRadius: "0 4px 4px 0",
-                  boxShadow: "2px 0 8px rgba(0,0,0,0.15)",
-                }}
-              />
-            </Tooltip>
-          </div>
-
           {/* Main Content */}
           <Layout
             className={`${styles.mainLayout} ${siderCollapsed ? styles.mainLayoutCollapsed : ""}`}
             style={{ marginLeft: siderCollapsed ? 0 : siderWidth }}
           >
             <Header className={styles.header}>
-              <Title level={5} style={{ margin: 0 }}>
-                {currentDomain
-                  ? currentDomain.name
-                  : "Kintone Customize Manager"}
-              </Title>
+              <div className={styles.headerLeft}>
+                {siderCollapsed && (
+                  <Tooltip title="展开侧边栏" mouseEnterDelay={0.5}>
+                    <Button
+                      type="text"
+                      icon={<MenuUnfoldOutlined />}
+                      onClick={toggleSider}
+                      size="small"
+                    />
+                  </Tooltip>
+                )}
+                <Title level={5} style={{ margin: 0 }}>
+                  {currentDomain
+                    ? currentDomain.name
+                    : "Kintone Customize Manager"}
+                </Title>
+              </div>
               <Space>
                 <Button
                   type="primary"