diff --git a/app/web/src/nova/ed/ed-mid.tsx b/app/web/src/nova/ed/ed-mid.tsx
index 5da8d715..c27fb0e1 100644
--- a/app/web/src/nova/ed/ed-mid.tsx
+++ b/app/web/src/nova/ed/ed-mid.tsx
@@ -8,6 +8,7 @@ import { EdPagePicker } from "./panel/header/mid/page-picker";
 import { TopBtn } from "./panel/header/top-btn";
 import { useGlobal } from "web-utils";
 import { ResponsiveToggle } from "./panel/header/right/responsive-toggle";
+import { EdCompEditable } from "./panel/header/mid/comp-editable";
 
 export const EdMid: FC<{}> = () => {
   const ed = useGlobal(EDGlobal, "EDITORF");
@@ -31,6 +32,7 @@ export const EdMid: FC<{}> = () => {
             <EdAddItem />
             <EdAddText />
             <EdCompPicker />
+            <EdCompEditable />
           </div>
         </div>
         <div className="flex items-stretch flex-1 justify-end">
diff --git a/app/web/src/nova/ed/logic/ed-global.ts b/app/web/src/nova/ed/logic/ed-global.ts
index 9761f18e..a35a9036 100644
--- a/app/web/src/nova/ed/logic/ed-global.ts
+++ b/app/web/src/nova/ed/logic/ed-global.ts
@@ -197,6 +197,7 @@ export const EDGlobal = {
   code: {} as Record<string, { doc: null | DCode }>,
   global_prop: [] as string[],
   ui: {
+    comp_editable: localStorage.getItem("prasi-comp-editable") === "yes",
     zoom: localStorage.zoom || "100%",
     side: { prop: true },
     layout: {
diff --git a/app/web/src/nova/ed/panel/header/mid/comp-editable.tsx b/app/web/src/nova/ed/panel/header/mid/comp-editable.tsx
new file mode 100644
index 00000000..e92e9afd
--- /dev/null
+++ b/app/web/src/nova/ed/panel/header/mid/comp-editable.tsx
@@ -0,0 +1,45 @@
+import { useGlobal } from "web-utils";
+import { EDGlobal } from "../../../logic/ed-global";
+import { TopBtn } from "../top-btn";
+
+export const EdCompEditable = () => {
+  const p = useGlobal(EDGlobal, "EDITOR");
+
+  const size = 12;
+  return (
+    <TopBtn
+      onClick={(e) => {
+        p.ui.comp_editable = !p.ui.comp_editable;
+        localStorage.setItem(
+          "prasi-comp-editable",
+          p.ui.comp_editable ? "yes" : "no"
+        );
+        p.render();
+      }}
+      style="slim"
+    >
+      <div
+        className={cx(
+          "flex items-center justify-center pr-1 hover:text-white",
+          css`
+            height: 18px;
+          `,
+          p.ui.comp_editable ? "text-green-700 " : "text-red-700"
+        )}
+      >
+        <div
+          className="mr-[2px]"
+          dangerouslySetInnerHTML={{
+            __html: p.ui.comp_editable
+              ? `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-pen-line"><path d="m18 5-3-3H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2"/><path d="M8 18h1"/><path d="M18.4 9.6a2 2 0 1 1 3 3L17 17l-4 1 1-4Z"/></svg>`
+              : `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-lock-2"><path d="M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v1"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><rect width="8" height="5" x="2" y="13" rx="1"/><path d="M8 13v-2a2 2 0 1 0-4 0v2"/></svg>`,
+          }}
+        ></div>
+        <div className="text-[7px] leading-none">
+          <div>Component</div>
+          <div>{p.ui.comp_editable ? "Editable" : "Locked"}</div>
+        </div>
+      </div>
+    </TopBtn>
+  );
+};
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 cc2fc57f..cc13fd12 100644
--- a/app/web/src/nova/ed/panel/side/prop-instance.tsx
+++ b/app/web/src/nova/ed/panel/side/prop-instance.tsx
@@ -79,33 +79,35 @@ export const EdSidePropInstance: FC<{ meta: IMeta }> = ({ meta }) => {
         <div className="flex-1 overflow-hidden mr-2 text-ellipsis whitespace-nowrap">
           {_meta.item.name}
         </div>
-        <div
-          className="border px-1 cursor-pointer bg-white hover:bg-blue-100"
-          onClick={() => {
-            const item = _meta.item as IItem;
+        {p.ui.comp_editable && (
+          <div
+            className="border px-1 cursor-pointer bg-white hover:bg-blue-100"
+            onClick={() => {
+              const item = _meta.item as IItem;
 
-            const comp_id = item.component?.id;
+              const comp_id = item.component?.id;
 
-            if (comp_id) {
-              if (!p.comp.list[comp_id]) return;
+              if (comp_id) {
+                if (!p.comp.list[comp_id]) return;
 
-              active.instance.item_id = item.id;
-              active.instance.comp_id = active.comp_id;
+                active.instance.item_id = item.id;
+                active.instance.comp_id = active.comp_id;
 
-              active.comp_id = comp_id || "";
-              const root = p.comp.list[comp_id].tree.find(
-                (e) => e.parent === "root"
-              );
-              if (root && typeof root.id === "string") {
-                active.item_id = root.id || "";
+                active.comp_id = comp_id || "";
+                const root = p.comp.list[comp_id].tree.find(
+                  (e) => e.parent === "root"
+                );
+                if (root && typeof root.id === "string") {
+                  active.item_id = root.id || "";
+                }
+
+                p.render();
               }
-
-              p.render();
-            }
-          }}
-        >
-          Edit Component
-        </div>
+            }}
+          >
+            Edit Component
+          </div>
+        )}
       </div>
 
       <div className="flex flex-1 relative overflow-y-auto overflow-x-hidden">
diff --git a/app/web/src/nova/ed/panel/tree/node/item/action.tsx b/app/web/src/nova/ed/panel/tree/node/item/action.tsx
index 1bccb295..5d6fac5c 100644
--- a/app/web/src/nova/ed/panel/tree/node/item/action.tsx
+++ b/app/web/src/nova/ed/panel/tree/node/item/action.tsx
@@ -97,7 +97,7 @@ export const EdTreeAction = ({
 
       {comp.enabled && (
         <>
-          {comp.id !== active.comp_id && (
+          {comp.id !== active.comp_id && p.ui.comp_editable && (
             <Tooltip content="Edit Component">
               <div
                 className="flex items-center border border-slate-500 bg-white rounded-sm text-[10px] px-[2px] cursor-pointer hover:bg-purple-100 hover:border-purple-600"