diff --git a/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx b/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx
index cc398e2..e6e18ef 100644
--- a/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx
+++ b/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx
@@ -166,6 +166,7 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
         const response = await axios.get(
           `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget3D/${id}/${organization}`
         );
+   
         if (response.status === 200) {
           setmeasurements(response.data.Data.measurements);
           setDuration(response.data.Data.duration);
diff --git a/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx b/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx
index ce399b4..6492252 100644
--- a/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import RenameInput from "../../../ui/inputs/RenameInput";
 import Vector3Input from "../customInput/Vector3Input";
 import { useSelectedZoneStore } from "../../../../store/useZoneStore";
-import { useEditPosition, usezonePosition, usezoneTarget } from "../../../../store/store";
+import { useEditPosition, usezonePosition, useZones, usezoneTarget } from "../../../../store/store";
 import { zoneCameraUpdate } from "../../../../services/realTimeVisulization/zoneData/zoneCameraUpdation";
 
 const ZoneProperties: React.FC = () => {
@@ -10,6 +10,7 @@ const ZoneProperties: React.FC = () => {
   const { selectedZone, setSelectedZone } = useSelectedZoneStore();
   const { zonePosition, setZonePosition } = usezonePosition();
   const { zoneTarget, setZoneTarget } = usezoneTarget();
+  const { zones, setZones } = useZones();
 
   useEffect(() => {
     setZonePosition(selectedZone.zoneViewPortPosition)
@@ -31,11 +32,11 @@ const ZoneProperties: React.FC = () => {
       if (response.message === "updated successfully") {
         setEdit(false);
       } else {
-        console.log("Not updated Camera Position and Target");
+        console.log(response);
       }
 
     } catch (error) {
-      console.error("Error in handleSetView:", error);
+
     }
   }
 
@@ -43,17 +44,32 @@ const ZoneProperties: React.FC = () => {
     setEdit(!Edit);  // This will toggle the `Edit` state correctly
   }
 
-  function handleZoneNameChange(newName: string) {
-    setSelectedZone((prev) => ({ ...prev, zoneName: newName }));
+  async function handleZoneNameChange(newName: string) {
+    const email = localStorage.getItem("email") || "";
+    const organization = email?.split("@")[1]?.split(".")[0];
+    const zonesdata = {
+      zoneId: selectedZone.zoneId,
+      zoneName: newName
+    };
+    // Call your API to update the zone
+    let response = await zoneCameraUpdate(zonesdata, organization);
+    console.log('response: ', response);
+    if (response.message === "updated successfully") {
+      setZones((prevZones: any[]) =>
+        prevZones.map((zone) =>
+          zone.zoneId === selectedZone.zoneId
+            ? { ...zone, zoneName: newName }
+            : zone
+        )
+      );
+    }else{
+      console.log(response?.message);
+    }
   }
-
   function handleVectorChange(key: "zoneViewPortTarget" | "zoneViewPortPosition", newValue: [number, number, number]) {
     setSelectedZone((prev) => ({ ...prev, [key]: newValue }));
   }
 
-  useEffect(() => {
-
-  }, [selectedZone]);
 
   return (
     <div className="zone-properties-container">
diff --git a/app/src/components/ui/componets/AddButtons.tsx b/app/src/components/ui/componets/AddButtons.tsx
index 6527414..49a1c40 100644
--- a/app/src/components/ui/componets/AddButtons.tsx
+++ b/app/src/components/ui/componets/AddButtons.tsx
@@ -8,6 +8,8 @@ import { panelData } from "../../../services/realTimeVisulization/zoneData/panel
 import { AddIcon } from "../../icons/ExportCommonIcons";
 import { deletePanelApi } from "../../../services/realTimeVisulization/zoneData/deletePanel";
 import { useSocketStore } from "../../../store/store";
+import { clearPanel } from "../../../services/realTimeVisulization/zoneData/clearPanel";
+import { lockPanel } from "../../../services/realTimeVisulization/zoneData/lockPanel";
 
 // Define the type for `Side`
 type Side = "top" | "bottom" | "left" | "right";
@@ -64,8 +66,10 @@ const AddButtons: React.FC<ButtonsProps> = ({
   // Local state to track hidden panels
 
   // Function to toggle lock/unlock a panel
-  const toggleLockPanel = (side: Side) => {
+  const toggleLockPanel = async (side: Side) => {
     console.log('side: ', side);
+    const email = localStorage.getItem("email") || "";
+    const organization = email?.split("@")[1]?.split(".")[0]; // Fallback value
     //add api
     const newLockedPanels = selectedZone.lockedPanels.includes(side)
       ? selectedZone.lockedPanels.filter((panel) => panel !== side)
@@ -76,12 +80,28 @@ const AddButtons: React.FC<ButtonsProps> = ({
       lockedPanels: newLockedPanels,
     };
 
-    // Update the selectedZone state
+    let lockedPanel = {
+      organization: organization,
+      lockedPanel: newLockedPanels,
+      zoneId: selectedZone.zoneId,
+    };
+    if (visualizationSocket) {
+      visualizationSocket.emit("v2:viz-panel:locked", lockedPanel);
+    }
+
     setSelectedZone(updatedZone);
+    // let response = await lockPanel(selectedZone.zoneId, organization, newLockedPanels)
+    // console.log('response: ', response);
+    // if (response.message === 'locked panel updated successfully') {
+    //   // Update the selectedZone state
+    //   setSelectedZone(updatedZone);
+    // }
+
   };
 
   // Function to toggle visibility of a panel
   const toggleVisibility = (side: Side) => {
+
     const isHidden = hiddenPanels.includes(side);
     if (isHidden) {
       // If the panel is already hidden, remove it from the hiddenPanels array
@@ -93,19 +113,45 @@ const AddButtons: React.FC<ButtonsProps> = ({
   };
 
   // Function to clean all widgets from a panel
-  const cleanPanel = (side: Side) => {
+  const cleanPanel = async (side: Side) => {
     //add api
     console.log('side: ', side);
+    const email = localStorage.getItem("email") || "";
+    const organization = email?.split("@")[1]?.split(".")[0]; // Fallback value
+
+    let clearPanel = {
+      organization: organization,
+      panelName: side,
+      zoneId: selectedZone.zoneId,
+    };
+    if (visualizationSocket) {
+      visualizationSocket.emit("v2:viz-panel:clear", clearPanel);
+    }
     const cleanedWidgets = selectedZone.widgets.filter(
       (widget) => widget.panel !== side
     );
-
     const updatedZone = {
       ...selectedZone,
       widgets: cleanedWidgets,
     };
     // Update the selectedZone state
+    console.log('updatedZone: ', updatedZone);
     setSelectedZone(updatedZone);
+
+    // let response = await clearPanel(selectedZone.zoneId, organization, side)
+    // console.log('response: ', response);
+    // if (response.message === 'PanelWidgets cleared successfully') {
+
+    //   const cleanedWidgets = selectedZone.widgets.filter(
+    //     (widget) => widget.panel !== side
+    //   );
+    //   const updatedZone = {
+    //     ...selectedZone,
+    //     widgets: cleanedWidgets,
+    //   };
+    //   // Update the selectedZone state
+    //   setSelectedZone(updatedZone);
+    // }
   };
 
   // Function to handle "+" button click
@@ -185,7 +231,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
         // } else {
         //
         // }
-      } catch (error) {}
+      } catch (error) { }
     }
   };
 
@@ -196,9 +242,8 @@ const AddButtons: React.FC<ButtonsProps> = ({
           <div key={side} className={`side-button-container ${side}`}>
             {/* "+" Button */}
             <button
-              className={`side-button ${side}${
-                selectedZone.activeSides.includes(side) ? " active" : ""
-              }`}
+              className={`side-button ${side}${selectedZone.activeSides.includes(side) ? " active" : ""
+                }`}
               onClick={() => handlePlusButtonClick(side)}
               title={
                 selectedZone.activeSides.includes(side)
@@ -216,9 +261,8 @@ const AddButtons: React.FC<ButtonsProps> = ({
               <div className="extra-Bs">
                 {/* Hide Panel */}
                 <div
-                  className={`icon ${
-                    hiddenPanels.includes(side) ? "active" : ""
-                  }`}
+                  className={`icon ${hiddenPanels.includes(side) ? "active" : ""
+                    }`}
                   title={
                     hiddenPanels.includes(side) ? "Show Panel" : "Hide Panel"
                   }
@@ -244,9 +288,8 @@ const AddButtons: React.FC<ButtonsProps> = ({
 
                 {/* Lock/Unlock Panel */}
                 <div
-                  className={`icon ${
-                    selectedZone.lockedPanels.includes(side) ? "active" : ""
-                  }`}
+                  className={`icon ${selectedZone.lockedPanels.includes(side) ? "active" : ""
+                    }`}
                   title={
                     selectedZone.lockedPanels.includes(side)
                       ? "Unlock Panel"
diff --git a/app/src/components/ui/componets/DisplayZone.tsx b/app/src/components/ui/componets/DisplayZone.tsx
index 03fd44f..e0a5c07 100644
--- a/app/src/components/ui/componets/DisplayZone.tsx
+++ b/app/src/components/ui/componets/DisplayZone.tsx
@@ -157,6 +157,7 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
       const organization = email?.split("@")[1]?.split(".")[0];
       let response = await getSelect2dZoneData(zoneId, organization);
 
+
       let res = await getFloatingZoneData(zoneId, organization);
 
       setFloatingWidget(res);
diff --git a/app/src/components/ui/componets/DroppedFloatingWidgets.tsx b/app/src/components/ui/componets/DroppedFloatingWidgets.tsx
index bd707f4..6e7513e 100644
--- a/app/src/components/ui/componets/DroppedFloatingWidgets.tsx
+++ b/app/src/components/ui/componets/DroppedFloatingWidgets.tsx
@@ -143,7 +143,7 @@ const DroppedObjects: React.FC = () => {
       // if (res.message === "FloatingWidget deleted successfully") {
       //   deleteObject(zoneName, id, index); // Call the deleteObject method from the store
       // }
-    } catch (error) {}
+    } catch (error) { }
   }
 
   const handlePointerDown = (event: React.PointerEvent, index: number) => {
@@ -510,7 +510,6 @@ const DroppedObjects: React.FC = () => {
 
   const widthMultiplier = parseFloat(containerWidth) * 0.13;
 
-  console.log("zone.objects: ", zone.objects);
   return (
     <div
       onPointerMove={handlePointerMove}
@@ -520,46 +519,41 @@ const DroppedObjects: React.FC = () => {
       {zone.objects.map((obj, index) => {
         const topPosition =
           typeof obj.position.top === "number"
-            ? `calc(${obj.position.top}px + ${
-                isPlaying && selectedZone.activeSides.includes("top")
-                  ? `${heightMultiplier - 55}px`
-                  : "0px"
-              })`
+            ? `calc(${obj.position.top}px + ${isPlaying && selectedZone.activeSides.includes("top")
+              ? `${heightMultiplier - 55}px`
+              : "0px"
+            })`
             : "auto";
 
         const leftPosition =
           typeof obj.position.left === "number"
-            ? `calc(${obj.position.left}px + ${
-                isPlaying && selectedZone.activeSides.includes("left")
-                  ? `${widthMultiplier - 100}px`
-                  : "0px"
-              })`
+            ? `calc(${obj.position.left}px + ${isPlaying && selectedZone.activeSides.includes("left")
+              ? `${widthMultiplier - 100}px`
+              : "0px"
+            })`
             : "auto";
 
         const rightPosition =
           typeof obj.position.right === "number"
-            ? `calc(${obj.position.right}px + ${
-                isPlaying && selectedZone.activeSides.includes("right")
-                  ? `${widthMultiplier - 100}px`
-                  : "0px"
-              })`
+            ? `calc(${obj.position.right}px + ${isPlaying && selectedZone.activeSides.includes("right")
+              ? `${widthMultiplier - 100}px`
+              : "0px"
+            })`
             : "auto";
 
         const bottomPosition =
           typeof obj.position.bottom === "number"
-            ? `calc(${obj.position.bottom}px + ${
-                isPlaying && selectedZone.activeSides.includes("bottom")
-                  ? `${heightMultiplier - 55}px`
-                  : "0px"
-              })`
+            ? `calc(${obj.position.bottom}px + ${isPlaying && selectedZone.activeSides.includes("bottom")
+              ? `${heightMultiplier - 55}px`
+              : "0px"
+            })`
             : "auto";
 
         return (
           <div
             key={`${zoneName}-${index}`}
-            className={`${obj.className} ${
-              selectedChartId?.id === obj.id && "activeChart"
-            }`}
+            className={`${obj.className} ${selectedChartId?.id === obj.id && "activeChart"
+              }`}
             ref={chartWidget}
             style={{
               position: "absolute",
diff --git a/app/src/components/ui/componets/RealTimeVisulization.tsx b/app/src/components/ui/componets/RealTimeVisulization.tsx
index 293f42e..20061c5 100644
--- a/app/src/components/ui/componets/RealTimeVisulization.tsx
+++ b/app/src/components/ui/componets/RealTimeVisulization.tsx
@@ -7,7 +7,7 @@ import DisplayZone from "./DisplayZone";
 import Scene from "../../../modules/scene/scene";
 import useModuleStore from "../../../store/useModuleStore";
 
-import { useDroppedObjectsStore } from "../../../store/useDroppedObjectsStore";
+import { useDroppedObjectsStore, useFloatingWidget } from "../../../store/useDroppedObjectsStore";
 import {
   useAsset3dWidget,
   useSocketStore,
@@ -68,7 +68,8 @@ const RealTimeVisulization: React.FC = () => {
   const { rightClickSelected, setRightClickSelected } = useRightClickSelected();
   const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false);
 
-  const [floatingWidgets, setFloatingWidgets] = useState<Record<string, { zoneName: string; zoneId: string; objects: any[] }>>({});
+  // const [floatingWidgets, setFloatingWidgets] = useState<Record<string, { zoneName: string; zoneId: string; objects: any[] }>>({});
+  const { floatingWidget, setFloatingWidget } = useFloatingWidget()
   const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
   const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption();
   const { visualizationSocket } = useSocketStore();
@@ -129,7 +130,6 @@ const RealTimeVisulization: React.FC = () => {
 
   const handleDrop = async (event: React.DragEvent<HTMLDivElement>) => {
     event.preventDefault();
-
     try {
       event.preventDefault();
       const email = localStorage.getItem("email") || "";
@@ -175,6 +175,25 @@ const RealTimeVisulization: React.FC = () => {
       if (visualizationSocket) {
         visualizationSocket.emit("v2:viz-float:add", addFloatingWidget);
       }
+      useDroppedObjectsStore
+        .getState()
+        .addObject(selectedZone.zoneName, newObject);
+
+      //I need to console here objects based on selectedZone.zoneId
+      // Console the objects after adding
+      const droppedObjectsStore = useDroppedObjectsStore.getState();
+      const currentZone = droppedObjectsStore.zones[selectedZone.zoneName];
+
+      if (currentZone && currentZone.zoneId === selectedZone.zoneId) {
+        console.log(
+          `Objects for Zone ID: ${selectedZone.zoneId}`,
+          currentZone.objects
+        );
+        setFloatingWidget(currentZone.objects)
+      } else {
+        console.warn("Zone not found or mismatched zoneId");
+      }
+
       // let response = await addingFloatingWidgets(
       //   selectedZone.zoneId,
       //   organization,
@@ -182,23 +201,10 @@ const RealTimeVisulization: React.FC = () => {
       // );
       // Add the dropped object to the zone if the API call is successful
       // if (response.message === "FloatWidget created successfully") {
-      useDroppedObjectsStore
-        .getState()
-        .addObject(selectedZone.zoneName, newObject);
       // }
+
       // Update floating widgets state
-      setFloatingWidgets((prevWidgets) => ({
-        ...prevWidgets,
-        [selectedZone.zoneName]: {
-          ...prevWidgets[selectedZone.zoneName],
-          zoneName: selectedZone.zoneName,
-          zoneId: selectedZone.zoneId,
-          objects: [
-            ...(prevWidgets[selectedZone.zoneName]?.objects || []),
-            newObject,
-          ],
-        },
-      }));
+
     } catch (error) { }
 
   };
diff --git a/app/src/components/ui/componets/zoneAssets.tsx b/app/src/components/ui/componets/zoneAssets.tsx
index daa5a60..e2ec994 100644
--- a/app/src/components/ui/componets/zoneAssets.tsx
+++ b/app/src/components/ui/componets/zoneAssets.tsx
@@ -12,25 +12,66 @@ export default function ZoneAssets() {
         if (!zoneAssetId) return
         console.log('zoneAssetId: ', zoneAssetId);
         let AssetMesh = scene.getObjectByProperty("uuid", zoneAssetId.id);
-        if (!AssetMesh) return;
+        if (AssetMesh) {
+            const bbox = new THREE.Box3().setFromObject(AssetMesh);
+            const size = bbox.getSize(new THREE.Vector3());
+            const center = bbox.getCenter(new THREE.Vector3());
 
-        const bbox = new THREE.Box3().setFromObject(AssetMesh);
-        const size = bbox.getSize(new THREE.Vector3());
-        const center = bbox.getCenter(new THREE.Vector3());
+            const front = new THREE.Vector3(0, 0, 1);
+            AssetMesh.localToWorld(front);
+            front.sub(AssetMesh.position).normalize();
 
-        const front = new THREE.Vector3(0, 0, 1);
-        AssetMesh.localToWorld(front);
-        front.sub(AssetMesh.position).normalize();
+            const distance = Math.max(size.x, size.y, size.z) * 2;
+            const newPosition = center.clone().addScaledVector(front, distance);
 
-        const distance = Math.max(size.x, size.y, size.z) * 2;
-        const newPosition = center.clone().addScaledVector(front, distance);
+            controls.setPosition(newPosition.x, newPosition.y, newPosition.z, true);
+            controls.setTarget(center.x, center.y, center.z, true);
+            controls.fitToBox(AssetMesh, true, { cover: true, paddingTop: 5, paddingLeft: 5, paddingBottom: 5, paddingRight: 5, });
 
-        controls.setPosition(newPosition.x, newPosition.y, newPosition.z, true);
-        controls.setTarget(center.x, center.y, center.z, true);
-        controls.fitToBox(AssetMesh, true, { cover: true, paddingTop: 5, paddingLeft: 5, paddingBottom: 5, paddingRight: 5, });
+            setSelectedFloorItem(AssetMesh);
+        } else {
+            console.log('zoneAssetId: ', zoneAssetId)
+            if (Array.isArray(zoneAssetId.position) && zoneAssetId.position.length >= 3) {
+                let selectedAssetPosition = [
+                    zoneAssetId.position[0],
+                    10,
+                    zoneAssetId.position[2]
+                ];
+                console.log('selectedAssetPosition: ', selectedAssetPosition);
+                let selectedAssetTarget = [
+                    zoneAssetId.position[0],
+                    zoneAssetId.position[1],
+                    zoneAssetId.position[2]
+                ];
+                console.log('selectedAssetTarget: ', selectedAssetTarget);
+                const setCam = async () => {
+                    await controls?.setLookAt(...selectedAssetPosition, ...selectedAssetTarget, true);
+                    setTimeout(() => {
+                        let AssetMesh = scene.getObjectByProperty("uuid", zoneAssetId.id);
+                        if (AssetMesh) {
+                            const bbox = new THREE.Box3().setFromObject(AssetMesh);
+                            const size = bbox.getSize(new THREE.Vector3());
+                            const center = bbox.getCenter(new THREE.Vector3());
 
-        setSelectedFloorItem(AssetMesh);
+                            const front = new THREE.Vector3(0, 0, 1);
+                            AssetMesh.localToWorld(front);
+                            front.sub(AssetMesh.position).normalize();
 
+                            const distance = Math.max(size.x, size.y, size.z) * 2;
+                            const newPosition = center.clone().addScaledVector(front, distance);
+
+                            controls.setPosition(newPosition.x, newPosition.y, newPosition.z, true);
+                            controls.setTarget(center.x, center.y, center.z, true);
+                            controls.fitToBox(AssetMesh, true, { cover: true, paddingTop: 5, paddingLeft: 5, paddingBottom: 5, paddingRight: 5, });
+
+                            setSelectedFloorItem(AssetMesh);
+                        }
+                    }, 500)
+
+                };
+                setCam();
+            }
+        }
     }, [zoneAssetId, scene, controls])
 
 
diff --git a/app/src/components/ui/list/DropDownList.tsx b/app/src/components/ui/list/DropDownList.tsx
index faa5f4e..555751d 100644
--- a/app/src/components/ui/list/DropDownList.tsx
+++ b/app/src/components/ui/list/DropDownList.tsx
@@ -4,6 +4,7 @@ import { AddIcon, ArrowIcon, FocusIcon } from "../../icons/ExportCommonIcons";
 import KebabMenuListMultiSelect from "./KebebMenuListMultiSelect";
 import { useFloorItems, useZones } from "../../../store/store";
 import { useSelectedZoneStore } from "../../../store/useZoneStore";
+import { getZone2dData } from "../../../services/realTimeVisulization/zoneData/getZoneData";
 
 interface DropDownListProps {
   value?: string; // Value to display in the DropDownList
@@ -52,10 +53,10 @@ const DropDownList: React.FC<DropDownListProps> = ({
   interface ZoneData {
     id: string;
     name: string;
-    assets: { id: string; name: string; position?: [] ;rotation?:{}}[];
+    assets: { id: string; name: string; position?: []; rotation?: {} }[];
   }
   const [zoneDataList, setZoneDataList] = useState<ZoneData[]>([]);
-  const { floorItems, setFloorItems } = useFloorItems();
+  const { floorItems } = useFloorItems();
 
   const isPointInsidePolygon = (point: [number, number], polygon: [number, number][]) => {
     let inside = false;
@@ -70,9 +71,9 @@ const DropDownList: React.FC<DropDownListProps> = ({
     }
     return inside;
   };
-  useEffect(() => {
 
-    const updatedZoneList: ZoneData[] = zones.map((zone: Zone) => {
+  useEffect(() => {
+    const updatedZoneList: ZoneData[] = zones?.map((zone: Zone) => {
       const polygon2D = zone.points.map((p: [number, number, number]) => [p[0], p[2]]) as [number, number][];
 
       const assetsInZone = floorItems
@@ -84,7 +85,7 @@ const DropDownList: React.FC<DropDownListProps> = ({
           id: item.modeluuid,
           name: item.modelname,
           position: item.position,
-          rotation:item.rotation
+          rotation: item.rotation
         }));
 
       return {
diff --git a/app/src/components/ui/list/List.tsx b/app/src/components/ui/list/List.tsx
index a176e14..06bc129 100644
--- a/app/src/components/ui/list/List.tsx
+++ b/app/src/components/ui/list/List.tsx
@@ -13,7 +13,9 @@ import {
   RmoveIcon,
 } from "../../icons/ExportCommonIcons";
 import { useThree } from "@react-three/fiber";
-import { useZoneAssetId } from "../../../store/store";
+import { useFloorItems, useZoneAssetId } from "../../../store/store";
+import { zoneCameraUpdate } from "../../../services/realTimeVisulization/zoneData/zoneCameraUpdation";
+import { setFloorItemApi } from "../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi";
 
 interface Asset {
   id: string;
@@ -38,11 +40,12 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
   const { activeModule, setActiveModule } = useModuleStore();
   const { selectedZone, setSelectedZone } = useSelectedZoneStore();
   const { zoneAssetId, setZoneAssetId } = useZoneAssetId();
+
   const { setSubModule } = useSubModuleStore();
   const [expandedZones, setExpandedZones] = useState<Record<string, boolean>>(
     {}
   );
-
+  const { floorItems, setFloorItems } = useFloorItems();
 
   useEffect(() => {
     useSelectedZoneStore.getState().setSelectedZone({
@@ -67,7 +70,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
   async function handleSelectZone(id: string) {
     try {
       if (selectedZone?.zoneId === id) {
-        console.log("Zone is already selected:", selectedZone.zoneName);
+
         return;
       }
 
@@ -89,19 +92,52 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
         zoneViewPortPosition: response?.viewPortposition || [],
       });
 
-      console.log("Zone selected:", response?.zoneName);
+
     } catch (error) {
-      console.error("Error selecting zone:", error);
+
     }
   }
   function handleAssetClick(asset: Asset) {
     setZoneAssetId(asset)
   }
+  async function handleZoneNameChange(newName: string) {
+    //zone apiiiiii
+    const email = localStorage.getItem("email") || "";
+    const organization = email?.split("@")[1]?.split(".")[0];
+    let zonesdata = {
+      zoneId: selectedZone.zoneId,
+      zoneName: newName
+    };
+    let response = await zoneCameraUpdate(zonesdata, organization);
+    if (response.message === "updated successfully") {
+      setSelectedZone((prev) => ({ ...prev, zoneName: newName }));
+    }
+  }
+  async function handleZoneAssetName(newName: string) {
+    const email = localStorage.getItem("email") || "";
+    const organization = email?.split("@")[1]?.split(".")[0];
+
+    if (zoneAssetId?.id) {
+      let response = await setFloorItemApi(organization, zoneAssetId.id, newName)
+      console.log('response: ', response);
+      setFloorItems((prevFloorItems: any[]) =>
+        prevFloorItems.map((floorItems) =>
+          floorItems.modeluuid === zoneAssetId.id
+            ? { ...floorItems, modelname: response.modelname }
+            : floorItems
+        )
+      );
+    }
+   
+    console.log('newName: ', newName);
+
+  }
+
   return (
     <>
-      {items.length > 0 ? (
+      {items?.length > 0 ? (
         <ul className="list-wrapper">
-          {items.map((item) => (
+          {items?.map((item) => (
             <React.Fragment key={`zone-${item.id}`}>
               <li className="list-container">
                 <div className="list-item">
@@ -110,7 +146,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
                       className="value"
                       onClick={() => handleSelectZone(item.id)}
                     >
-                      <RenameInput value={item.name} />
+                      <RenameInput value={item.name} onRename={handleZoneNameChange} />
                     </div>
                   </div>
                   <div className="options-container">
@@ -147,8 +183,8 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
                         className="list-container asset-item"
                       >
                         <div className="list-item">
-                          <div className="value" onClick={() => handleAssetClick(asset)}>
-                            <RenameInput value={asset.name} />
+                          <div className="value" onClick={() => handleAssetClick(asset)} >
+                            <RenameInput value={asset.name} onRename={handleZoneAssetName} />
                           </div>
                           <div className="options-container">
                             <div className="lock option">
diff --git a/app/src/modules/visualization/handleSaveTemplate.ts b/app/src/modules/visualization/handleSaveTemplate.ts
index f192bec..0290dae 100644
--- a/app/src/modules/visualization/handleSaveTemplate.ts
+++ b/app/src/modules/visualization/handleSaveTemplate.ts
@@ -28,6 +28,7 @@ export const handleSaveTemplate = async ({
   templates = [],
   visualizationSocket,
 }: HandleSaveTemplateProps): Promise<void> => {
+  console.log('floatingWidget: ', floatingWidget);
   try {
     // Check if the selected zone has any widgets
     if (!selectedZone.panelOrder || selectedZone.panelOrder.length === 0) {
diff --git a/app/src/modules/visualization/realTimeVizSocket.dev.tsx b/app/src/modules/visualization/realTimeVizSocket.dev.tsx
index 9ee6b5b..f1abaaa 100644
--- a/app/src/modules/visualization/realTimeVizSocket.dev.tsx
+++ b/app/src/modules/visualization/realTimeVizSocket.dev.tsx
@@ -15,22 +15,19 @@ type WidgetData = {
 
 export default function SocketRealTimeViz() {
     const { visualizationSocket } = useSocketStore();
-    const { selectedZone, setSelectedZone } = useSelectedZoneStore();
+    const { setSelectedZone } = useSelectedZoneStore();
     const deleteObject = useDroppedObjectsStore((state) => state.deleteObject);
-    const duplicateObject = useDroppedObjectsStore((state) => state.duplicateObject);
     const updateObjectPosition = useDroppedObjectsStore((state) => state.updateObjectPosition);
     const { addWidget } = useZoneWidgetStore()
-    const { templates, removeTemplate } = useTemplateStore();
+    const { removeTemplate } = useTemplateStore();
     const { setTemplates } = useTemplateStore();
     const { zoneWidgetData, setZoneWidgetData, updateWidgetPosition, updateWidgetRotation } = useZoneWidgetStore();
 
     useEffect(() => {
-        const email = localStorage.getItem("email") || "";
-        const organization = email?.split("@")[1]?.split(".")[0];
         if (visualizationSocket) {
             //add panel response
             visualizationSocket.on("viz-panel:response:updates", (addPanel: any) => {
-                console.log('addPanel: ', addPanel);
+
                 if (addPanel.success) {
                     let addPanelData = addPanel.data.data
                     setSelectedZone(addPanelData)
@@ -38,15 +35,33 @@ export default function SocketRealTimeViz() {
             })
             //delete panel response
             visualizationSocket.on("viz-panel:response:delete", (deletePanel: any) => {
-                console.log('deletePanel: ', deletePanel);
+
                 if (deletePanel.success) {
                     let deletePanelData = deletePanel.data.data
                     setSelectedZone(deletePanelData)
                 }
             })
+            //clear Panel response
+            visualizationSocket.on("viz-panel:response:clear", (clearPanel: any) => {
+
+                if (clearPanel.success && clearPanel.message === "PanelWidgets cleared successfully") {
+
+                    let clearPanelData = clearPanel.data.data
+                    setSelectedZone(clearPanelData)
+                }
+            })
+            //lock Panel response
+            visualizationSocket.on("viz-panel:response:locked", (lockPanel: any) => {
+
+                if (lockPanel.success && lockPanel.message === "locked panel updated successfully") {
+
+                    let lockPanelData = lockPanel.data.data
+                    setSelectedZone(lockPanelData)
+                }
+            })
             // add 2dWidget response
             visualizationSocket.on("viz-widget:response:updates", (add2dWidget: any) => {
-                console.log('add2dWidget: ', add2dWidget);
+
 
                 if (add2dWidget.success && add2dWidget.data) {
                     setSelectedZone((prev) => {
@@ -65,7 +80,7 @@ export default function SocketRealTimeViz() {
             });
             //delete 2D Widget response
             visualizationSocket.on("viz-widget:response:delete", (deleteWidget: any) => {
-                console.log('deleteWidget: ', deleteWidget);
+
 
                 if (deleteWidget?.success && deleteWidget.data) {
                     setSelectedZone((prevZone: any) => ({
@@ -78,7 +93,7 @@ export default function SocketRealTimeViz() {
             });
             //add Floating Widget response
             visualizationSocket.on("viz-float:response:updates", (addFloatingWidget: any) => {
-                console.log('addFloatingWidget: ', addFloatingWidget);
+
 
                 if (addFloatingWidget.success) {
                     if (addFloatingWidget.success && addFloatingWidget.message === "FloatWidget created successfully") {
@@ -105,7 +120,7 @@ export default function SocketRealTimeViz() {
             });
             //duplicate Floating Widget response
             visualizationSocket.on("viz-float:response:addDuplicate", (duplicateFloatingWidget: any) => {
-                console.log('duplicateFloatingWidget: ', duplicateFloatingWidget);
+
 
                 if (duplicateFloatingWidget.success && duplicateFloatingWidget.message === "duplicate FloatWidget created successfully") {
                     useDroppedObjectsStore.setState((state) => {
@@ -133,7 +148,7 @@ export default function SocketRealTimeViz() {
             });
             //delete Floating Widget response
             visualizationSocket.on("viz-float:response:delete", (deleteFloatingWidget: any) => {
-                console.log('deleteFloatingWidget: ', deleteFloatingWidget);
+
 
                 if (deleteFloatingWidget.success) {
                     deleteObject(deleteFloatingWidget.data.zoneName, deleteFloatingWidget.data.floatWidgetID);
@@ -142,9 +157,9 @@ export default function SocketRealTimeViz() {
             //add 3D Widget response
             visualizationSocket.on("viz-widget3D:response:updates", (add3DWidget: any) => {
 
-                console.log('add3DWidget: ', add3DWidget);
+
                 if (add3DWidget.success) {
-                    console.log('add3DWidget: ', add3DWidget);
+
                     if (add3DWidget.message === "Widget created successfully") {
                         addWidget(add3DWidget.data.zoneId, add3DWidget.data.widget);
                     }
@@ -152,7 +167,7 @@ export default function SocketRealTimeViz() {
             });
             //delete 3D Widget response
             visualizationSocket.on("viz-widget3D:response:delete", (delete3DWidget: any) => {
-                console.log('delete3DWidget: ', delete3DWidget);
+
                 // "3DWidget delete unsuccessfull"
                 if (delete3DWidget.success && delete3DWidget.message === "3DWidget delete successfull") {
                     const activeZoneWidgets = zoneWidgetData[delete3DWidget.data.zoneId] || [];
@@ -164,16 +179,16 @@ export default function SocketRealTimeViz() {
             });
             //update3D widget response
             visualizationSocket.on("viz-widget3D:response:modifyPositionRotation", (update3DWidget: any) => {
-                console.log('update3DWidget: ', update3DWidget);
-                
-                if (update3DWidget.success && update3DWidget.message==="widget update successfully") {
+
+
+                if (update3DWidget.success && update3DWidget.message === "widget update successfully") {
                     updateWidgetPosition(update3DWidget.data.zoneId, update3DWidget.data.widget.id, update3DWidget.data.widget.position);
                     updateWidgetRotation(update3DWidget.data.zoneId, update3DWidget.data.widget.id, update3DWidget.data.widget.rotation);
                 }
             });
             // add Template response
             visualizationSocket.on("viz-template:response:add", (addingTemplate: any) => {
-                console.log('addingTemplate: ', addingTemplate);
+
 
                 if (addingTemplate.success) {
                     if (addingTemplate.message === "Template saved successfully") {
@@ -183,7 +198,7 @@ export default function SocketRealTimeViz() {
             });
             //load Template response
             visualizationSocket.on("viz-template:response:addTemplateZone", (loadTemplate: any) => {
-                console.log('loadTemplate: ', loadTemplate);
+
 
                 if (loadTemplate.success) {
                     if (loadTemplate.message === "Template placed in Zone") {
@@ -206,14 +221,12 @@ export default function SocketRealTimeViz() {
             });
             //delete Template response
             visualizationSocket.on("viz-template:response:delete", (deleteTemplate: any) => {
-                console.log('deleteTemplate: ', deleteTemplate);
+
 
                 if (deleteTemplate.success) {
                     if (deleteTemplate.message === 'Template deleted successfully') {
                         removeTemplate(deleteTemplate.data);
                     }
-
-
                 }
             });
         }
diff --git a/app/src/services/factoryBuilder/assest/floorAsset/getFloorItemsApi.ts b/app/src/services/factoryBuilder/assest/floorAsset/getFloorItemsApi.ts
index 7a0290a..7c78c41 100644
--- a/app/src/services/factoryBuilder/assest/floorAsset/getFloorItemsApi.ts
+++ b/app/src/services/factoryBuilder/assest/floorAsset/getFloorItemsApi.ts
@@ -1,5 +1,6 @@
 let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
 
+
 export const getFloorAssets = async (organization: string) => {
     try {
         const response = await fetch(`${url_Backend_dwinzo}/api/v2/floorAssets/${organization}`, {
@@ -14,6 +15,7 @@ export const getFloorAssets = async (organization: string) => {
         }
 
         const result = await response.json();
+   
         return result;
     } catch (error) {
         if (error instanceof Error) {
diff --git a/app/src/services/factoryBuilder/assest/floorAsset/setFloorItemApi.ts b/app/src/services/factoryBuilder/assest/floorAsset/setFloorItemApi.ts
index e25e05e..3e156cb 100644
--- a/app/src/services/factoryBuilder/assest/floorAsset/setFloorItemApi.ts
+++ b/app/src/services/factoryBuilder/assest/floorAsset/setFloorItemApi.ts
@@ -1,14 +1,13 @@
 let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
-
 export const setFloorItemApi = async (
     organization: string,
-    modeluuid: string,
-    modelname: string,
-    modelfileID: string,
-    position: Object,
-    rotation: Object,
-    isLocked: boolean,
-    isVisible: boolean,
+    modeluuid?: string,
+    modelname?: string,
+    modelfileID?: string,
+    position?: Object,
+    rotation?: Object,
+    isLocked?: boolean,
+    isVisible?: boolean,
     eventData?: any
 ) => {
     try {
diff --git a/app/src/services/factoryBuilder/zones/getZonesApi.ts b/app/src/services/factoryBuilder/zones/getZonesApi.ts
index be7741c..413458c 100644
--- a/app/src/services/factoryBuilder/zones/getZonesApi.ts
+++ b/app/src/services/factoryBuilder/zones/getZonesApi.ts
@@ -1,4 +1,5 @@
 let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
+// let url_Backend_dwinzo = `http://192.168.0.102:5000`;
 
 export const getZonesApi = async (organization: string) => {
     try {
diff --git a/app/src/services/realTimeVisulization/zoneData/clearPanel.ts b/app/src/services/realTimeVisulization/zoneData/clearPanel.ts
new file mode 100644
index 0000000..6e1f1d1
--- /dev/null
+++ b/app/src/services/realTimeVisulization/zoneData/clearPanel.ts
@@ -0,0 +1,30 @@
+// let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
+let url_Backend_dwinzo = `http://192.168.0.102:5000`;
+export const clearPanel = async (
+  zoneId: string,
+  organization: string,
+  panelName: string
+) => {
+  try {
+    const response = await fetch(`${url_Backend_dwinzo}/api/v2/clearpanel`, {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ organization, zoneId, panelName }),
+    });
+
+    if (!response.ok) {
+      throw new Error("Failed to clearPanel in the zone");
+    }
+
+    const result = await response.json();
+    return result;
+  } catch (error) {
+    if (error instanceof Error) {
+      throw new Error(error.message);
+    } else {
+      throw new Error("An unknown error occurred");
+    }
+  }
+};
diff --git a/app/src/services/realTimeVisulization/zoneData/lockPanel.ts b/app/src/services/realTimeVisulization/zoneData/lockPanel.ts
new file mode 100644
index 0000000..4b5898f
--- /dev/null
+++ b/app/src/services/realTimeVisulization/zoneData/lockPanel.ts
@@ -0,0 +1,30 @@
+let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
+// let url_Backend_dwinzo = `http://192.168.0.102:5000`;
+export const lockPanel = async (
+  zoneId: string,
+  organization: string,
+  lockedPanel: any
+) => {
+  try {
+    const response = await fetch(`${url_Backend_dwinzo}/api/v2/zones/lockedPanels`, {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ organization, zoneId, lockedPanel }),
+    });
+
+    if (!response.ok) {
+      throw new Error("Failed to Lock Panel in the zone");
+    }
+
+    const result = await response.json();
+    return result;
+  } catch (error) {
+    if (error instanceof Error) {
+      throw new Error(error.message);
+    } else {
+      throw new Error("An unknown error occurred");
+    }
+  }
+};
\ No newline at end of file
diff --git a/app/src/services/realTimeVisulization/zoneData/update3dWidget.ts b/app/src/services/realTimeVisulization/zoneData/update3dWidget.ts
index 553fc68..cb37a7f 100644
--- a/app/src/services/realTimeVisulization/zoneData/update3dWidget.ts
+++ b/app/src/services/realTimeVisulization/zoneData/update3dWidget.ts
@@ -9,20 +9,16 @@ export const update3dWidget = async (
     console.log("organization: ", organization);
     console.log("zoneId: ", zoneId);
     try {
-        const response = await fetch(
-            `${url_Backend_dwinzo}/api/v2/modifyPR/widget3D`,
-            {
-                method: "PATCH",
-                headers: {
-                    "Content-Type": "application/json",
-                },
-                body: JSON.stringify({
-                    organization,
-                    zoneId,
-                    id,
-                    position,
-                }),
-            }
+        const response = await fetch(`${url_Backend_dwinzo}/api/v2/modifyPR/widget3D`, {
+            method: "PATCH",
+            headers: { "Content-Type": "application/json", },
+            body: JSON.stringify({
+                organization,
+                zoneId,
+                id,
+                position,
+            }),
+        }
         );
 
         if (!response.ok) {
diff --git a/app/src/store/store.ts b/app/src/store/store.ts
index d39e8e1..dad47b3 100644
--- a/app/src/store/store.ts
+++ b/app/src/store/store.ts
@@ -68,7 +68,11 @@ export const useWalls = create<any>((set: any) => ({
 
 export const useZones = create<any>((set: any) => ({
   zones: [],
-  setZones: (x: any) => set(() => ({ zones: x })),
+  setZones: (callback: any) =>
+    set((state: any) => ({
+      zones:
+        typeof callback === 'function' ? callback(state.zones) : callback
+    }))
 }));
 
 interface ZonePointsState {