diff --git a/esbuild.config.mjs b/esbuild.config.mjs
index cca8c8e0dc..74f92ba55e 100644
--- a/esbuild.config.mjs
+++ b/esbuild.config.mjs
@@ -1,6 +1,10 @@
+import path from 'node:path';
+
 import cleanPlugin from 'esbuild-plugin-clean';
 import stylePlugin from 'esbuild-style-plugin';
 
+const nodeModules = path.resolve(process.cwd(), './node_modules');
+
 /** @type {import('esbuild').BuildOptions} */
 export default {
     bundle: true,
@@ -17,7 +21,10 @@ export default {
                 generateScopedName: 'univer-[local]',
             },
             renderOptions: {
-                lessOptions: { rewriteUrls: 'all' },
+                lessOptions: {
+                    rewriteUrls: 'all',
+                    paths: [nodeModules],
+                },
             },
         }),
     ],
diff --git a/examples/univer-doc-ts/esbuild.config.mjs b/examples/univer-doc-ts/esbuild.config.mjs
index f8c250df7b..f9347d44b7 100644
--- a/examples/univer-doc-ts/esbuild.config.mjs
+++ b/examples/univer-doc-ts/esbuild.config.mjs
@@ -1,9 +1,13 @@
+import path from 'node:path';
+
 import esbuild from 'esbuild';
 import cleanPlugin from 'esbuild-plugin-clean';
 import copyPlugin from 'esbuild-plugin-copy';
 import stylePlugin from 'esbuild-style-plugin';
 import minimist from 'minimist';
 
+const nodeModules = path.resolve(process.cwd(), './node_modules');
+
 const args = minimist(process.argv.slice(2));
 
 const ctx = await esbuild[args.watch ? 'context' : 'build']({
@@ -27,7 +31,10 @@ const ctx = await esbuild[args.watch ? 'context' : 'build']({
                 generateScopedName: 'univer-[local]',
             },
             renderOptions: {
-                lessOptions: { rewriteUrls: 'all' },
+                lessOptions: {
+                    rewriteUrls: 'all',
+                    paths: [nodeModules],
+                },
             },
         }),
     ],
diff --git a/examples/univer-sheet-ts/esbuild.config.mjs b/examples/univer-sheet-ts/esbuild.config.mjs
index a7695e8f86..ddb86290b9 100644
--- a/examples/univer-sheet-ts/esbuild.config.mjs
+++ b/examples/univer-sheet-ts/esbuild.config.mjs
@@ -1,9 +1,13 @@
+import path from 'node:path';
+
 import esbuild from 'esbuild';
 import cleanPlugin from 'esbuild-plugin-clean';
 import copyPlugin from 'esbuild-plugin-copy';
 import stylePlugin from 'esbuild-style-plugin';
 import minimist from 'minimist';
 
+const nodeModules = path.resolve(process.cwd(), './node_modules');
+
 const args = minimist(process.argv.slice(2));
 
 const ctx = await esbuild[args.watch ? 'context' : 'build']({
@@ -27,7 +31,10 @@ const ctx = await esbuild[args.watch ? 'context' : 'build']({
                 generateScopedName: 'univer-[local]',
             },
             renderOptions: {
-                lessOptions: { rewriteUrls: 'all' },
+                lessOptions: {
+                    rewriteUrls: 'all',
+                    paths: [nodeModules],
+                },
             },
         }),
     ],
diff --git a/examples/univer-slide-ts/esbuild.config.mjs b/examples/univer-slide-ts/esbuild.config.mjs
index 8d60606936..c091cc123a 100644
--- a/examples/univer-slide-ts/esbuild.config.mjs
+++ b/examples/univer-slide-ts/esbuild.config.mjs
@@ -1,9 +1,13 @@
+import path from 'node:path';
+
 import esbuild from 'esbuild';
 import cleanPlugin from 'esbuild-plugin-clean';
 import copyPlugin from 'esbuild-plugin-copy';
 import stylePlugin from 'esbuild-style-plugin';
 import minimist from 'minimist';
 
+const nodeModules = path.resolve(process.cwd(), './node_modules');
+
 const args = minimist(process.argv.slice(2));
 
 const ctx = await esbuild[args.watch ? 'context' : 'build']({
@@ -27,7 +31,10 @@ const ctx = await esbuild[args.watch ? 'context' : 'build']({
                 generateScopedName: 'univer-[local]',
             },
             renderOptions: {
-                lessOptions: { rewriteUrls: 'all' },
+                lessOptions: {
+                    rewriteUrls: 'all',
+                    paths: [nodeModules],
+                },
             },
         }),
     ],
diff --git a/packages/base-ui/src/Components/Button/Style/index.module.less b/packages/base-ui/src/Components/Button/Style/index.module.less
index 6195cea1cb..0647069dbd 100644
--- a/packages/base-ui/src/Components/Button/Style/index.module.less
+++ b/packages/base-ui/src/Components/Button/Style/index.module.less
@@ -24,6 +24,8 @@
 
     &-text {
         .btn-text();
+        line-height: 1;
+
         &-active {
             color: var(--text-color);
             background: #eee;
diff --git a/packages/base-ui/src/Components/Button/Style/mixin.less b/packages/base-ui/src/Components/Button/Style/mixin.less
index da00f21964..b65e8546b1 100644
--- a/packages/base-ui/src/Components/Button/Style/mixin.less
+++ b/packages/base-ui/src/Components/Button/Style/mixin.less
@@ -54,21 +54,15 @@
 }
 
 .btn-text() {
-    .button-color(var(--text-color), transparent, transparent);
-    line-height: 2;
+    .button-color(@text-color, transparent, transparent);
 
     border-radius: @border-radius-base;
     box-shadow: none;
 
-    &:hover {
-        color: var(--text-color);
-        background: #eee;
-        border-color: transparent;
-    }
-
+    &:hover,
     &:active {
-        color: var(--text-color);
-        background: #eee;
+        color: @text-color;
+        background: @border-color;
         border-color: transparent;
     }
     .button-disabled(var(--disabled-color); transparent; transparent);
@@ -105,7 +99,7 @@
     }
 
     &-sm {
-        .button-size(24px, 7px, @font-size-sm, @border-radius-base)
+        .button-size(28px, 7px, @font-size-sm, @border-radius-base)
     }
 }
 
@@ -135,7 +129,7 @@
     }
 
     &.btn-sm {
-        .button-size(24px, (30px / 2), @font-size-sm, 24px);
+        .button-size(28px, (30px / 2), @font-size-sm, 28px);
     }
 }
 
@@ -152,7 +146,7 @@
     }
 
     &.btn-sm {
-        min-width: 24px;
+        min-width: 28px;
         border-radius: 50%;
     }
 }
\ No newline at end of file
diff --git a/packages/base-ui/src/Components/Slider/index.module.less b/packages/base-ui/src/Components/Slider/index.module.less
index ed01e502b2..055ae39330 100644
--- a/packages/base-ui/src/Components/Slider/index.module.less
+++ b/packages/base-ui/src/Components/Slider/index.module.less
@@ -1,11 +1,11 @@
 @import '../../Basics/CSS/Skin/default.module.less';
 
 @slider-bg: @text-color-secondary;
-@slider-width: 144px;
+@slider-width: 116px;
 @slider-height: 4px;
 @slider-radius: 15px;
 
-@slider-handle-size: 20px;
+@slider-handle-size: 12px;
 
 @slider-value-width: 55px;
 @slider-value-height: 28px;
diff --git a/packages/base-ui/src/Components/Tooltip/Tooltip.tsx b/packages/base-ui/src/Components/Tooltip/Tooltip.tsx
index 20e05f4088..032c4c9e94 100644
--- a/packages/base-ui/src/Components/Tooltip/Tooltip.tsx
+++ b/packages/base-ui/src/Components/Tooltip/Tooltip.tsx
@@ -18,7 +18,6 @@ export const Tooltip = (props: ITooltipProps) => {
             overlay={<div className={styles.tooltipContent}>{typeof title === 'function' ? title() : title}</div>}
             builtinPlacements={placements}
             placement={placement}
-            mouseLeaveDelay={0.1}
             mouseEnterDelay={0.2}
             showArrow
             destroyTooltipOnHide
diff --git a/packages/base-ui/src/views/app.module.less b/packages/base-ui/src/views/app.module.less
index 6abdb50cbc..93abe8087e 100644
--- a/packages/base-ui/src/views/app.module.less
+++ b/packages/base-ui/src/views/app.module.less
@@ -2,14 +2,14 @@
 
 .layout-container {
     // theme
-    background-color: var(--bg);
-    color: var(--text-color);
+    background-color: @bg-color;
+    color: @text-color;
     height: 100%;
 
     .content-container-horizontal {
-        display: flex;
-        min-height: 14em;
         position: relative;
+        min-height: 14em;
+        display: flex;
 
         .content-inner-left-container {
             // position: relative;
@@ -30,6 +30,7 @@
 
         .content-inner-right-container {
             width: 50%;
+            background-color: @bg-color-secondary;
             flex: 1;
             // position: relative;
         }
diff --git a/packages/base-ui/src/views/app.tsx b/packages/base-ui/src/views/app.tsx
index 6cf8fae967..fa4ef493af 100644
--- a/packages/base-ui/src/views/app.tsx
+++ b/packages/base-ui/src/views/app.tsx
@@ -10,7 +10,7 @@ import { Container } from '../Components/Container/Container';
 import { IWorkbenchOptions } from '../controllers/ui/ui.controller';
 import style from './app.module.less';
 import { ContextMenu } from './components/contextmenu/contextmenu';
-import { Toolbar } from './components/toolbar/toolbar';
+import { DocBars } from './components/DocBars';
 
 export interface IUniverAppProps extends IWorkbenchOptions {
     footerComponents?: Set<() => ComponentType>;
@@ -95,7 +95,7 @@ export function App(props: IUniverAppProps) {
                     <Layout className={style.mainContent} style={{ position: 'relative' }}>
                         {/* header */}
                         <Header style={{ display: props.header ? 'block' : 'none' }}>
-                            {props.toolbar && <Toolbar></Toolbar>}
+                            {props.toolbar && <DocBars />}
                         </Header>
                         {/* content */}
                         <Layout>
@@ -123,7 +123,7 @@ export function App(props: IUniverAppProps) {
                             </Content>
                         </Layout>
                         {/* footer */}
-                        <Footer style={{ display: props.footer ? 'flex' : 'none' }}>
+                        <Footer style={{ display: props.footer ? 'block' : 'none' }}>
                             {footerComponents &&
                                 Array.from(footerComponents.values()).map((component, index) =>
                                     React.createElement(component(), { key: `${index}` })
diff --git a/packages/base-ui/src/views/components/toolbar/button/toolbar-button.tsx b/packages/base-ui/src/views/components/DocBars/Button/ToolbarButton.tsx
similarity index 91%
rename from packages/base-ui/src/views/components/toolbar/button/toolbar-button.tsx
rename to packages/base-ui/src/views/components/DocBars/Button/ToolbarButton.tsx
index 36e724a1ce..e0901b3a62 100644
--- a/packages/base-ui/src/views/components/toolbar/button/toolbar-button.tsx
+++ b/packages/base-ui/src/views/components/DocBars/Button/ToolbarButton.tsx
@@ -45,10 +45,10 @@ export function ToolbarButton(props: IBaseToolbarButtonProps) {
     };
 
     const _className = joinClassNames(
-        styles.btn,
-        `${styles.btn}-text`,
+        styles.toolbarBtn,
+        `${styles.toolbarBtn}-text`,
         {
-            [`${styles.btn}-text-active`]: active,
+            [`${styles.toolbarBtn}-text-active`]: active,
         },
         className
     );
diff --git a/packages/base-ui/src/views/components/toolbar/button/index.module.less b/packages/base-ui/src/views/components/DocBars/Button/index.module.less
similarity index 98%
rename from packages/base-ui/src/views/components/toolbar/button/index.module.less
rename to packages/base-ui/src/views/components/DocBars/Button/index.module.less
index 245ac03b98..fdc147be99 100644
--- a/packages/base-ui/src/views/components/toolbar/button/index.module.less
+++ b/packages/base-ui/src/views/components/DocBars/Button/index.module.less
@@ -1,6 +1,6 @@
 @import '../../../../Components/Button/Style/mixin.less';
 
-.btn {
+.toolbar-btn {
     line-height: @line-height-base;
     .btn();
     .btn-default();
@@ -12,13 +12,13 @@
     &-text {
         .button-color(var(--text-color), transparent, transparent);
         box-shadow: none;
-    
+
         &:hover {
             color: var(--text-color);
             background-color: var(--grey-100);
             border-color: transparent;
         }
-    
+
         // &:active {
         //     color: var(--text-color);
         //     background: #eee;
diff --git a/packages/base-ui/src/views/components/DocBars/DocBars.tsx b/packages/base-ui/src/views/components/DocBars/DocBars.tsx
new file mode 100644
index 0000000000..243dc13c7e
--- /dev/null
+++ b/packages/base-ui/src/views/components/DocBars/DocBars.tsx
@@ -0,0 +1,37 @@
+import { useContext, useEffect, useState } from 'react';
+
+import { AppContext } from '../../../Common/AppContext';
+import { IDisplayMenuItem, IMenuItem, MenuPosition } from '../../../services/menu/menu';
+import { IMenuService } from '../../../services/menu/menu.service';
+import styles from './index.module.less';
+import { ToolbarItem } from './ToolbarItem';
+
+export function DocBars() {
+    const context = useContext(AppContext);
+
+    const [menuItems, setMenuItems] = useState<Array<IDisplayMenuItem<IMenuItem>>>([]);
+
+    useEffect(() => {
+        // this.props.getComponent?.(this); // pass the UI to the controller, which is not good...
+
+        const menuService = context.injector!.get(IMenuService);
+        const update = () => {
+            setMenuItems(menuService.getMenuItems(MenuPosition.TOOLBAR));
+        };
+
+        // TODO: dispose
+        menuService.menuChanged$.subscribe(() => update());
+        update();
+    }, []);
+
+    return (
+        <section className={styles.docBars}>
+            <div className={styles.menubar}>{/* TODO: Start */}</div>
+            <div className={`${styles.toolbarWarp} ${styles.toolbar}`}>
+                {menuItems.map((item) => (
+                    <ToolbarItem key={item.id} {...item} />
+                ))}
+            </div>
+        </section>
+    );
+}
diff --git a/packages/base-ui/src/views/components/toolbar/toolbar-item.tsx b/packages/base-ui/src/views/components/DocBars/ToolbarItem.tsx
similarity index 98%
rename from packages/base-ui/src/views/components/toolbar/toolbar-item.tsx
rename to packages/base-ui/src/views/components/DocBars/ToolbarItem.tsx
index 55184077b5..9f07778429 100644
--- a/packages/base-ui/src/views/components/toolbar/toolbar-item.tsx
+++ b/packages/base-ui/src/views/components/DocBars/ToolbarItem.tsx
@@ -14,7 +14,7 @@ import {
     IValueOption,
     MenuItemType,
 } from '../../../services/menu/menu';
-import { ToolbarButton } from './button/toolbar-button';
+import { ToolbarButton } from './Button/ToolbarButton';
 import styles from './index.module.less';
 
 export interface IToolbarItemStatus {
diff --git a/packages/base-ui/src/views/components/DocBars/index.module.less b/packages/base-ui/src/views/components/DocBars/index.module.less
new file mode 100644
index 0000000000..ac7f119a65
--- /dev/null
+++ b/packages/base-ui/src/views/components/DocBars/index.module.less
@@ -0,0 +1,143 @@
+@import '../../../Basics/CSS/Skin/default.module.less';
+
+.doc-bars {
+    box-sizing: border-box;
+
+    .menubar {
+        height: 40px;
+        border-bottom: 1px solid @border-color-base;
+    }
+
+    .toolbar {
+        position: relative;
+        height: 40px;
+        font-size: var(--font-size);
+        background-color: @bg-color-secondary;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+
+        .single-button {
+            &.more-hide {
+                display: none;
+            }
+
+            &.more-show {
+                display: block;
+            }
+        }
+
+        color: var(--text-color);
+        padding: 0 15px;
+        height: 40px;
+        position: relative;
+        display: flex;
+        align-items: center;
+
+        > div {
+            height: 26px;
+            display: inline-block;
+            vertical-align: middle;
+            margin: 0 1px;
+            cursor: pointer;
+
+            &.select-button:hover {
+                background-color: #efefef;
+            }
+        }
+
+        .cols-menu {
+            overflow-y: auto;
+        }
+
+        .select-label-string {
+            .drop-content {
+                > div {
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    width: 90px;
+                }
+            }
+        }
+
+        .select-double-string {
+            .drop-content {
+                > div {
+                    width: 24px;
+                }
+            }
+        }
+
+        .select-color-picker-parent {
+            .select-item-content {
+                width: 100%;
+            }
+
+            .select-color-picker {
+                cursor: default;
+
+                &:hover {
+                    background: var(--bg);
+                }
+
+                .select-item {
+                    padding: 0;
+                }
+
+                .color-picker-outer {
+                    box-shadow: none;
+                }
+            }
+        }
+
+        .select-line-bold-parent {
+            .select-item-content {
+                width: 100%;
+            }
+        }
+
+        .select-single {
+            // height: 26px;
+            // line-height: 26px;
+        }
+
+        .select-input {
+            // height: 26px;
+            // line-height: 26px;
+        }
+
+        .select-double {
+            // height: 26px;
+            // line-height: 26px;
+        }
+
+        button {
+            padding: 0 4px; // FIXME Set the BIUS buttons, the target is 26 * 26, padding 4px, but only 27.6 * 26 can be obtained
+            display: flex;
+            align-items: center;
+            // height: 26px;
+            font-size: 18px;
+            border-radius: var(--border-radius-base);
+        }
+
+        span[role='img'].univericon-nextIcon {
+            font-size: 12px;
+        }
+
+        .text-button {
+            span[role='img'] {
+                font-size: 24px;
+            }
+
+            button {
+                padding: 0 5px;
+            }
+        }
+    }
+
+    .button() {
+        padding: 0px;
+        line-height: 1;
+    }
+}
diff --git a/packages/base-ui/src/views/components/DocBars/index.ts b/packages/base-ui/src/views/components/DocBars/index.ts
new file mode 100644
index 0000000000..c72b111504
--- /dev/null
+++ b/packages/base-ui/src/views/components/DocBars/index.ts
@@ -0,0 +1 @@
+export { DocBars } from './DocBars';
diff --git a/packages/base-ui/src/views/components/toolbar/data-bar.tsx b/packages/base-ui/src/views/components/toolbar/data-bar.tsx
deleted file mode 100644
index 0c6a0945bb..0000000000
--- a/packages/base-ui/src/views/components/toolbar/data-bar.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-type BarProps = {
-    list: Array<Record<string, string>>;
-    img: string;
-    onClick?: (item: {}, index: number) => void;
-};
-
-export const DataBar = (props: BarProps) => {
-    const { list, img, onClick } = props;
-    const background = `url(${img}) no-repeat`;
-
-    const handleClick = (item: {}, index: number) => {
-        onClick?.call(this, item, index);
-    };
-
-    return (
-        <div style={{ display: 'flex' }}>
-            {list.map((item, index) => (
-                <div
-                    key={index}
-                    onClick={() => handleClick(item, index)}
-                    style={{ width: '28px', height: '26px', background, backgroundPosition: `${item.x} ${item.y}` }}
-                ></div>
-            ))}
-        </div>
-    );
-};
diff --git a/packages/base-ui/src/views/components/toolbar/index.less b/packages/base-ui/src/views/components/toolbar/index.less
deleted file mode 100644
index e22c77a403..0000000000
--- a/packages/base-ui/src/views/components/toolbar/index.less
+++ /dev/null
@@ -1,312 +0,0 @@
-@import '../../../Basics/CSS/Skin/default.module.less';
-
-.universheet-wa-editor.toolbar {
-    height: 32px;
-    background: var(--bg);
-    position: relative;
-    padding: 5px 0 3px 15px;
-    border-bottom: 1px solid var(--bg);
-    white-space: nowrap;
-    transition: all 0.2s;
-    box-sizing: initial;
-
-    span[role='img'] {
-        font-size: 24px;
-        display: inline-block;
-    }
-
-    span[role='img'].univericon-nextIcon {
-        font-size: 13px;
-    }
-
-    span[role='img'].univericon-rightIcon {
-        font-size: 13px;
-    }
-
-    .universheet-toolbar-left-skin {
-        width: 15px;
-        position: absolute;
-        left: 0;
-        top: 1px;
-        bottom: 1px;
-    }
-
-    .universheet-inline-block {
-        display: inline-block;
-    }
-
-    .universheet-flex {
-        display: flex;
-    }
-
-    .universheet-toolbar-button,
-    .universheet-toolbar-menu-button {
-        vertical-align: middle;
-
-        &:hover {
-            background: rgba(0, 0, 0, 0.06);
-        }
-
-        button {
-            min-width: 26px;
-            height: 26px;
-            padding: 0;
-            border: none;
-            .toolbar-button();
-
-            span {
-                height: 100%;
-                vertical-align: text-bottom;
-            }
-        }
-    }
-
-    .universheet-toolbar-button-outer-box,
-    .universheet-toolbar-menu-button-outer-box {
-        .outer-inner-box();
-    }
-
-    .universheet-toolbar-select {
-        position: relative;
-    }
-
-    .universheet-toolbar-button-inner-box,
-    .universheet-toolbar-menu-button-inner-box {
-        padding: 0 2px;
-        padding: 0;
-        text-align: center;
-        height: 26px;
-        min-width: 26px;
-        font-size: 12px;
-    }
-
-    .universheet-toolbar-menu-button-caption {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        margin-left: 1px;
-        text-align: center;
-        height: 100%;
-    }
-
-    .universheet-toolbar-menu-button-text {
-        width: 55px !important;
-    }
-
-    .universheet-toolbar-separator {
-        line-height: normal;
-        list-style: none;
-        outline: 0;
-        overflow: hidden;
-        padding: 0;
-        text-decoration: none;
-        width: 0;
-        height: 20px;
-        vertical-align: top;
-        border-left: 1px solid #e0e0e0;
-        margin: 5px 1px;
-    }
-
-    .universheet-toolbar-combo-button {
-        font-weight: 700;
-        vertical-align: inherit;
-        margin: 0 1px;
-        .toolbar-button();
-    }
-
-    .universheet-toolbar-combo-button-inner-box,
-    .universheet-toolbar-combo-button-outer-box {
-        .outer-inner-box();
-    }
-
-    .universheet-toolbar-zoom-combobox .universheet-toolbar-combo-button-caption {
-        width: 36px !important;
-    }
-
-    .universheet-toolbar-combo-button-caption {
-        padding: 0;
-        margin: 0 0 0 -3px;
-    }
-
-    .universheet-toolbar-textinput {
-        -webkit-border-radius: 1px;
-        -moz-border-radius: 1px;
-        border-radius: 1px;
-        border: 1px solid #d9d9d9;
-        border-top: 1px solid silver;
-        font-size: 13px;
-        height: 25px;
-        padding: 1px 0 1px 8px;
-    }
-
-    .universheet-toolbar-combo-button-input {
-        background: 0 0;
-        border: 1px solid transparent !important;
-        color: var(--text-color);
-        font-family: Arial, sans-serif !important;
-        font-size: 11px !important;
-        font-weight: 700 !important;
-        height: 20px !important;
-        overflow: hidden !important;
-        color: rgba(0, 0, 0, 0.7);
-        height: 22px !important;
-        width: 22px;
-    }
-
-    .universheet-cols-menu {
-        .menu-button();
-        width: 252px;
-        left: 0;
-        top: 26px;
-        display: none;
-    }
-
-    .universheet-cols-menu .universheet-cols-menuitem-hover,
-    .universheet-cols-menu .universheet-cols-menuitem:hover {
-        background-color: #efefef;
-    }
-
-    .universheet-cols-menu .universheet-cols-menuitem {
-        position: relative;
-        color: var(--text-color);
-        cursor: pointer;
-        list-style: none;
-        margin: 0;
-        padding: 1px 6em 1px 20px;
-        white-space: nowrap;
-        padding-left: 8px;
-        vertical-align: middle;
-        padding-right: 24px;
-        user-select: none;
-        line-height: 16px;
-    }
-
-    .universheet-submenu-arrow {
-        -webkit-transition: all 218ms;
-        -moz-transition: all 218ms;
-        -o-transition: all 218ms;
-        transition: all 218ms;
-        font-size: 12px;
-        left: auto;
-        right: 15px;
-        top: 50%;
-        transform: translateY(-50%);
-        padding-right: 0;
-        position: absolute;
-        text-align: right;
-        opacity: 0.5;
-        color: #000;
-        user-select: none;
-        font-family: Arial;
-    }
-
-    .universheet-toolbar-dblbutton {
-        .universheet-toolbar-next-button {
-            border-left: 1px solid transparent;
-            position: relative;
-
-            .universheet-next-menu {
-                position: absolute;
-                z-index: 2;
-                background-color: #fff;
-                box-shadow: @box-shadow-base;
-                font-size: 12px;
-                width: fit-content;
-
-                .univer-menu-item > div {
-                    width: 100%;
-                    display: flex;
-                    justify-content: space-between;
-                    box-sizing: border-box;
-                    padding: 0 5px 0 0;
-
-                    .universheet-next-menu-icon {
-                        width: 25px;
-
-                        & ~ div {
-                            flex: 1;
-                            display: flex;
-                            justify-content: space-between;
-                            align-items: center;
-                        }
-                    }
-                }
-
-                svg {
-                    font-size: 24px;
-                    vertical-align: top;
-                }
-            }
-
-            svg {
-                font-size: 12px;
-                vertical-align: middle;
-            }
-        }
-
-        .universheet-color-bottom {
-            width: 10px;
-            margin: 0 auto;
-            outline: 2px solid;
-            position: relative;
-            bottom: 7px;
-        }
-
-        button.univer-btn {
-            min-width: 15px;
-
-            &:active {
-                background: transparent !important;
-            }
-        }
-
-        :hover .universheet-toolbar-next-button {
-            border-left: 1px solid #e0e0e0;
-        }
-    }
-}
-
-// 重复样式
-.outer-inner-box() {
-    border: 0;
-    vertical-align: top;
-    margin: 0;
-    padding: 0;
-}
-
-.toolbar-button() {
-    -webkit-border-radius: 2px;
-    -moz-border-radius: 2px;
-    border-radius: 2px;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    background: 0;
-    border: 1px solid transparent;
-    outline: 0;
-    padding: 0;
-    list-style: none;
-    font-size: 11px;
-    text-decoration: none;
-    cursor: default;
-    height: 26px;
-    line-height: 26px;
-    color: var(--text-color);
-}
-
-.menu-button() {
-    border-radius: 0;
-    box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
-    transition: opacity 218ms;
-    background: #fff;
-    border: 1px solid rgba(0, 0, 0, 0.2);
-    cursor: default;
-    font-size: 13px;
-    margin: 0;
-    outline: 0;
-    padding: 6px 0;
-    position: absolute;
-    z-index: 2;
-    box-sizing: border-box;
-    user-select: none;
-}
diff --git a/packages/base-ui/src/views/components/toolbar/index.module.less b/packages/base-ui/src/views/components/toolbar/index.module.less
deleted file mode 100644
index 7ce4ca47db..0000000000
--- a/packages/base-ui/src/views/components/toolbar/index.module.less
+++ /dev/null
@@ -1,182 +0,0 @@
-@import '../../../Basics/CSS/Skin/default.module.less';
-
-.toolbar-warp {
-    max-height: fit-content;
-    width: 100%;
-    overflow: unset;
-    box-sizing: border-box;
-    font-size: var(--font-size);
-    background-color: var(--bg);
-    position: relative;
-    display: flex;
-    align-items: center;
-    border-bottom: 1px solid var(--border-color-base);
-
-    .single-button {
-        &.more-hide {
-            display: none;
-        }
-
-        &.more-show {
-            display: block;
-        }
-    }
-}
-
-.toolbar {
-    max-width: 100%;
-    color: var(--text-color);
-    padding: 0 15px;
-    height: 40px;
-    position: relative;
-    display: flex;
-    align-items: center;
-
-    >div {
-        height: 26px;
-        display: inline-block;
-        vertical-align: middle;
-        margin: 0 1px;
-        cursor: pointer;
-
-        &.select-button:hover {
-            background-color: #efefef;
-        }
-    }
-
-    .cols-menu {
-        overflow-y: auto;
-    }
-
-    .select-label-string {
-        .drop-content {
-            >div {
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-                width: 90px;
-            }
-        }
-    }
-
-    .select-double-string {
-        .drop-content {
-            >div {
-                width: 24px;
-            }
-        }
-    }
-
-    .select-color-picker-parent {
-        .select-item-content {
-            width: 100%;
-        }
-
-        .select-color-picker {
-            cursor: default;
-
-            &:hover {
-                background: var(--bg);
-            }
-
-            .select-item {
-                padding: 0;
-            }
-
-            .color-picker-outer {
-                box-shadow: none;
-            }
-        }
-    }
-
-    .select-line-bold-parent {
-        .select-item-content {
-            width: 100%;
-        }
-    }
-
-    .select-single {
-        // height: 26px;
-        // line-height: 26px;
-    }
-
-    .select-input {
-        // height: 26px;
-        // line-height: 26px;
-    }
-
-    .select-double {
-        // height: 26px;
-        // line-height: 26px;
-    }
-
-    button {
-        padding: 0 4px; // FIXME Set the BIUS buttons, the target is 26 * 26, padding 4px, but only 27.6 * 26 can be obtained
-        display: flex;
-        align-items: center;
-        // height: 26px;
-        font-size: 18px;
-        border-radius: var(--border-radius-base);
-    }
-
-    span[role='img'].univericon-nextIcon {
-        font-size: 12px;
-    }
-
-    .text-button {
-        span[role="img"] {
-            font-size: 24px;
-        }
-
-        button {
-            padding: 0 5px;
-        }
-    }
-
-}
-
-.more-button {
-    position: absolute;
-    right: 15px;
-    top: 50%;
-    transform: translateY(-50%);
-    .button();
-
-    &.more-show {
-        display: block;
-    }
-}
-
-.more-tool {
-    // height: 40px;
-    // display: none;
-    // align-items: center;
-    padding: 0 10px;
-    background-color: var(--bg);
-    box-shadow: @box-shadow-base;
-    position: absolute;
-    right: 2em;
-    top: 40px;
-    z-index: 2;
-
-    &.more-show {
-        display: flex;
-    }
-
-    button {
-        .button();
-    }
-}
-
-.button() {
-    padding: 0px;
-    line-height: 1;
-}
-
-.tooltip-title {
-    opacity: 1;
-}
-
-.bottom {
-    display: none;
-}
\ No newline at end of file
diff --git a/packages/base-ui/src/views/components/toolbar/toolbar.tsx b/packages/base-ui/src/views/components/toolbar/toolbar.tsx
deleted file mode 100644
index 7cb40da0a4..0000000000
--- a/packages/base-ui/src/views/components/toolbar/toolbar.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { Component, createRef } from 'react';
-
-import { BaseComponentProps } from '../../../BaseComponent';
-import { AppContext } from '../../../Common/AppContext';
-import { Container } from '../../../Components/Container/Container';
-import { IDisplayMenuItem, IMenuItem, MenuPosition } from '../../../services/menu/menu';
-import { IMenuService } from '../../../services/menu/menu.service';
-import styles from './index.module.less';
-import { ToolbarItem } from './toolbar-item';
-
-interface IToolbarState {
-    menuItems: Array<IDisplayMenuItem<IMenuItem>>;
-}
-
-interface IToolbarProps extends BaseComponentProps {
-    style?: React.CSSProperties;
-}
-
-export class Toolbar extends Component<IToolbarProps, IToolbarState> {
-    static override contextType = AppContext;
-
-    declare context: React.ContextType<typeof AppContext>;
-
-    toolbarRef = createRef<HTMLDivElement>();
-
-    moreBtnRef = createRef();
-
-    moreToolRef = createRef();
-
-    clientWidth = 0;
-
-    constructor(props: IToolbarProps) {
-        super(props);
-        this.initialize();
-    }
-
-    initialize() {
-        this.state = {
-            menuItems: [],
-        };
-    }
-
-    override componentDidMount() {
-        this.props.getComponent?.(this); // pass the UI to the controller, which is not good...
-
-        const menuService = this.context.injector!.get(IMenuService);
-        const update = () => {
-            this.setState({
-                menuItems: menuService.getMenuItems(MenuPosition.TOOLBAR),
-            });
-        };
-
-        // TODO: dispose
-        menuService.menuChanged$.subscribe(() => update());
-        update();
-    }
-
-    override render() {
-        const { menuItems } = this.state;
-
-        return (
-            <Container style={{ position: 'relative' }}>
-                <div className={`${styles.toolbarWarp} ${styles.toolbar}`} ref={this.toolbarRef}>
-                    {menuItems.map((item) => (
-                        <ToolbarItem key={item.id} {...item} />
-                    ))}
-                </div>
-            </Container>
-        );
-    }
-}
diff --git a/packages/ui-plugin-sheets/src/View/CountBar/CountBar.tsx b/packages/ui-plugin-sheets/src/View/CountBar/CountBar.tsx
index e64d8b0884..774ec8976d 100644
--- a/packages/ui-plugin-sheets/src/View/CountBar/CountBar.tsx
+++ b/packages/ui-plugin-sheets/src/View/CountBar/CountBar.tsx
@@ -1,5 +1,3 @@
-import { Button, Icon } from '@univerjs/base-ui';
-
 import styles from './index.module.less';
 import { ZoomSlider } from './zoom-slider';
 
@@ -11,9 +9,6 @@ interface ICountBarProps {
 export function CountBar(props: ICountBarProps) {
     return (
         <section className={styles.countBar}>
-            <Button>
-                <Icon.Sheet.RegularIcon />
-            </Button>
             <ZoomSlider />
         </section>
     );
diff --git a/packages/ui-plugin-sheets/src/View/SheetContainer/SheetContainer.tsx b/packages/ui-plugin-sheets/src/View/SheetContainer/SheetContainer.tsx
index 83ca0edc8f..0867a8222f 100644
--- a/packages/ui-plugin-sheets/src/View/SheetContainer/SheetContainer.tsx
+++ b/packages/ui-plugin-sheets/src/View/SheetContainer/SheetContainer.tsx
@@ -1,10 +1,9 @@
-import { BaseComponentProps } from '@univerjs/base-ui';
-
 import { ISheetUIPluginConfig } from '../../Basics';
 import { CountBar } from '../CountBar';
 import { SheetBar } from '../SheetBar';
+import styles from './index.module.less';
 
-export interface BaseSheetContainerProps extends BaseComponentProps {
+export interface BaseSheetContainerProps {
     config: ISheetUIPluginConfig;
     changeLocale: (locale: string) => void;
     methods?: any;
@@ -12,9 +11,9 @@ export interface BaseSheetContainerProps extends BaseComponentProps {
 
 export function RenderSheetFooter() {
     return (
-        <>
+        <section className={styles.sheetContainer}>
             <SheetBar />
             <CountBar />
-        </>
+        </section>
     );
 }
diff --git a/packages/ui-plugin-sheets/src/View/SheetContainer/index.module.less b/packages/ui-plugin-sheets/src/View/SheetContainer/index.module.less
index 100caac0a5..1b600f39ac 100644
--- a/packages/ui-plugin-sheets/src/View/SheetContainer/index.module.less
+++ b/packages/ui-plugin-sheets/src/View/SheetContainer/index.module.less
@@ -1,77 +1,11 @@
-.layout-container {
-    // theme
-    background-color: var(--bg);
-    color: var(--text-color);
-    height: 100%;
+@import '@univerjs/base-ui/src/Basics/CSS/Skin/default.module.less';
 
-    .content-container-horizontal {
-        display: flex;
-        min-height: 14em;
-        position: relative;
-
-        .content-inner-left-container {
-            // position: relative;
-            width: 50%;
-            padding-right: 10px;
-            flex: none;
-
-            .hover-cursor {
-                position: absolute;
-                right: 0;
-                top: 0;
-                height: 100%;
-                width: 10px;
-                background: gray;
-                cursor: e-resize;
-            }
-        }
-
-        .content-inner-right-container {
-            width: 50%;
-            flex: 1;
-            // position: relative;
-        }
-    }
-
-    .content-container-vertical {
-        display: flex;
-        flex-direction: column;
-        min-height: 14em;
-        position: relative;
-
-        .content-inner-left-container {
-            // position: relative;
-            height: 50%;
-            padding-bottom: 10px;
-            flex: none;
-
-            .hover-cursor {
-                position: absolute;
-                left: 0;
-                bottom: 0;
-                height: 10px;
-                width: 100%;
-                background: gray;
-                cursor: n-resize;
-            }
-        }
-
-        .content-inner-right-container {
-            height: 50%;
-            flex: 1;
-        }
-    }
-
-    .main-content {
-        background: var(--bg);
-    }
-
-    .outer-right-container {
-        // position: relative;
-        flex: 0 0 280px;
-        > div {
-            position: absolute;
-            width: 100%;
-        }
-    }
+.sheet-container {
+    height: 40px;
+    padding: 0 @padding-lg;
+    border-top: 1px solid @border-color;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 }