diff --git a/package.json b/package.json
index f41b791..c07333b 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,9 @@
     "prepare": "husky install"
   },
   "lint-staged": {
-    ".ts,.tsx,.vue": ["eslint --fix"]
+    ".ts,.tsx,.vue": [
+      "eslint --fix"
+    ]
   },
   "dependencies": {
     "monaco-editor": "^0.34.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 734b881..1cee548 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,7 +14,7 @@
   eslint-plugin-prettier: ^4.2.1
   eslint-plugin-promise: ^6.0.0
   eslint-plugin-vue: ^9.4.0
-  husky: ^8.0.1
+  husky: ^8.0.0
   lint-staged: ^13.0.3
   monaco-editor: ^0.34.0
   naive-ui: 2.32.0
diff --git a/studio/pages/editor.tsx b/studio/pages/editor.tsx
index 00ad262..22774d6 100644
--- a/studio/pages/editor.tsx
+++ b/studio/pages/editor.tsx
@@ -15,11 +15,89 @@
  * limitations under the License.
  */
 
-import { defineComponent } from 'vue'
+import {
+  NButton,
+  NIcon,
+  NLayout,
+  NLayoutContent,
+  NLayoutHeader,
+  NTabPane,
+  NTabs
+} from 'naive-ui'
+import { ref, defineComponent } from 'vue'
+import {
+  FullscreenOutlined,
+  PlayCircleOutlined,
+  SaveOutlined,
+  ToTopOutlined
+} from '@vicons/antd'
+import styles from './styles.module.scss'
 
 export const EditorPage = defineComponent({
   name: 'editor-page',
   setup() {
-    return () => <div>Editor - Page</div>
+    const fileRef = ref(1)
+
+    const handleClose = () => {}
+
+    const tabPanes = [1, 2, 3].map((item) => {
+      return (
+        <NTabPane name={item} key={item} tab={item.toString()}>
+          {{ item }}
+        </NTabPane>
+      )
+    })
+
+    return () => (
+      <NLayout>
+        <NLayoutHeader>
+          <div class={styles.toolbar}>
+            <div class={styles.operate}>
+              <NButton text style={{ fontSize: '24px' }}>
+                <NIcon>
+                  <SaveOutlined />
+                </NIcon>
+              </NButton>
+            </div>
+            <div class={styles.operate}>
+              <NButton text style={{ fontSize: '24px' }}>
+                <NIcon>
+                  <PlayCircleOutlined />
+                </NIcon>
+              </NButton>
+            </div>
+            <div class={styles.operate}>
+              <NButton text style={{ fontSize: '24px' }}>
+                <NIcon>
+                  <FullscreenOutlined />
+                </NIcon>
+              </NButton>
+            </div>
+            <div class={styles.operate}>
+              <NButton text style={{ fontSize: '24px' }}>
+                <NIcon>
+                  <ToTopOutlined />
+                </NIcon>
+              </NButton>
+            </div>
+          </div>
+        </NLayoutHeader>
+        <NLayoutContent
+          style={{
+            height: '664px'
+          }}
+        >
+          <NTabs
+            value={fileRef.value}
+            type='card'
+            closable
+            tabStyle={{ minWidth: '80px' }}
+            onClose={handleClose}
+          >
+            {tabPanes}
+          </NTabs>
+        </NLayoutContent>
+      </NLayout>
+    )
   }
 })
diff --git a/studio/pages/styles.module.scss b/studio/pages/styles.module.scss
new file mode 100644
index 0000000..3c1cf66
--- /dev/null
+++ b/studio/pages/styles.module.scss
@@ -0,0 +1,8 @@
+.toolbar {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  .operate {
+    padding: 5px 5px;
+  }
+}