diff --git a/app/web/src/nova/ed/panel/popup/comp/comp-popup.tsx b/app/web/src/nova/ed/panel/popup/comp/comp-popup.tsx
index fe980f0f..70f0e27d 100644
--- a/app/web/src/nova/ed/panel/popup/comp/comp-popup.tsx
+++ b/app/web/src/nova/ed/panel/popup/comp/comp-popup.tsx
@@ -6,13 +6,14 @@ import {
 } from "@minoru/react-dnd-treeview";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import { useEffect } from "react";
-import { useGlobal, useLocal } from "web-utils";
+import { deepClone, useGlobal, useLocal } from "web-utils";
 import { Loading } from "../../../../../utils/ui/loading";
 import { Modal } from "../../../../../utils/ui/modal";
 import { EDGlobal, active } from "../../../logic/ed-global";
 import { compPicker, reloadCompPicker } from "./comp-reload";
 import { CompItem, edPageTreeRender } from "./comp-tree";
 import { EdCompPreview } from "./comp-preview";
+import { fuzzy } from "../../../../../utils/ui/fuzzy";
 
 export const EdPopComp = () => {
   const p = useGlobal(EDGlobal, "EDITOR");
@@ -43,6 +44,12 @@ export const EdPopComp = () => {
     tree = compPicker.trash;
   }
 
+  if (compPicker.search) {
+    tree = fuzzy(tree, "text", compPicker.search);
+    tree.forEach((e) => (e.parent = "comp-root"));
+    tree = tree.filter((e) => e.data?.type === "component");
+  }
+
   return (
     <>
       <Modal
@@ -94,6 +101,19 @@ export const EdPopComp = () => {
                         );
                       })}
                     </div>
+                    <div className="flex flex-1 mr-1 justify-end">
+                      <input
+                        type="search"
+                        placeholder="Search"
+                        spellCheck={false}
+                        className="my-1 bg-transparent bg-white border outline-none px-1 focus:border-blue-500 focus:w-[300px] transition-all"
+                        value={compPicker.search}
+                        onChange={(e) => {
+                          compPicker.search = e.currentTarget.value;
+                          p.render();
+                        }}
+                      />
+                    </div>
                   </div>
                   <div className="relative flex-1 overflow-auto flex">
                     <div
diff --git a/app/web/src/nova/ed/panel/popup/comp/comp-reload.ts b/app/web/src/nova/ed/panel/popup/comp/comp-reload.ts
index bc087909..b2a7c290 100644
--- a/app/web/src/nova/ed/panel/popup/comp/comp-reload.ts
+++ b/app/web/src/nova/ed/panel/popup/comp/comp-reload.ts
@@ -13,6 +13,7 @@ export const compPicker = {
   status: "ready" as "loading" | "ready",
   active_id: "",
   render: () => {},
+  search: "",
 };
 
 export const reloadCompPicker = async (p: PG) => {
diff --git a/app/web/src/nova/ed/panel/popup/comp/comp-tree.tsx b/app/web/src/nova/ed/panel/popup/comp/comp-tree.tsx
index 2c5c05e6..98a0855c 100644
--- a/app/web/src/nova/ed/panel/popup/comp/comp-tree.tsx
+++ b/app/web/src/nova/ed/panel/popup/comp/comp-tree.tsx
@@ -1,5 +1,5 @@
 import { NodeModel, NodeRender } from "@minoru/react-dnd-treeview";
-import { FC } from "react";
+import { FC, ReactNode } from "react";
 import { useGlobal, useLocal } from "web-utils";
 import { EDGlobal, active } from "../../../logic/ed-global";
 import { compPicker, reloadCompPicker } from "./comp-reload";
@@ -108,7 +108,7 @@ export const edPageTreeRender: NodeRender<CompItem> = (
             }}
           />
         ) : (
-          <Name name={item.name} />
+          <Name name={node.text} />
         )}
       </div>
 
@@ -168,7 +168,9 @@ export const edPageTreeRender: NodeRender<CompItem> = (
   );
 };
 
-const Name: FC<{ name: string }> = ({ name }) => {
+const Name: FC<{ name: ReactNode }> = ({ name }) => {
+  if (typeof name !== "string") return name;
+
   if (name.startsWith("layout::")) {
     return (
       <div className="flex items-center">