diff --git a/app/web/src/nova/ed/logic/comp/load.tsx b/app/web/src/nova/ed/logic/comp/load.tsx
index 483d8404..59170071 100644
--- a/app/web/src/nova/ed/logic/comp/load.tsx
+++ b/app/web/src/nova/ed/logic/comp/load.tsx
@@ -1,6 +1,10 @@
 import { compress, decompress } from "wasm-gzip";
+import { IItem } from "../../../../utils/types/item";
 import { DComp } from "../../../../utils/types/root";
-import { PG } from "../ed-global";
+import { genMeta } from "../../../vi/meta/meta";
+import { IMeta, PG } from "../ed-global";
+import { NodeModel } from "@minoru/react-dnd-treeview";
+import { pushTreeNode } from "../tree/build/push-tree";
 
 export const loadcomp = {
   timeout: 0 as any,
@@ -46,13 +50,31 @@ export const loadCompSnapshot = async (
       doc.off("update", p.comp.list[id_comp].on_update);
     }
 
+    const meta = {};
+    const tree: NodeModel<IMeta>[] = [];
+    const item = mitem.toJSON() as IItem;
+    p.comp.loaded[id_comp] = {
+      comp: item,
+    };
+    genMeta(
+      {
+        comps: p.comp.loaded,
+        meta,
+        on: {
+          visit(m) {
+            pushTreeNode(p, m, meta, tree);
+          },
+        },
+        note: "load-comp",
+      },
+      { item, ignore_first_component: true }
+    );
+
     p.comp.list[id_comp] = {
       comp: { id: id_comp, snapshot },
       doc,
-    } as any;
-
-    p.comp.list[id_comp] = {
-      ...p.comp.list[id_comp],
+      meta,
+      tree,
       async on_update(bin, origin) {
         if (origin === "sv_remote" || origin === "local") {
           return;
diff --git a/app/web/src/nova/ed/logic/tree/build.tsx b/app/web/src/nova/ed/logic/tree/build.tsx
index 806d24c1..25b363c5 100644
--- a/app/web/src/nova/ed/logic/tree/build.tsx
+++ b/app/web/src/nova/ed/logic/tree/build.tsx
@@ -39,7 +39,7 @@ export const treeRebuild = async (p: PG, arg?: { note?: string }) => {
           on: {
             async visit(m) {
               if (!is_layout) {
-                pushTreeNode(p, m, meta);
+                pushTreeNode(p, m, meta, p.page.tree);
               }
             },
           },
diff --git a/app/web/src/nova/ed/logic/tree/build/push-tree.tsx b/app/web/src/nova/ed/logic/tree/build/push-tree.tsx
index b31434f2..e60ab518 100644
--- a/app/web/src/nova/ed/logic/tree/build/push-tree.tsx
+++ b/app/web/src/nova/ed/logic/tree/build/push-tree.tsx
@@ -1,9 +1,11 @@
+import { NodeModel } from "@minoru/react-dnd-treeview";
 import { IMeta, PG } from "../../ed-global";
 
 export const pushTreeNode = (
   p: PG,
   meta: IMeta,
-  metas: Record<string, IMeta>
+  metas: Record<string, IMeta>,
+  tree: NodeModel<IMeta>[]
 ) => {
   if (meta.parent?.id === "root") {
     p.page.doc
@@ -26,18 +28,18 @@ export const pushTreeNode = (
     }
   }
 
-  if (p.page.tree.find((t) => t.id === meta.item.id)) {
+  if (tree.find((t) => t.id === meta.item.id)) {
     console.log(meta.item.id, meta.item.name);
   } else {
     if (!meta.parent?.comp_id) {
-      p.page.tree.push({
+      tree.push({
         id: meta.item.id,
         parent: meta.parent?.id || "root",
         text: meta.item.name,
         data: meta,
       });
     } else if (meta.jsx_prop) {
-      p.page.tree.push({
+      tree.push({
         id: meta.item.id,
         parent: meta.parent?.instance_id || "root",
         text: meta.item.name,
diff --git a/app/web/src/nova/ed/panel/main/main.tsx b/app/web/src/nova/ed/panel/main/main.tsx
index 9dad08a3..bb1d4430 100644
--- a/app/web/src/nova/ed/panel/main/main.tsx
+++ b/app/web/src/nova/ed/panel/main/main.tsx
@@ -1,13 +1,35 @@
-import { useGlobal } from "web-utils";
+import { useGlobal, useLocal } from "web-utils";
 import { Vi } from "../../../vi/vi";
 import { EDGlobal } from "../../logic/ed-global";
 
 export const EdMain = () => {
+  const local = useLocal({
+    hover_id: "",
+  });
   // return <div className="flex flex-1 flex-col relative"></div>;
   const p = useGlobal(EDGlobal, "EDITOR");
   return (
     <div className="flex flex-1 relative overflow-auto">
-      <div className="absolute inset-0 flex">
+      <div
+        className={cx(
+          "absolute inset-0 flex",
+          local.hover_id &&
+            css`
+              .s-${local.hover_id} {
+                &::after {
+                  content: " ";
+                  pointer-events: none;
+                  position: absolute;
+                  top: 0;
+                  bottom: 0;
+                  left: 0;
+                  right: 0;
+                  border: 2px solid #73b8ff;
+                }
+              }
+            `
+        )}
+      >
         <Vi
           meta={p.page.meta}
           api_url={p.site.config.api_url}
@@ -15,6 +37,17 @@ export const EdMain = () => {
           entry={p.page.entry}
           api={p.script.api}
           db={p.script.db}
+          visit={(meta, parts) => {
+            parts.props.onPointerOver = (e) => {
+              e.stopPropagation();
+              local.hover_id = meta.item.id;
+              local.render();
+            };
+            parts.props.onPointerLeave = (e) => {
+              local.hover_id = "";
+              local.render();
+            };
+          }}
         />
       </div>
     </div>
diff --git a/app/web/src/nova/ed/panel/side/prop-instance.tsx b/app/web/src/nova/ed/panel/side/prop-instance.tsx
index 7e90e608..6af1128d 100644
--- a/app/web/src/nova/ed/panel/side/prop-instance.tsx
+++ b/app/web/src/nova/ed/panel/side/prop-instance.tsx
@@ -23,6 +23,8 @@ export const EdSidePropInstance: FC<{ meta: IMeta }> = ({ meta }) => {
   let filtered = [] as { mprop: FMCompDef; name: string }[];
   const mprops = meta.mitem?.get("component")?.get("props");
   const comp_id = meta.mitem?.get("component")?.get("id") || "";
+
+  if (!p.comp.list[comp_id]) return null;
   const mcprops = p.comp.list[comp_id].doc
     .getMap("map")
     .get("root")
@@ -73,7 +75,10 @@ export const EdSidePropInstance: FC<{ meta: IMeta }> = ({ meta }) => {
             const item = meta.item as IItem;
 
             const comp_id = item.component?.id;
+
             if (comp_id) {
+              if (!p.comp.list[comp_id]) return;
+
               active.instance.item_id = item.id;
               active.instance.comp_id = active.comp_id;
 
diff --git a/app/web/src/nova/vi/meta/meta.ts b/app/web/src/nova/vi/meta/meta.ts
index cd4e8d1c..ac67ecaa 100644
--- a/app/web/src/nova/vi/meta/meta.ts
+++ b/app/web/src/nova/vi/meta/meta.ts
@@ -7,8 +7,10 @@ export const genMeta = (p: GenMetaP, arg: GenMetaArg) => {
   const item = arg.item as IItem;
 
   if (item.type === "item" && item.component?.id) {
-    genComp(p, arg);
-    return;
+    if (arg.ignore_first_component !== true) {
+      genComp(p, arg);
+      return;
+    }
   }
 
   let scope: IMeta["scope"] = {};
diff --git a/app/web/src/nova/vi/render/global.tsx b/app/web/src/nova/vi/render/global.tsx
index 27fedf75..93e52275 100644
--- a/app/web/src/nova/vi/render/global.tsx
+++ b/app/web/src/nova/vi/render/global.tsx
@@ -1,4 +1,5 @@
 import { IMeta } from "../../ed/logic/ed-global";
+import { viParts } from "./parts";
 
 export const ViGlobal = {
   status: "init" as "init" | "loading" | "ready",
@@ -10,6 +11,9 @@ export const ViGlobal = {
     api: null as any,
     db: null as any,
   },
+  visit: undefined as
+    | undefined
+    | ((meta: IMeta, parts: ReturnType<typeof viParts>) => void),
 };
 
 export type VG = typeof ViGlobal & { render: () => void };
diff --git a/app/web/src/nova/vi/render/parts.tsx b/app/web/src/nova/vi/render/parts.tsx
index 8991a693..c5552839 100644
--- a/app/web/src/nova/vi/render/parts.tsx
+++ b/app/web/src/nova/vi/render/parts.tsx
@@ -1,6 +1,7 @@
 import { produceCSS } from "../../../utils/css/gen";
 import { IContent } from "../../../utils/types/general";
 import { IMeta } from "../../ed/logic/ed-global";
+import { VG } from "./global";
 
 export type ViParts = {
   mode: "mobile" | "desktop";
@@ -28,7 +29,7 @@ export const viParts = (meta: IMeta, arg?: ViParts) => {
     props.dangerouslySetInnerHTML = { __html: item.html || "" };
     shouldRenderChild = false;
   }
-  
+
   if (content.adv?.html && !content.adv?.js) {
     props.dangerouslySetInnerHTML = { __html: content.adv.html };
     shouldRenderChild = false;
diff --git a/app/web/src/nova/vi/render/render.tsx b/app/web/src/nova/vi/render/render.tsx
index cec4fdce..ab6f985c 100644
--- a/app/web/src/nova/vi/render/render.tsx
+++ b/app/web/src/nova/vi/render/render.tsx
@@ -26,6 +26,8 @@ export const ViChild: FC<{
 }> = ({ meta, children }) => {
   const vi = useGlobal(ViGlobal, "VI");
   const parts = viParts(meta);
+  if (vi.visit) vi.visit(meta, parts);
+  
   let renderChild = undefined;
 
   if (parts.shouldRenderChild) {
diff --git a/app/web/src/nova/vi/render/script/eval-script.tsx b/app/web/src/nova/vi/render/script/eval-script.tsx
index 571e0ebd..4a5267fc 100644
--- a/app/web/src/nova/vi/render/script/eval-script.tsx
+++ b/app/web/src/nova/vi/render/script/eval-script.tsx
@@ -10,12 +10,13 @@ import { createViLocal } from "./local";
 import { createViPassProp } from "./passprop";
 
 export const viEvalScript = (
-  vi: { meta: VG["meta"] },
+  vi: { meta: VG["meta"]; visit?: VG["visit"] },
   meta: IMeta,
   scope: any
 ) => {
   const childs = meta.item.childs;
   const parts = viParts(meta);
+  if (vi.visit) vi.visit(meta, parts);
 
   let children = undefined;
   if (parts.shouldRenderChild) {
diff --git a/app/web/src/nova/vi/utils/types.ts b/app/web/src/nova/vi/utils/types.ts
index da7f1b79..8b313298 100644
--- a/app/web/src/nova/vi/utils/types.ts
+++ b/app/web/src/nova/vi/utils/types.ts
@@ -16,12 +16,14 @@ export type GenMetaP = {
   };
   smeta?: Record<string, ISimpleMeta>;
   set_meta?: boolean;
+  note?: string;
 };
 
 export type GenMetaArg = {
   item: IContent;
   is_root?: boolean;
   jsx_prop?: IMeta["jsx_prop"];
+  ignore_first_component?: boolean;
   parent?: {
     item: IItem;
     instance_id?: string;
diff --git a/app/web/src/nova/vi/vi.tsx b/app/web/src/nova/vi/vi.tsx
index e3dfbc76..8596eb47 100644
--- a/app/web/src/nova/vi/vi.tsx
+++ b/app/web/src/nova/vi/vi.tsx
@@ -2,9 +2,10 @@ import { FC, Suspense } from "react";
 import { useGlobal } from "web-utils";
 import { IMeta } from "../ed/logic/ed-global";
 import { viLoad } from "./load/load";
-import { ViGlobal } from "./render/global";
+import { VG, ViGlobal } from "./render/global";
 import { ViRoot } from "./root";
 import { ErrorBox } from "./utils/error-box";
+import { viParts } from "./render/parts";
 
 export const Vi: FC<{
   meta: Record<string, IMeta>;
@@ -13,11 +14,13 @@ export const Vi: FC<{
   site_id: string;
   api?: any;
   db?: any;
-}> = ({ meta, entry, api_url, site_id, api, db }) => {
+  visit?: VG["visit"];
+}> = ({ meta, entry, api_url, site_id, api, db, visit }) => {
   const vi = useGlobal(ViGlobal, "VI");
   if (vi.meta !== meta) {
     vi.meta = meta;
   }
+  vi.visit = visit;
 
   if (vi.status === "init") {
     vi.site.db = db;