diff --git a/app/web/src/nova/ed/ed-base.tsx b/app/web/src/nova/ed/ed-base.tsx
index 25c92435..38874ea6 100644
--- a/app/web/src/nova/ed/ed-base.tsx
+++ b/app/web/src/nova/ed/ed-base.tsx
@@ -14,6 +14,7 @@ import { EdPagePop } from "./panel/popup/page/page-popup";
 import { EdPopScript } from "./panel/popup/script/pop-script";
 import { EdPopSite } from "./panel/popup/site/site-popup";
 import { EdScriptInit } from "./panel/script/monaco/init";
+import { EdPopApi } from "./panel/popup/api/api-server";
 
 export const EdBase = () => {
   const p = useGlobal(EDGlobal, "EDITOR");
@@ -51,6 +52,7 @@ export const EdBase = () => {
         <EdPopCode />
         <EdPopScript />
         <EdPopSite />
+        <EdPopApi />
         <EdPagePop />
         <EdPopCompGroup />
         <EdScriptInit />
diff --git a/app/web/src/nova/ed/logic/ed-global.ts b/app/web/src/nova/ed/logic/ed-global.ts
index 96621d19..39e41e91 100644
--- a/app/web/src/nova/ed/logic/ed-global.ts
+++ b/app/web/src/nova/ed/logic/ed-global.ts
@@ -244,6 +244,7 @@ export const EDGlobal = {
         on_pick?: (group_id: string) => void | Promise<void>;
         on_close?: () => void | Promise<void>;
       },
+      api: { open: false },
     },
   },
 };
diff --git a/app/web/src/nova/ed/panel/header/left/api.tsx b/app/web/src/nova/ed/panel/header/left/api.tsx
index 053f7b20..74f6137a 100644
--- a/app/web/src/nova/ed/panel/header/left/api.tsx
+++ b/app/web/src/nova/ed/panel/header/left/api.tsx
@@ -1,12 +1,18 @@
-import { EdApiServer } from "../../popup/api/api-server";
+import { useGlobal } from "web-utils";
 import { TopBtn } from "../top-btn";
+import { EDGlobal } from "../../../logic/ed-global";
 
 export const EdApi = () => {
+  const p = useGlobal(EDGlobal, "EDITOR");
+
   return (
     <TopBtn
       style="slim"
       innerClassName="flex-1 flex items-center justify-center"
-      popover={(popover) => <EdApiServer popover={popover} />}
+      onClick={() => {
+        p.ui.popup.api.open = true;
+        p.render();
+      }}
       placement="right"
     >
       <div
diff --git a/app/web/src/nova/ed/panel/popup/api/api-server.tsx b/app/web/src/nova/ed/panel/popup/api/api-server.tsx
index 70aaaee4..e7ffd39f 100644
--- a/app/web/src/nova/ed/panel/popup/api/api-server.tsx
+++ b/app/web/src/nova/ed/panel/popup/api/api-server.tsx
@@ -5,6 +5,30 @@ import { EdApiDB } from "./api-db";
 import { EdApiDeploy } from "./api-deploy";
 import { EdApiDomain } from "./api-domain";
 import { apiRef, apiUrl, checkAPI, dev, server } from "./api-utils";
+import { Modal } from "../../../../../utils/ui/modal";
+
+export const EdPopApi = () => {
+  const p = useGlobal(EDGlobal, "EDITOR");
+
+  return (
+    <Modal
+      open={p.ui.popup.api.open}
+      onOpenChange={(open) => {
+        p.ui.popup.api.open = open;
+        p.render();
+      }}
+    >
+      <EdApiServer
+        popover={{
+          onClose() {
+            p.ui.popup.api.open = false;
+            p.render();
+          },
+        }}
+      />
+    </Modal>
+  );
+};
 
 export const EdApiServer = forwardRef<
   HTMLDivElement,
diff --git a/app/web/src/nova/ed/panel/tree/node/item/name.tsx b/app/web/src/nova/ed/panel/tree/node/item/name.tsx
index 7b3c0a4b..35e7e431 100644
--- a/app/web/src/nova/ed/panel/tree/node/item/name.tsx
+++ b/app/web/src/nova/ed/panel/tree/node/item/name.tsx
@@ -2,6 +2,7 @@ import { NodeModel, RenderParams } from "@minoru/react-dnd-treeview";
 import { EDGlobal, EdMeta } from "../../../../logic/ed-global";
 import { useGlobal, useLocal } from "web-utils";
 import { FC, useEffect } from "react";
+import { Tooltip } from "../../../../../../utils/ui/tooltip";
 
 export const EdTreeName = ({
   node,
@@ -74,7 +75,7 @@ export const EdTreeName = ({
       ) : (
         <div className="flex flex-col">
           <Name name={node.text} is_jsx_prop={is_jsx_prop} />
-          <div className={"text-[11px] text-gray-500 -mt-1"}>{item.id}</div>
+          {/* <div className={"text-[11px] text-gray-500 -mt-1"}>{item.id}</div> */}
         </div>
       )}
     </div>
@@ -88,8 +89,8 @@ const Name: FC<{ name: string; is_jsx_prop: boolean }> = ({
   if (is_jsx_prop) {
     return (
       <div className="flex items-center space-x-1">
-        <div className="flex text-purple-500 border border-purple-400 items-center justify-center font-mono text-[8px] px-[2px]">
-          PROP
+        <div className="flex text-purple-500 border border-purple-400 items-center justify-center font-mono text-[6px] px-[2px]">
+          P
         </div>
         <div>{name}</div>
       </div>