diff --git a/app/src/components/layout/scenes/MainScene.tsx b/app/src/components/layout/scenes/MainScene.tsx
index d2db26d..eebab29 100644
--- a/app/src/components/layout/scenes/MainScene.tsx
+++ b/app/src/components/layout/scenes/MainScene.tsx
@@ -155,7 +155,8 @@ function MainScene() {
             selectedZone,
             setFloatingWidget,
             event,
-            projectId
+            projectId,
+            versionId: selectedVersion?.versionId || '',
           })
         }
         onDragOver={(event) => event.preventDefault()}
diff --git a/app/src/components/layout/sidebarRight/visualization/IotInputCards/BarChartInput.tsx b/app/src/components/layout/sidebarRight/visualization/IotInputCards/BarChartInput.tsx
index 27982d9..e100b08 100644
--- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/BarChartInput.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/BarChartInput.tsx
@@ -11,6 +11,7 @@ import { useParams } from "react-router-dom";
 import { useSocketStore } from "../../../../../store/builder/store";
 import { getUserData } from "../../../../../functions/getUserData";
 import { addingWidgets } from "../../../../../services/visulization/zone/addWidgets";
+import { useVersionContext } from "../../../../../modules/builder/version/versionContext";
 
 type Props = {};
 
@@ -29,7 +30,8 @@ const BarChartInput = (props: Props) => {
   const [isLoading, setLoading] = useState<boolean>(true);
   const { projectId } = useParams();
   const { visualizationSocket } = useSocketStore();
-
+  const { selectedVersionStore } = useVersionContext();
+  const { selectedVersion } = selectedVersionStore();
 
   useEffect(() => {
     const fetchZoneData = async () => {
@@ -56,7 +58,7 @@ const BarChartInput = (props: Props) => {
       if (selectedChartId.id !== "") {
         try {
           const response = await axios.get(
-            `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${selectedChartId.id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}`,
+            `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${selectedChartId.id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}&versionId=${selectedVersion?.versionId || ""}`,
             {
               headers: {
                 Authorization: "Bearer <access_token>",
diff --git a/app/src/components/layout/sidebarRight/visualization/IotInputCards/LineGrapInput.tsx b/app/src/components/layout/sidebarRight/visualization/IotInputCards/LineGrapInput.tsx
index 89dac89..324d76a 100644
--- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/LineGrapInput.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/LineGrapInput.tsx
@@ -127,6 +127,7 @@ import { useParams } from "react-router-dom";
 import { useSocketStore } from "../../../../../store/builder/store";
 import { getUserData } from "../../../../../functions/getUserData";
 import { addingWidgets } from "../../../../../services/visulization/zone/addWidgets";
+import { useVersionContext } from "../../../../../modules/builder/version/versionContext";
 
 type Props = {};
 
@@ -145,6 +146,8 @@ const LineGrapInput = (props: Props) => {
   const [isLoading, setLoading] = useState<boolean>(true);
   const { projectId } = useParams();
   const { visualizationSocket } = useSocketStore();
+  const { selectedVersionStore } = useVersionContext();
+  const { selectedVersion } = selectedVersionStore();
 
   useEffect(() => {
     const fetchZoneData = async () => {
@@ -171,7 +174,7 @@ const LineGrapInput = (props: Props) => {
       if (selectedChartId.id !== "") {
         try {
           const response = await axios.get(
-            `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${selectedChartId.id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}`,
+            `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${selectedChartId.id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}&versionId=${selectedVersion?.versionId || ""}`,
             {
               headers: {
                 Authorization: "Bearer <access_token>",
diff --git a/app/src/components/layout/sidebarRight/visualization/IotInputCards/PieChartInput.tsx b/app/src/components/layout/sidebarRight/visualization/IotInputCards/PieChartInput.tsx
index 141331e..894be7f 100644
--- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/PieChartInput.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/PieChartInput.tsx
@@ -11,6 +11,7 @@ import { useParams } from "react-router-dom";
 import { useSocketStore } from "../../../../../store/builder/store";
 import { getUserData } from "../../../../../functions/getUserData";
 import { addingWidgets } from "../../../../../services/visulization/zone/addWidgets";
+import { useVersionContext } from "../../../../../modules/builder/version/versionContext";
 
 type Props = {};
 
@@ -29,7 +30,8 @@ const PieChartInput = (props: Props) => {
   const [isLoading, setLoading] = useState<boolean>(true);
   const { projectId } = useParams();
   const { visualizationSocket } = useSocketStore();
-
+  const { selectedVersionStore } = useVersionContext();
+  const { selectedVersion } = selectedVersionStore();
 
   useEffect(() => {
     const fetchZoneData = async () => {
@@ -41,11 +43,11 @@ const PieChartInput = (props: Props) => {
           setDropDownData(response.data);
           setLoading(false);
         } else {
-          
+
         }
       } catch (error) {
         echo.error("Failed to fetch zone data");
-        
+
       }
     };
     fetchZoneData();
@@ -56,7 +58,7 @@ const PieChartInput = (props: Props) => {
       if (selectedChartId.id !== "") {
         try {
           const response = await axios.get(
-            `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${selectedChartId.id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}`,
+            `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${selectedChartId.id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}&versionId=${selectedVersion?.versionId || ""}`,
             {
               headers: {
                 Authorization: "Bearer <access_token>",
@@ -67,16 +69,16 @@ const PieChartInput = (props: Props) => {
             }
           );
           if (response.status === 200) {
-            
+
             setSelections(response.data.Datastructure.measurements);
             setDuration(response.data.Datastructure.duration);
             setWidgetName(response.data.widgetName);
           } else {
-            
+
           }
         } catch (error) {
           echo.error("Failed to fetch saved inputs");
-          
+
         }
       }
     };
@@ -100,12 +102,12 @@ const PieChartInput = (props: Props) => {
     // const userId = localStorage.getItem("userId");
     let newWidget = {
       id: selectedChartId.id,
-    panel: selectedChartId.panel,
-    widgetName: inputName,
-    Data: {
-      measurements: inputMeasurement,
-      duration: inputDuration,
-    },
+      panel: selectedChartId.panel,
+      widgetName: inputName,
+      Data: {
+        measurements: inputMeasurement,
+        duration: inputDuration,
+      },
     }
     // const adding3dWidget = {
     //   organization: organization,
@@ -117,16 +119,16 @@ const PieChartInput = (props: Props) => {
     //   visualizationSocket.emit("v1:viz-3D-widget:add", adding3dWidget);
     // }
 
-        let response = await addingWidgets(selectedZone.zoneUuid, organization, newWidget,projectId);
-        
-        if(response.message==="Widget updated successfully"){
+    let response = await addingWidgets(selectedZone.zoneUuid, organization, newWidget, projectId);
 
-          return true;
-        }else{
-    
-          
-          return false;
-        }
+    if (response.message === "Widget updated successfully") {
+
+      return true;
+    } else {
+
+
+      return false;
+    }
     // try {
     //   const response = await axios.post(
     //     `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/save`,
@@ -189,7 +191,7 @@ const PieChartInput = (props: Props) => {
   };
 
   const handleNameChange = async (name: any) => {
-    
+
 
     if (await sendInputes(selections, duration, name)) {
       setWidgetName(name);
diff --git a/app/src/components/layout/sidebarRight/visualization/IotInputCards/Progress1Input.tsx b/app/src/components/layout/sidebarRight/visualization/IotInputCards/Progress1Input.tsx
index 2dfba29..90c138b 100644
--- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/Progress1Input.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/Progress1Input.tsx
@@ -11,6 +11,7 @@ import { useParams } from "react-router-dom";
 import { useSocketStore } from "../../../../../store/builder/store";
 import { getUserData } from "../../../../../functions/getUserData";
 import { addingWidgets } from "../../../../../services/visulization/zone/addWidgets";
+import { useVersionContext } from "../../../../../modules/builder/version/versionContext";
 
 type Props = {};
 
@@ -29,7 +30,8 @@ const Progress1Input = (props: Props) => {
   const [isLoading, setLoading] = useState<boolean>(true);
   const { projectId } = useParams();
   const { visualizationSocket } = useSocketStore();
-
+  const { selectedVersionStore } = useVersionContext();
+  const { selectedVersion } = selectedVersionStore();
 
   useEffect(() => {
     const fetchZoneData = async () => {
@@ -41,11 +43,11 @@ const Progress1Input = (props: Props) => {
           setDropDownData(response.data);
           setLoading(false);
         } else {
-          
+
         }
       } catch (error) {
         echo.error("Failed to fetch zone data");
-        
+
       }
     };
     fetchZoneData();
@@ -56,7 +58,7 @@ const Progress1Input = (props: Props) => {
       if (selectedChartId.id !== "") {
         try {
           const response = await axios.get(
-            `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${selectedChartId.id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}`,
+            `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${selectedChartId.id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}&versionId=${selectedVersion?.versionId || ""}`,
             {
               headers: {
                 Authorization: "Bearer <access_token>",
@@ -67,16 +69,16 @@ const Progress1Input = (props: Props) => {
             }
           );
           if (response.status === 200) {
-            
+
             setSelections(response.data.Datastructure.measurements);
             setDuration(response.data.Datastructure.duration);
             setWidgetName(response.data.widgetName);
           } else {
-            
+
           }
         } catch (error) {
           echo.error("Failed to fetch saved inputs");
-          
+
         }
       }
     };
@@ -115,41 +117,41 @@ const Progress1Input = (props: Props) => {
     // if (visualizationSocket) {
     //   visualizationSocket.emit("v1:viz-3D-widget:add", adding3dWidget);
     // }
-    let response = await addingWidgets(selectedZone.zoneUuid, organization, newWidget,projectId);
-    
-    if(response.message==="Widget updated successfully"){
+    let response = await addingWidgets(selectedZone.zoneUuid, organization, newWidget, projectId);
+
+    if (response.message === "Widget updated successfully") {
 
       return true;
-    }else{
+    } else {
+
 
-      
       return false;
     }
     // try {
-      // const response = await axios.post(
-      //   `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/save`,
-      //   {
-      //     headers: {
-      //       Authorization: "Bearer <access_token>",
-      //       "Content-Type": "application/json",
-      //       token: localStorage.getItem("token") || "",
-      //       refresh_token: localStorage.getItem("refreshToken") || "",
-      //     },
-      //   },
-      //   {
-      //     zoneUuid: selectedZone.zoneUuid,
-      //     organization: organization,
-      //     widget: {
-      //       id: selectedChartId.id,
-      //       panel: selectedChartId.panel,
-      //       widgetName: inputName,
-      //       Data: {
-      //         measurements: inputMeasurement,
-      //         duration: inputDuration,
-      //       },
-      //     },
-      //   } as any
-      // );
+    // const response = await axios.post(
+    //   `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/save`,
+    //   {
+    //     headers: {
+    //       Authorization: "Bearer <access_token>",
+    //       "Content-Type": "application/json",
+    //       token: localStorage.getItem("token") || "",
+    //       refresh_token: localStorage.getItem("refreshToken") || "",
+    //     },
+    //   },
+    //   {
+    //     zoneUuid: selectedZone.zoneUuid,
+    //     organization: organization,
+    //     widget: {
+    //       id: selectedChartId.id,
+    //       panel: selectedChartId.panel,
+    //       widgetName: inputName,
+    //       Data: {
+    //         measurements: inputMeasurement,
+    //         duration: inputDuration,
+    //       },
+    //     },
+    //   } as any
+    // );
 
     // } catch (error) {
     //   echo.error("Failed to send input");
diff --git a/app/src/components/layout/sidebarRight/visualization/IotInputCards/Progress2Input.tsx b/app/src/components/layout/sidebarRight/visualization/IotInputCards/Progress2Input.tsx
index cb1fa40..4c4caa5 100644
--- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/Progress2Input.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/Progress2Input.tsx
@@ -11,6 +11,7 @@ import { useParams } from "react-router-dom";
 import { useSocketStore } from "../../../../../store/builder/store";
 import { getUserData } from "../../../../../functions/getUserData";
 import { addingWidgets } from "../../../../../services/visulization/zone/addWidgets";
+import { useVersionContext } from "../../../../../modules/builder/version/versionContext";
 
 type Props = {};
 
@@ -29,7 +30,8 @@ const Progress2Input = (props: Props) => {
   const [isLoading, setLoading] = useState<boolean>(true);
   const { projectId } = useParams();
   const { visualizationSocket } = useSocketStore();
-
+  const { selectedVersionStore } = useVersionContext();
+  const { selectedVersion } = selectedVersionStore();
 
   useEffect(() => {
     const fetchZoneData = async () => {
@@ -56,7 +58,7 @@ const Progress2Input = (props: Props) => {
       if (selectedChartId.id !== "") {
         try {
           const response = await axios.get(
-            `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${selectedChartId.id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}`,
+            `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${selectedChartId.id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}&versionId=${selectedVersion?.versionId || ""}`,
             {
               headers: {
                 Authorization: "Bearer <access_token>",
diff --git a/app/src/components/ui/Tools.tsx b/app/src/components/ui/Tools.tsx
index 4deacab..1aeb646 100644
--- a/app/src/components/ui/Tools.tsx
+++ b/app/src/components/ui/Tools.tsx
@@ -36,6 +36,7 @@ import {
   useFloatingWidget,
 } from "../../store/visualization/useDroppedObjectsStore";
 import { useParams } from "react-router-dom";
+import { useVersionContext } from "../../modules/builder/version/versionContext";
 
 // Utility component
 const ToolButton = ({
@@ -86,6 +87,8 @@ const Tools: React.FC = () => {
 
   const dropdownRef = useRef<HTMLButtonElement>(null);
   const [openDrop, setOpenDrop] = useState(false);
+  const { selectedVersionStore } = useVersionContext();
+  const { selectedVersion } = selectedVersionStore();
   const { projectId } = useParams();
 
   // 1. Set UI toggles on initial render
@@ -250,7 +253,8 @@ const Tools: React.FC = () => {
             selectedZone,
             templates,
             visualizationSocket,
-            projectId
+            projectId,
+            versionId: selectedVersion?.versionId || ''
           })
         }
       />
diff --git a/app/src/modules/builder/geomentries/walls/addWallItems.ts b/app/src/modules/builder/geomentries/walls/addWallItems.ts
index 6b1d670..809b093 100644
--- a/app/src/modules/builder/geomentries/walls/addWallItems.ts
+++ b/app/src/modules/builder/geomentries/walls/addWallItems.ts
@@ -141,7 +141,6 @@ async function AddWallItems(
       userId,
     };
 
-    console.log('data: ', data);
     socket.emit("v1:wallItems:set", data);
 
     setWallItems((prevItems) => {
diff --git a/app/src/modules/visualization/functions/handleSaveTemplate.ts b/app/src/modules/visualization/functions/handleSaveTemplate.ts
index b6c615e..d4f7a72 100644
--- a/app/src/modules/visualization/functions/handleSaveTemplate.ts
+++ b/app/src/modules/visualization/functions/handleSaveTemplate.ts
@@ -13,6 +13,7 @@ type HandleSaveTemplateProps = {
   templates?: Template[];
   visualizationSocket: any;
   projectId?: string;
+  versionId?: string
 };
 
 // Generate a unique ID
@@ -28,6 +29,7 @@ export const handleSaveTemplate = async ({
   templates = [],
   visualizationSocket,
   projectId,
+  versionId
 }: HandleSaveTemplateProps): Promise<void> => {
   try {
     const { userId, organization, email } = getUserData();
@@ -76,6 +78,7 @@ export const handleSaveTemplate = async ({
       template: newTemplate,
       userId,
       projectId,
+      versionId
     };
     if (visualizationSocket) {
       visualizationSocket.emit("v1:viz-template:add", saveTemplate);
diff --git a/app/src/modules/visualization/functions/handleUiDrop.ts b/app/src/modules/visualization/functions/handleUiDrop.ts
index 625b4f6..aec51d1 100644
--- a/app/src/modules/visualization/functions/handleUiDrop.ts
+++ b/app/src/modules/visualization/functions/handleUiDrop.ts
@@ -10,7 +10,8 @@ interface HandleDropProps {
   selectedZone: any;
   setFloatingWidget: (value: any) => void;
   event: React.DragEvent<HTMLDivElement>;
-  projectId?: string
+  projectId?: string,
+  versionId?: string
 }
 
 export const createHandleDrop = ({
@@ -18,7 +19,9 @@ export const createHandleDrop = ({
   visualizationSocket,
   selectedZone,
   setFloatingWidget,
-  event, projectId
+  event,
+  projectId,
+  versionId
 }: HandleDropProps) => {
   event.preventDefault();
   try {
@@ -95,11 +98,11 @@ export const createHandleDrop = ({
       organization,
       widget: newObject,
       zoneUuid: selectedZone.zoneUuid,
-      projectId, userId
+      versionId,
+      projectId,
+      userId
     };
-    console.log("addFloatingWidget: ", addFloatingWidget);
 
-    console.log("visualizationSocket: ", visualizationSocket);
     if (visualizationSocket) {
       visualizationSocket.emit("v1:viz-float:add", addFloatingWidget);
     }
diff --git a/app/src/modules/visualization/template/Templates.tsx b/app/src/modules/visualization/template/Templates.tsx
index 49590f0..2cfbdeb 100644
--- a/app/src/modules/visualization/template/Templates.tsx
+++ b/app/src/modules/visualization/template/Templates.tsx
@@ -7,19 +7,22 @@ import { useDroppedObjectsStore } from "../../../store/visualization/useDroppedO
 import RenameInput from "../../../components/ui/inputs/RenameInput";
 import { useParams } from "react-router-dom";
 import { getUserData } from "../../../functions/getUserData";
+import { useVersionContext } from "../../builder/version/versionContext";
 
 
 const Templates = () => {
   const { templates, removeTemplate, setTemplates } = useTemplateStore();
   const { setSelectedZone, selectedZone } = useSelectedZoneStore();
   const { visualizationSocket } = useSocketStore();
+  const { selectedVersionStore } = useVersionContext();
+  const { selectedVersion } = selectedVersionStore();
   const { projectId } = useParams();
   const { userName, userId, organization, email } = getUserData();
 
   useEffect(() => {
     async function templateData() {
       try {
-        let response = await getTemplateData(organization, projectId);
+        let response = await getTemplateData(organization, projectId, selectedVersion?.versionId || '');
         setTemplates(response);
       } catch (error) {
         echo.error("Failed to fetching template data");
@@ -28,7 +31,7 @@ const Templates = () => {
     }
 
     templateData();
-  }, []);
+  }, [selectedVersion?.versionId]);
 
   const handleDeleteTemplate = async (
     e: React.MouseEvent<HTMLButtonElement>,
@@ -40,7 +43,9 @@ const Templates = () => {
       let deleteTemplate = {
         organization,
         templateID: id,
-        userId, projectId
+        versionId: selectedVersion?.versionId || '',
+        userId, 
+        projectId
       };
       if (visualizationSocket) {
         visualizationSocket.emit(
@@ -64,7 +69,9 @@ const Templates = () => {
         organization,
         zoneUuid: selectedZone.zoneUuid,
         templateID: template.id,
-        projectId, userId
+        versionId: selectedVersion?.versionId || '',
+        projectId,
+        userId
       };
 
       if (visualizationSocket) {
diff --git a/app/src/modules/visualization/widgets/2d/DraggableWidget.tsx b/app/src/modules/visualization/widgets/2d/DraggableWidget.tsx
index dbdd554..4df1982 100644
--- a/app/src/modules/visualization/widgets/2d/DraggableWidget.tsx
+++ b/app/src/modules/visualization/widgets/2d/DraggableWidget.tsx
@@ -21,6 +21,7 @@ import { useParams } from "react-router-dom";
 import { useSocketStore } from "../../../../store/builder/store";
 import useChartStore from "../../../../store/visualization/useChartStore";
 import { getUserData } from "../../../../functions/getUserData";
+import { useVersionContext } from "../../../builder/version/versionContext";
 
 gsap.registerPlugin(Draggable);
 
@@ -63,8 +64,8 @@ export const DraggableWidget = forwardRef<HTMLDivElement, DraggableWidgetProps>(
   const { selectedChartId, setSelectedChartId } = useWidgetStore();
   const { measurements, duration, name } = useChartStore();
   const { userId, organization, email } = getUserData();
-
-
+  const { selectedVersionStore } = useVersionContext();
+  const { selectedVersion } = selectedVersionStore();
 
   const handleKebabClick = (event: React.MouseEvent<HTMLDivElement>) => {
     event.stopPropagation();
@@ -110,9 +111,10 @@ export const DraggableWidget = forwardRef<HTMLDivElement, DraggableWidgetProps>(
         zoneUuid: selectedZone.zoneUuid,
         widgetID: widget.id,
         organization: organization,
-        projectId, userId
+        versionId: selectedVersion?.versionId || '',
+        projectId,
+        userId
       };
-      console.log('deleteWidget: ', deleteWidget);
 
       if (visualizationSocket) {
         setSelectedChartId(null);
@@ -145,8 +147,6 @@ export const DraggableWidget = forwardRef<HTMLDivElement, DraggableWidgetProps>(
   };
   const duplicateWidget = async () => {
     try {
-
-
       const duplicatedWidget: Widget = {
         ...widget,
         title: name === "" ? widget.title : name,
@@ -161,7 +161,9 @@ export const DraggableWidget = forwardRef<HTMLDivElement, DraggableWidgetProps>(
         organization,
         zoneUuid: selectedZone.zoneUuid,
         widget: duplicatedWidget,
-        projectId, userId
+        versionId: selectedVersion?.versionId || '',
+        projectId,
+        userId
       };
 
       if (visualizationSocket) {
diff --git a/app/src/modules/visualization/widgets/2d/charts/BarGraphComponent.tsx b/app/src/modules/visualization/widgets/2d/charts/BarGraphComponent.tsx
index db351ed..cc3d922 100644
--- a/app/src/modules/visualization/widgets/2d/charts/BarGraphComponent.tsx
+++ b/app/src/modules/visualization/widgets/2d/charts/BarGraphComponent.tsx
@@ -10,7 +10,7 @@ import { useWidgetStore } from "../../../../../store/useWidgetStore";
 import useChartStore from "../../../../../store/visualization/useChartStore";
 import { useSelectedZoneStore } from "../../../../../store/visualization/useZoneStore";
 import { useParams } from "react-router-dom";
-import { getUserData } from "../../../../../functions/getUserData";
+import { useVersionContext } from "../../../../builder/version/versionContext";
 
 interface ChartComponentProps {
   id: string;
@@ -47,9 +47,9 @@ const BarGraphComponent = ({
   });
   const { selectedChartId } = useWidgetStore();
   const { selectedZone } = useSelectedZoneStore();
+  const { selectedVersionStore } = useVersionContext();
+  const { selectedVersion } = selectedVersionStore();
   const { projectId } = useParams();
-  const { userName, userId, organization, email } = getUserData();
-
 
   const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
   const defaultData = {
@@ -183,7 +183,7 @@ const BarGraphComponent = ({
     if (id !== "") {
       try {
         const response = await axios.get(
-          `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}`,
+          `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}&versionId=${selectedVersion?.versionId || ''}`,
           {
             headers: {
               Authorization: "Bearer <access_token>",
@@ -194,16 +194,16 @@ const BarGraphComponent = ({
           }
         );
         if (response.status === 200) {
-          
+
           setmeasurements(response.data.Datastructure.measurements);
           setDuration(response.data.Datastructure.duration);
           setName(response.data.widgetName);
         } else {
           echo.error("Failed to fetch saved inputs");
-          
+
         }
       } catch (error) {
-        
+
       }
     }
   };
diff --git a/app/src/modules/visualization/widgets/2d/charts/DoughnutGraphComponent.tsx b/app/src/modules/visualization/widgets/2d/charts/DoughnutGraphComponent.tsx
index 733257f..028ce95 100644
--- a/app/src/modules/visualization/widgets/2d/charts/DoughnutGraphComponent.tsx
+++ b/app/src/modules/visualization/widgets/2d/charts/DoughnutGraphComponent.tsx
@@ -9,6 +9,7 @@ import useChartStore from "../../../../../store/visualization/useChartStore";
 import { useParams } from "react-router-dom";
 import { useSelectedZoneStore } from "../../../../../store/visualization/useZoneStore";
 import { getUserData } from "../../../../../functions/getUserData";
+import { useVersionContext } from "../../../../builder/version/versionContext";
 
 interface ChartComponentProps {
   id: string;
@@ -39,7 +40,8 @@ const DoughnutGraphComponent = ({
   const { selectedChartId } = useWidgetStore();
   const { selectedZone } = useSelectedZoneStore();
   const { projectId } = useParams();
-
+  const { selectedVersionStore } = useVersionContext();
+  const { selectedVersion } = selectedVersionStore();
 
   const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
   const { userName, userId, organization, email } = getUserData();
@@ -164,7 +166,7 @@ const DoughnutGraphComponent = ({
     if (id !== "") {
       try {
         const response = await axios.get(
-          `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}`,
+          `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}&versionId=${selectedVersion?.versionId || ""}`,
           {
             headers: {
               Authorization: "Bearer <access_token>",
diff --git a/app/src/modules/visualization/widgets/2d/charts/LineGraphComponent.tsx b/app/src/modules/visualization/widgets/2d/charts/LineGraphComponent.tsx
index 54df722..ca57217 100644
--- a/app/src/modules/visualization/widgets/2d/charts/LineGraphComponent.tsx
+++ b/app/src/modules/visualization/widgets/2d/charts/LineGraphComponent.tsx
@@ -9,6 +9,7 @@ import { useWidgetStore } from "../../../../../store/useWidgetStore";
 import { useParams } from "react-router-dom";
 import { useSelectedZoneStore } from "../../../../../store/visualization/useZoneStore";
 import { getUserData } from "../../../../../functions/getUserData";
+import { useVersionContext } from "../../../../builder/version/versionContext";
 
 interface ChartComponentProps {
   id: string;
@@ -46,7 +47,8 @@ const LineGraphComponent = ({
   const { selectedChartId } = useWidgetStore();
   const { selectedZone } = useSelectedZoneStore();
   const { projectId } = useParams();
-
+  const { selectedVersionStore } = useVersionContext();
+  const { selectedVersion } = selectedVersionStore();
 
   const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
   const { userName, userId, organization, email } = getUserData();
@@ -181,7 +183,7 @@ const LineGraphComponent = ({
     if (id !== "") {
       try {
         const response = await axios.get(
-          `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}`,
+          `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}&versionId=${selectedVersion?.versionId || ""}`,
           {
             headers: {
               Authorization: "Bearer <access_token>",
diff --git a/app/src/modules/visualization/widgets/2d/charts/PieGraphComponent.tsx b/app/src/modules/visualization/widgets/2d/charts/PieGraphComponent.tsx
index 7b3d84d..10dbe56 100644
--- a/app/src/modules/visualization/widgets/2d/charts/PieGraphComponent.tsx
+++ b/app/src/modules/visualization/widgets/2d/charts/PieGraphComponent.tsx
@@ -9,6 +9,7 @@ import { useWidgetStore } from "../../../../../store/useWidgetStore";
 import { useSelectedZoneStore } from "../../../../../store/visualization/useZoneStore";
 import { useParams } from "react-router-dom";
 import { getUserData } from "../../../../../functions/getUserData";
+import { useVersionContext } from "../../../../builder/version/versionContext";
 
 interface ChartComponentProps {
   id: string;
@@ -46,6 +47,8 @@ const PieChartComponent = ({
   const { selectedChartId } = useWidgetStore();
   const { selectedZone } = useSelectedZoneStore();
   const { projectId } = useParams();
+  const { selectedVersionStore } = useVersionContext();
+  const { selectedVersion } = selectedVersionStore();
 
   const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
   const { userName, userId, organization, email } = getUserData();
@@ -180,7 +183,7 @@ const PieChartComponent = ({
     if (id !== "") {
       try {
         const response = await axios.get(
-          `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}`,
+          `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}&versionId=${selectedVersion?.versionId || ""}`,
           {
             headers: {
               Authorization: "Bearer <access_token>",
diff --git a/app/src/modules/visualization/widgets/2d/charts/PolarAreaGraphComponent.tsx b/app/src/modules/visualization/widgets/2d/charts/PolarAreaGraphComponent.tsx
index 8ec3ea9..0c40782 100644
--- a/app/src/modules/visualization/widgets/2d/charts/PolarAreaGraphComponent.tsx
+++ b/app/src/modules/visualization/widgets/2d/charts/PolarAreaGraphComponent.tsx
@@ -9,6 +9,7 @@ import { useWidgetStore } from "../../../../../store/useWidgetStore";
 import { useSelectedZoneStore } from "../../../../../store/visualization/useZoneStore";
 import { useParams } from "react-router-dom";
 import { getUserData } from "../../../../../functions/getUserData";
+import { useVersionContext } from "../../../../builder/version/versionContext";
 
 interface ChartComponentProps {
   id: string;
@@ -46,6 +47,8 @@ const PolarAreaGraphComponent = ({
   const { selectedChartId } = useWidgetStore();
   const { selectedZone } = useSelectedZoneStore();
   const { projectId } = useParams();
+  const { selectedVersionStore } = useVersionContext();
+  const { selectedVersion } = selectedVersionStore();
 
   const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
   const { userName, userId, organization, email } = getUserData();
@@ -180,7 +183,7 @@ const PolarAreaGraphComponent = ({
     if (id !== "") {
       try {
         const response = await axios.get(
-          `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}`,
+          `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}&versionId=${selectedVersion?.versionId || ""}`,
           {
             headers: {
               Authorization: "Bearer <access_token>",
diff --git a/app/src/modules/visualization/widgets/2d/charts/ProgressCard1.tsx b/app/src/modules/visualization/widgets/2d/charts/ProgressCard1.tsx
index d2cebb3..1a4159b 100644
--- a/app/src/modules/visualization/widgets/2d/charts/ProgressCard1.tsx
+++ b/app/src/modules/visualization/widgets/2d/charts/ProgressCard1.tsx
@@ -9,6 +9,7 @@ import { StockIncreseIcon } from "../../../../../components/icons/RealTimeVisula
 import { useSelectedZoneStore } from "../../../../../store/visualization/useZoneStore";
 import { useParams } from "react-router-dom";
 import { getUserData } from "../../../../../functions/getUserData";
+import { useVersionContext } from "../../../../builder/version/versionContext";
 
 const ProgressCard1 = ({ id, title }: { id: string; title: string }) => {
   const {
@@ -23,6 +24,8 @@ const ProgressCard1 = ({ id, title }: { id: string; title: string }) => {
   const { selectedChartId } = useWidgetStore();
   const { selectedZone } = useSelectedZoneStore();
   const { projectId } = useParams();
+  const { selectedVersionStore } = useVersionContext();
+  const { selectedVersion } = selectedVersionStore();
 
   const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
   const { userName, userId, organization, email } = getUserData();
@@ -60,7 +63,7 @@ const ProgressCard1 = ({ id, title }: { id: string; title: string }) => {
     if (id !== "") {
       try {
         const response = await axios.get(
-          `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}`,
+          `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}&versionId=${selectedVersion?.versionId || ""}`,
           {
             headers: {
               Authorization: "Bearer <access_token>",
diff --git a/app/src/modules/visualization/widgets/2d/charts/ProgressCard2.tsx b/app/src/modules/visualization/widgets/2d/charts/ProgressCard2.tsx
index de98c0a..c006438 100644
--- a/app/src/modules/visualization/widgets/2d/charts/ProgressCard2.tsx
+++ b/app/src/modules/visualization/widgets/2d/charts/ProgressCard2.tsx
@@ -9,6 +9,7 @@ import { StockIncreseIcon } from "../../../../../components/icons/RealTimeVisula
 import { useSelectedZoneStore } from "../../../../../store/visualization/useZoneStore";
 import { useParams } from "react-router-dom";
 import { getUserData } from "../../../../../functions/getUserData";
+import { useVersionContext } from "../../../../builder/version/versionContext";
 
 const ProgressCard2 = ({ id, title }: { id: string; title: string }) => {
   const {
@@ -24,6 +25,8 @@ const ProgressCard2 = ({ id, title }: { id: string; title: string }) => {
   const { selectedChartId } = useWidgetStore();
   const { selectedZone } = useSelectedZoneStore();
   const { projectId } = useParams();
+  const { selectedVersionStore } = useVersionContext();
+  const { selectedVersion } = selectedVersionStore();
 
   const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
   const { userName, userId, organization, email } = getUserData();
@@ -64,7 +67,7 @@ const ProgressCard2 = ({ id, title }: { id: string; title: string }) => {
     if (id !== "") {
       try {
         const response = await axios.get(
-          `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}`,
+          `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}&versionId=${selectedVersion?.versionId || ""}`,
           {
             headers: {
               Authorization: "Bearer <access_token>",
@@ -75,7 +78,7 @@ const ProgressCard2 = ({ id, title }: { id: string; title: string }) => {
           }
         );
         if (response.status === 200) {
-          
+
 
           setmeasurements(response.data.Datastructure.measurements);
           setDuration(response.data.Datastructure.duration);
diff --git a/app/src/modules/visualization/widgets/3d/Dropped3dWidget.tsx b/app/src/modules/visualization/widgets/3d/Dropped3dWidget.tsx
index ff25ebf..0d9fade 100644
--- a/app/src/modules/visualization/widgets/3d/Dropped3dWidget.tsx
+++ b/app/src/modules/visualization/widgets/3d/Dropped3dWidget.tsx
@@ -28,6 +28,7 @@ import { useWidgetStore } from "../../../../store/useWidgetStore";
 import useChartStore from "../../../../store/visualization/useChartStore";
 import { useParams } from "react-router-dom";
 import { getUserData } from "../../../../functions/getUserData";
+import { useVersionContext } from "../../../builder/version/versionContext";
 
 type WidgetData = {
   id: string;
@@ -47,8 +48,8 @@ export default function Dropped3dWidgets() {
   const { top, setTop } = useTopData();
   const { left, setLeft } = useLeftData();
   const { rightSelect, setRightSelect } = useRightSelected();
-  const { editWidgetOptions, setEditWidgetOptions } =useEditWidgetOptionsStore();
-  const {zoneWidgetData,setZoneWidgetData,addWidget,updateWidgetPosition,updateWidgetRotation,tempWidget,tempWidgetPosition,} = useZoneWidgetStore();
+  const { editWidgetOptions, setEditWidgetOptions } = useEditWidgetOptionsStore();
+  const { zoneWidgetData, setZoneWidgetData, addWidget, updateWidgetPosition, updateWidgetRotation, tempWidget, tempWidgetPosition, } = useZoneWidgetStore();
   const { setWidgets3D } = use3DWidget();
   const { visualizationSocket } = useSocketStore();
   const { rightClickSelected, setRightClickSelected } = useRightClickSelected();
@@ -63,6 +64,8 @@ export default function Dropped3dWidgets() {
   const [intersectcontextmenu, setintersectcontextmenu] = useState<number | undefined>();
   const [horizontalX, setHorizontalX] = useState<number | undefined>();
   const [horizontalZ, setHorizontalZ] = useState<number | undefined>();
+  const { selectedVersionStore } = useVersionContext();
+  const { selectedVersion } = selectedVersionStore();
 
   const activeZoneWidgets = zoneWidgetData[selectedZone.zoneUuid] || [];
   const { projectId } = useParams();
@@ -73,7 +76,7 @@ export default function Dropped3dWidgets() {
 
 
     async function get3dWidgetData() {
-      const result = await get3dWidgetZoneData(selectedZone.zoneUuid,organization, projectId);
+      const result = await get3dWidgetZoneData(selectedZone.zoneUuid, organization, projectId, selectedVersion?.versionId || '');
       setWidgets3D(result);
       if (result.length < 0) return;
 
@@ -88,7 +91,7 @@ export default function Dropped3dWidgets() {
     }
 
     get3dWidgetData();
-  }, [selectedZone.zoneUuid, activeModule]);
+  }, [selectedZone.zoneUuid, activeModule, selectedVersion?.versionId]);
 
   const createdWidgetRef = useRef<WidgetData | null>(null);
 
@@ -232,7 +235,9 @@ export default function Dropped3dWidgets() {
         organization,
         widget: newWidget,
         zoneUuid: selectedZone.zoneUuid,
-        projectId, userId
+        version: selectedVersion?.versionId || '',
+        projectId,
+        userId
       };
 
       if (visualizationSocket) {
@@ -289,7 +294,9 @@ export default function Dropped3dWidgets() {
           organization,
           widget: newWidget,
           zoneUuid: selectedZone.zoneUuid,
-          projectId, userId
+          versionId: selectedVersion?.versionId || '',
+          projectId,
+          userId
         };
         if (visualizationSocket) {
           visualizationSocket.emit("v1:viz-3D-widget:add", adding3dWidget);
@@ -311,7 +318,9 @@ export default function Dropped3dWidgets() {
             organization,
             id: rightClickSelected,
             zoneUuid: selectedZone.zoneUuid,
-            projectId, userId
+            versionId: selectedVersion?.versionId || '',
+            projectId,
+            userId
           };
 
           if (visualizationSocket) {
@@ -611,7 +620,9 @@ export default function Dropped3dWidgets() {
           zoneUuid: selectedzoneUuid,
           id: rightClickSelected,
           position: lastPosition,
-          projectId, userId
+          versionId: selectedVersion?.versionId || '',
+          projectId,
+          userId
         };
         if (visualizationSocket) {
           visualizationSocket.emit(
@@ -636,7 +647,9 @@ export default function Dropped3dWidgets() {
           zoneUuid: selectedzoneUuid,
           id: rightClickSelected,
           rotation: lastRotation,
-          projectId, userId
+          versionId: selectedVersion?.versionId || '',
+          projectId,
+          userId
         };
         if (visualizationSocket) {
           visualizationSocket.emit(
diff --git a/app/src/modules/visualization/widgets/floating/DroppedFloatingWidgets.tsx b/app/src/modules/visualization/widgets/floating/DroppedFloatingWidgets.tsx
index a78038d..3aba161 100644
--- a/app/src/modules/visualization/widgets/floating/DroppedFloatingWidgets.tsx
+++ b/app/src/modules/visualization/widgets/floating/DroppedFloatingWidgets.tsx
@@ -20,6 +20,7 @@ import { usePlayButtonStore } from "../../../../store/usePlayButtonStore";
 import { useSelectedZoneStore } from "../../../../store/visualization/useZoneStore";
 import { useParams } from "react-router-dom";
 import { getUserData } from "../../../../functions/getUserData";
+import { useVersionContext } from "../../../builder/version/versionContext";
 interface DraggingState {
   zone: string;
   index: number;
@@ -45,6 +46,8 @@ const DroppedObjects: React.FC = () => {
   const { visualizationSocket } = useSocketStore();
   const { isPlaying } = usePlayButtonStore();
   const zones = useDroppedObjectsStore((state) => state.zones);
+  const { selectedVersionStore } = useVersionContext();
+  const { selectedVersion } = selectedVersionStore();
   const { projectId } = useParams();
 
   const [openKebabId, setOpenKebabId] = useState<string | null>(null);
@@ -113,7 +116,7 @@ const DroppedObjects: React.FC = () => {
 
   function handleDuplicate(zoneName: string, index: number) {
     setOpenKebabId(null);
-    duplicateObject(zoneName, index, projectId); // Call the duplicateObject method from the store
+    duplicateObject(zoneName, index, projectId, selectedVersion?.versionId ||''); // Call the duplicateObject method from the store
     setSelectedChartId(null);
   }
 
@@ -125,7 +128,9 @@ const DroppedObjects: React.FC = () => {
         floatWidgetID: id,
         organization,
         zoneUuid: zone.zoneUuid,
-        userId, projectId
+        versionId: selectedVersion?.versionId || '',
+        userId, 
+        projectId
       };
 
       if (visualizationSocket) {
diff --git a/app/src/modules/visualization/widgets/panel/AddButtons.tsx b/app/src/modules/visualization/widgets/panel/AddButtons.tsx
index 63be875..b65143b 100644
--- a/app/src/modules/visualization/widgets/panel/AddButtons.tsx
+++ b/app/src/modules/visualization/widgets/panel/AddButtons.tsx
@@ -8,6 +8,7 @@ import { AddIcon } from "../../../../components/icons/ExportCommonIcons";
 import { useSocketStore } from "../../../../store/builder/store";
 import { useParams } from "react-router-dom";
 import { getUserData } from "../../../../functions/getUserData";
+import { useVersionContext } from "../../../builder/version/versionContext";
 
 // Define the type for `Side`
 type Side = "top" | "bottom" | "left" | "right";
@@ -72,7 +73,8 @@ const AddButtons: React.FC<ButtonsProps> = ({
   const { visualizationSocket } = useSocketStore();
   const { projectId } = useParams();
   const { userId, organization, email } = getUserData();
-
+  const { selectedVersionStore } = useVersionContext();
+  const { selectedVersion } = selectedVersionStore();
 
   // Function to toggle visibility of a panel
   const toggleVisibility = (side: Side) => {
@@ -114,7 +116,9 @@ const AddButtons: React.FC<ButtonsProps> = ({
       organization,
       lockedPanel: newLockedPanels,
       zoneUuid: selectedZone.zoneUuid,
-      userId, projectId
+      versionId: selectedVersion?.versionId || '',
+      projectId,
+      userId
     };
     if (visualizationSocket) {
       visualizationSocket.emit("v1:viz-panel:locked", lockedPanel);
@@ -139,7 +143,9 @@ const AddButtons: React.FC<ButtonsProps> = ({
       organization,
       panelName: side,
       zoneUuid: selectedZone.zoneUuid,
-      userId, projectId
+      versionId: selectedVersion?.versionId || '',
+      projectId,
+      userId,
     };
     if (visualizationSocket) {
       visualizationSocket.emit("v1:viz-panel:clear", clearPanel);
@@ -187,6 +193,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
           panelName: side,
           zoneUuid,
           projectId,
+          versionId: selectedVersion?.versionId || '',
           userId
         };
 
@@ -223,6 +230,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
           organization,
           zoneUuid,
           projectId,
+          versionId: selectedVersion?.versionId || '',
           userId,
           panelOrder: newActiveSides,
         };
diff --git a/app/src/modules/visualization/widgets/panel/Panel.tsx b/app/src/modules/visualization/widgets/panel/Panel.tsx
index a0a969d..d1bb12b 100644
--- a/app/src/modules/visualization/widgets/panel/Panel.tsx
+++ b/app/src/modules/visualization/widgets/panel/Panel.tsx
@@ -15,6 +15,7 @@ import { useParams } from "react-router-dom";
 import { arrayMove } from "@dnd-kit/sortable";
 import { clamp } from "three/src/math/MathUtils";
 import { getUserData } from "../../../../functions/getUserData";
+import { useVersionContext } from "../../../builder/version/versionContext";
 
 gsap.registerPlugin(Draggable);
 
@@ -83,7 +84,8 @@ const Panel: React.FC<PanelProps> = ({
   const { projectId } = useParams();
   const panelRefs = useRef<{ [side in Side]?: HTMLDivElement }>({});
   const { userId, organization, email } = getUserData();
-
+  const { selectedVersionStore } = useVersionContext();
+  const { selectedVersion } = selectedVersionStore();
 
   // function handleResize() {
   //   const canvas = document.getElementById("sceneCanvas");
@@ -366,6 +368,7 @@ const Panel: React.FC<PanelProps> = ({
       organization,
       zoneUuid: selectedZone.zoneUuid,
       widget: newWidget,
+      versionId: selectedVersion?.versionId || '',
       projectId,
       userId,
     };
diff --git a/app/src/modules/visualization/zone/DisplayZone.tsx b/app/src/modules/visualization/zone/DisplayZone.tsx
index fd91c5a..b817c1f 100644
--- a/app/src/modules/visualization/zone/DisplayZone.tsx
+++ b/app/src/modules/visualization/zone/DisplayZone.tsx
@@ -16,6 +16,7 @@ import { InfoIcon } from "../../../components/icons/ExportCommonIcons";
 import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
 import { useParams } from "react-router-dom";
 import { getUserData } from "../../../functions/getUserData";
+import { useVersionContext } from "../../builder/version/versionContext";
 
 // Define the type for `Side`
 type Side = "top" | "bottom" | "left" | "right";
@@ -94,6 +95,8 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
   const { isPlaying } = usePlayButtonStore();
   const { userName, userId, organization, email } = getUserData();
   const { setSelectedChartId } = useWidgetStore();
+  const { selectedVersionStore } = useVersionContext();
+  const { selectedVersion } = selectedVersionStore();
   const { projectId } = useParams();
   // Function to calculate overflow state
   const updateOverflowState = useCallback(() => {
@@ -176,9 +179,9 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
       }
       // setSelectedChartId(null);
 
-      let response = await getSelect2dZoneData(zoneUuid, organization, projectId);
+      let response = await getSelect2dZoneData(zoneUuid, organization, projectId, selectedVersion?.versionId || '');
       // console.log('response2d: ', response);
-      let res = await getFloatingZoneData(zoneUuid, organization, projectId);
+      let res = await getFloatingZoneData(zoneUuid, organization, projectId, selectedVersion?.versionId || '');
       // console.log("resFloating: ", res);
 
       setFloatingWidget(res);
diff --git a/app/src/services/visulization/zone/get3dWidgetData.ts b/app/src/services/visulization/zone/get3dWidgetData.ts
index 8478ae8..9097e1e 100644
--- a/app/src/services/visulization/zone/get3dWidgetData.ts
+++ b/app/src/services/visulization/zone/get3dWidgetData.ts
@@ -5,11 +5,12 @@ let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_UR
 export const get3dWidgetZoneData = async (
   zoneUuid?: string,
   organization?: string,
-  projectId?: string
+  projectId?: string,
+  versionId?: string
 ) => {
   try {
     const response = await fetch(
-      `${url_Backend_dwinzo}/api/V1/widget3d/data/${zoneUuid}/${projectId}`,
+      `${url_Backend_dwinzo}/api/V1/widget3d/data/${zoneUuid}/${projectId}/${versionId}`,
       {
         method: "GET",
         headers: {
diff --git a/app/src/services/visulization/zone/getFloatingData.ts b/app/src/services/visulization/zone/getFloatingData.ts
index e6bf8a6..cecbb17 100644
--- a/app/src/services/visulization/zone/getFloatingData.ts
+++ b/app/src/services/visulization/zone/getFloatingData.ts
@@ -3,11 +3,12 @@ let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_UR
 export const getFloatingZoneData = async (
   zoneUuid?: string,
   organization?: string,
-  projectId?: string
+  projectId?: string,
+  versionId?: string
 ) => {
   try {
     const response = await fetch(
-      `${url_Backend_dwinzo}/api/V1/floatWidgets/${zoneUuid}/${projectId}`,
+      `${url_Backend_dwinzo}/api/V1/floatWidgets/${zoneUuid}/${projectId}/${versionId}`,
       {
         method: "GET",
         headers: {
diff --git a/app/src/services/visulization/zone/getSelect2dZoneData.ts b/app/src/services/visulization/zone/getSelect2dZoneData.ts
index fcd2c1c..33e3100 100644
--- a/app/src/services/visulization/zone/getSelect2dZoneData.ts
+++ b/app/src/services/visulization/zone/getSelect2dZoneData.ts
@@ -1,10 +1,10 @@
 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 getSelect2dZoneData = async (zoneUuid?: string, organization?: string, projectId?: string) => {
+export const getSelect2dZoneData = async (zoneUuid?: string, organization?: string, projectId?: string, versionId?: string) => {
   try {
     const response = await fetch(
-      `${url_Backend_dwinzo}/api/V1/zones/panel/${projectId}/${zoneUuid}`,
+      `${url_Backend_dwinzo}/api/V1/zones/panel/${projectId}/${zoneUuid}/${versionId}`,
       {
         method: "GET",
         headers: {
diff --git a/app/src/services/visulization/zone/getTemplate.ts b/app/src/services/visulization/zone/getTemplate.ts
index 0d1e045..1cf630a 100644
--- a/app/src/services/visulization/zone/getTemplate.ts
+++ b/app/src/services/visulization/zone/getTemplate.ts
@@ -1,9 +1,9 @@
 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 getTemplateData = async (organization?: string, projectId?: string) => {
+export const getTemplateData = async (organization?: string, projectId?: string, versionId?: string) => {
   try {
     const response = await fetch(
-      `${url_Backend_dwinzo}/api/V1/template/data/${projectId}`,
+      `${url_Backend_dwinzo}/api/V1/template/data/${projectId}/${versionId}`,
       {
         method: "GET",
         headers: {
diff --git a/app/src/store/visualization/useDroppedObjectsStore.ts b/app/src/store/visualization/useDroppedObjectsStore.ts
index b8824c5..111032d 100644
--- a/app/src/store/visualization/useDroppedObjectsStore.ts
+++ b/app/src/store/visualization/useDroppedObjectsStore.ts
@@ -42,7 +42,8 @@ type DroppedObjectsState = {
   duplicateObject: (
     zoneName: string,
     index: number,
-    projectId?: string
+    projectId?: string,
+    versionId?: string
   ) => void; // Add this line
 };
 
@@ -101,10 +102,12 @@ export const useDroppedObjectsStore = create<DroppedObjectsState>((set) => ({
         },
       };
     }),
+
   duplicateObject: async (
     zoneName: string,
     index: number,
-    projectId?: string
+    projectId?: string,
+    versionId?: string
   ) => {
     const state = useDroppedObjectsStore.getState(); // Get the current state
     const zone = state.zones[zoneName];
@@ -149,6 +152,7 @@ export const useDroppedObjectsStore = create<DroppedObjectsState>((set) => ({
       widget: duplicatedObject,
       zoneUuid: zone.zoneUuid,
       index: index,
+      versionId,
       projectId,
       userId,
     };