diff --git a/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx b/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx
index e6e18ef..a6343ed 100644
--- a/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx
+++ b/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx
@@ -220,8 +220,8 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
         // e.stopPropagation();
       }}
       wrapperClass="pointer-none"
-      className={`${selectedChartId?.id === id ? "activeChart" : ""}`}
-    >
+
+      >
       <div
         className={`productionCapacity-wrapper card ${selectedChartId?.id === id ? "activeChart" : ""}`}
         onClick={() => setSelectedChartId({ id: id, type: type })}
diff --git a/app/src/components/layout/3D-cards/cards/ReturnOfInvestment.tsx b/app/src/components/layout/3D-cards/cards/ReturnOfInvestment.tsx
index 9019aaf..3d5d291 100644
--- a/app/src/components/layout/3D-cards/cards/ReturnOfInvestment.tsx
+++ b/app/src/components/layout/3D-cards/cards/ReturnOfInvestment.tsx
@@ -46,20 +46,32 @@ interface ReturnOfInvestmentProps {
   rotation: [number, number, number];
   onContextMenu?: (event: React.MouseEvent) => void;
 }
-const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ id, type, position, rotation, onContextMenu }) => {
-
+const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({
+  id,
+  type,
+  position,
+  rotation,
+  onContextMenu,
+}) => {
   const { selectedChartId, setSelectedChartId } = useWidgetStore();
-  const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
+  const {
+    measurements: chartMeasurements,
+    duration: chartDuration,
+    name: widgetName,
+  } = useChartStore();
   const [measurements, setmeasurements] = useState<any>({});
-  const [duration, setDuration] = useState("1h")
-  const [name, setName] = useState("Widget")
-  const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({
+  const [duration, setDuration] = useState("1h");
+  const [name, setName] = useState("Widget");
+  const [chartData, setChartData] = useState<{
+    labels: string[];
+    datasets: any[];
+  }>({
     labels: [],
     datasets: [],
   });
   const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
   const email = localStorage.getItem("email") || "";
-  const organization = email?.split("@")[1]?.split(".")[0]
+  const organization = email?.split("@")[1]?.split(".")[0];
   // Improved sample data for the smooth curve graph (single day)
   const graphData: ChartData<"line"> = {
     labels: [
@@ -129,7 +141,8 @@ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ id, type, posit
   };
 
   useEffect(() => {
-    if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return;
+    if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0)
+      return;
 
     const socket = io(`http://${iotApiUrl}`);
 
@@ -139,7 +152,6 @@ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ id, type, posit
       interval: 1000,
     };
 
-
     const startStream = () => {
       socket.emit("lineInput", inputData);
     };
@@ -157,8 +169,10 @@ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ id, type, posit
         return {
           label: datasetKey,
           data: responseData[datasetKey]?.values ?? [],
-          borderColor: index === 0 ? "rgba(75, 192, 192, 1)" : "rgba(255, 99, 132, 1)", // Light blue color
-          backgroundColor: index === 0 ? "rgba(75, 192, 192, 0.2)" : "rgba(255, 99, 132, 0.2)",
+          borderColor:
+            index === 0 ? "rgba(75, 192, 192, 1)" : "rgba(255, 99, 132, 1)", // Light blue color
+          backgroundColor:
+            index === 0 ? "rgba(75, 192, 192, 0.2)" : "rgba(255, 99, 132, 0.2)",
           fill: true,
           tension: 0.4, // Smooth curve effect
           pointRadius: 0, // Hide dots
@@ -177,14 +191,15 @@ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ id, type, posit
   }, [measurements, duration, iotApiUrl]);
 
   const fetchSavedInputes = async () => {
-
     if (id !== "") {
       try {
-        const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget3D/${id}/${organization}`);
+        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)
-          setName(response.data.widgetName)
+          setmeasurements(response.data.Data.measurements);
+          setDuration(response.data.Data.duration);
+          setName(response.data.widgetName);
         } else {
           console.log("Unexpected response:", response);
         }
@@ -192,7 +207,7 @@ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ id, type, posit
         console.error("There was an error!", error);
       }
     }
-  }
+  };
 
   useEffect(() => {
     fetchSavedInputes();
@@ -202,8 +217,7 @@ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ id, type, posit
     if (selectedChartId?.id === id) {
       fetchSavedInputes();
     }
-  }
-    , [chartMeasurements, chartDuration, widgetName])
+  }, [chartMeasurements, chartDuration, widgetName]);
   const rotationDegrees = {
     x: (rotation[0] * 180) / Math.PI,
     y: (rotation[1] * 180) / Math.PI,
@@ -215,27 +229,32 @@ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ id, type, posit
   };
 
   return (
-    <Html position={[position[0], position[1], position[2]]}
+    <Html
+      position={[position[0], position[1], position[2]]}
       scale={[0.5, 0.5, 0.5]}
       transform
       zIndexRange={[1, 0]}
       sprite
       style={{
         transform: transformStyle.transform,
-        transformStyle: 'preserve-3d',
-        transition: 'transform 0.1s ease-out'
-
+        transformStyle: "preserve-3d",
+        transition: "transform 0.1s ease-out",
       }}
-      className={`${selectedChartId?.id === id ? "activeChart" : ""}`}
     >
-      <div className="returnOfInvestment card"
+      <div
+        className={`returnOfInvestment card ${
+          selectedChartId?.id === id ? "activeChart" : ""
+        }`}
         onClick={() => setSelectedChartId({ id: id, type: type })}
         onContextMenu={onContextMenu}
       >
         <div className="header">Return of Investment</div>
         <div className="lineGraph charts">
           {/* Smooth curve graph with two datasets */}
-          <SmoothLineGraphComponent data={Object.keys(measurements).length > 0 ? chartData : graphData} options={graphOptions} />
+          <SmoothLineGraphComponent
+            data={Object.keys(measurements).length > 0 ? chartData : graphData}
+            options={graphOptions}
+          />
         </div>
         <div className="returns-wrapper">
           <div className="icon">
diff --git a/app/src/components/layout/3D-cards/cards/StateWorking.tsx b/app/src/components/layout/3D-cards/cards/StateWorking.tsx
index 93b86a2..829d7bf 100644
--- a/app/src/components/layout/3D-cards/cards/StateWorking.tsx
+++ b/app/src/components/layout/3D-cards/cards/StateWorking.tsx
@@ -13,16 +13,26 @@ interface StateWorkingProps {
   rotation: [number, number, number];
   onContextMenu?: (event: React.MouseEvent) => void;
 }
-const StateWorking: React.FC<StateWorkingProps> = ({ id, type, position, rotation, onContextMenu }) => {
+const StateWorking: React.FC<StateWorkingProps> = ({
+  id,
+  type,
+  position,
+  rotation,
+  onContextMenu,
+}) => {
   const { selectedChartId, setSelectedChartId } = useWidgetStore();
-  const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
+  const {
+    measurements: chartMeasurements,
+    duration: chartDuration,
+    name: widgetName,
+  } = useChartStore();
   const [measurements, setmeasurements] = useState<any>({});
-  const [duration, setDuration] = useState("1h")
-  const [name, setName] = useState("Widget")
+  const [duration, setDuration] = useState("1h");
+  const [name, setName] = useState("Widget");
   const [datas, setDatas] = useState<any>({});
   const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
   const email = localStorage.getItem("email") || "";
-  const organization = email?.split("@")[1]?.split(".")[0]
+  const organization = email?.split("@")[1]?.split(".")[0];
   // const datas = [
   //   { key: "Oil Tank:", value: "24/341" },
   //   { key: "Oil Refin:", value: 36.023 },
@@ -33,7 +43,8 @@ const StateWorking: React.FC<StateWorkingProps> = ({ id, type, position, rotatio
   // ];
 
   useEffect(() => {
-    if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return;
+    if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0)
+      return;
     const socket = io(`http://${iotApiUrl}`);
     const inputData = {
       measurements,
@@ -46,7 +57,6 @@ const StateWorking: React.FC<StateWorkingProps> = ({ id, type, position, rotatio
     socket.on("connect", startStream);
     socket.on("lastOutput", (response) => {
       const responseData = response;
-    
 
       setDatas(responseData);
     });
@@ -59,14 +69,15 @@ const StateWorking: React.FC<StateWorkingProps> = ({ id, type, position, rotatio
   }, [measurements, duration, iotApiUrl]);
 
   const fetchSavedInputes = async () => {
-
     if (id !== "") {
       try {
-        const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget3D/${id}/${organization}`);
+        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)
-          setName(response.data.widgetName)
+          setmeasurements(response.data.Data.measurements);
+          setDuration(response.data.Data.duration);
+          setName(response.data.widgetName);
         } else {
           console.log("Unexpected response:", response);
         }
@@ -74,10 +85,7 @@ const StateWorking: React.FC<StateWorkingProps> = ({ id, type, position, rotatio
         console.error("There was an error!", error);
       }
     }
-  }
-
- 
-
+  };
 
   useEffect(() => {
     fetchSavedInputes();
@@ -87,8 +95,7 @@ const StateWorking: React.FC<StateWorkingProps> = ({ id, type, position, rotatio
     if (selectedChartId?.id === id) {
       fetchSavedInputes();
     }
-  }
-    , [chartMeasurements, chartDuration, widgetName])
+  }, [chartMeasurements, chartDuration, widgetName]);
 
   const rotationDegrees = {
     x: (rotation[0] * 180) / Math.PI,
@@ -100,20 +107,22 @@ const StateWorking: React.FC<StateWorkingProps> = ({ id, type, position, rotatio
     transform: `rotateX(${rotationDegrees.x}deg) rotateY(${rotationDegrees.y}deg) rotateZ(${rotationDegrees.z}deg)`,
   };
   return (
-    <Html position={[position[0], position[1], position[2]]}
+    <Html
+      position={[position[0], position[1], position[2]]}
       scale={[0.5, 0.5, 0.5]}
       transform
       zIndexRange={[1, 0]}
       sprite
       style={{
         transform: transformStyle.transform,
-        transformStyle: 'preserve-3d',
-        transition: 'transform 0.1s ease-out'
-
+        transformStyle: "preserve-3d",
+        transition: "transform 0.1s ease-out",
       }}
-      className={`${selectedChartId?.id === id ? "activeChart" : ""}`}
     >
-      <div className="stateWorking-wrapper card"
+      <div
+        className={`stateWorking-wrapper card ${
+          selectedChartId?.id === id ? "activeChart" : ""
+        }`}
         onClick={() => setSelectedChartId({ id: id, type: type })}
         onContextMenu={onContextMenu}
       >
@@ -121,12 +130,10 @@ const StateWorking: React.FC<StateWorkingProps> = ({ id, type, position, rotatio
           <div className="header">
             <span>State</span>
             <span>
-              {datas?.input1 ? datas.input1 : 'input1'} <span>.</span>
+              {datas?.input1 ? datas.input1 : "input1"} <span>.</span>
             </span>
           </div>
-          <div className="img">
-            {/* <img src={image} alt="" /> */}
-          </div>
+          <div className="img">{/* <img src={image} alt="" /> */}</div>
         </div>
         {/* Data */}
         <div className="data-wrapper">
@@ -137,28 +144,52 @@ const StateWorking: React.FC<StateWorkingProps> = ({ id, type, position, rotatio
             </div>
           ))} */}
           <div className="data-table">
-            <div className="data">{measurements?.input2?.fields ? measurements.input2.fields : 'input2'}</div>
-            <div className="key">{datas?.input2 ? datas.input2 : 'data'}</div>
+            <div className="data">
+              {measurements?.input2?.fields
+                ? measurements.input2.fields
+                : "input2"}
+            </div>
+            <div className="key">{datas?.input2 ? datas.input2 : "data"}</div>
           </div>
           <div className="data-table">
-            <div className="data">{measurements?.input3?.fields ? measurements.input3.fields : 'input3'}</div>
-            <div className="key">{datas?.input3 ? datas.input3 : 'data'}</div>
+            <div className="data">
+              {measurements?.input3?.fields
+                ? measurements.input3.fields
+                : "input3"}
+            </div>
+            <div className="key">{datas?.input3 ? datas.input3 : "data"}</div>
           </div>
           <div className="data-table">
-            <div className="data">{measurements?.input4?.fields ? measurements.input4.fields : 'input4'}</div>
-            <div className="key">{datas?.input4 ? datas.input4 : 'data'}</div>
+            <div className="data">
+              {measurements?.input4?.fields
+                ? measurements.input4.fields
+                : "input4"}
+            </div>
+            <div className="key">{datas?.input4 ? datas.input4 : "data"}</div>
           </div>
           <div className="data-table">
-            <div className="data">{measurements?.input5?.fields ? measurements.input5.fields : 'input5'}</div>
-            <div className="key">{datas?.input5 ? datas.input5 : 'data'}</div>
+            <div className="data">
+              {measurements?.input5?.fields
+                ? measurements.input5.fields
+                : "input5"}
+            </div>
+            <div className="key">{datas?.input5 ? datas.input5 : "data"}</div>
           </div>
           <div className="data-table">
-            <div className="data">{measurements?.input6?.fields ? measurements.input6.fields : 'input6'}</div>
-            <div className="key">{datas?.input6 ? datas.input6 : 'data'}</div>
+            <div className="data">
+              {measurements?.input6?.fields
+                ? measurements.input6.fields
+                : "input6"}
+            </div>
+            <div className="key">{datas?.input6 ? datas.input6 : "data"}</div>
           </div>
           <div className="data-table">
-            <div className="data">{measurements?.input7?.fields ? measurements.input7.fields : 'input7'}</div>
-            <div className="key">{datas?.input7 ? datas.input7 : 'data'}</div>
+            <div className="data">
+              {measurements?.input7?.fields
+                ? measurements.input7.fields
+                : "input7"}
+            </div>
+            <div className="key">{datas?.input7 ? datas.input7 : "data"}</div>
           </div>
         </div>
       </div>
@@ -167,5 +198,3 @@ const StateWorking: React.FC<StateWorkingProps> = ({ id, type, position, rotatio
 };
 
 export default StateWorking;
-
-
diff --git a/app/src/components/layout/3D-cards/cards/Throughput.tsx b/app/src/components/layout/3D-cards/cards/Throughput.tsx
index f51b052..a99d171 100644
--- a/app/src/components/layout/3D-cards/cards/Throughput.tsx
+++ b/app/src/components/layout/3D-cards/cards/Throughput.tsx
@@ -49,20 +49,32 @@ interface ThroughputProps {
   onContextMenu?: (event: React.MouseEvent) => void;
 }
 
-const Throughput: React.FC<ThroughputProps> = ({ id, type, position, rotation, onContextMenu }) => {
-
+const Throughput: React.FC<ThroughputProps> = ({
+  id,
+  type,
+  position,
+  rotation,
+  onContextMenu,
+}) => {
   const { selectedChartId, setSelectedChartId } = useWidgetStore();
-  const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
+  const {
+    measurements: chartMeasurements,
+    duration: chartDuration,
+    name: widgetName,
+  } = useChartStore();
   const [measurements, setmeasurements] = useState<any>({});
-  const [duration, setDuration] = useState("1h")
-  const [name, setName] = useState("Widget")
-  const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({
+  const [duration, setDuration] = useState("1h");
+  const [name, setName] = useState("Widget");
+  const [chartData, setChartData] = useState<{
+    labels: string[];
+    datasets: any[];
+  }>({
     labels: [],
     datasets: [],
   });
   const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
   const email = localStorage.getItem("email") || "";
-  const organization = email?.split("@")[1]?.split(".")[0]
+  const organization = email?.split("@")[1]?.split(".")[0];
 
   // Sample data for the line graph
   const graphData: ChartData<"line"> = {
@@ -112,7 +124,8 @@ const Throughput: React.FC<ThroughputProps> = ({ id, type, position, rotation, o
   };
 
   useEffect(() => {
-    if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return;
+    if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0)
+      return;
 
     const socket = io(`http://${iotApiUrl}`);
 
@@ -122,7 +135,6 @@ const Throughput: React.FC<ThroughputProps> = ({ id, type, position, rotation, o
       interval: 1000,
     };
 
-
     const startStream = () => {
       socket.emit("lineInput", inputData);
     };
@@ -157,14 +169,15 @@ const Throughput: React.FC<ThroughputProps> = ({ id, type, position, rotation, o
   }, [measurements, duration, iotApiUrl]);
 
   const fetchSavedInputes = async () => {
-
     if (id !== "") {
       try {
-        const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget3D/${id}/${organization}`);
+        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)
-          setName(response.data.widgetName)
+          setmeasurements(response.data.Data.measurements);
+          setDuration(response.data.Data.duration);
+          setName(response.data.widgetName);
         } else {
           console.log("Unexpected response:", response);
         }
@@ -172,7 +185,7 @@ const Throughput: React.FC<ThroughputProps> = ({ id, type, position, rotation, o
         console.error("There was an error!", error);
       }
     }
-  }
+  };
 
   useEffect(() => {
     fetchSavedInputes();
@@ -182,8 +195,7 @@ const Throughput: React.FC<ThroughputProps> = ({ id, type, position, rotation, o
     if (selectedChartId?.id === id) {
       fetchSavedInputes();
     }
-  }
-    , [chartMeasurements, chartDuration, widgetName])
+  }, [chartMeasurements, chartDuration, widgetName]);
   const rotationDegrees = {
     x: (rotation[0] * 180) / Math.PI,
     y: (rotation[1] * 180) / Math.PI,
@@ -195,20 +207,22 @@ const Throughput: React.FC<ThroughputProps> = ({ id, type, position, rotation, o
   };
 
   return (
-    <Html position={[position[0], position[1], position[2]]}
+    <Html
+      position={[position[0], position[1], position[2]]}
       scale={[0.5, 0.5, 0.5]}
       transform
       zIndexRange={[1, 0]}
       sprite
       style={{
         transform: transformStyle.transform,
-        transformStyle: 'preserve-3d',
-        transition: 'transform 0.1s ease-out'
-
+        transformStyle: "preserve-3d",
+        transition: "transform 0.1s ease-out",
       }}
-      className={`${selectedChartId?.id === id ? "activeChart" : ""}`}
     >
-      <div className="throughput-wrapper"
+      <div
+        className={`throughput-wrapper card ${
+          selectedChartId?.id === id ? "activeChart" : ""
+        }`}
         onClick={() => setSelectedChartId({ id: id, type: type })}
         onContextMenu={onContextMenu}
       >
@@ -235,7 +249,10 @@ const Throughput: React.FC<ThroughputProps> = ({ id, type, position, rotation, o
         </div>
         <div className="line-graph">
           {/* Line graph using react-chartjs-2 */}
-          <LineGraphComponent data={Object.keys(measurements).length > 0 ? chartData : graphData} options={graphOptions} />
+          <LineGraphComponent
+            data={Object.keys(measurements).length > 0 ? chartData : graphData}
+            options={graphOptions}
+          />
         </div>
         <div className="footer">
           You made an extra <span className="value">$1256.13</span> this month
diff --git a/app/src/components/layout/sidebarLeft/Assets.tsx b/app/src/components/layout/sidebarLeft/Assets.tsx
index 258599f..67bf969 100644
--- a/app/src/components/layout/sidebarLeft/Assets.tsx
+++ b/app/src/components/layout/sidebarLeft/Assets.tsx
@@ -148,7 +148,7 @@ const Assets: React.FC = () => {
           <div className="assets-container">
             {categoryAssets &&
               categoryAssets?.map((asset: any, index: number) => (
-                <div key={index} className="assets">
+                <div key={index} className="assets" id={asset.filename}>
                   <img
                     src={asset?.thumbnail}
                     alt={asset.filename}
@@ -172,6 +172,7 @@ const Assets: React.FC = () => {
         <div className="assets-wrapper">
           <div
             className="back-button"
+            id="asset-backButtom"
             onClick={() => {
               setSelectedCategory(null);
               setCategoryAssets([]);
@@ -183,7 +184,7 @@ const Assets: React.FC = () => {
           <div className="assets-container">
             {categoryAssets &&
               categoryAssets?.map((asset: any, index: number) => (
-                <div key={index} className="assets">
+                <div key={index} className="assets" id={asset.filename}>
                   <img
                     src={asset?.thumbnail}
                     alt={asset.filename}
@@ -223,6 +224,7 @@ const Assets: React.FC = () => {
                 <div
                   key={index}
                   className="category"
+                  id={category}
                   onClick={() => fetchCategoryAssets(category)}
                 >
                   <img
diff --git a/app/src/components/layout/sidebarLeft/visualization/Templates.tsx b/app/src/components/layout/sidebarLeft/visualization/Templates.tsx
index 5eb8d4e..436af7f 100644
--- a/app/src/components/layout/sidebarLeft/visualization/Templates.tsx
+++ b/app/src/components/layout/sidebarLeft/visualization/Templates.tsx
@@ -4,6 +4,7 @@ import useTemplateStore from "../../../../store/useTemplateStore";
 import { useSelectedZoneStore } from "../../../../store/useZoneStore";
 import { getTemplateData } from "../../../../services/realTimeVisulization/zoneData/getTemplate";
 import { useSocketStore } from "../../../../store/store";
+import RenameInput from "../../../ui/inputs/RenameInput";
 
 const Templates = () => {
   const { templates, removeTemplate, setTemplates } = useTemplateStore();
@@ -34,7 +35,10 @@ const Templates = () => {
         templateID: id,
       };
       if (visualizationSocket) {
-        visualizationSocket.emit("v2:viz-template:deleteTemplate", deleteTemplate);
+        visualizationSocket.emit(
+          "v2:viz-template:deleteTemplate",
+          deleteTemplate
+        );
       }
       removeTemplate(id);
     } catch (error) {
@@ -65,11 +69,15 @@ const Templates = () => {
         widgets: template.widgets,
       });
 
-      useDroppedObjectsStore.getState().setZone(selectedZone.zoneName, selectedZone.zoneId);
+      useDroppedObjectsStore
+        .getState()
+        .setZone(selectedZone.zoneName, selectedZone.zoneId);
 
       if (Array.isArray(template.floatingWidget)) {
         template.floatingWidget.forEach((val: any) => {
-          useDroppedObjectsStore.getState().addObject(selectedZone.zoneName, val);
+          useDroppedObjectsStore
+            .getState()
+            .addObject(selectedZone.zoneName, val);
         });
       }
     } catch (error) {
@@ -79,7 +87,7 @@ const Templates = () => {
 
   return (
     <div className="template-list">
-      {templates.map((template) => (
+      {templates.map((template, index) => (
         <div key={template.id} className="template-item">
           {template?.snapshot && (
             <div className="template-image-container">
@@ -96,7 +104,8 @@ const Templates = () => {
               onClick={() => handleLoadTemplate(template)}
               className="template-name"
             >
-              {template.name}
+              {/* {`Template ${index + 1}`} */}
+              <RenameInput value={`Template ${index + 1}`} />
             </div>
             <button
               onClick={() => handleDeleteTemplate(template.id)}
diff --git a/app/src/components/ui/componets/AddButtons.tsx b/app/src/components/ui/componets/AddButtons.tsx
index 49a1c40..eb70dea 100644
--- a/app/src/components/ui/componets/AddButtons.tsx
+++ b/app/src/components/ui/componets/AddButtons.tsx
@@ -1,12 +1,10 @@
-import React, { useEffect } from "react";
+import React from "react";
 import {
   CleanPannel,
   EyeIcon,
   LockIcon,
 } from "../../icons/RealTimeVisulationIcons";
-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";
@@ -14,6 +12,11 @@ import { lockPanel } from "../../../services/realTimeVisulization/zoneData/lockP
 // Define the type for `Side`
 type Side = "top" | "bottom" | "left" | "right";
 
+// Define the type for HiddenPanels, where keys are zone IDs and values are arrays of hidden sides
+interface HiddenPanels {
+  [zoneId: string]: Side[];
+}
+
 // Define the type for the props passed to the Buttons component
 interface ButtonsProps {
   selectedZone: {
@@ -37,7 +40,6 @@ interface ButtonsProps {
       zoneName: string;
       activeSides: Side[];
       panelOrder: Side[];
-
       lockedPanels: Side[];
       zoneId: string;
       zoneViewPortTarget: number[];
@@ -51,8 +53,8 @@ interface ButtonsProps {
       }[];
     }>
   >;
-  hiddenPanels: Side[]; // Add this prop for hidden panels
-  setHiddenPanels: React.Dispatch<React.SetStateAction<Side[]>>; // Add this prop for updating hidden panels
+  hiddenPanels: HiddenPanels; // Updated prop type
+  setHiddenPanels: React.Dispatch<React.SetStateAction<HiddenPanels>>; // Updated prop type
 }
 
 const AddButtons: React.FC<ButtonsProps> = ({
@@ -63,11 +65,33 @@ const AddButtons: React.FC<ButtonsProps> = ({
 }) => {
   const { visualizationSocket } = useSocketStore();
 
-  // Local state to track hidden panels
+  // Function to toggle visibility of a panel
+  const toggleVisibility = (side: Side) => {
+    const isHidden = hiddenPanels[selectedZone.zoneId]?.includes(side) ?? false;
+
+    if (isHidden) {
+      // If the panel is already hidden, remove it from the hiddenPanels array for this zone
+      setHiddenPanels((prevHiddenPanels) => ({
+        ...prevHiddenPanels,
+        [selectedZone.zoneId]: prevHiddenPanels[selectedZone.zoneId].filter(
+          (panel) => panel !== side
+        ),
+      }));
+    } else {
+      // If the panel is visible, add it to the hiddenPanels array for this zone
+      setHiddenPanels((prevHiddenPanels) => ({
+        ...prevHiddenPanels,
+        [selectedZone.zoneId]: [
+          ...(prevHiddenPanels[selectedZone.zoneId] || []),
+          side,
+        ],
+      }));
+    }
+  };
 
   // Function to toggle lock/unlock a panel
   const toggleLockPanel = async (side: Side) => {
-    console.log('side: ', side);
+    // console.log('side: ', side);
     const email = localStorage.getItem("email") || "";
     const organization = email?.split("@")[1]?.split(".")[0]; // Fallback value
     //add api
@@ -99,23 +123,10 @@ const AddButtons: React.FC<ButtonsProps> = ({
 
   };
 
-  // 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
-      setHiddenPanels(hiddenPanels.filter((panel) => panel !== side));
-    } else {
-      // If the panel is visible, add it to the hiddenPanels array
-      setHiddenPanels([...hiddenPanels, side]);
-    }
-  };
-
   // Function to clean all widgets from a panel
   const cleanPanel = async (side: Side) => {
     //add api
-    console.log('side: ', side);
+    // console.log('side: ', side);
     const email = localStorage.getItem("email") || "";
     const organization = email?.split("@")[1]?.split(".")[0]; // Fallback value
 
@@ -135,7 +146,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
       widgets: cleanedWidgets,
     };
     // Update the selectedZone state
-    console.log('updatedZone: ', updatedZone);
+    // console.log('updatedZone: ', updatedZone);
     setSelectedZone(updatedZone);
 
     // let response = await clearPanel(selectedZone.zoneId, organization, side)
@@ -196,8 +207,6 @@ const AddButtons: React.FC<ButtonsProps> = ({
       //
       // }
     } else {
-      setHiddenPanels(hiddenPanels.filter((panel) => panel !== side));
-
       // Panel does not exist: Create panel
       try {
         // Get email and organization safely with a default fallback
@@ -234,7 +243,6 @@ const AddButtons: React.FC<ButtonsProps> = ({
       } catch (error) { }
     }
   };
-
   return (
     <>
       <div>
@@ -261,16 +269,21 @@ const AddButtons: React.FC<ButtonsProps> = ({
               <div className="extra-Bs">
                 {/* Hide Panel */}
                 <div
-                  className={`icon ${hiddenPanels.includes(side) ? "active" : ""
-                    }`}
+                  className={`icon ${
+                    hiddenPanels[selectedZone.zoneId]?.includes(side)
+                      ? "active"
+                      : ""
+                  }`}
                   title={
-                    hiddenPanels.includes(side) ? "Show Panel" : "Hide Panel"
+                    hiddenPanels[selectedZone.zoneId]?.includes(side)
+                      ? "Show Panel"
+                      : "Hide Panel"
                   }
                   onClick={() => toggleVisibility(side)}
                 >
                   <EyeIcon
                     fill={
-                      hiddenPanels.includes(side)
+                      hiddenPanels[selectedZone.zoneId]?.includes(side)
                         ? "var(--primary-color)"
                         : "var(--text-color)"
                     }
diff --git a/app/src/components/ui/componets/DraggableWidget.tsx b/app/src/components/ui/componets/DraggableWidget.tsx
index cfd002d..fb20169 100644
--- a/app/src/components/ui/componets/DraggableWidget.tsx
+++ b/app/src/components/ui/componets/DraggableWidget.tsx
@@ -88,12 +88,15 @@ export const DraggableWidget = ({
 
   const chartWidget = useRef<HTMLDivElement>(null);
 
-  const isPanelHidden = hiddenPanels.includes(widget.panel);
-
-  // OuterClick({
-  //   contextClassName: ["chart-container", "floating", "sidebar-right-wrapper"],
-  //   setMenuVisible: () => setSelectedChartId(null),
-  // });
+  OuterClick({
+    contextClassName: [
+      "chart-container",
+      "floating",
+      "sidebar-right-wrapper",
+      "card",
+    ],
+    setMenuVisible: () => setSelectedChartId(null),
+  });
 
   const deleteSelectedChart = async () => {
     try {
@@ -397,4 +400,4 @@ export const DraggableWidget = ({
   );
 };
 
-
+// by using canvasDimensions.height canvasDimensions.width dynamically div value insted of static 6 and 4 calculate according to canvasDimensions.width canvasDimensions.height
diff --git a/app/src/components/ui/componets/Panel.tsx b/app/src/components/ui/componets/Panel.tsx
index 85c58d0..30136e5 100644
--- a/app/src/components/ui/componets/Panel.tsx
+++ b/app/src/components/ui/componets/Panel.tsx
@@ -39,7 +39,7 @@ interface PanelProps {
       widgets: Widget[];
     }>
   >;
-  hiddenPanels: string[];
+  hiddenPanels: any;
   setZonesData: React.Dispatch<React.SetStateAction<any>>;
 }
 
@@ -139,7 +139,12 @@ const Panel: React.FC<PanelProps> = ({
   const handleDrop = (e: React.DragEvent, panel: Side) => {
     e.preventDefault();
     const { draggedAsset } = useWidgetStore.getState();
-    if (!draggedAsset || isPanelLocked(panel)) return;
+    if (
+      !draggedAsset ||
+      isPanelLocked(panel) ||
+      hiddenPanels[selectedZone.zoneId]?.includes(panel)
+    )
+      return;
 
     const currentWidgetsCount = getCurrentWidgetCount(panel);
     const maxCapacity = calculatePanelCapacity(panel);
@@ -261,7 +266,7 @@ const Panel: React.FC<PanelProps> = ({
         {`
           :root {
             --topWidth: ${topWidth};
-            --bottomWidth: ${bottomWidth};
+            --bottomWidth: ${bottomWidth} ;
             --leftHeight: ${leftHeight};
             --rightHeight: ${rightHeight};
 
@@ -278,7 +283,7 @@ const Panel: React.FC<PanelProps> = ({
           key={side}
           id="panel-wrapper"
           className={`panel ${side}-panel absolute ${
-            hiddenPanels.includes(side) ? "hidePanel" : ""
+            hiddenPanels[selectedZone.zoneId]?.includes(side) ? "hidePanel" : ""
           }`}
           style={getPanelStyle(side)}
           onDrop={(e) => handleDrop(e, side)}
@@ -294,9 +299,11 @@ const Panel: React.FC<PanelProps> = ({
           <div
             className={`panel-content ${isPlaying && "fullScreen"}`}
             style={{
-              pointerEvents: selectedZone.lockedPanels.includes(side)
-                ? "none"
-                : "auto",
+              pointerEvents:
+                selectedZone.lockedPanels.includes(side) ||
+                hiddenPanels[selectedZone.zoneId]?.includes(side)
+                  ? "none"
+                  : "auto",
               opacity: selectedZone.lockedPanels.includes(side) ? "0.8" : "1",
             }}
           >
diff --git a/app/src/components/ui/componets/RealTimeVisulization.tsx b/app/src/components/ui/componets/RealTimeVisulization.tsx
index 20061c5..aa67191 100644
--- a/app/src/components/ui/componets/RealTimeVisulization.tsx
+++ b/app/src/components/ui/componets/RealTimeVisulization.tsx
@@ -53,8 +53,13 @@ type Widget = {
   data: any;
 };
 
+// Define the type for HiddenPanels, where keys are zone IDs and values are arrays of hidden sides
+interface HiddenPanels {
+  [zoneId: string]: Side[];
+}
+
 const RealTimeVisulization: React.FC = () => {
-  const [hiddenPanels, setHiddenPanels] = React.useState<Side[]>([]);
+  const [hiddenPanels, setHiddenPanels] = React.useState<HiddenPanels>({});
   const containerRef = useRef<HTMLDivElement>(null);
   const { isPlaying } = usePlayButtonStore();
   const { activeModule } = useModuleStore();
@@ -74,7 +79,6 @@ const RealTimeVisulization: React.FC = () => {
   const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption();
   const { visualizationSocket } = useSocketStore();
 
-
   useEffect(() => {
     async function GetZoneData() {
       const email = localStorage.getItem("email") || "";
@@ -101,7 +105,7 @@ const RealTimeVisulization: React.FC = () => {
           {}
         );
         setZonesData(formattedData);
-      } catch (error) { }
+      } catch (error) {}
     }
 
     GetZoneData();
@@ -229,8 +233,6 @@ const RealTimeVisulization: React.FC = () => {
     };
   }, [setRightClickSelected]);
 
-
-
   return (
     <>
       <div
@@ -263,7 +265,6 @@ const RealTimeVisulization: React.FC = () => {
             }}
             onDrop={(event) => handleDrop(event)}
             onDragOver={(event) => event.preventDefault()}
-
           >
             <Scene />
           </div>
diff --git a/app/src/modules/builder/groups/zoneGroup.tsx b/app/src/modules/builder/groups/zoneGroup.tsx
index 8f2d9de..d218534 100644
--- a/app/src/modules/builder/groups/zoneGroup.tsx
+++ b/app/src/modules/builder/groups/zoneGroup.tsx
@@ -2,34 +2,52 @@ import React, { useState, useEffect, useMemo, useRef } from "react";
 import { Line, Sphere } from "@react-three/drei";
 import { useThree, useFrame } from "@react-three/fiber";
 import * as THREE from "three";
-import { useActiveLayer, useDeleteTool, useDeletePointOrLine, useMovePoint, useSocketStore, useToggleView, useToolMode, useRemovedLayer, useZones, useZonePoints } from "../../../store/store";
+import {
+  useActiveLayer,
+  useDeleteTool,
+  useDeletePointOrLine,
+  useMovePoint,
+  useSocketStore,
+  useToggleView,
+  useToolMode,
+  useRemovedLayer,
+  useZones,
+  useZonePoints,
+} from "../../../store/store";
 // import { setZonesApi } from "../../../services/factoryBuilder/zones/setZonesApi";
 // import { deleteZonesApi } from "../../../services/factoryBuilder/zones/deleteZoneApi";
 import { getZonesApi } from "../../../services/factoryBuilder/zones/getZonesApi";
 
-import * as CONSTANTS from '../../../types/world/worldConstants';
+import * as CONSTANTS from "../../../types/world/worldConstants";
 
 const ZoneGroup: React.FC = () => {
-    const { camera, pointer, gl, raycaster, scene, controls } = useThree();
-    const [startPoint, setStartPoint] = useState<THREE.Vector3 | null>(null);
-    const [endPoint, setEndPoint] = useState<THREE.Vector3 | null>(null);
-    const { zones, setZones } = useZones();
-    const { zonePoints, setZonePoints } = useZonePoints();
-    const [isDragging, setIsDragging] = useState(false);
-    const [draggedSphere, setDraggedSphere] = useState<THREE.Vector3 | null>(null);
-    const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []);
-    const { toggleView } = useToggleView();
-    const { deletePointOrLine, setDeletePointOrLine } = useDeletePointOrLine();
-    const { removedLayer, setRemovedLayer } = useRemovedLayer();
-    const { toolMode, setToolMode } = useToolMode();
-    const { movePoint, setMovePoint } = useMovePoint();
-    const { deleteTool, setDeleteTool } = useDeleteTool();
-    const { activeLayer, setActiveLayer } = useActiveLayer();
-    const { socket } = useSocketStore();
+  const { camera, pointer, gl, raycaster, scene, controls } = useThree();
+  const [startPoint, setStartPoint] = useState<THREE.Vector3 | null>(null);
+  const [endPoint, setEndPoint] = useState<THREE.Vector3 | null>(null);
+  const { zones, setZones } = useZones();
+  const { zonePoints, setZonePoints } = useZonePoints();
+  const [isDragging, setIsDragging] = useState(false);
+  const [draggedSphere, setDraggedSphere] = useState<THREE.Vector3 | null>(
+    null
+  );
+  const plane = useMemo(
+    () => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0),
+    []
+  );
+  const { toggleView } = useToggleView();
+  const { deletePointOrLine, setDeletePointOrLine } = useDeletePointOrLine();
+  const { removedLayer, setRemovedLayer } = useRemovedLayer();
+  const { toolMode, setToolMode } = useToolMode();
+  const { movePoint, setMovePoint } = useMovePoint();
+  const { deleteTool, setDeleteTool } = useDeleteTool();
+  const { activeLayer, setActiveLayer } = useActiveLayer();
+  const { socket } = useSocketStore();
 
-    const groupsRef = useRef<any>();
+  const groupsRef = useRef<any>();
 
-    const zoneMaterial = useMemo(() => new THREE.ShaderMaterial({
+  const zoneMaterial = useMemo(
+    () =>
+      new THREE.ShaderMaterial({
         side: THREE.DoubleSide,
         vertexShader: `
         varying vec2 vUv;
@@ -47,466 +65,555 @@ const ZoneGroup: React.FC = () => {
         }
         `,
         uniforms: {
-            uColor: { value: new THREE.Color(CONSTANTS.zoneConfig.color) },
+          uColor: { value: new THREE.Color(CONSTANTS.zoneConfig.color) },
         },
         transparent: true,
         depthWrite: false,
     }), []);
 
-    useEffect(() => {
-        const fetchZones = async () => {
-            const email = localStorage.getItem('email');
-            if (!email) return;
+  useEffect(() => {
+    const fetchZones = async () => {
+      const email = localStorage.getItem("email");
+      if (!email) return;
 
-            const organization = email.split("@")[1].split(".")[0];
-            const data = await getZonesApi(organization);
+      const organization = email.split("@")[1].split(".")[0];
+      const data = await getZonesApi(organization);
 
-            if (data.data && data.data.length > 0) {
-                const fetchedZones = data.data.map((zone: any) => ({
-                    zoneId: zone.zoneId,
-                    zoneName: zone.zoneName,
-                    points: zone.points,
-                    viewPortCenter: zone.viewPortCenter,
-                    viewPortposition: zone.viewPortposition,
-                    layer: zone.layer
-                }));
+      if (data.data && data.data.length > 0) {
+        const fetchedZones = data.data.map((zone: any) => ({
+          zoneId: zone.zoneId,
+          zoneName: zone.zoneName,
+          points: zone.points,
+          viewPortCenter: zone.viewPortCenter,
+          viewPortposition: zone.viewPortposition,
+          layer: zone.layer,
+        }));
 
-                setZones(fetchedZones);
+        setZones(fetchedZones);
 
-                const fetchedPoints = data.data.flatMap((zone: any) =>
-                    zone.points.slice(0, 4).map((point: [number, number, number]) => new THREE.Vector3(...point))
-                );
+        const fetchedPoints = data.data.flatMap((zone: any) =>
+          zone.points
+            .slice(0, 4)
+            .map(
+              (point: [number, number, number]) => new THREE.Vector3(...point)
+            )
+        );
 
-                setZonePoints(fetchedPoints);
-            }
-        };
+        setZonePoints(fetchedPoints);
+      }
+    };
 
-        fetchZones();
-    }, []);
+    fetchZones();
+  }, []);
 
-    useEffect(() => {
+  useEffect(() => {
+    localStorage.setItem("zones", JSON.stringify(zones));
+  }, [zones]);
 
-        localStorage.setItem('zones', JSON.stringify(zones));
+  useEffect(() => {
+    if (removedLayer) {
+      const updatedZones = zones.filter(
+        (zone: any) => zone.layer !== removedLayer
+      );
+      setZones(updatedZones);
 
-    }, [zones])
+      const updatedzonePoints = zonePoints.filter((_: any, index: any) => {
+        const zoneIndex = Math.floor(index / 4);
+        return zones[zoneIndex]?.layer !== removedLayer;
+      });
+      setZonePoints(updatedzonePoints);
 
-    useEffect(() => {
-        if (removedLayer) {
-            const updatedZones = zones.filter((zone: any) => zone.layer !== removedLayer);
-            setZones(updatedZones);
+      zones
+        .filter((zone: any) => zone.layer === removedLayer)
+        .forEach((zone: any) => {
+          deleteZoneFromBackend(zone.zoneId);
+        });
 
-            const updatedzonePoints = zonePoints.filter((_: any, index: any) => {
-                const zoneIndex = Math.floor(index / 4);
-                return zones[zoneIndex]?.layer !== removedLayer;
-            });
-            setZonePoints(updatedzonePoints);
+      setRemovedLayer(null);
+    }
+  }, [removedLayer]);
 
-            zones.filter((zone: any) => zone.layer === removedLayer).forEach((zone: any) => {
-                deleteZoneFromBackend(zone.zoneId);
-            });
+  useEffect(() => {
+    if (toolMode !== "Zone") {
+      setStartPoint(null);
+      setEndPoint(null);
+    } else {
+      setDeletePointOrLine(false);
+      setMovePoint(false);
+      setDeleteTool(false);
+    }
+    if (!toggleView) {
+      setStartPoint(null);
+      setEndPoint(null);
+    }
+  }, [toolMode, toggleView]);
 
-            setRemovedLayer(null);
+  const addZoneToBackend = async (zone: {
+    zoneId: string;
+    zoneName: string;
+    points: [number, number, number][];
+    layer: string;
+  }) => {
+    const email = localStorage.getItem("email");
+    const userId = localStorage.getItem("userId");
+    const organization = email!.split("@")[1].split(".")[0];
+
+    const calculateCenter = (points: number[][]) => {
+      if (!points || points.length === 0) return null;
+
+      let sumX = 0,
+        sumY = 0,
+        sumZ = 0;
+      const numPoints = points.length;
+
+      points.forEach(([x, y, z]) => {
+        sumX += x;
+        sumY += y;
+        sumZ += z;
+      });
+
+      return [sumX / numPoints, sumY / numPoints, sumZ / numPoints] as [
+        number,
+        number,
+        number
+      ];
+    };
+
+    const target: [number, number, number] | null = calculateCenter(
+      zone.points
+    );
+    if (!target) return;
+    const position = [target[0], 10, target[2]];
+
+    const input = {
+      userId: userId,
+      organization: organization,
+      zoneData: {
+        zoneName: zone.zoneName,
+        zoneId: zone.zoneId,
+        points: zone.points,
+        viewPortCenter: target,
+        viewPortposition: position,
+        layer: zone.layer,
+      },
+    };
+
+    socket.emit("v2:zone:set", input);
+  };
+
+  const updateZoneToBackend = async (zone: {
+    zoneId: string;
+    zoneName: string;
+    points: [number, number, number][];
+    layer: string;
+  }) => {
+    const email = localStorage.getItem("email");
+    const userId = localStorage.getItem("userId");
+    const organization = email!.split("@")[1].split(".")[0];
+
+    const calculateCenter = (points: number[][]) => {
+      if (!points || points.length === 0) return null;
+
+      let sumX = 0,
+        sumY = 0,
+        sumZ = 0;
+      const numPoints = points.length;
+
+      points.forEach(([x, y, z]) => {
+        sumX += x;
+        sumY += y;
+        sumZ += z;
+      });
+
+      return [sumX / numPoints, sumY / numPoints, sumZ / numPoints] as [
+        number,
+        number,
+        number
+      ];
+    };
+
+    const target: [number, number, number] | null = calculateCenter(
+      zone.points
+    );
+    if (!target) return;
+    const position = [target[0], 10, target[2]];
+
+    const input = {
+      userId: userId,
+      organization: organization,
+      zoneData: {
+        zoneName: zone.zoneName,
+        zoneId: zone.zoneId,
+        points: zone.points,
+        viewPortCenter: target,
+        viewPortposition: position,
+        layer: zone.layer,
+      },
+    };
+
+    socket.emit("v2:zone:set", input);
+  };
+
+  const deleteZoneFromBackend = async (zoneId: string) => {
+    const email = localStorage.getItem("email");
+    const userId = localStorage.getItem("userId");
+    const organization = email!.split("@")[1].split(".")[0];
+
+    const input = {
+      userId: userId,
+      organization: organization,
+      zoneId: zoneId,
+    };
+
+    socket.emit("v2:zone:delete", input);
+  };
+
+  const handleDeleteZone = (zoneId: string) => {
+    const updatedZones = zones.filter((zone: any) => zone.zoneId !== zoneId);
+    setZones(updatedZones);
+
+    const zoneIndex = zones.findIndex((zone: any) => zone.zoneId === zoneId);
+    if (zoneIndex !== -1) {
+      const zonePointsToRemove = zonePoints.slice(
+        zoneIndex * 4,
+        zoneIndex * 4 + 4
+      );
+      zonePointsToRemove.forEach((point: any) =>
+        groupsRef.current.remove(point)
+      );
+      const updatedzonePoints = zonePoints.filter(
+        (_: any, index: any) =>
+          index < zoneIndex * 4 || index >= zoneIndex * 4 + 4
+      );
+      setZonePoints(updatedzonePoints);
+    }
+
+    deleteZoneFromBackend(zoneId);
+  };
+
+  useEffect(() => {
+    if (!camera || !toggleView) return;
+    const canvasElement = gl.domElement;
+
+    let drag = false;
+    let isLeftMouseDown = false;
+
+    const onMouseDown = (evt: any) => {
+      if (evt.button === 0) {
+        isLeftMouseDown = true;
+        drag = false;
+
+        raycaster.setFromCamera(pointer, camera);
+        const intersects = raycaster.intersectObjects(
+          groupsRef.current.children,
+          true
+        );
+
+        if (intersects.length > 0 && movePoint) {
+          const clickedObject = intersects[0].object;
+          const sphereIndex = zonePoints.findIndex((point: any) =>
+            point.equals(clickedObject.position)
+          );
+          if (sphereIndex !== -1) {
+            (controls as any).enabled = false;
+            setDraggedSphere(zonePoints[sphereIndex]);
+            setIsDragging(true);
+          }
         }
-    }, [removedLayer]);
+      }
+    };
 
-    useEffect(() => {
-        if (toolMode !== "Zone") {
-            setStartPoint(null);
+    const onMouseUp = (evt: any) => {
+      if (evt.button === 0 && !drag && !isDragging && !deletePointOrLine) {
+        isLeftMouseDown = false;
+
+        if (!startPoint && !movePoint) {
+          raycaster.setFromCamera(pointer, camera);
+          const intersectionPoint = new THREE.Vector3();
+          const point = raycaster.ray.intersectPlane(plane, intersectionPoint);
+          if (point) {
+            setStartPoint(point);
             setEndPoint(null);
-        } else {
-            setDeletePointOrLine(false);
-            setMovePoint(false);
-            setDeleteTool(false);
+          }
+        } else if (startPoint && !movePoint) {
+          raycaster.setFromCamera(pointer, camera);
+          const intersectionPoint = new THREE.Vector3();
+          const point = raycaster.ray.intersectPlane(plane, intersectionPoint);
+          if (!point) return;
+
+          const points = [
+            [startPoint.x, 0.15, startPoint.z],
+            [point.x, 0.15, startPoint.z],
+            [point.x, 0.15, point.z],
+            [startPoint.x, 0.15, point.z],
+            [startPoint.x, 0.15, startPoint.z],
+          ] as [number, number, number][];
+
+          const zoneName = `Zone ${zones.length + 1}`;
+          const zoneId = THREE.MathUtils.generateUUID();
+          const newZone = {
+            zoneId,
+            zoneName,
+            points: points,
+            layer: activeLayer,
+          };
+
+          const newZones = [...zones, newZone];
+
+          setZones(newZones);
+
+          const newzonePoints = [
+            new THREE.Vector3(startPoint.x, 0.15, startPoint.z),
+            new THREE.Vector3(point.x, 0.15, startPoint.z),
+            new THREE.Vector3(point.x, 0.15, point.z),
+            new THREE.Vector3(startPoint.x, 0.15, point.z),
+          ];
+
+          const updatedZonePoints = [...zonePoints, ...newzonePoints];
+          setZonePoints(updatedZonePoints);
+
+          addZoneToBackend(newZone);
+
+          setStartPoint(null);
+          setEndPoint(null);
         }
-        if (!toggleView) {
-            setStartPoint(null);
-            setEndPoint(null);
+      } else if (
+        evt.button === 0 &&
+        !drag &&
+        !isDragging &&
+        deletePointOrLine
+      ) {
+        raycaster.setFromCamera(pointer, camera);
+        const intersects = raycaster.intersectObjects(
+          groupsRef.current.children,
+          true
+        );
+
+        if (intersects.length > 0) {
+          const clickedObject = intersects[0].object;
+
+          const sphereIndex = zonePoints.findIndex((point: any) =>
+            point.equals(clickedObject.position)
+          );
+          if (sphereIndex !== -1) {
+            const zoneIndex = Math.floor(sphereIndex / 4);
+            const zoneId = zones[zoneIndex].zoneId;
+            handleDeleteZone(zoneId);
+            return;
+          }
         }
-    }, [toolMode, toggleView]);
+      }
 
+      if (evt.button === 0) {
+        if (isDragging && draggedSphere) {
+          setIsDragging(false);
+          setDraggedSphere(null);
 
-    const addZoneToBackend = async (zone: { zoneId: string; zoneName: string; points: [number, number, number][]; layer: string }) => {
+          const sphereIndex = zonePoints.findIndex(
+            (point: any) => point === draggedSphere
+          );
+          if (sphereIndex !== -1) {
+            const zoneIndex = Math.floor(sphereIndex / 4);
 
-        const email = localStorage.getItem('email');
-        const userId = localStorage.getItem('userId');
-        const organization = (email!.split("@")[1]).split(".")[0];
-
-        const calculateCenter = (points: number[][]) => {
-            if (!points || points.length === 0) return null;
-
-            let sumX = 0, sumY = 0, sumZ = 0;
-            const numPoints = points.length;
-
-            points.forEach(([x, y, z]) => {
-                sumX += x;
-                sumY += y;
-                sumZ += z;
-            });
-
-            return [sumX / numPoints, sumY / numPoints, sumZ / numPoints] as [number, number, number];
-        };
-
-        const target: [number, number, number] | null = calculateCenter(zone.points);
-        if (!target) return;
-        const position = [target[0], 10, target[2]];
-
-        const input = {
-            userId: userId,
-            organization: organization,
-            zoneData: {
-                zoneName: zone.zoneName,
-                zoneId: zone.zoneId,
-                points: zone.points,
-                viewPortCenter: target,
-                viewPortposition: position,
-                layer: zone.layer
+            if (zoneIndex !== -1 && zones[zoneIndex]) {
+              updateZoneToBackend(zones[zoneIndex]);
             }
+          }
         }
-
-        socket.emit('v2:zone:set', input);
+      }
     };
 
-    const updateZoneToBackend = async (zone: { zoneId: string; zoneName: string; points: [number, number, number][]; layer: string }) => {
+    const onMouseMove = () => {
+      if (isLeftMouseDown) {
+        drag = true;
+      }
+      raycaster.setFromCamera(pointer, camera);
+      const intersects = raycaster.intersectObjects(
+        groupsRef.current.children,
+        true
+      );
 
-        const email = localStorage.getItem('email');
-        const userId = localStorage.getItem('userId');
-        const organization = (email!.split("@")[1]).split(".")[0];
-
-        const calculateCenter = (points: number[][]) => {
-            if (!points || points.length === 0) return null;
-
-            let sumX = 0, sumY = 0, sumZ = 0;
-            const numPoints = points.length;
-
-            points.forEach(([x, y, z]) => {
-                sumX += x;
-                sumY += y;
-                sumZ += z;
-            });
-
-            return [sumX / numPoints, sumY / numPoints, sumZ / numPoints] as [number, number, number];
-        };
-
-        const target: [number, number, number] | null = calculateCenter(zone.points);
-        if (!target) return;
-        const position = [target[0], 10, target[2]];
-
-        const input = {
-            userId: userId,
-            organization: organization,
-            zoneData: {
-                zoneName: zone.zoneName,
-                zoneId: zone.zoneId,
-                points: zone.points,
-                viewPortCenter: target,
-                viewPortposition: position,
-                layer: zone.layer
-            }
-        }
-
-        socket.emit('v2:zone:set', input);
-    };
-
-
-    const deleteZoneFromBackend = async (zoneId: string) => {
-
-        const email = localStorage.getItem('email');
-        const userId = localStorage.getItem('userId');
-        const organization = (email!.split("@")[1]).split(".")[0];
-
-        const input = {
-            userId: userId,
-            organization: organization,
-            zoneId: zoneId
-        }
-
-        socket.emit('v2:zone:delete', input);
-    };
-
-    const handleDeleteZone = (zoneId: string) => {
-        const updatedZones = zones.filter((zone: any) => zone.zoneId !== zoneId);
-        setZones(updatedZones);
-
-        const zoneIndex = zones.findIndex((zone: any) => zone.zoneId === zoneId);
-        if (zoneIndex !== -1) {
-            const zonePointsToRemove = zonePoints.slice(zoneIndex * 4, zoneIndex * 4 + 4);
-            zonePointsToRemove.forEach((point: any) => groupsRef.current.remove(point));
-            const updatedzonePoints = zonePoints.filter((_: any, index: any) => index < zoneIndex * 4 || index >= zoneIndex * 4 + 4);
-            setZonePoints(updatedzonePoints);
-        }
-
-        deleteZoneFromBackend(zoneId);
-    };
-
-    useEffect(() => {
-        if (!camera || !toggleView) return;
-        const canvasElement = gl.domElement;
-
-        let drag = false;
-        let isLeftMouseDown = false;
-
-        const onMouseDown = (evt: any) => {
-            if (evt.button === 0) {
-                isLeftMouseDown = true;
-                drag = false;
-
-                raycaster.setFromCamera(pointer, camera);
-                const intersects = raycaster.intersectObjects(groupsRef.current.children, true);
-
-                if (intersects.length > 0 && movePoint) {
-                    const clickedObject = intersects[0].object;
-                    const sphereIndex = zonePoints.findIndex((point: any) => point.equals(clickedObject.position));
-                    if (sphereIndex !== -1) {
-                        (controls as any).enabled = false;
-                        setDraggedSphere(zonePoints[sphereIndex]);
-                        setIsDragging(true);
-                    }
-                }
-            }
-        };
-
-        const onMouseUp = (evt: any) => {
-            if (evt.button === 0 && !drag && !isDragging && !deletePointOrLine) {
-                isLeftMouseDown = false;
-
-                if (!startPoint && !movePoint) {
-                    raycaster.setFromCamera(pointer, camera);
-                    const intersectionPoint = new THREE.Vector3();
-                    const point = raycaster.ray.intersectPlane(plane, intersectionPoint);
-                    if (point) {
-                        setStartPoint(point);
-                        setEndPoint(null);
-                    }
-                } else if (startPoint && !movePoint) {
-                    raycaster.setFromCamera(pointer, camera);
-                    const intersectionPoint = new THREE.Vector3();
-                    const point = raycaster.ray.intersectPlane(plane, intersectionPoint);
-                    if (!point) return;
-
-                    const points = [
-                        [startPoint.x, 0.15, startPoint.z],
-                        [point.x, 0.15, startPoint.z],
-                        [point.x, 0.15, point.z],
-                        [startPoint.x, 0.15, point.z],
-                        [startPoint.x, 0.15, startPoint.z],
-                    ] as [number, number, number][];
-
-                    const zoneName = `Zone ${zones.length + 1}`;
-                    const zoneId = THREE.MathUtils.generateUUID();
-                    const newZone = {
-                        zoneId,
-                        zoneName,
-                        points: points,
-                        layer: activeLayer
-                    };
-
-                    const newZones = [...zones, newZone];
-
-                    setZones(newZones);
-
-                    const newzonePoints = [
-                        new THREE.Vector3(startPoint.x, 0.15, startPoint.z),
-                        new THREE.Vector3(point.x, 0.15, startPoint.z),
-                        new THREE.Vector3(point.x, 0.15, point.z),
-                        new THREE.Vector3(startPoint.x, 0.15, point.z),
-                    ];
-
-                    const updatedZonePoints = [...zonePoints, ...newzonePoints];
-                    setZonePoints(updatedZonePoints);
-
-                    addZoneToBackend(newZone);
-
-                    setStartPoint(null);
-                    setEndPoint(null);
-                }
-            } else if (evt.button === 0 && !drag && !isDragging && deletePointOrLine) {
-                raycaster.setFromCamera(pointer, camera);
-                const intersects = raycaster.intersectObjects(groupsRef.current.children, true);
-
-                if (intersects.length > 0) {
-                    const clickedObject = intersects[0].object;
-
-                    const sphereIndex = zonePoints.findIndex((point: any) => point.equals(clickedObject.position));
-                    if (sphereIndex !== -1) {
-                        const zoneIndex = Math.floor(sphereIndex / 4);
-                        const zoneId = zones[zoneIndex].zoneId;
-                        handleDeleteZone(zoneId);
-                        return;
-                    }
-                }
-            }
-
-            if (evt.button === 0) {
-                if (isDragging && draggedSphere) {
-                    setIsDragging(false);
-                    setDraggedSphere(null);
-
-                    const sphereIndex = zonePoints.findIndex((point: any) => point === draggedSphere);
-                    if (sphereIndex !== -1) {
-                        const zoneIndex = Math.floor(sphereIndex / 4);
-
-                        if (zoneIndex !== -1 && zones[zoneIndex]) {
-                            updateZoneToBackend(zones[zoneIndex]);
-                        }
-                    }
-                }
-            }
-        };
-
-        const onMouseMove = () => {
-            if (isLeftMouseDown) {
-                drag = true;
-            }
-            raycaster.setFromCamera(pointer, camera);
-            const intersects = raycaster.intersectObjects(groupsRef.current.children, true);
-
-            if (intersects.length > 0 && intersects[0].object.name.includes('point')) {
-                gl.domElement.style.cursor = movePoint ? "pointer" : "default";
-            } else {
-                gl.domElement.style.cursor = "default";
-            }
-            if (isDragging && draggedSphere) {
-                raycaster.setFromCamera(pointer, camera);
-                const intersectionPoint = new THREE.Vector3();
-                const point = raycaster.ray.intersectPlane(plane, intersectionPoint);
-                if (point) {
-                    draggedSphere.set(point.x, 0.15, point.z);
-
-                    const sphereIndex = zonePoints.findIndex((point: any) => point === draggedSphere);
-                    if (sphereIndex !== -1) {
-                        const zoneIndex = Math.floor(sphereIndex / 4);
-                        const cornerIndex = sphereIndex % 4;
-
-                        const updatedZones = zones.map((zone: any, index: number) => {
-                            if (index === zoneIndex) {
-                                const updatedPoints = [...zone.points];
-                                updatedPoints[cornerIndex] = [point.x, 0.15, point.z];
-                                updatedPoints[4] = updatedPoints[0];
-                                return { ...zone, points: updatedPoints };
-                            }
-                            return zone;
-                        });
-
-                        setZones(updatedZones);
-                    }
-                }
-            }
-        };
-
-        const onContext = (event: any) => {
-            event.preventDefault();
-            setStartPoint(null);
-            setEndPoint(null);
-        };
-
-        if (toolMode === 'Zone' || deletePointOrLine || movePoint) {
-            canvasElement.addEventListener("mousedown", onMouseDown);
-            canvasElement.addEventListener("mouseup", onMouseUp);
-            canvasElement.addEventListener("mousemove", onMouseMove);
-            canvasElement.addEventListener("contextmenu", onContext);
-        }
-        return () => {
-            canvasElement.removeEventListener("mousedown", onMouseDown);
-            canvasElement.removeEventListener("mouseup", onMouseUp);
-            canvasElement.removeEventListener("mousemove", onMouseMove);
-            canvasElement.removeEventListener("contextmenu", onContext);
-        };
-    }, [gl, camera, startPoint, toggleView, scene, toolMode, zones, isDragging, deletePointOrLine, zonePoints, draggedSphere, movePoint, activeLayer]);
-
-    useFrame(() => {
-        if (!startPoint) return;
+      if (
+        intersects.length > 0 &&
+        intersects[0].object.name.includes("point")
+      ) {
+        gl.domElement.style.cursor = movePoint ? "pointer" : "default";
+      } else {
+        gl.domElement.style.cursor = "default";
+      }
+      if (isDragging && draggedSphere) {
         raycaster.setFromCamera(pointer, camera);
         const intersectionPoint = new THREE.Vector3();
         const point = raycaster.ray.intersectPlane(plane, intersectionPoint);
         if (point) {
-            setEndPoint(point);
+          draggedSphere.set(point.x, 0.15, point.z);
+
+          const sphereIndex = zonePoints.findIndex(
+            (point: any) => point === draggedSphere
+          );
+          if (sphereIndex !== -1) {
+            const zoneIndex = Math.floor(sphereIndex / 4);
+            const cornerIndex = sphereIndex % 4;
+
+            const updatedZones = zones.map((zone: any, index: number) => {
+              if (index === zoneIndex) {
+                const updatedPoints = [...zone.points];
+                updatedPoints[cornerIndex] = [point.x, 0.15, point.z];
+                updatedPoints[4] = updatedPoints[0];
+                return { ...zone, points: updatedPoints };
+              }
+              return zone;
+            });
+
+            setZones(updatedZones);
+          }
         }
-    });
-    return (
-        <group ref={groupsRef} name='zoneGroup' >
-            <group name="zones" visible={!toggleView}>
-                {zones
-                    .map((zone: any) => (
-                        <group key={zone.zoneId} name={zone.zoneName}>
-                            {zone.points.slice(0, -1).map((point: [number, number, number], index: number) => {
-                                const nextPoint = zone.points[index + 1];
+      }
+    };
 
-                                const point1 = new THREE.Vector3(point[0], point[1], point[2]);
-                                const point2 = new THREE.Vector3(nextPoint[0], nextPoint[1], nextPoint[2]);
+    const onContext = (event: any) => {
+      event.preventDefault();
+      setStartPoint(null);
+      setEndPoint(null);
+    };
 
-                                const planeWidth = point1.distanceTo(point2);
-                                const planeHeight = CONSTANTS.zoneConfig.height;
+    if (toolMode === "Zone" || deletePointOrLine || movePoint) {
+      canvasElement.addEventListener("mousedown", onMouseDown);
+      canvasElement.addEventListener("mouseup", onMouseUp);
+      canvasElement.addEventListener("mousemove", onMouseMove);
+      canvasElement.addEventListener("contextmenu", onContext);
+    }
+    return () => {
+      canvasElement.removeEventListener("mousedown", onMouseDown);
+      canvasElement.removeEventListener("mouseup", onMouseUp);
+      canvasElement.removeEventListener("mousemove", onMouseMove);
+      canvasElement.removeEventListener("contextmenu", onContext);
+    };
+  }, [
+    gl,
+    camera,
+    startPoint,
+    toggleView,
+    scene,
+    toolMode,
+    zones,
+    isDragging,
+    deletePointOrLine,
+    zonePoints,
+    draggedSphere,
+    movePoint,
+    activeLayer,
+  ]);
 
-                                const midpoint = new THREE.Vector3((point1.x + point2.x) / 2, (CONSTANTS.zoneConfig.height / 2) + ((zone.layer - 1) * CONSTANTS.zoneConfig.height), (point1.z + point2.z) / 2);
+  useFrame(() => {
+    if (!startPoint) return;
+    raycaster.setFromCamera(pointer, camera);
+    const intersectionPoint = new THREE.Vector3();
+    const point = raycaster.ray.intersectPlane(plane, intersectionPoint);
+    if (point) {
+      setEndPoint(point);
+    }
+  });
+  return (
+    <group ref={groupsRef} name="zoneGroup">
+      <group name="zones" visible={!toggleView}>
+        {zones.map((zone: any) => (
+          <group key={zone.zoneId} name={zone.zoneName}>
+            {zone.points
+              .slice(0, -1)
+              .map((point: [number, number, number], index: number) => {
+                const nextPoint = zone.points[index + 1];
 
-                                const angle = Math.atan2(point2.z - point1.z, point2.x - point1.x);
+                const point1 = new THREE.Vector3(point[0], point[1], point[2]);
+                const point2 = new THREE.Vector3(
+                  nextPoint[0],
+                  nextPoint[1],
+                  nextPoint[2]
+                );
 
-                                return (
-                                    <mesh
-                                        key={index}
-                                        position={midpoint}
-                                        rotation={[0, -angle, 0]}
-                                    >
-                                        <planeGeometry args={[planeWidth, planeHeight]} />
-                                        <primitive
-                                            object={zoneMaterial.clone()}
-                                            attach="material"
-                                        />
-                                    </mesh>
-                                );
-                            })}
-                        </group>
-                    ))}
-            </group>
-            <group name='zoneLines' visible={toggleView}>
-                {zones
-                    .filter((zone: any) => zone.layer === activeLayer)
-                    .map((zone: any) => (
-                        <Line
-                            key={zone.zoneId}
-                            points={zone.points}
-                            color="#007BFF"
-                            lineWidth={3}
-                            onClick={(e) => {
-                                e.stopPropagation();
-                                if (deletePointOrLine) {
-                                    handleDeleteZone(zone.zoneId);
-                                }
-                            }}
-                        />
-                    ))}
-            </group>
-            <group name="zonePoints" visible={toggleView}>
-                {zones.filter((zone: any) => zone.layer === activeLayer).flatMap((zone: any) => (
-                    zone.points.slice(0, 4).map((point: any, pointIndex: number) => (
-                        <Sphere
-                            key={`${zone.zoneId}-point-${pointIndex}`}
-                            position={new THREE.Vector3(...point)}
-                            args={[0.3, 16, 16]}
-                            name={`point-${zone.zoneId}-${pointIndex}`}
-                        >
-                            <meshBasicMaterial color="red" />
-                        </Sphere>
-                    ))
-                ))}
-            </group>
-            <group name="tempGroup" visible={toggleView}>
-                {startPoint && endPoint && (
-                    <Line
-                        points={[
-                            [startPoint.x, 0.15, startPoint.z],
-                            [endPoint.x, 0.15, startPoint.z],
-                            [endPoint.x, 0.15, endPoint.z],
-                            [startPoint.x, 0.15, endPoint.z],
-                            [startPoint.x, 0.15, startPoint.z],
-                        ]}
-                        color="#C164FF"
-                        lineWidth={3}
+                const planeWidth = point1.distanceTo(point2);
+                const planeHeight = CONSTANTS.zoneConfig.height;
+
+                const midpoint = new THREE.Vector3(
+                  (point1.x + point2.x) / 2,
+                  CONSTANTS.zoneConfig.height / 2 +
+                    (zone.layer - 1) * CONSTANTS.zoneConfig.height,
+                  (point1.z + point2.z) / 2
+                );
+
+                const angle = Math.atan2(
+                  point2.z - point1.z,
+                  point2.x - point1.x
+                );
+
+                return (
+                  <mesh
+                    key={index}
+                    position={midpoint}
+                    rotation={[0, -angle, 0]}
+                  >
+                    <planeGeometry args={[planeWidth, planeHeight]} />
+                    <primitive
+                      object={zoneMaterial.clone()}
+                      attach="material"
                     />
-                )}
-            </group>
-        </group>
-    );
+                  </mesh>
+                );
+              })}
+          </group>
+        ))}
+      </group>
+      <group name="zoneLines" visible={toggleView}>
+        {zones
+          .filter((zone: any) => zone.layer === activeLayer)
+          .map((zone: any) => (
+            <Line
+              key={zone.zoneId}
+              points={zone.points}
+              color="#007BFF"
+              lineWidth={3}
+              onClick={(e) => {
+                e.stopPropagation();
+                if (deletePointOrLine) {
+                  handleDeleteZone(zone.zoneId);
+                }
+              }}
+            />
+          ))}
+      </group>
+      <group name="zonePoints" visible={toggleView}>
+        {zones
+          .filter((zone: any) => zone.layer === activeLayer)
+          .flatMap((zone: any) =>
+            zone.points.slice(0, 4).map((point: any, pointIndex: number) => (
+              <Sphere
+                key={`${zone.zoneId}-point-${pointIndex}`}
+                position={new THREE.Vector3(...point)}
+                args={[0.3, 16, 16]}
+                name={`point-${zone.zoneId}-${pointIndex}`}
+              >
+                <meshBasicMaterial color="red" />
+              </Sphere>
+            ))
+          )}
+      </group>
+      <group name="tempGroup" visible={toggleView}>
+        {startPoint && endPoint && (
+          <Line
+            points={[
+              [startPoint.x, 0.15, startPoint.z],
+              [endPoint.x, 0.15, startPoint.z],
+              [endPoint.x, 0.15, endPoint.z],
+              [startPoint.x, 0.15, endPoint.z],
+              [startPoint.x, 0.15, startPoint.z],
+            ]}
+            color="#C164FF"
+            lineWidth={3}
+          />
+        )}
+      </group>
+    </group>
+  );
 };
 
-export default ZoneGroup;
\ No newline at end of file
+export default ZoneGroup;
diff --git a/app/src/modules/visualization/captureVisualization.ts b/app/src/modules/visualization/captureVisualization.ts
index 01d67a0..9927d0e 100644
--- a/app/src/modules/visualization/captureVisualization.ts
+++ b/app/src/modules/visualization/captureVisualization.ts
@@ -1,55 +1,20 @@
+import html2canvas from "html2canvas";
+
 export const captureVisualization = async (): Promise<string | null> => {
-    const container = document.getElementById("real-time-vis-canvas");
-    if (!container) return null;
+  const container = document.getElementById("real-time-vis-canvas");
+  if (!container) return null;
 
-    const canvas = document.createElement("canvas");
-    const ctx = canvas.getContext("2d");
-    if (!ctx) return null;
-
-    const rect = container.getBoundingClientRect();
-    canvas.width = rect.width;
-    canvas.height = rect.height;
-
-    // Draw background
-    ctx.fillStyle = getComputedStyle(container).backgroundColor;
-    ctx.fillRect(0, 0, canvas.width, canvas.height);
-
-    // Capture all canvas elements
-    const canvases = container.querySelectorAll("canvas");
-    canvases.forEach((childCanvas) => {
-        const childRect = childCanvas.getBoundingClientRect();
-        const x = childRect.left - rect.left;
-        const y = childRect.top - rect.top;
-        ctx.drawImage(childCanvas, x, y, childRect.width, childRect.height);
+  try {
+    // Use html2canvas to capture the container
+    const canvas = await html2canvas(container, {
+      scale: 1, // Adjust scale for higher/lower resolution
     });
 
-    // Capture SVG elements
-    const svgs = container.querySelectorAll("svg");
-    for (const svg of Array.from(svgs)) {
-        const svgString = new XMLSerializer().serializeToString(svg);
-        const svgBlob = new Blob([svgString], { type: "image/svg+xml" });
-        const url = URL.createObjectURL(svgBlob);
-
-        try {
-            const img = await new Promise<HTMLImageElement>((resolve, reject) => {
-                const image = new Image();
-                image.onload = () => resolve(image);
-                image.onerror = reject;
-                image.src = url;
-            });
-
-            const svgRect = svg.getBoundingClientRect();
-            ctx.drawImage(
-                img,
-                svgRect.left - rect.left,
-                svgRect.top - rect.top,
-                svgRect.width,
-                svgRect.height
-            );
-        } finally {
-            URL.revokeObjectURL(url);
-        }
-    }
-
-    return canvas.toDataURL("image/png");
+    // Convert the canvas to a data URL (PNG format)
+    const dataUrl = canvas.toDataURL("image/png");
+    return dataUrl;
+  } catch (error) {
+    console.error("Error capturing visualization:", error);
+    return null;
+  }
 };
diff --git a/app/src/modules/visualization/handleSaveTemplate.ts b/app/src/modules/visualization/handleSaveTemplate.ts
index 0290dae..224dc20 100644
--- a/app/src/modules/visualization/handleSaveTemplate.ts
+++ b/app/src/modules/visualization/handleSaveTemplate.ts
@@ -32,7 +32,6 @@ export const handleSaveTemplate = async ({
   try {
     // Check if the selected zone has any widgets
     if (!selectedZone.panelOrder || selectedZone.panelOrder.length === 0) {
-      console.warn("No widgets found in the selected zone.");
       return;
     }
 
@@ -65,8 +64,7 @@ export const handleSaveTemplate = async ({
       floatingWidget,
       widgets3D,
     };
-    
-    console.log('newTemplate: ', newTemplate);
+
     // Extract organization from email
     const email = localStorage.getItem("email") || "";
     const organization = email.includes("@")
@@ -74,7 +72,6 @@ export const handleSaveTemplate = async ({
       : "";
 
     if (!organization) {
-      console.error("Organization could not be determined from email.");
       return;
     }
     let saveTemplate = {
@@ -89,13 +86,13 @@ export const handleSaveTemplate = async ({
     try {
       addTemplate(newTemplate);
       // const response = await saveTemplateApi(organization, newTemplate);
-      // console.log("Save API Response:", response);
+      //
 
       // Add template only if API call succeeds
     } catch (apiError) {
-      // console.error("Error saving template to API:", apiError);
+      //
     }
   } catch (error) {
-    // console.error("Error in handleSaveTemplate:", error);
+    //
   }
 };
diff --git a/app/src/styles/components/visualization/floating/common.scss b/app/src/styles/components/visualization/floating/common.scss
index 7c74d54..94ea379 100644
--- a/app/src/styles/components/visualization/floating/common.scss
+++ b/app/src/styles/components/visualization/floating/common.scss
@@ -81,9 +81,12 @@
 
 .returnOfInvestment {
     gap: 10px;
+    min-width: 150px;
 
     .charts {
+        width: 100%;
         height: 200px;
+        min-width: 150px;
     }
 
     .returns-wrapper {
@@ -126,6 +129,12 @@
         gap: 6px;
         border-radius: 5.2px;
 
+        width: 100%;
+        height: 150px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
         .header {
             font-size: $small;
             text-align: start;
diff --git a/app/src/styles/pages/realTimeViz.scss b/app/src/styles/pages/realTimeViz.scss
index f334fff..19cd2b4 100644
--- a/app/src/styles/pages/realTimeViz.scss
+++ b/app/src/styles/pages/realTimeViz.scss
@@ -75,6 +75,7 @@
     max-width: 80%;
     overflow: auto;
     max-width: calc(100% - 500px);
+    min-width: 150px;
     z-index: 3;
     transform: translate(-50%, -10%);
 
@@ -363,6 +364,7 @@
   }
 
   .panel.hidePanel {
+    pointer-events: none;
     opacity: 0.1;
   }
 }