diff --git a/app/web/src/render/ed/logic/ed-global.ts b/app/web/src/render/ed/logic/ed-global.ts
index 9fc2b31a..6ef12f54 100644
--- a/app/web/src/render/ed/logic/ed-global.ts
+++ b/app/web/src/render/ed/logic/ed-global.ts
@@ -86,6 +86,12 @@ export const EDGlobal = {
   ui: {
     tree: {
       search: "",
+      searchMode: {
+        Name: true,
+        JS: false,
+        HTML: false,
+        CSS: false,
+      },
       open: {} as Record<string, string[]>,
     },
     popup: {
diff --git a/app/web/src/render/ed/panel/tree/search.tsx b/app/web/src/render/ed/panel/tree/search.tsx
index aa84f5c5..769e02f7 100644
--- a/app/web/src/render/ed/panel/tree/search.tsx
+++ b/app/web/src/render/ed/panel/tree/search.tsx
@@ -21,93 +21,175 @@ export const EdTreeSearch = () => {
   }, [local.sref, local.cursor, p.ui.tree.search]);
 
   return (
-    <div className="flex items-stretch h-[24px] border-b">
-      <input
-        name="search"
-        ref={(ref) => {
-          local.sref = ref;
-        }}
-        type="search"
-        autoComplete="off"
-        className={cx("flex-1 outline-none px-2 text-[13px] ")}
-        placeholder="Search..."
-        value={p.ui.tree.search}
-        spellCheck={false}
-        onInput={(e) => {
-          local.cursor = e.currentTarget.selectionStart;
-          p.ui.tree.search = e.currentTarget.value;
-          p.render();
-        }}
-        onFocus={() => {
-          local.focus = true;
+    <div
+      className="flex flex-col items-stretch border-b"
+      onMouseOver={() => {
+        if (local.focus) {
+          local.hover = true;
           local.render();
-        }}
-        onBlur={() => {
-          if (!local.hover && !p.ui.tree.search) {
-            local.focus = false;
+        }
+      }}
+      onMouseLeave={() => {
+        local.hover = false;
+        local.render();
+      }}
+    >
+      <div className="flex items-stretch h-[24px] ">
+        <input
+          name="search"
+          ref={(ref) => {
+            local.sref = ref;
+          }}
+          type="search"
+          autoComplete="off"
+          className={cx("flex-1 outline-none px-2 text-[13px] ")}
+          placeholder="Search..."
+          value={p.ui.tree.search}
+          spellCheck={false}
+          onInput={(e) => {
+            local.cursor = e.currentTarget.selectionStart;
+            p.ui.tree.search = e.currentTarget.value;
+            p.render();
+          }}
+          onFocus={() => {
+            local.focus = true;
             local.render();
-          }
-        }}
-      />
+          }}
+          onBlur={() => {
+            if (!local.hover && !p.ui.tree.search) {
+              local.focus = false;
+              local.render();
+            }
+          }}
+        />
+      </div>
+      {(local.focus || local.hover || p.ui.tree.search) && (
+        <div className="p-1 bg-white text-xs border-t flex space-x-1 justify-between">
+          <div className="flex space-x-1">
+            {Object.entries(p.ui.tree.searchMode).map(([name, active]) => {
+              return (
+                <div
+                  className={cx(
+                    "px-1 cursor-pointer rounded-sm border-blue-500 border",
+                    active ? "bg-blue-500 text-white" : "hover:bg-blue-100"
+                  )}
+                  onClick={() => {
+                    (p.ui.tree.searchMode as any)[name] = !active;
+                    local.render();
+                    local.sref?.focus();
+                  }}
+                  key={name}
+                >
+                  {name}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
     </div>
   );
 };
 
 export const doTreeSearch = (p: PG) => {
-  let tree: NodeModel<EdMeta>[] = [];
-  const [idxs, info] = uf.search(
-    p.page.tree.map((e) => e.text),
-    p.ui.tree.search
-  );
-  if (idxs && info) {
-    let i = 0;
-    for (const idx of idxs) {
-      const item = p.page.tree[idx];
-      const range = info.ranges[i++];
-      let text = "";
+  let tree: Record<string, { idx: number; node: NodeModel<EdMeta> }> = {};
 
-      let cur = range.shift();
-      let open = true;
-      for (let i = 0; i < item.text.length; i++) {
-        if (typeof cur === "number") {
-          if (i === cur) {
-            if (open) {
-              text += `<b>`;
-              open = false;
-            } else {
-              text += `</b>`;
-              open = true;
+  if (p.ui.tree.searchMode.Name) {
+    const [idxs, info] = uf.search(
+      p.page.tree.map((e) => e.text),
+      p.ui.tree.search
+    );
+    if (idxs && info) {
+      let i = 0;
+      for (const idx of idxs) {
+        const item = p.page.tree[idx];
+        const range = info.ranges[i];
+        let text = "";
+
+        let cur = range.shift();
+        let open = true;
+        for (let i = 0; i < item.text.length; i++) {
+          if (typeof cur === "number") {
+            if (i === cur) {
+              if (open) {
+                text += `<b>`;
+                open = false;
+              } else {
+                text += `</b>`;
+                open = true;
+              }
+              cur = range.shift();
             }
-            cur = range.shift();
+            text += item.text[i];
+          } else {
+            text += item.text[i];
           }
-          text += item.text[i];
-        } else {
-          text += item.text[i];
         }
+        const el = (
+          <div
+            className={css`
+              b {
+                font-weight: bold;
+                color: #df9100;
+                text-decoration: underline;
+              }
+            `}
+            dangerouslySetInnerHTML={{ __html: text }}
+          />
+        );
+        tree[item.id] = {
+          idx: i,
+          node: {
+            ...item,
+            parent: "root",
+            data: item.data
+              ? {
+                  ...item.data,
+                  el,
+                }
+              : undefined,
+          },
+        };
+        i++;
       }
-      const el = (
-        <div
-          className={css`
-            b {
-              font-weight: bold;
-              color: #df9100;
-              text-decoration: underline;
-            }
-          `}
-          dangerouslySetInnerHTML={{ __html: text }}
-        />
-      );
-      tree.push({
-        ...item,
-        parent: "root",
-        data: item.data
-          ? {
-              ...item.data,
-              el,
-            }
-          : undefined,
-      });
     }
   }
-  return tree;
+
+  const search = p.ui.tree.search.toLowerCase();
+  let i = 0;
+  for (const row of p.page.tree) {
+    const item = row.data?.item;
+    if (item) {
+      const js = item.adv?.js;
+      if (js) {
+        if (p.ui.tree.searchMode.JS) {
+          if ((js as string).toLowerCase().includes(search)) {
+            console.log(js);
+            tree[item.id] = { idx: i++, node: { ...row, parent: "root" } };
+          }
+        }
+      }
+      const css = item.adv?.css;
+      if (css) {
+        if (p.ui.tree.searchMode.CSS) {
+          if (css.toString().toLowerCase().includes(search)) {
+            tree[item.id] = { idx: i++, node: { ...row, parent: "root" } };
+          }
+        }
+      }
+
+      const html = item.adv?.html;
+      if (html) {
+        if (p.ui.tree.searchMode.HTML) {
+          if (html.toString().toLowerCase().includes(search)) {
+            tree[item.id] = { idx: i++, node: { ...row, parent: "root" } };
+          }
+        }
+      }
+    }
+  }
+
+  return Object.values(tree)
+    .sort((a, b) => a.idx - b.idx)
+    .map((e) => e.node);
 };