diff --git a/app/web/src/nova/ed/ed-base.tsx b/app/web/src/nova/ed/ed-base.tsx
index 8de89007..bd3792d8 100644
--- a/app/web/src/nova/ed/ed-base.tsx
+++ b/app/web/src/nova/ed/ed-base.tsx
@@ -1,18 +1,19 @@
 import { useGlobal } from "web-utils";
 import { Loading } from "../../utils/ui/loading";
 import { EdLeft } from "./ed-left";
+import { EdMid } from "./ed-mid";
 import { EdRight } from "./ed-right";
 import { EDGlobal } from "./logic/ed-global";
 import { edInit } from "./logic/ed-init";
 import { edRoute } from "./logic/ed-route";
 import { edUndoManager } from "./logic/ed-undo";
-import { EdMain } from "./panel/main/main";
 import { EdPane } from "./panel/main/pane-resize";
 import { EdPopCode } from "./panel/popup/code/code";
 import { EdPopCompGroup } from "./panel/popup/comp/comp-group";
-import { EdPopSite } from "./panel/popup/site/site";
-import { EdScriptInit } from "./panel/script/monaco/init";
 import { EdPopScript } from "./panel/popup/script/script";
+import { EdPopSite } from "./panel/popup/site/site-popup";
+import { EdScriptInit } from "./panel/script/monaco/init";
+import { EdPagePop } from "./panel/popup/page/page-popup";
 
 export const EdBase = () => {
   const p = useGlobal(EDGlobal, "EDITOR");
@@ -42,7 +43,7 @@ export const EdBase = () => {
       <div className="flex flex-1 items-stretch">
         <EdLeft />
         <EdPane type="left" />
-        <EdMain />
+        <EdMid />
         <EdPane type="right" />
         <EdRight />
       </div>
@@ -50,6 +51,7 @@ export const EdBase = () => {
         <EdPopCode />
         <EdPopScript />
         <EdPopSite />
+        <EdPagePop />
         <EdPopCompGroup />
         <EdScriptInit />
       </>
diff --git a/app/web/src/nova/ed/ed-left.tsx b/app/web/src/nova/ed/ed-left.tsx
index 9969b6b8..41e1e4ae 100644
--- a/app/web/src/nova/ed/ed-left.tsx
+++ b/app/web/src/nova/ed/ed-left.tsx
@@ -4,7 +4,7 @@ import { useGlobal } from "web-utils";
 import { EDGlobal } from "./logic/ed-global";
 import { EdApi } from "./panel/header/left/api";
 import { EdSiteJS } from "./panel/header/left/js";
-import { EdSitePicker } from "./panel/header/left/site";
+import { EdSitePicker } from "./panel/header/left/site-picker";
 import { EdTreeBody } from "./panel/tree/body";
 import { EdTreeSearch } from "./panel/tree/search";
 
diff --git a/app/web/src/nova/ed/ed-mid.tsx b/app/web/src/nova/ed/ed-mid.tsx
new file mode 100644
index 00000000..07b732a6
--- /dev/null
+++ b/app/web/src/nova/ed/ed-mid.tsx
@@ -0,0 +1,18 @@
+import { FC } from "react";
+import { EdMain } from "./panel/main/main";
+import { EdPagePicker } from "./panel/header/mid/page-picker";
+
+export const EdMid: FC<{}> = () => {
+  return (
+    <div className="flex flex-col flex-1">
+      <div
+        className={cx(
+          "h-[35px] border-b flex p-1 items-stretch text-[12px] justify-between"
+        )}
+      >
+        <EdPagePicker />
+      </div>
+      <EdMain />
+    </div>
+  );
+};
diff --git a/app/web/src/nova/ed/logic/ed-global.ts b/app/web/src/nova/ed/logic/ed-global.ts
index b9514983..092c793e 100644
--- a/app/web/src/nova/ed/logic/ed-global.ts
+++ b/app/web/src/nova/ed/logic/ed-global.ts
@@ -221,6 +221,10 @@ export const EDGlobal = {
         show_log: false,
         list: {} as Record<string, string>,
       },
+      page: {
+        go: () => {},
+        form: null as null | {},
+      },
       script: {
         open: false,
         mode: "js" as "js" | "css" | "html",
diff --git a/app/web/src/nova/ed/panel/header/left/site.tsx b/app/web/src/nova/ed/panel/header/left/site-picker.tsx
similarity index 100%
rename from app/web/src/nova/ed/panel/header/left/site.tsx
rename to app/web/src/nova/ed/panel/header/left/site-picker.tsx
diff --git a/app/web/src/nova/ed/panel/header/mid/page-picker.tsx b/app/web/src/nova/ed/panel/header/mid/page-picker.tsx
new file mode 100644
index 00000000..fad88f86
--- /dev/null
+++ b/app/web/src/nova/ed/panel/header/mid/page-picker.tsx
@@ -0,0 +1,23 @@
+import { useGlobal } from "web-utils";
+import { EDGlobal } from "../../../logic/ed-global";
+import { TopBtn } from "../top-btn";
+
+export const EdPagePicker = () => {
+  const p = useGlobal(EDGlobal, "EDITOR");
+
+  return (
+    <TopBtn
+      onClick={(e) => {}}
+      innerClassName="flex items-center justify-center space-x-2"
+    >
+      <div
+        dangerouslySetInnerHTML={{
+          __html: `<svg width="12" height="12" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 2.5C3 2.22386 3.22386 2 3.5 2H9.08579C9.21839 2 9.34557 2.05268 9.43934 2.14645L11.8536 4.56066C11.9473 4.65443 12 4.78161 12 4.91421V12.5C12 12.7761 11.7761 13 11.5 13H3.5C3.22386 13 3 12.7761 3 12.5V2.5ZM3.5 1C2.67157 1 2 1.67157 2 2.5V12.5C2 13.3284 2.67157 14 3.5 14H11.5C12.3284 14 13 13.3284 13 12.5V4.91421C13 4.51639 12.842 4.13486 12.5607 3.85355L10.1464 1.43934C9.86514 1.15804 9.48361 1 9.08579 1H3.5ZM4.5 4C4.22386 4 4 4.22386 4 4.5C4 4.77614 4.22386 5 4.5 5H7.5C7.77614 5 8 4.77614 8 4.5C8 4.22386 7.77614 4 7.5 4H4.5ZM4.5 7C4.22386 7 4 7.22386 4 7.5C4 7.77614 4.22386 8 4.5 8H10.5C10.7761 8 11 7.77614 11 7.5C11 7.22386 10.7761 7 10.5 7H4.5ZM4.5 10C4.22386 10 4 10.2239 4 10.5C4 10.7761 4.22386 11 4.5 11H10.5C10.7761 11 11 10.7761 11 10.5C11 10.2239 10.7761 10 10.5 10H4.5Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>`,
+        }}
+      ></div>
+      <div className="overflow-hidden whitespace-nowrap text-[11px] text-ellipsis max-w-[100px]">
+        {p.page.cur.name}
+      </div>
+    </TopBtn>
+  );
+};
diff --git a/app/web/src/nova/ed/panel/popup/page/page-popup.tsx b/app/web/src/nova/ed/panel/popup/page/page-popup.tsx
new file mode 100644
index 00000000..d9dc8f09
--- /dev/null
+++ b/app/web/src/nova/ed/panel/popup/page/page-popup.tsx
@@ -0,0 +1,3 @@
+export const EdPagePop = () => {
+  return <div className="">Hello world</div>;
+};
diff --git a/app/web/src/nova/ed/panel/popup/site/site.tsx b/app/web/src/nova/ed/panel/popup/site/site-popup.tsx
similarity index 99%
rename from app/web/src/nova/ed/panel/popup/site/site.tsx
rename to app/web/src/nova/ed/panel/popup/site/site-popup.tsx
index 72aae5e8..5b29eb7b 100644
--- a/app/web/src/nova/ed/panel/popup/site/site.tsx
+++ b/app/web/src/nova/ed/panel/popup/site/site-popup.tsx
@@ -8,7 +8,7 @@ import { EdFormSite } from "./site-form";
 import { EdSiteHead } from "./site-head";
 import { EdSiteTree, SiteGroupItem } from "./site-tree";
 
-import uFuzzy, { Info } from "@leeoniya/ufuzzy";
+import uFuzzy from "@leeoniya/ufuzzy";
 import { fuzzy } from "../../../../../utils/ui/fuzzy";
 const uf = new uFuzzy({});