diff --git a/src/components/navbar/ToolbarItem.tsx b/src/components/navbar/ToolbarItem.tsx
new file mode 100644
index 0000000..696a308
--- /dev/null
+++ b/src/components/navbar/ToolbarItem.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+
+interface BarItemProps {
+    title: string
+    onClick?: () => void
+    className?: string
+}
+
+const ToolbarItem: React.FC<BarItemProps> = (props) => {
+    const handleClick = () => {
+        if(props.onClick) props.onClick();
+    };
+
+    return (
+        <div
+            className={"toolbar-item"+ (props.className ? " "+ props.className : "")}
+            onClick={() => handleClick()}>
+            <span>{props.title}</span>
+        </div>
+    );
+}
+
+export default ToolbarItem;
diff --git a/src/components/navbar/index.tsx b/src/components/navbar/index.tsx
index 2028076..b3ed7a0 100644
--- a/src/components/navbar/index.tsx
+++ b/src/components/navbar/index.tsx
@@ -1,8 +1,12 @@
-import React from "react";
-import { Tooltip } from "react-tooltip";
+import React, { useRef } from "react";
 import Toggle from "@nocp/toggle";
 
 import ModeButton from "@/components/navbar/ModeButton";
+import ToolbarItem from "@/components/navbar/ToolbarItem";
+import Dialog from "@/components/Dialog";
+import ConvertingDialog from "@/dialogs/ConvertingDialog";
+import SeniorityDialog from "@/dialogs/SeniorityDialog";
+import CurrencyDialog from "@/dialogs/CurrencyDialog";
 
 import Storage from "@/utils/Storage";
 import useThemeDetector from "@/hooks/useThemeDetector";
@@ -13,6 +17,9 @@ import GraphingIcon from "@/icons/graphing_mode.svg";
 import ProgrammingIcon from "@/icons/programming_mode.svg";
 
 const Navbar: React.FC = () => {
+    const convertingDialogRef = useRef<Dialog>(null);
+    const seniorityDialogRef = useRef<Dialog>(null);
+    const currencyDialogRef = useRef<Dialog>(null);
     const themeValue = new Storage().getItem("theme", useThemeDetector());
 
     const handleToggle = (isActive: boolean) => {
@@ -21,28 +28,44 @@ const Navbar: React.FC = () => {
     };
 
     return (
-        <nav className="navbar">
-            <div className="mode-switcher">
-                <ModeButton name="通用" mode={Mode.GENERAL} icon={GeneralIcon}/>
-                <ModeButton name="图像" mode={Mode.GRAPHING} icon={GraphingIcon}/>
-                <ModeButton name="程序员" mode={Mode.PROGRAMMING} icon={ProgrammingIcon}/>
-            </div>
-
-            <div className="theme-switcher">
-                <Toggle
-                    data-tooltip-id="theme-switcher"
-                    data-tooltip-content="浅色 / 深色主题"
-                    onToggle={(e) => handleToggle(e)}
-                    defaultToggleValue={themeValue === Theme.LIGHT}/>
-
-                <Tooltip
-                    id="theme-switcher"
-                    place="right"
-                    opacity={1}
-                    border="1px solid var(--ca-gray2)"
-                    delayShow={500}/>
-            </div>
-        </nav>
+        <>
+            <nav className="navbar">
+                <div className="split">
+                    <div className="mode-switcher">
+                        <ModeButton name="通用" mode={Mode.GENERAL} icon={GeneralIcon}/>
+                        <ModeButton name="图像" mode={Mode.GRAPHING} icon={GraphingIcon}/>
+                        <ModeButton name="程序员" mode={Mode.PROGRAMMING} icon={ProgrammingIcon}/>
+                    </div>
+                </div>
+
+                <div className="split">
+                    <div className="toolbar">
+                        <ToolbarItem title="汇率" onClick={() => currencyDialogRef.current?.open()}/>
+                        <ToolbarItem title="辈分计算" onClick={() => seniorityDialogRef.current?.open()}/>
+                        <ToolbarItem title="单位换算" onClick={() => convertingDialogRef.current?.open()}/>
+                    </div>
+
+                    <div className="theme-switcher-container">
+                        <div className="theme-switcher-name">
+                            <span>浅色 / 深色主题</span>
+                        </div>
+
+                        <div className="theme-switcher">
+                            <Toggle
+                                data-tooltip-id="theme-switcher"
+                                data-tooltip-content="浅色 / 深色主题"
+                                onToggle={(e) => handleToggle(e)}
+                                defaultToggleValue={themeValue === Theme.LIGHT}/>
+                        </div>
+                    </div>
+                </div>
+            </nav>
+
+            {/* Dialogs */}
+            <ConvertingDialog ref={convertingDialogRef}/>
+            <SeniorityDialog ref={seniorityDialogRef}/>
+            <CurrencyDialog ref={currencyDialogRef}/>
+        </>
     );
 };
 
diff --git a/src/components/sidebar/History.tsx b/src/components/sidebar/History.tsx
index 2f27a53..8a84385 100644
--- a/src/components/sidebar/History.tsx
+++ b/src/components/sidebar/History.tsx
@@ -118,10 +118,12 @@ const History: React.FC = () => {
                 title="历史记录"
                 tip={<><kbd>ctrl+d</kbd> 清空记录</>}
                 onContextMenu={onContextMenu}>
-                <div className="history-main" id="history-list" ref={listElemRef}>
-                    {
-                        list.map((item, index) => <HistoryItem {...item} key={index}/>)
-                    }
+                <div className="history-container">
+                    <div className="history-main" id="history-list" ref={listElemRef}>
+                        {
+                            list.map((item, index) => <HistoryItem {...item} key={index}/>)
+                        }
+                    </div>
                 </div>
             </SidebarPage>
             {contextMenu}
diff --git a/src/components/sidebar/index.tsx b/src/components/sidebar/index.tsx
index fc0a5ca..93ba07b 100644
--- a/src/components/sidebar/index.tsx
+++ b/src/components/sidebar/index.tsx
@@ -20,7 +20,7 @@ import MainContext from "@/contexts/MainContext";
 const Sidebar: React.FC = () => {
     const { mode } = useContext(MainContext);
     const [sidebarOpen, setSidebarOpen] = useState<boolean>(!Utils.isMobile());
-    const [width, setWidth] = useState<number>(382);
+    const [width, setWidth] = useState<number>(362);
     const themeValue = new Storage().getItem("theme", useThemeDetector());
 
     const layoutSwitch = (calcMode: Mode) => {
@@ -84,7 +84,7 @@ const Sidebar: React.FC = () => {
             <Sash
                 direction="vertical"
                 defaultValue={width}
-                minValue={362}
+                minValue={342}
                 maxValue={620}
                 side="left"
                 disabled={mode === Mode.GRAPHING}
diff --git a/src/components/statusbar/index.tsx b/src/components/statusbar/index.tsx
index 6e50c2d..a4246c8 100644
--- a/src/components/statusbar/index.tsx
+++ b/src/components/statusbar/index.tsx
@@ -10,9 +10,6 @@ import BarItem from "@/components/statusbar/BarItem";
 import Dialog from "@/components/Dialog";
 import AboutDialog from "@/dialogs/AboutDialog";
 import ShortcutDialog from "@/dialogs/ShortcutDialog";
-import ConvertingDialog from "@/dialogs/ConvertingDialog";
-import SeniorityDialog from "@/dialogs/SeniorityDialog";
-import CurrencyDialog from "@/dialogs/CurrencyDialog";
 
 import Emitter from "@/utils/Emitter";
 import { version } from "@/global";
@@ -26,9 +23,6 @@ const StatusBar: React.FC = () => {
     const [fps, setFPS] = useState<number>(0);
     const aboutDialogRef = useRef<Dialog>(null);
     const shortcutDialogRef = useRef<Dialog>(null);
-    const convertingDialogRef = useRef<Dialog>(null);
-    const seniorityDialogRef = useRef<Dialog>(null);
-    const currencyDialogRef = useRef<Dialog>(null);
 
     useEmitter([
         ["graphing-fps", (currentFPS: number) => setFPS(currentFPS)],
@@ -68,9 +62,6 @@ const StatusBar: React.FC = () => {
                         mode === Mode.GRAPHING &&
                         <BarItem title="重载" onClick={() => new Emitter().emit("graphing-reload")} tooltip="函数图像渲染重载"/>
                     }
-                    <BarItem title="汇率" onClick={() => currencyDialogRef.current?.open()}/>
-                    <BarItem title="辈分计算" onClick={() => seniorityDialogRef.current?.open()}/>
-                    <BarItem title="单位换算" onClick={() => convertingDialogRef.current?.open()}/>
                     <BarItem title="快捷键" onClick={() => shortcutDialogRef.current?.open()}/>
                     <BarItem title={"Calcium "+ version} onClick={() => new Emitter().emit("open-about-dialog")}/>
                 </div>
@@ -79,9 +70,6 @@ const StatusBar: React.FC = () => {
             {/* Dialogs */}
             <AboutDialog ref={aboutDialogRef}/>
             <ShortcutDialog ref={shortcutDialogRef}/>
-            <ConvertingDialog ref={convertingDialogRef}/>
-            <SeniorityDialog ref={seniorityDialogRef}/>
-            <CurrencyDialog ref={currencyDialogRef}/>
         </>
     );
 }
diff --git a/src/style/calculator/mixin.less b/src/style/calculator/mixin.less
index c6eb977..d66a0a0 100644
--- a/src/style/calculator/mixin.less
+++ b/src/style/calculator/mixin.less
@@ -1,3 +1,9 @@
+.navbar-label-style(@color: var(--ca-gray-light)) {
+    color: @color;
+    font-size: 11pt;
+    font-weight: bold;
+}
+
 .button-style() {
     display: flex;
     background-color: transparent;
diff --git a/src/style/navbar.less b/src/style/navbar.less
index ac0f9d2..941f92a 100644
--- a/src/style/navbar.less
+++ b/src/style/navbar.less
@@ -5,7 +5,10 @@ nav.navbar {
     background-color: var(--ca-light1);
     box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.1);
     z-index: 2;
-    .mode-switcher {
+    .split {
+        display: flex;
+    }
+    .split .mode-switcher {
         display: flex;
         .mode-button-container {
             display: flex;
@@ -30,9 +33,7 @@ nav.navbar {
                     height: 100%;
                     margin-left: 7px;
                     span {
-                        color: var(--ca-gray10);
-                        font-size: 11pt;
-                        font-weight: bold;
+                        .navbar-label-style(var(--ca-gray10));
                     }
                 }
                 &:hover {
@@ -54,22 +55,44 @@ nav.navbar {
             }
         }
     }
-    .title-container {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        span {
-            color: var(--ca-gray1);
-            font-size: 13pt;
+    .split {
+        .toolbar {
+            display: flex;
+            margin-right: 15px;
+            .toolbar-item {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                margin: 0 10px;
+                cursor: pointer;
+                span {
+                    .navbar-label-style(var(--ca-gray6));
+                    transition: color 70ms ease;
+                    &:hover {
+                        color: var(--ca-gray-light);
+                    }
+                }
+            }
         }
-    }
-    .theme-switcher {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        margin: 15px 10px;
-        .toggle {
-            margin: 0 auto;
+        .theme-switcher-container {
+            display: flex;
+            .theme-switcher-name {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                span {
+                    .navbar-label-style();
+                }
+            }
+            .theme-switcher {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                margin: 15px;
+                .toggle {
+                    margin: 0 auto;
+                }
+            }
         }
     }
 }
diff --git a/src/style/sidebar.less b/src/style/sidebar.less
index 152aad9..0bbed0b 100644
--- a/src/style/sidebar.less
+++ b/src/style/sidebar.less
@@ -107,6 +107,7 @@
     .ka-wrapper {
         flex: 4;
         background-color: var(--ca-light2);
+        position: relative;
         .border-line(right);
         .ka-content {
             height: 100%;
@@ -133,63 +134,67 @@
                     }
                 }
                 &#history .sidebar-page-body {
+                    height: 100%;
                     overflow-x: hidden;
                     overflow-y: auto;
                     .scrollbar-style();
         
-                    .history-main {
-                        width: 100%;
-                        height: 100%;
-                        .history-item {
-                            display: flex;
-                            flex-direction: column;
+                    .history-container {
+                        position: relative;
+                        .history-main {
                             width: 100%;
-                            height: 60px;
-                            padding: 10px 30px;
-                            transition: background-color .08s;
-                            cursor: pointer;
-                            .item-input {
-                                flex: 1;
-                                width: 310px;
-                                color: var(--ca-gray1);
-                                font-size: 10pt;
-                                overflow: hidden;
-                                white-space: nowrap;
-                            }
-                            .item-output {
-                                flex: 1;
-                                width: 200px;
-                                color: var(--ca-gray-light);
-                                font-size: 13pt;
-                                white-space: nowrap;
-                                span .item-number-sys {
-                                    display: inline-block;
-                                    border-radius: 3px;
-                                    margin-left: 10px;
-                                    padding: 3px 5px;
-                                    height: 15px;
-                                    color: #fff;
+                            position: absolute;
+                            .history-item {
+                                display: flex;
+                                flex-direction: column;
+                                width: 100%;
+                                height: 70px;
+                                position: relative;
+                                padding: 10px 30px;
+                                transition: background-color .08s;
+                                box-sizing: border-box;
+                                cursor: pointer;
+                                .item-input {
+                                    flex: 1;
+                                    color: var(--ca-gray1);
                                     font-size: 10pt;
-                                    vertical-align: text-bottom;
-                                    &.sys-hex {
-                                        background-color: #d33333;
-                                    }
-                                    &.sys-dec {
-                                        background-color: #2a64e2;
-                                    }
-                                    &.sys-oct {
-                                        background-color: #e48810;
-                                    }
-                                    &.sys-bin {
-                                        background-color: #359134;
+                                    overflow: hidden;
+                                    white-space: nowrap;
+                                }
+                                .item-output {
+                                    flex: 1;
+                                    color: var(--ca-gray-light);
+                                    font-size: 13pt;
+                                    white-space: nowrap;
+                                    span .item-number-sys {
+                                        display: inline-block;
+                                        border-radius: 3px;
+                                        margin-left: 10px;
+                                        padding: 3px 5px;
+                                        height: 15px;
+                                        color: #fff;
+                                        font-size: 10pt;
+                                        vertical-align: text-bottom;
+                                        &.sys-hex {
+                                            background-color: #d33333;
+                                        }
+                                        &.sys-dec {
+                                            background-color: #2a64e2;
+                                        }
+                                        &.sys-oct {
+                                            background-color: #e48810;
+                                        }
+                                        &.sys-bin {
+                                            background-color: #359134;
+                                        }
                                     }
                                 }
-                            }
-                            &:hover {
-                                background-color: var(--ca-gray5);
-                            }
-                            &:active {
-                                background-color: var(--ca-gray3);
+                                &:hover {
+                                    background-color: var(--ca-gray5);
+                                }
+                                &:active {
+                                    background-color: var(--ca-gray3);
+                                }
                             }
                         }
                     }