diff --git a/app/src/components/icons/ExportCommonIcons.tsx b/app/src/components/icons/ExportCommonIcons.tsx
index 0bcb78c..b259666 100644
--- a/app/src/components/icons/ExportCommonIcons.tsx
+++ b/app/src/components/icons/ExportCommonIcons.tsx
@@ -1058,9 +1058,6 @@ export const SaveIcon = () => {
   );
 };
 
-
-
-
 export const SaveVersionIcon = () => {
   return (
     <svg
@@ -1070,10 +1067,12 @@ export const SaveVersionIcon = () => {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <foreignObject x="-38.7816" y="-60.596" width="261.775" height="235.114">
-        
-        
-      </foreignObject>
+      <foreignObject
+        x="-38.7816"
+        y="-60.596"
+        width="261.775"
+        height="235.114"
+      ></foreignObject>
       <rect
         data-figma-bg-blur-radius="60.596"
         x="22.4204"
@@ -1226,3 +1225,57 @@ export const SaveVersionIcon = () => {
     </svg>
   );
 };
+
+export const RenameVersionIcon = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12.7995 4.19826L18.9416 7.44492C19.8527 7.92654 19.8527 9.23161 18.9416 9.71322L17.8513 10.2896L18.9416 10.8658C19.8527 11.3475 19.8527 12.6526 18.9416 13.1342L17.8513 13.7105L18.9416 14.2868C19.8527 14.7684 19.8527 16.0735 18.9416 16.5551L12.7995 19.8017C12.2995 20.0661 11.701 20.0661 11.2008 19.8017L5.05883 16.5551C4.1477 16.0735 4.14771 14.7684 5.05883 14.2868L6.14911 13.7105L5.05883 13.1342C4.1477 12.6526 4.14771 11.3475 5.05883 10.8658L6.14911 10.2896L5.05883 9.71322C4.14771 9.2316 4.14771 7.92654 5.05883 7.44492L11.2008 4.19826C11.701 3.93391 12.2995 3.93391 12.7995 4.19826ZM16.0212 14.6779L12.7995 16.3808C12.2995 16.6452 11.701 16.6452 11.2008 16.3808L7.97918 14.6779L6.57338 15.421L12.0002 18.2895L17.427 15.421L16.0212 14.6779ZM16.0212 11.2569L12.7995 12.9599C12.3449 13.2002 11.809 13.222 11.3395 13.0254L11.2008 12.9599L7.97918 11.2569L6.57338 12L12.0002 14.8686L17.427 12L16.0212 11.2569ZM12.0002 5.71047L6.57338 8.57907L12.0002 11.4476L17.427 8.57907L12.0002 5.71047Z"
+        fill="var(--text-color)"
+      />
+    </svg>
+  );
+};
+
+export const FinishEditIcon = () => {
+  return (
+    <svg
+      width="61"
+      height="60"
+      viewBox="0 0 61 60"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M30.5 52C18.3688 52 8.5 42.1307 8.5 30C8.5 17.8693 18.3688 8 30.5 8C42.6312 8 52.5 17.8693 52.5 30C52.5 42.1307 42.6312 52 30.5 52Z"
+        fill="#D7EBFF"
+      />
+      <path
+        d="M52.5 30C52.5 17.8693 42.6312 8 30.5 8V52C42.6312 52 52.5 42.1307 52.5 30Z"
+        fill="#C4E2FF"
+      />
+      <path
+        d="M30.4996 49.1281C19.9508 49.1281 11.3691 40.5461 11.3691 29.9977C11.3691 19.4493 19.9508 10.8672 30.4996 10.8672C41.0484 10.8672 49.6301 19.4493 49.6301 29.9977C49.6301 40.546 41.0484 49.1281 30.4996 49.1281Z"
+        fill="#88CC2A"
+      />
+      <path
+        d="M49.6305 29.9977C49.6305 19.4493 41.0488 10.8672 30.5 10.8672V49.128C41.0488 49.1281 49.6305 40.546 49.6305 29.9977Z"
+        fill="#7FB335"
+      />
+      <path
+        d="M28.5872 38.605C27.8529 38.605 27.1187 38.3247 26.5583 37.7642L20.6454 31.8514C19.5244 30.7309 19.5244 28.9141 20.6454 27.7936C21.7664 26.6726 23.5822 26.6726 24.7032 27.7936L28.5872 31.6771L36.7755 23.4892C37.8964 22.3682 39.7123 22.3682 40.8333 23.4892C41.9542 24.6096 41.9542 26.4264 40.8333 27.547L30.6161 37.7642C30.0557 38.3247 29.3214 38.605 28.5872 38.605Z"
+        fill="white"
+      />
+      <path
+        d="M36.7752 23.497L30.5 29.7719V37.8665C30.5374 37.8327 30.5797 37.808 30.6158 37.7719L40.833 27.5547C41.954 26.4342 41.954 24.6174 40.833 23.4969C39.7122 22.376 37.8962 22.376 36.7752 23.497Z"
+        fill="#EDF0F2"
+      />
+    </svg>
+  );
+};
diff --git a/app/src/components/layout/sidebarRight/versionHisory/VersionHistory.tsx b/app/src/components/layout/sidebarRight/versionHisory/VersionHistory.tsx
index 20f0900..cc11c57 100644
--- a/app/src/components/layout/sidebarRight/versionHisory/VersionHistory.tsx
+++ b/app/src/components/layout/sidebarRight/versionHisory/VersionHistory.tsx
@@ -8,18 +8,19 @@ import {
 } from "../../../icons/ExportCommonIcons";
 import RenameInput from "../../../ui/inputs/RenameInput";
 import { useVersionStore } from "../../../../store/builder/store";
+import { generateUniqueId } from "../../../../functions/generateUniqueId";
 
 const VersionHistory = () => {
   const userName = localStorage.getItem("userName") ?? "Anonymous";
-
-  const { versions, addVersion, setVersions } = useVersionStore();
+  const { versions, addVersion, setVersions, updateVersion } =
+    useVersionStore();
   const [selectedVersion, setSelectedVersion] = useState(
     versions.length > 0 ? versions[0] : null
   );
 
   const addNewVersion = () => {
     const newVersion = {
-      id: crypto.randomUUID(),
+      id: generateUniqueId(),
       versionLabel: `v${versions.length + 1}.0`,
       versionName: "",
       timestamp: new Date().toLocaleDateString("en-US", {
@@ -33,23 +34,21 @@ const VersionHistory = () => {
     const newVersions = [newVersion, ...versions];
     addVersion(newVersion);
     setSelectedVersion(newVersion);
-    setVersions(newVersions); // bring new one to top
+    setVersions(newVersions);
   };
 
   const handleSelectVersion = (version: any) => {
     setSelectedVersion(version);
-
-    // Move selected version to top, keep others in same order
     const reordered = [version, ...versions.filter((v) => v.id !== version.id)];
     setVersions(reordered);
   };
 
-  const handleTimestampChange = (newTimestamp: string, index: number) => {
-    const updated = [...versions];
-    updated[index].timestamp = newTimestamp;
-
-    console.warn("Timestamp updated locally but not persisted in store.");
-    setVersions(updated); // Optional: persist timestamp change
+  const handleVersionNameChange = (newName: string, versionId: string) => {
+    const updated = versions.map((v) =>
+      v.id === versionId ? { ...v, versionName: newName } : v
+    );
+    setVersions(updated);
+    updateVersion(versionId, { versionName: newName });
   };
 
   return (
@@ -99,28 +98,36 @@ const VersionHistory = () => {
         </div>
       )}
 
-      {/* Versions List or No Versions Message */}
+      {/* Versions List */}
       <div className="saved-versions-list">
         {versions.length === 0 ? (
           <div className="no-versions-message">No saved versions</div>
         ) : (
-          versions.map((version, index) => (
+          versions.map((version) => (
             <button
               key={version.id}
               className="saved-version"
-              id={`${version.versionName}-${index}`}
               onClick={() => handleSelectVersion(version)}
             >
               <div className="version-name">{version.versionLabel}</div>
               <div className="version-details">
                 <div className="details">
                   <span className="timestamp">
-                    <RenameInput
-                      value={version.timestamp}
-                      onRename={(newTimestamp) =>
-                        handleTimestampChange(newTimestamp, index)
-                      }
-                    />
+                    {version.versionName ? (
+                      <RenameInput
+                        value={version.versionName}
+                        onRename={(newName) =>
+                          handleVersionNameChange(newName, version.id)
+                        }
+                      />
+                    ) : (
+                      <RenameInput
+                        value={version.timestamp}
+                        onRename={(newName) =>
+                          handleVersionNameChange(newName, version.id)
+                        }
+                      />
+                    )}
                   </span>
                   <span className="saved-by">
                     <div className="user-profile">{version.savedBy[0]}</div>
diff --git a/app/src/components/layout/sidebarRight/versionHisory/VersionSaved.tsx b/app/src/components/layout/sidebarRight/versionHisory/VersionSaved.tsx
index fb998fa..07f62d2 100644
--- a/app/src/components/layout/sidebarRight/versionHisory/VersionSaved.tsx
+++ b/app/src/components/layout/sidebarRight/versionHisory/VersionSaved.tsx
@@ -2,10 +2,11 @@ import React, { useState, useEffect, useRef } from "react";
 import { useVersionStore } from "../../../../store/builder/store";
 import {
   CloseIcon,
+  FinishEditIcon,
+  RenameVersionIcon,
   SaveIcon,
   SaveVersionIcon,
 } from "../../../icons/ExportCommonIcons";
-import { RenameIcon } from "../../../icons/ContextMenuIcons";
 import RenderOverlay from "../../../templates/Overlay";
 
 const VersionSaved = () => {
@@ -15,28 +16,28 @@ const VersionSaved = () => {
   const [showNotification, setShowNotification] = useState(false);
   const [newName, setNewName] = useState("");
   const [description, setDescription] = useState("");
+  const [showEditedFinish, setShowEditedFinish] = useState(false);
+  const [editedVersionName, setEditedVersionName] = useState("");
   const prevVersionCount = useRef(versions.length);
   const dismissTimerRef = useRef<NodeJS.Timeout | null>(null);
 
   const latestVersion = versions?.[0];
 
-  // Clear dismiss timer when component unmounts
   useEffect(() => {
     return () => {
       if (dismissTimerRef.current) clearTimeout(dismissTimerRef.current);
     };
   }, []);
 
-  // Handle new version notification and setup dismiss timer
   useEffect(() => {
-    if (versions.length > prevVersionCount.current) {
+    if (versions.length > prevVersionCount.current && latestVersion) {
       setShowNotification(true);
       setShouldDismiss(false);
       setIsEditing(false);
-      setNewName(versions[0].versionName ?? "");
-      setDescription(versions[0]?.description ?? "");
+      setNewName(latestVersion.versionName ?? "");
+      setDescription(latestVersion.description ?? "");
+      setEditedVersionName(latestVersion.versionName ?? ""); // Initialize editedVersionName
 
-      // Only start dismiss timer if not in edit mode
       if (!isEditing) {
         startDismissTimer();
       }
@@ -45,18 +46,15 @@ const VersionSaved = () => {
     } else if (versions.length < prevVersionCount.current) {
       prevVersionCount.current = versions.length;
     }
-  }, [versions, isEditing]);
+  }, [versions, isEditing, latestVersion]);
 
-  // Start or restart the dismiss timer
   const startDismissTimer = (delay = 5000) => {
     if (dismissTimerRef.current) clearTimeout(dismissTimerRef.current);
     dismissTimerRef.current = setTimeout(() => {
-      console.log("isEditing: ", isEditing);
       setShouldDismiss(true);
     }, delay);
   };
 
-  // Hide notification after dismiss animation delay
   useEffect(() => {
     if (shouldDismiss) {
       const timer = setTimeout(() => setShowNotification(false), 200);
@@ -65,11 +63,11 @@ const VersionSaved = () => {
   }, [shouldDismiss]);
 
   const handleEditName = () => {
-    setIsEditing(true);
-    setNewName(latestVersion?.versionName ?? "");
-    setDescription(latestVersion?.description ?? "");
+    if (!latestVersion) return;
 
-    // Clear any existing dismiss timer when editing starts
+    setIsEditing(true);
+    setNewName(latestVersion.versionName ?? "");
+    setDescription(latestVersion.description ?? "");
     if (dismissTimerRef.current) {
       clearTimeout(dismissTimerRef.current);
       dismissTimerRef.current = null;
@@ -77,21 +75,29 @@ const VersionSaved = () => {
   };
 
   const handleFinishEdit = () => {
-    if (latestVersion) {
-      updateVersion(latestVersion.id, {
-        versionName: newName,
-        description,
-      });
-      console.log("saved");
-      startDismissTimer(); // Restart 5s timer after save
-    }
-    startDismissTimer(); // Restart 5s timer after save
+    if (!latestVersion) return;
+
+    const updatedName =
+      (newName.trim() || latestVersion.versionName) ?? latestVersion.timestamp;
+    updateVersion(latestVersion.id, {
+      versionName: updatedName,
+      description,
+    });
+
+    setEditedVersionName(updatedName);
     setIsEditing(false);
+    setShowEditedFinish(true);
+
+    setTimeout(() => {
+      setShowEditedFinish(false);
+    }, 5000);
+
+    startDismissTimer();
   };
 
   const handleCancel = () => {
     setIsEditing(false);
-    startDismissTimer(); // Restart 5s timer after cancel
+    startDismissTimer();
   };
 
   const handleClose = () => {
@@ -103,35 +109,39 @@ const VersionSaved = () => {
 
   return (
     <div className={`versionSaved ${shouldDismiss ? "dismissing" : ""}`}>
-      <div className="version-header">
-        <div className="header-wrapper">
-          <div className="icon">
-            <SaveIcon />
+      {!isEditing && !showEditedFinish && (
+        <div className="versionSaved-wrapper">
+          <div className="version-header">
+            <div className="header-wrapper">
+              <div className="icon">
+                <SaveIcon />
+              </div>
+              <span>Saved New Version</span>
+            </div>
+            <button className="close-btn" onClick={handleClose}>
+              <CloseIcon />
+            </button>
           </div>
-          <span>Saved New Version</span>
-        </div>
-        <button className="close-btn" onClick={handleClose}>
-          <CloseIcon />
-        </button>
-      </div>
 
-      <div className="version-details">
-        <SaveVersionIcon />
-        <div className="details">
-          <div className="details-wrapper">
-            New Version Created {latestVersion.versionLabel}{" "}
-            {latestVersion.timestamp.toUpperCase()}
+          <div className="version-details">
+            <SaveVersionIcon />
+            <div className="details">
+              <div className="details-wrapper">
+                New Version Created {latestVersion.versionLabel}{" "}
+                {latestVersion.timestamp.toUpperCase()}
+              </div>
+              <button onClick={handleEditName}>Edit name</button>
+            </div>
           </div>
-          <button onClick={handleEditName}>Edit name</button>
         </div>
-      </div>
+      )}
 
       {isEditing && (
         <RenderOverlay>
           <div className="edit-version-popup-wrapper">
             <div className="details-wrapper-popup-container">
               <div className="header-wrapper">
-                <RenameIcon />
+                <RenameVersionIcon />
                 <div className="label">Rename Version</div>
               </div>
               <div className="details-wrapper">
@@ -154,16 +164,11 @@ const VersionSaved = () => {
                   </div>
                 </div>
                 <div className="version-description">
-                  {/* <input
-                    type="text"
-                    value={description}
-                    onChange={(e) => setDescription(e.target.value)}
-                    placeholder="Add description"
-                  /> */}
                   <textarea
                     value={description}
                     onChange={(e) => setDescription(e.target.value)}
                     placeholder="Add description"
+                    style={{ resize: "none" }}
                   />
                 </div>
               </div>
@@ -179,6 +184,22 @@ const VersionSaved = () => {
           </div>
         </RenderOverlay>
       )}
+
+      {showEditedFinish && (
+        <RenderOverlay>
+          <div className="finishEdit-version-popup-wrapper">
+            <div className="finishEdit-wrapper-popup-container">
+              <div className="icon">
+                <FinishEditIcon />
+              </div>
+              <div className="versionname">
+                {editedVersionName || latestVersion.versionName}
+              </div>
+              <div className="success-message">Saved Successfully!</div>
+            </div>
+          </div>
+        </RenderOverlay>
+      )}
     </div>
   );
 };
diff --git a/app/src/components/ui/compareVersion/CompareLayOut.tsx b/app/src/components/ui/compareVersion/CompareLayOut.tsx
index 5f85029..193dfb2 100644
--- a/app/src/components/ui/compareVersion/CompareLayOut.tsx
+++ b/app/src/components/ui/compareVersion/CompareLayOut.tsx
@@ -8,6 +8,7 @@ import { useSaveVersion } from "../../../store/builder/store";
 import Search from "../inputs/Search";
 import OuterClick from "../../../utils/outerClick";
 import RegularDropDown from "../inputs/RegularDropDown";
+import { useProductStore } from "../../../store/simulation/useProductStore";
 
 interface Layout {
   id: number;
@@ -18,6 +19,8 @@ interface CompareLayoutProps {
 }
 
 const CompareLayOut: React.FC<CompareLayoutProps> = ({ dummyLayouts }) => {
+  const { products } = useProductStore();
+  console.log('products: ', products);
   const [width, setWidth] = useState("50vw");
   const [isResizing, setIsResizing] = useState(false);
   const [showLayoutDropdown, setShowLayoutDropdown] = useState(false);
@@ -141,17 +144,17 @@ const CompareLayOut: React.FC<CompareLayoutProps> = ({ dummyLayouts }) => {
                   <div className="header">Layouts</div>
                   <Search onChange={() => {}} />
                   <div className="layouts-container">
-                    {dummyLayouts.map((layout) => (
+                    {products.map((layout) => (
                       <button
-                        key={layout.id}
+                        key={layout.productId}
                         className="layout-wrapper"
                         onClick={() => {
-                          handleSelectLayout(layout.name);
+                          handleSelectLayout(layout.productName);
                           setShowLayoutDropdown(false);
                         }}
                       >
                         <LayoutIcon />
-                        <div className="layout">{layout.name}</div>
+                        <div className="layout">{layout.productName}</div>
                       </button>
                     ))}
                   </div>
@@ -165,7 +168,7 @@ const CompareLayOut: React.FC<CompareLayoutProps> = ({ dummyLayouts }) => {
           <div className="selectLayout-wrapper">
             <RegularDropDown
               header={selectedLayout}
-              options={dummyLayouts.map((l) => l.name)} // Pass layout names as options
+              options={products.map((l) => l.productName)} // Pass layout names as options
               onSelect={handleSelectLayout}
               search={false}
             />
diff --git a/app/src/components/ui/menu/menu.tsx b/app/src/components/ui/menu/menu.tsx
index d4f7989..5f3349a 100644
--- a/app/src/components/ui/menu/menu.tsx
+++ b/app/src/components/ui/menu/menu.tsx
@@ -7,6 +7,7 @@ import useVersionHistoryStore, {
   useVersionStore,
 } from "../../../store/builder/store";
 import { useSubModuleStore } from "../../../store/useModuleStore";
+import { generateUniqueId } from "../../../functions/generateUniqueId";
 
 interface MenuBarProps {
   setOpenMenu: (isOpen: boolean) => void;
@@ -69,7 +70,7 @@ const MenuBar: React.FC<MenuBarProps> = ({ setOpenMenu }) => {
           const versionCount = versionStore.versions.length;
 
           const newVersion = {
-            id: crypto.randomUUID(),
+            id: generateUniqueId(),
             versionLabel: `v${versionCount + 1}.0`,
             timestamp: `${new Date().toLocaleTimeString("en-US", {
               hour: "numeric",
diff --git a/app/src/pages/Project.tsx b/app/src/pages/Project.tsx
index 8419e13..bc27c27 100644
--- a/app/src/pages/Project.tsx
+++ b/app/src/pages/Project.tsx
@@ -37,7 +37,8 @@ import CompareLayOut from "../components/ui/compareVersion/CompareLayOut";
 import useToggleStore from "../store/useUIToggleStore";
 import RegularDropDown from "../components/ui/inputs/RegularDropDown";
 import VersionSaved from "../components/layout/sidebarRight/versionHisory/VersionSaved";
-import SimulationPlayer from "../components/ui/simulation/simulationPlayer";
+import SimulationPlayer from "../components/ui/simulation/SimulationPlayer";
+import { useProductStore } from "../store/simulation/useProductStore";
 
 const Project: React.FC = () => {
   let navigate = useNavigate();
@@ -52,6 +53,7 @@ const Project: React.FC = () => {
   const { setWallItems } = useWallItems();
   const { setZones } = useZones();
   const { isVersionSaved } = useSaveVersion();
+  const { products } = useProductStore();
 
   useEffect(() => {
     if (!isVersionSaved) {
@@ -171,7 +173,7 @@ const Project: React.FC = () => {
           <div className="initial-selectLayout-wrapper">
             <RegularDropDown
               header={selectedLayout ?? "Layout 1"}
-              options={dummyLayouts.map((l) => l.name)} // Pass layout names as options
+              options={products.map((l) => l.productName)} // Pass layout names as options
               onSelect={handleSelectLayout}
               search={false}
             />
diff --git a/app/src/styles/layout/compareLayout.scss b/app/src/styles/layout/compareLayout.scss
index bc4fc18..bee1ab8 100644
--- a/app/src/styles/layout/compareLayout.scss
+++ b/app/src/styles/layout/compareLayout.scss
@@ -6,6 +6,10 @@
     top: 100px;
     left: 40px;
     z-index: 10;
+
+    .regularDropdown-container {
+        background: var(--background-color);
+    }
 }
 
 .compareLayOut-wrapper {
@@ -28,6 +32,10 @@
         position: absolute;
         top: 100px;
         right: 40px;
+
+        .regularDropdown-container {
+            background: var(--background-color);
+        }
     }
 
     .chooseLayout-container {
@@ -158,11 +166,16 @@
                             background-color: var(--highlight-text-color) !important;
                             border-radius: 4px;
 
+                            .layout {
+                                color: var(--text-button-color) !important;
+
+                            }
+
                             svg {
 
                                 path {
 
-                                    fill: var(--background-color-accent);
+                                    fill: var(--text-button-color) !important;
                                 }
                             }
 
diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss
index 3a2dd11..7b6ea7f 100644
--- a/app/src/styles/layout/sidebar.scss
+++ b/app/src/styles/layout/sidebar.scss
@@ -1749,14 +1749,18 @@
   bottom: 45px;
   right: 10px;
   z-index: 10;
-  background: var(--background-color);
-  backdrop-filter: blur(20px);
-  border-radius: 20px;
-  padding: 8px 10px;
   display: flex;
   flex-direction: column;
   gap: 18px;
 
+  .versionSaved-wrapper {
+    border-radius: 20px;
+
+    padding: 8px 10px;
+    background: var(--background-color);
+    backdrop-filter: blur(20px);
+  }
+
   .version-header {
     display: flex;
     justify-content: space-between;
@@ -1820,7 +1824,8 @@
   display: none;
 }
 
-.edit-version-popup-wrapper {
+.edit-version-popup-wrapper,
+.finishEdit-version-popup-wrapper {
 
 
   height: 100vh;
@@ -1828,14 +1833,14 @@
   background: var(--background-color-secondary);
   @include flex-center;
 
-  .details-wrapper-popup-container {
+  .details-wrapper-popup-container,
+  .finishEdit-wrapper-popup-container {
     min-width: 535px;
     width: 520px;
     background: var(--background-color);
     border-radius: #{$border-radius-large};
     backdrop-filter: blur(15px);
     outline: 1px solid var(--border-color);
-    padding: 6px;
 
     display: flex;
     flex-direction: column;
@@ -1844,6 +1849,7 @@
 
     .header-wrapper {
       display: flex;
+      align-items: center;
       gap: 6px;
     }
 
@@ -1912,4 +1918,19 @@
       }
     }
   }
+
+  .finishEdit-wrapper-popup-container {
+    min-height: 250px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 12px;
+
+    .versionname {
+      font-size: var(--font-size-large);
+      color: var(--background-color-accent);
+      color: #CCACFF;
+      text-transform: capitalize;
+    }
+  }
 }
\ No newline at end of file