diff --git a/source/Component/CommandBar/CommandBar.scss b/source/Component/CommandBar/CommandBar.scss
new file mode 100644
index 0000000..2f15c4d
--- /dev/null
+++ b/source/Component/CommandBar/CommandBar.scss
@@ -0,0 +1,3 @@
+div.command-bar {
+    height: 100%;
+}
\ No newline at end of file
diff --git a/source/Component/CommandBar/CommandBar.tsx b/source/Component/CommandBar/CommandBar.tsx
new file mode 100644
index 0000000..8ec5dac
--- /dev/null
+++ b/source/Component/CommandBar/CommandBar.tsx
@@ -0,0 +1,20 @@
+import { BackgroundLevel, Theme } from "@Component/Theme/Theme";
+import { Component, ReactNode } from "react";
+
+interface ICommandBarProps {
+    width: number;
+}
+
+class CommandBar extends Component<ICommandBarProps> {
+    
+    render(): ReactNode {
+        return <Theme 
+            className="command-bar"
+            backgroundLevel={BackgroundLevel.Level2}
+            style={{ width: this.props.width }}
+        >
+        </Theme>    
+    }
+}
+
+export { CommandBar };
\ No newline at end of file
diff --git a/source/Component/HeaderBar/HeaderBar.scss b/source/Component/HeaderBar/HeaderBar.scss
index f7cda1d..38ec8cf 100644
--- a/source/Component/HeaderBar/HeaderBar.scss
+++ b/source/Component/HeaderBar/HeaderBar.scss
@@ -1,5 +1,5 @@
 div.header-bar {
-    padding: 0 20px;
+    padding: 0 10px;
     box-sizing: border-box;
     display: flex;
     align-items: center;
@@ -11,7 +11,7 @@ div.header-bar {
         vertical-align: text-bottom;
         padding-right: 5px;
     }
-    
+
     div.ms-TooltipHost {
         padding: 0 5px;
         overflow: hidden;
diff --git a/source/Component/HeaderBar/HeaderBar.tsx b/source/Component/HeaderBar/HeaderBar.tsx
index ce5a925..18787ff 100644
--- a/source/Component/HeaderBar/HeaderBar.tsx
+++ b/source/Component/HeaderBar/HeaderBar.tsx
@@ -60,6 +60,7 @@ class HeaderBar extends Component<
             setting.on("language", this.changeListener);
         }
         if (status) {
+            status.archive.on("save", this.changeListener);
             status.model.on("loop", this.physicsFpsCalc);
             status.renderer.on("loop", this.renderFpsCalc);
         }
@@ -71,6 +72,7 @@ class HeaderBar extends Component<
             setting.off("language", this.changeListener);
         }
         if (status) {
+            status.archive.off("save", this.changeListener);
             status.model.off("loop", this.physicsFpsCalc);
             status.renderer.off("loop", this.renderFpsCalc);
         }
diff --git a/source/Localization/EN-US.ts b/source/Localization/EN-US.ts
index aec7bf2..f33522a 100644
--- a/source/Localization/EN-US.ts
+++ b/source/Localization/EN-US.ts
@@ -8,6 +8,6 @@ const EN_US = {
     "Header.Bar.File.Save.Status.Saved": "Saved",
     "Header.Bar.File.Save.Status.Unsaved": "UnSaved",
     "Header.Bar.Fps": "FPS: {renderFps} | {physicsFps}",
-    "Header.Bar.Fps.Info": "The rendering frame rate ({renderFps} / fps) is on the left, and the simulation frame rate ({physicsFps} / fps) is on the right.",
+    "Header.Bar.Fps.Info": "The rendering frame rate ({renderFps} fps) is on the left, and the simulation frame rate ({physicsFps} fps) is on the right.",
 }
 export default EN_US;
\ No newline at end of file
diff --git a/source/Localization/ZH-CN.ts b/source/Localization/ZH-CN.ts
index 36fdfad..0c28443 100644
--- a/source/Localization/ZH-CN.ts
+++ b/source/Localization/ZH-CN.ts
@@ -8,6 +8,6 @@ const ZH_CN = {
     "Header.Bar.File.Save.Status.Saved": "已保存",
     "Header.Bar.File.Save.Status.Unsaved": "未保存",
     "Header.Bar.Fps": "帧率: {renderFps} | {physicsFps}",
-    "Header.Bar.Fps.Info": "左侧为渲染帧率 ({renderFps} / fps), 右侧为模拟帧率 ({physicsFps} / fps)。",
+    "Header.Bar.Fps.Info": "左侧为渲染帧率 ({renderFps} fps), 右侧为模拟帧率 ({physicsFps} fps)。",
 }
 export default ZH_CN;
\ No newline at end of file
diff --git a/source/Model/Archive.ts b/source/Model/Archive.ts
index b29a7fd..8c91b21 100644
--- a/source/Model/Archive.ts
+++ b/source/Model/Archive.ts
@@ -8,7 +8,7 @@ interface IArchiveEvent {
 class Archive<
     M extends any = any,
     E extends Record<EventType, any> = {}
-> extends Emitter<E> {
+> extends Emitter<E & IArchiveEvent> {
 
     /**
      * 是否为新文件
diff --git a/source/Page/SimulatorWeb/SimulatorWeb.scss b/source/Page/SimulatorWeb/SimulatorWeb.scss
index 8677595..512d170 100644
--- a/source/Page/SimulatorWeb/SimulatorWeb.scss
+++ b/source/Page/SimulatorWeb/SimulatorWeb.scss
@@ -3,4 +3,9 @@ div.app-root {
     height: 100%;
     position: absolute;
     overflow: hidden;
+
+    div.app-root-space {
+        height: 100%;
+        display: flex;
+    }
 }
\ No newline at end of file
diff --git a/source/Page/SimulatorWeb/SimulatorWeb.tsx b/source/Page/SimulatorWeb/SimulatorWeb.tsx
index 6c1c81d..286e430 100644
--- a/source/Page/SimulatorWeb/SimulatorWeb.tsx
+++ b/source/Page/SimulatorWeb/SimulatorWeb.tsx
@@ -1,13 +1,13 @@
 import { Component, ReactNode } from "react";
 import { SettingProvider, Setting } from "@Context/Setting";
 import { HeaderBar } from "@Component/HeaderBar/HeaderBar";
-import { Theme, FontLevel, BackgroundLevel } from "@Component/Theme/Theme";
-import { Localization } from "@Component/Localization/Localization";
+import { Theme, BackgroundLevel, FontLevel } from "@Component/Theme/Theme";
 import { Entry } from "../Entry/Entry";
 import { StatusProvider, Status } from "@Context/Status";
 import { ClassicRenderer } from "@GLRender/ClassicRenderer";
 import { initializeIcons } from '@fluentui/font-icons-mdl2';
 import "./SimulatorWeb.scss";
+import { CommandBar } from "@Component/CommandBar/CommandBar";
 
 initializeIcons();
 
@@ -65,8 +65,12 @@ class SimulatorWeb extends Component {
         return <Theme 
             className="app-root"
             backgroundLevel={BackgroundLevel.Level5}
+            fontLevel={FontLevel.Level3}
         >
             <HeaderBar height={45}/>
+            <div className="app-root-space">
+                <CommandBar width={45}/>
+            </div>
         </Theme>
     }
 }