diff --git a/app/src/components/footer/shortcutHelper.tsx b/app/src/components/footer/shortcutHelper.tsx
index afbaa0e..230dff2 100644
--- a/app/src/components/footer/shortcutHelper.tsx
+++ b/app/src/components/footer/shortcutHelper.tsx
@@ -55,6 +55,7 @@ interface ShortcutHelperProps {
 const ShortcutHelper: React.FC<ShortcutHelperProps> = ({
   setShowShortcuts,
 }) => {
+
   const shortcuts: ShortcutGroup[] = [
     // Essential
     {
@@ -310,6 +311,7 @@ const ShortcutHelper: React.FC<ShortcutHelperProps> = ({
       >
         <CloseIcon />
       </button>
+      
       <div className="header">
         <div className="header-wrapper">
           {shortcuts.map((group) => (
@@ -326,9 +328,8 @@ const ShortcutHelper: React.FC<ShortcutHelperProps> = ({
       </div>
 
       <div
-        className={`shortcut-wrapper ${
-          activeShortcuts.length === 1 ? "single-item" : ""
-        }`}
+        className={`shortcut-wrapper ${activeShortcuts.length === 1 ? "single-item" : ""
+          }`}
       >
         {activeShortcuts.map((item) => (
           <div
diff --git a/app/src/components/layout/scenes/MainScene.tsx b/app/src/components/layout/scenes/MainScene.tsx
index f5e0c72..350c9e9 100644
--- a/app/src/components/layout/scenes/MainScene.tsx
+++ b/app/src/components/layout/scenes/MainScene.tsx
@@ -212,7 +212,11 @@ function MainScene() {
       {activeModule !== "market" && !selectedUser && <Footer />}
 
       <VersionSaved />
-      {(commentPositionState !== null || selectedComment !== null) && <ThreadChat />}
+
+      {
+        (commentPositionState !== null || selectedComment !== null) &&
+        <ThreadChat />
+      }
 
     </>
   );
diff --git a/app/src/components/layout/sidebarRight/properties/AssetProperties.tsx b/app/src/components/layout/sidebarRight/properties/AssetProperties.tsx
index 4f76584..a62abda 100644
--- a/app/src/components/layout/sidebarRight/properties/AssetProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/AssetProperties.tsx
@@ -78,8 +78,8 @@ const AssetProperties: React.FC = () => {
 
       <section>
         <div className="header">User Data</div>
-        {userData.map((data) => (
-          <div className="input-container">
+        {userData.map((data, i) => (
+          <div className="input-container" key={i}>
             <InputWithDropDown
               key={data.id}
               label={data.label}
@@ -103,9 +103,16 @@ const AssetProperties: React.FC = () => {
       </section>
       <div className="header">Animations</div>
       <section className="animations-lists">
-        {assets.map((asset) => {
+        {assets.map((asset, i) => {
           if (asset.modelUuid !== selectedFloorItem.uuid || !asset.animations)
-            return null;
+            return (
+              i === 0 && (
+                <div className="no-animation">
+                  Looks like there are no preset animations yet. Stay tuned for
+                  future additions!
+                </div>
+              )
+            );
 
           return asset.animations.map((animation, index) => (
             <div key={index} className="animations-list-wrapper">
diff --git a/app/src/components/layout/sidebarRight/resourceManagement/ResourceManagement.tsx b/app/src/components/layout/sidebarRight/resourceManagement/ResourceManagement.tsx
index 3b0df8a..e5c0442 100644
--- a/app/src/components/layout/sidebarRight/resourceManagement/ResourceManagement.tsx
+++ b/app/src/components/layout/sidebarRight/resourceManagement/ResourceManagement.tsx
@@ -30,14 +30,6 @@ const ResourceManagement = () => {
 
             <div className="search-container">
                 <Search onChange={() => { }} />
-                <div className="select-catagory">
-                    <RegularDropDown
-                        header={"floor"}
-                        options={["floor"]} // Pass layout names as options
-                        onSelect={() => { }}
-                        search={false}
-                    />
-                </div>
             </div>
 
             {selectType === "assetManagement" ? <AssetManagement /> : <Hrm />}
diff --git a/app/src/components/layout/sidebarRight/resourceManagement/hrm/Hrm.tsx b/app/src/components/layout/sidebarRight/resourceManagement/hrm/Hrm.tsx
index 2aeacc2..99828ae 100644
--- a/app/src/components/layout/sidebarRight/resourceManagement/hrm/Hrm.tsx
+++ b/app/src/components/layout/sidebarRight/resourceManagement/hrm/Hrm.tsx
@@ -1,96 +1,165 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { ClockThreeIcon, LocationPinIcon, TargetIcon } from '../../../../icons/ExportCommonIcons'
+import { useSceneContext } from '../../../../../modules/scene/sceneContext';
+import { useProductContext } from '../../../../../modules/simulation/products/productContext';
+import RenameInput from '../../../../ui/inputs/RenameInput';
+import { useResourceManagementId } from '../../../../../store/builder/store';
+import { set } from 'immer/dist/internal';
 // import NavigateCatagory from '../NavigateCatagory'
 
 const Hrm = () => {
     const [selectedCard, setSelectedCard] = useState(0);
+    const [workers, setWorkers] = useState<any[]>([]);
 
-    const employee_details = [
-        {
-            "employee": {
-                image: "",
-                "name": "John Doe",
-                "employee_id": "HR-204",
-                "status": "Active",
+    const { productStore } = useSceneContext();
+    const { products, getProductById } = productStore();
+    const { selectedProductStore } = useProductContext();
+    const { selectedProduct } = selectedProductStore();
+    const { setResourceManagementId } = useResourceManagementId();
 
-            },
-            "task": {
-                "status": "Ongoing",
-                "title": "Inspecting Machine X",
-                "location": {
-                    "floor": 4,
-                    "zone": "B"
-                },
-                "planned_time_hours": 6,
-                "time_spent_hours": 2,
-                "total_tasks": 12,
-                "completed_tasks": 3
-            },
-            "actions": [
-                "Assign Task",
-                "Reassign Task",
-                "Pause",
-                "Emergency Stop"
-            ],
-            "location": "Floor 4 . Zone B"
-        },
-        {
-            "employee": {
-                image: "",
-                "name": "Alice Smith",
-                "employee_id": "HR-205",
-                "status": "Active",
+    useEffect(() => {
+        if (selectedProduct) {
+            const productDetails = getProductById(selectedProduct.productUuid);
+            const workerDetails = productDetails?.eventDatas || [];
 
-            },
-            "task": {
-                "status": "Ongoing",
-                "title": "Calibrating Sensor Y",
-                "location": {
-                    "floor": 2,
-                    "zone": "A"
-                },
-                "planned_time_hours": 4,
-                "time_spent_hours": 1.5,
-                "total_tasks": 10,
-                "completed_tasks": 2
-            },
-            "actions": [
-                "Assign Task",
-                "Reassign Task",
-                "Pause",
-                "Emergency Stop"
-            ],
-            "location": "Floor 4 . Zone B"
-        },
-        {
-            "employee": {
-                image: "",
-                "name": "Michael Lee",
-                "employee_id": "HR-206",
-                "status": "Active",
+            const formattedWorkers = workerDetails
+                .filter((worker: any) => worker.type === "human")
+                .map((worker: any, index: number) => ({
+                    employee: {
+                        image: "",
+                        name: worker.modelName,
+                        modelId: worker.modelUuid,
+                        employee_id: `HR-${204 + index}`,
+                        status: "Active",
+                    },
+                    task: {
+                        status: "Ongoing",
+                        title: worker.taskTitle || "No Task Assigned",
+                        location: {
+                            floor: worker.floor || 0,
+                            zone: worker.zone || "N/A"
+                        },
+                        planned_time_hours: worker.plannedTime || 0,
+                        time_spent_hours: worker.timeSpent || 0,
+                        total_tasks: worker.totalTasks || 0,
+                        completed_tasks: worker.completedTasks || 0
+                    },
+                    actions: [
+                        "Assign Task",
+                        "Reassign Task",
+                        "Pause",
+                        "Emergency Stop"
+                    ],
+                    location: `Floor ${worker.floor || "-"} . Zone ${worker.zone || "-"}`
+                }));
+
+            setWorkers(formattedWorkers);
+        }
+    }, [selectedProduct, getProductById]);
+
+    useEffect(() => {
+        // 
+    }, [workers]);
+
+
+
+
+    // const employee_details = [
+    //     {
+    //         "employee": {
+    //             image: "",
+    //             "name": "John Doe",
+    //             "employee_id": "HR-204",
+    //             "status": "Active",
+
+    //         },
+    //         "task": {
+    //             "status": "Ongoing",
+    //             "title": "Inspecting Machine X",
+    //             "location": {
+    //                 "floor": 4,
+    //                 "zone": "B"
+    //             },
+    //             "planned_time_hours": 6,
+    //             "time_spent_hours": 2,
+    //             "total_tasks": 12,
+    //             "completed_tasks": 3
+    //         },
+    //         "actions": [
+    //             "Assign Task",
+    //             "Reassign Task",
+    //             "Pause",
+    //             "Emergency Stop"
+    //         ],
+    //         "location": "Floor 4 . Zone B"
+    //     },
+    //     {
+    //         "employee": {
+    //             image: "",
+    //             "name": "Alice Smith",
+    //             "employee_id": "HR-205",
+    //             "status": "Active",
+
+    //         },
+    //         "task": {
+    //             "status": "Ongoing",
+    //             "title": "Calibrating Sensor Y",
+    //             "location": {
+    //                 "floor": 2,
+    //                 "zone": "A"
+    //             },
+    //             "planned_time_hours": 4,
+    //             "time_spent_hours": 1.5,
+    //             "total_tasks": 10,
+    //             "completed_tasks": 2
+    //         },
+    //         "actions": [
+    //             "Assign Task",
+    //             "Reassign Task",
+    //             "Pause",
+    //             "Emergency Stop"
+    //         ],
+    //         "location": "Floor 4 . Zone B"
+    //     },
+    //     {
+    //         "employee": {
+    //             image: "",
+    //             "name": "Michael Lee",
+    //             "employee_id": "HR-206",
+    //             "status": "Active",
+
+    //         },
+    //         "task": {
+    //             "status": "Ongoing",
+    //             "title": "Testing Conveyor Belt Z",
+    //             "location": {
+    //                 "floor": 5,
+    //                 "zone": "C"
+    //             },
+    //             "planned_time_hours": 5,
+    //             "time_spent_hours": 3,
+    //             "total_tasks": 8,
+    //             "completed_tasks": 5
+    //         },
+    //         "actions": [
+    //             "Assign Task",
+    //             "Reassign Task",
+    //             "Pause",
+    //             "Emergency Stop"
+    //         ],
+    //         "location": "Floor 4 . Zone B"
+    //     },
+    // ]
+    function handleRenameWorker(newName: string) {
+        // 
+
+    }
+    function handleHumanClick(employee: any) {
+        if (employee.modelId) {
+            setResourceManagementId(employee.modelId);
+        }
+    }
 
-            },
-            "task": {
-                "status": "Ongoing",
-                "title": "Testing Conveyor Belt Z",
-                "location": {
-                    "floor": 5,
-                    "zone": "C"
-                },
-                "planned_time_hours": 5,
-                "time_spent_hours": 3,
-                "total_tasks": 8,
-                "completed_tasks": 5
-            },
-            "actions": [
-                "Assign Task",
-                "Reassign Task",
-                "Pause",
-                "Emergency Stop"
-            ],
-            "location": "Floor 4 . Zone B"
-        },
-    ]
 
     return (
         <>
@@ -101,7 +170,7 @@ const Hrm = () => {
             /> */}
 
             <div className='hrm-container assetManagement-wrapper'>
-                {employee_details.map((employee, index) => (
+                {workers.map((employee, index) => (
                     <div
                         className={`analysis-wrapper ${selectedCard === index ? "active" : ""}`}
                         onClick={() => setSelectedCard(index)}
@@ -113,13 +182,14 @@ const Hrm = () => {
                                     <img className='user-image' src={employee.employee.image} alt="" />
                                     <div className={`status ${employee.employee.status}`}></div>
                                 </div>
-                                <div className="details">
-                                    <div className="employee-name">{employee.employee.name}</div>
+                                <div className="details" >
+                                    {/* <div className="employee-name">{employee.employee.name}</div> */}
+                                    <RenameInput value={employee.employee.name} onRename={handleRenameWorker} />
                                     <div className="employee-id">{employee.employee.employee_id}</div>
                                 </div>
                             </div>
 
-                            <div className="see-more">View more</div>
+                            <div className="see-more" onClick={() => { handleHumanClick(employee.employee) }}>View in Scene</div>
                         </header>
 
                         <div className="content">
diff --git a/app/src/components/layout/sidebarRight/resourceManagement/hrm/assetManagement/AssetManagement.tsx b/app/src/components/layout/sidebarRight/resourceManagement/hrm/assetManagement/AssetManagement.tsx
index 4daa7aa..faa6015 100644
--- a/app/src/components/layout/sidebarRight/resourceManagement/hrm/assetManagement/AssetManagement.tsx
+++ b/app/src/components/layout/sidebarRight/resourceManagement/hrm/assetManagement/AssetManagement.tsx
@@ -1,73 +1,145 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 // import NavigateCatagory from '../../NavigateCatagory'
 import { EyeIcon, ForkLiftIcon, KebabIcon, LocationPinIcon, RightHalfFillCircleIcon } from '../../../../../icons/ExportCommonIcons';
 import assetImage from "../../../../../../assets/image/asset-image.png"
+import { useSceneContext } from '../../../../../../modules/scene/sceneContext';
+import { useProductContext } from '../../../../../../modules/simulation/products/productContext';
+import RenameInput from '../../../../../ui/inputs/RenameInput';
+import { useResourceManagementId } from '../../../../../../store/builder/store';
 const AssetManagement = () => {
     // const [selectedCategory, setSelectedCategory] = useState("All Assets");
     const [expandedAssetId, setExpandedAssetId] = useState<string | null>(null);
+    const [assets, setAssets] = useState<any[]>([]);
 
-    const dummyAssets = [
-        {
-            id: '1',
-            name: 'Forklift Model X200',
-            model: 'FLK-0025',
-            status: 'Online',
-            usageRate: 15,
-            level: 'Level 1',
-            image: assetImage,
-            description: 'Electric forklift used for moving goods and materials in warehouse operations.',
-            cost: 122000,
-            count: 5,
-        },
-        {
-            id: '2',
-            name: 'Warehouse Robot WR-300',
-            model: 'WRB-3001',
-            status: 'Online',
-            usageRate: 50,
-            level: 'Level 2',
-            image: assetImage,
-            description: 'Automated robot for handling packages and inventory in the warehouse.',
-            cost: 85000,
-            count: 3,
-        },
-        {
-            id: '3',
-            name: 'Conveyor Belt System CB-150',
-            model: 'CBS-150X',
-            status: 'Online',
-            usageRate: 95,
-            level: 'Level 3',
-            image: assetImage,
-            description: 'High-speed conveyor belt system for efficient material handling.',
-            cost: 45000,
-            count: 2,
-        },
-    ];
+    const { productStore } = useSceneContext();
+    const { products, getProductById } = productStore();
+    const { selectedProductStore } = useProductContext();
+    const { selectedProduct } = selectedProductStore();
+    const { setResourceManagementId } = useResourceManagementId();
+
+
+
+    useEffect(() => {
+        if (selectedProduct) {
+            const productDetails = getProductById(selectedProduct.productUuid);
+            const productAssets = productDetails?.eventDatas || [];
+            const grouped: Record<string, any> = {};
+            productAssets.forEach((asset: any) => {
+                if (asset.type === "storageUnit" || asset.type === "human") return;
+                if (!grouped[asset.modelName]) {
+                    grouped[asset.modelName] = {
+                        id: asset.modelUuid,
+                        name: asset.modelName,
+                        model: asset.modelCode || "N/A",
+                        status: asset.status || "Online",
+                        usageRate: asset.usageRate || 15,
+                        level: asset.level || "Level 1",
+                        image: assetImage,
+                        description: asset.description || "No description",
+                        cost: asset.cost || 0,
+                        count: 1,
+                    };
+                } else {
+                    grouped[asset.modelName].count += 1;
+                }
+            });
+
+            setAssets(Object.values(grouped));
+        }
+    }, [selectedProduct]);
+
+    function handleRenameAsset(newName: string) {
+        // 
+        // if (expandedAssetId) {
+        //     setAssets(prevAssets =>
+        //         prevAssets.map(asset =>
+        //             asset.id === expandedAssetId ? { ...asset, name: newName } : asset
+        //         )
+        //     );
+        // }
+    }
+
+    useEffect(() => {
+
+
+    }, [assets]);
+
+    function handleAssetClick(id: string) {
+        
+        
+        setResourceManagementId(id);
+    }
+
+    // const dummyAssets = [
+    //     {
+    //         id: '1',
+    //         name: 'Forklift Model X200',
+    //         model: 'FLK-0025',
+    //         status: 'Online',
+    //         usageRate: 15,
+    //         level: 'Level 1',
+    //         image: assetImage,
+    //         description: 'Electric forklift used for moving goods and materials in warehouse operations.',
+    //         cost: 122000,
+    //         count: 5,
+    //     },
+    //     {
+    //         id: '2',
+    //         name: 'Warehouse Robot WR-300',
+    //         model: 'WRB-3001',
+    //         status: 'Online',
+    //         usageRate: 50,
+    //         level: 'Level 2',
+    //         image: assetImage,
+    //         description: 'Automated robot for handling packages and inventory in the warehouse.',
+    //         cost: 85000,
+    //         count: 3,
+    //     },
+    //     {
+    //         id: '3',
+    //         name: 'Conveyor Belt System CB-150',
+    //         model: 'CBS-150X',
+    //         status: 'Online',
+    //         usageRate: 95,
+    //         level: 'Level 3',
+    //         image: assetImage,
+    //         description: 'High-speed conveyor belt system for efficient material handling.',
+    //         cost: 45000,
+    //         count: 2,
+    //     },
+    // ];
 
 
     return (
         <>
             {/* <NavigateCatagory
-                category={["All Assets", "Machines", "Workstation", "Vehicles"]}
-                selectedCategory={selectedCategory}
-                setSelectedCategory={setSelectedCategory}
-            /> */}
+                    category={["All Assets", "Machines", "Workstation", "Vehicles"]}
+                    selectedCategory={selectedCategory}
+                    setSelectedCategory={setSelectedCategory}
+                /> */}
 
             <div className='assetManagement-container assetManagement-wrapper'>
-                {dummyAssets.map((asset, index) => (
+                {assets.map((asset, index) => (
                     <div className={`assetManagement-card-wrapper ${expandedAssetId === asset.id ? "openViewMore" : ""}`} key={index}>
                         <header>
                             <div className="header-wrapper">
 
                                 {expandedAssetId === asset.id ?
-                                    <img className='asset-image' src={asset.image} alt="" />
+                                    <>
+                                        <div className="drop-icon" onClick={() => setExpandedAssetId(null)}>▾</div>
+                                        <img className='asset-image' src={asset.image} alt="" />
+                                    </>
                                     :
                                     <div className="icon"><ForkLiftIcon /></div>
                                 }
                                 <div className="asset-details-container">
-                                    <div className="asset-details">
-                                        <div className="asset-name">{asset.name}</div>
+                                    <div className="asset-details" >
+                                        {/* <div className="asset-name">{asset.name}</div> */}
+                                        <RenameInput value={asset.name} onRename={handleRenameAsset} />
+                                        {asset.count !== 1 && <div>
+                                            <span className="asset-id-label">x</span>
+                                            <span className="asset-id">{asset.count}</span>
+                                        </div>}
                                         <div className="asset-model">{asset.model}</div>
                                     </div>
                                     <div className="asset-status-wrapper">
@@ -98,9 +170,9 @@ const AssetManagement = () => {
                                     </div>
                                 </div>
 
-                                <div className="asset-estimate__view-button" onClick={() => setExpandedAssetId(null)}>
+                                <div className="asset-estimate__view-button">
                                     <EyeIcon isClosed={false} />
-                                    <div className="asset-estimate__view-text">View in Scene</div>
+                                    <div className="asset-estimate__view-text" onClick={() => handleAssetClick(asset.id)}>View in Scene</div>
                                 </div>
                             </div>
 
diff --git a/app/src/components/ui/Tools.tsx b/app/src/components/ui/Tools.tsx
index e834f28..d5d49e4 100644
--- a/app/src/components/ui/Tools.tsx
+++ b/app/src/components/ui/Tools.tsx
@@ -36,6 +36,7 @@ import {
 } from "../../store/visualization/useDroppedObjectsStore";
 import { useParams } from "react-router-dom";
 import { useVersionContext } from "../../modules/builder/version/versionContext";
+import { MoveIcon, RotateIcon } from "../icons/ShortcutIcons";
 
 // Utility component
 const ToolButton = ({
@@ -65,12 +66,8 @@ const Tools: React.FC = () => {
   const { isPlaying, setIsPlaying } = usePlayButtonStore();
   const { showShortcuts } = useShortcutStore();
 
-  const {
-    activeTool,
-    setActiveTool,
-    setToolMode,
-    setAddAction,
-  } = useStoreHooks();
+  const { activeTool, setActiveTool, setToolMode, setAddAction } =
+    useStoreHooks();
 
   const { setActiveSubTool, activeSubTool } = useActiveSubTool();
   const { setSelectedWallItem } = useSelectedWallItem();
@@ -81,14 +78,15 @@ const Tools: React.FC = () => {
   const { selectedZone } = useSelectedZoneStore();
   const { floatingWidget } = useFloatingWidget();
   const { widgets3D } = use3DWidget();
-  const { visualizationSocket } = useSocketStore();
 
-  const dropdownRef = useRef<HTMLButtonElement>(null);
-  const [openDrop, setOpenDrop] = useState(false);
+  const { visualizationSocket } = useSocketStore();
   const { selectedVersionStore } = useVersionContext();
   const { selectedVersion } = selectedVersionStore();
   const { projectId } = useParams();
 
+  const dropdownRef = useRef<HTMLButtonElement>(null);
+  const [openDrop, setOpenDrop] = useState(false);
+
   // 1. Set UI toggles on initial render
   useEffect(() => {
     setToggleUI(
@@ -155,7 +153,7 @@ const Tools: React.FC = () => {
         if (!is2D) setAddAction("Pillar");
         break;
       case "delete":
-        is2D ? setToolMode('2D-Delete') : setToolMode('3D-Delete');
+        is2D ? setToolMode("2D-Delete") : setToolMode("3D-Delete");
         break;
     }
   };
@@ -251,7 +249,7 @@ const Tools: React.FC = () => {
             templates,
             visualizationSocket,
             projectId,
-            versionId: selectedVersion?.versionId || ''
+            versionId: selectedVersion?.versionId || "",
           })
         }
       />
@@ -278,6 +276,10 @@ const Tools: React.FC = () => {
         return FreeMoveIcon;
       case "delete":
         return DeleteIcon;
+      case "move":
+        return MoveIcon;
+      case "rotate":
+        return RotateIcon;
       default:
         return CursorIcon;
     }
@@ -304,6 +306,10 @@ const Tools: React.FC = () => {
         return <FreeMoveIcon isActive={false} />;
       case "delete":
         return <DeleteIcon isActive={false} />;
+      case "move":
+        return <MoveIcon />;
+      case "rotate":
+        return <RotateIcon />;
       default:
         return null;
     }
@@ -362,6 +368,24 @@ const Tools: React.FC = () => {
         )}
       </div>
 
+      {activeModule !== "visualization" && (
+        <>
+          <div className="split"></div>
+          <div className="transform-tools">
+            {["move", "rotate"].map((tool) => (
+              <ToolButton
+                key={tool}
+                toolId={tool}
+                icon={getIconByTool(tool)}
+                tooltip={`${tool}`}
+                active={activeTool === tool}
+                onClick={() => setActiveTool(tool)}
+              />
+            ))}
+          </div>
+        </>
+      )}
+
       <div className="split"></div>
       {activeModule === "builder" && renderBuilderTools()}
       {activeModule === "simulation" && renderSimulationTools()}
diff --git a/app/src/components/ui/collaboration/Messages.tsx b/app/src/components/ui/collaboration/Messages.tsx
index b3f37e1..11e87b2 100644
--- a/app/src/components/ui/collaboration/Messages.tsx
+++ b/app/src/components/ui/collaboration/Messages.tsx
@@ -231,7 +231,10 @@ const Messages: React.FC<MessageProps> = ({ val, i, setMessages, mode, setIsEdit
               <div className="time">{isEditableThread ? getRelativeTime(val.createdAt) : val.createdAt}</div>
             </div>
             {(val as Reply).creatorId === userId && (
-              <div className="more-options">
+              <div
+                className="more-options"
+                onMouseLeave={() => setOpenOptions(false)}
+              >
                 <button
                   className="more-options-button"
                   onClick={() => {
@@ -240,35 +243,41 @@ const Messages: React.FC<MessageProps> = ({ val, i, setMessages, mode, setIsEdit
                 >
                   <KebabIcon />
                 </button>
+
                 {openOptions && (
                   <div className="options-list">
                     <button
                       className="option"
                       onClick={(e) => {
                         e.preventDefault();
-                        setMode && setMode("edit")
+                        setMode && setMode("edit");
                         setOpenOptions(false);
                         setEditedThread && setEditedThread(true);
-                        setIsEditComment(true)
+                        setIsEditComment(true);
                       }}
                     >
                       Edit
                     </button>
-                    {!(isEditableThread) && <button
-                      className="option"
-                      onClick={() => {
-                        handleDeleteAction((val as Reply).replyId);
-                      }}
-                    >
-                      Delete
-                    </button>}
+
+                    {!isEditableThread && (
+                      <button
+                        className="option"
+                        onClick={() => {
+                          handleDeleteAction((val as Reply).replyId);
+                        }}
+                      >
+                        Delete
+                      </button>
+                    )}
                   </div>
                 )}
               </div>
             )}
+
             <div className="message">
               {"comment" in val ? val.comment : val.threadTitle}
             </div>
+            
           </div>
         </div >
       )}
diff --git a/app/src/components/ui/collaboration/ThreadChat.tsx b/app/src/components/ui/collaboration/ThreadChat.tsx
index 8e4b24b..5370689 100644
--- a/app/src/components/ui/collaboration/ThreadChat.tsx
+++ b/app/src/components/ui/collaboration/ThreadChat.tsx
@@ -131,9 +131,10 @@ const ThreadChat: React.FC = () => {
     if (dragging) updatePosition(e, true);
   };
 
-  useEffect(() => {
-    updatePosition({ clientX: position.x, clientY: position.y }, true);
-  }, [selectedComment]);
+  // Commented this useEffect to prevent offset after user saved the comment
+  // useEffect(() => {
+  //   updatePosition({ clientX: position.x, clientY: position.y }, true);
+  // }, [selectedComment]);
 
 
   const handlePointerUp = (event: React.PointerEvent<HTMLDivElement>) => {
@@ -144,6 +145,10 @@ const ThreadChat: React.FC = () => {
   };
 
   const handleCreateComments = async (e: any) => {
+    // Continue send or create message only there is only value avalibale 
+    // To prevent empty value
+
+    if (!value) return;
     e.preventDefault();
     try {
       // const createComments = await addCommentsApi(projectId, value, selectedComment?.threadId,  selectedVersion?.versionId || "")/ 
@@ -163,6 +168,7 @@ const ThreadChat: React.FC = () => {
 
       // }
 
+
       if (threadSocket && mode === "create") {
         const addComment = {
           versionId: selectedVersion?.versionId || "",
@@ -190,7 +196,7 @@ const ThreadChat: React.FC = () => {
       //     removeComment(selectedComment?.threadId)
       //     setSelectedComment([])
       // }
-      console.log('threadSocket:threadChat ', threadSocket);
+
       if (threadSocket) {
         // projectId, userId, organization, threadId
         const deleteThread = {
@@ -258,7 +264,7 @@ const ThreadChat: React.FC = () => {
       };
 
       if (threadSocket) {
-        console.log('createThread: ', createThread);
+
 
         setInputActive(false);
         threadSocket.emit("v1:thread:create", createThread);
diff --git a/app/src/components/ui/list/List.tsx b/app/src/components/ui/list/List.tsx
index 6792fa4..8f38189 100644
--- a/app/src/components/ui/list/List.tsx
+++ b/app/src/components/ui/list/List.tsx
@@ -57,6 +57,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
   const { zoneStore } = useSceneContext();
   const { zones, setZoneName } = zoneStore();
 
+
   useEffect(() => {
     useSelectedZoneStore.getState().setSelectedZone({
       zoneName: "",
@@ -121,6 +122,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
   }
 
   function handleAssetClick(asset: Asset) {
+    
     setZoneAssetId(asset);
   }
 
@@ -157,8 +159,9 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
         modelUuid: zoneAssetId.id,
         modelName: newName,
         projectId,
+        versionId: selectedVersion?.versionId || ''
+        
       });
-      // console.log("response: ", response);
 
       setName(zoneAssetId.id, response.modelName);
     }
@@ -255,9 +258,8 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
                 }}
               >
                 <div
-                  className={`list-item ${
-                    selectedZone.zoneUuid === item.id ? "active" : ""
-                  }`}
+                  className={`list-item ${selectedZone.zoneUuid === item.id ? "active" : ""
+                    }`}
                 >
                   <div className="zone-header">
                     <button className="value" id="zone-name">
@@ -301,9 +303,8 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
                     {item.assets.map((asset) => (
                       <li
                         key={`asset-${asset.id}`}
-                        className={`list-container asset-item ${
-                          zoneAssetId?.id === asset.id ? "active" : ""
-                        }`}
+                        className={`list-container asset-item ${zoneAssetId?.id === asset.id ? "active" : ""
+                          }`}
                         onClick={() => handleAssetClick(asset)}
                       >
                         <div className="list-item">
diff --git a/app/src/hooks/useCameraShortcuts.ts b/app/src/hooks/useCameraShortcuts.ts
new file mode 100644
index 0000000..e4b897a
--- /dev/null
+++ b/app/src/hooks/useCameraShortcuts.ts
@@ -0,0 +1,47 @@
+import { useEffect } from "react";
+import { useThree } from "@react-three/fiber";
+import * as THREE from "three";
+import type { CameraControls } from "@react-three/drei";
+
+export const useCameraShortcuts = (controlsRef: React.RefObject<CameraControls>) => {
+    const { camera } = useThree();
+
+    useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (!controlsRef.current) return;
+
+            // get current distance from camera to target
+            const target = new THREE.Vector3();
+            controlsRef.current.getTarget(target);
+
+            const distance = camera.position.distanceTo(target);
+            let pos: THREE.Vector3 | null = null;
+
+            switch (e.key) {
+                case "1": // Front
+                    pos = new THREE.Vector3(0, 0, distance).add(target);
+                    break;
+                case "3": // Right
+                    pos = new THREE.Vector3(distance, 0, 0).add(target);
+                    break;
+                case "7": // Top
+                    pos = new THREE.Vector3(0, distance, 0).add(target);
+                    break;
+                case "9": // Back
+                    pos = new THREE.Vector3(0, 0, -distance).add(target);
+                    break;
+            }
+
+            if (pos) {
+                controlsRef.current.setLookAt(
+                    pos.x, pos.y, pos.z, // camera position
+                    target.x, target.y, target.z, // keep same target
+                    true // smooth transition
+                );
+            }
+        };
+
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [controlsRef, camera]);
+};
diff --git a/app/src/modules/builder/asset/models/model/eventHandlers/useEventHandlers.ts b/app/src/modules/builder/asset/models/model/eventHandlers/useEventHandlers.ts
index 5c02a2c..360c513 100644
--- a/app/src/modules/builder/asset/models/model/eventHandlers/useEventHandlers.ts
+++ b/app/src/modules/builder/asset/models/model/eventHandlers/useEventHandlers.ts
@@ -3,7 +3,7 @@ import { CameraControls } from '@react-three/drei';
 import { ThreeEvent, useThree } from '@react-three/fiber';
 import { useCallback, useEffect, useRef } from 'react';
 
-import { useActiveTool, useDeletableFloorItem, useSelectedFloorItem, useToggleView, useZoneAssetId } from '../../../../../../store/builder/store';
+import { useActiveTool, useDeletableFloorItem, useResourceManagementId, useSelectedFloorItem, useToggleView, useZoneAssetId } from '../../../../../../store/builder/store';
 import useModuleStore, { useSubModuleStore } from '../../../../../../store/useModuleStore';
 import { useSocketStore } from '../../../../../../store/builder/store';
 import { useSceneContext } from '../../../../../scene/sceneContext';
@@ -36,6 +36,7 @@ export function useModelEventHandlers({
     const { push3D } = undoRedo3DStore();
     const { getAssetById, removeAsset } = assetStore();
     const { zoneAssetId, setZoneAssetId } = useZoneAssetId();
+    const { resourceManagementId, setResourceManagementId } = useResourceManagementId();
     const { removeEvent, getEventByModelUuid } = eventStore();
     const { getIsEventInProduct, addPoint, deleteEvent } = productStore();
     const { setSelectedAsset, clearSelectedAsset } = useSelectedAsset();
@@ -74,7 +75,17 @@ export function useModelEventHandlers({
         if (zoneAssetId.id === asset.modelUuid) {
             handleDblClick(asset);
         }
+
     }, [zoneAssetId])
+    useEffect(() => {
+        if (!resourceManagementId) return
+        if (resourceManagementId === asset.modelUuid) {
+            
+            
+            handleDblClick(asset);
+        }
+
+    }, [resourceManagementId])
 
     useEffect(() => {
         if (!selectedFloorItem) {
@@ -83,10 +94,8 @@ export function useModelEventHandlers({
     }, [selectedFloorItem])
 
     const handleDblClick = (asset: Asset) => {
-        if (asset && activeTool === "cursor" && boundingBox && groupRef.current && activeModule === 'builder') {
-
+        if (asset && activeTool === "cursor" && boundingBox && groupRef.current && (activeModule === 'builder' || (activeModule === 'simulation' && resourceManagementId))) {
             const frontView = false;
-
             if (frontView) {
                 const size = boundingBox.getSize(new THREE.Vector3());
                 const center = boundingBox.getCenter(new THREE.Vector3());
@@ -107,6 +116,7 @@ export function useModelEventHandlers({
                     paddingBottom: 5,
                     paddingRight: 5,
                 });
+
             } else {
 
                 const collisionPos = new THREE.Vector3();
@@ -127,6 +137,7 @@ export function useModelEventHandlers({
             }
 
             setSelectedFloorItem(groupRef.current);
+            setResourceManagementId("");
         }
     };
 
diff --git a/app/src/modules/builder/builder.tsx b/app/src/modules/builder/builder.tsx
index ab9434b..ef310fc 100644
--- a/app/src/modules/builder/builder.tsx
+++ b/app/src/modules/builder/builder.tsx
@@ -57,6 +57,7 @@ export default function Builder() {
     const { setHoveredPoint, setHoveredLine } = useBuilderStore();
     const { userId, organization } = getUserData();
 
+
     useEffect(() => {
         if (!toggleView) {
             setHoveredLine(null);
diff --git a/app/src/modules/scene/controls/contextControls/contextControls.tsx b/app/src/modules/scene/controls/contextControls/contextControls.tsx
index 1d0bbfa..142f8d1 100644
--- a/app/src/modules/scene/controls/contextControls/contextControls.tsx
+++ b/app/src/modules/scene/controls/contextControls/contextControls.tsx
@@ -1,222 +1,243 @@
-import { useEffect, useRef, useState } from 'react';
-import { useThree } from '@react-three/fiber';
-import { CameraControls, Html, ScreenSpace } from '@react-three/drei';
-import { useContextActionStore, useRenameModeStore, useSelectedAssets } from '../../../../store/builder/store';
-import ContextMenu from '../../../../components/ui/menu/contextMenu';
+import { useEffect, useRef, useState } from "react";
+import { useThree } from "@react-three/fiber";
+import { CameraControls, Html, ScreenSpace } from "@react-three/drei";
+import {
+  useContextActionStore,
+  useRenameModeStore,
+  useSelectedAssets,
+} from "../../../../store/builder/store";
+import ContextMenu from "../../../../components/ui/menu/contextMenu";
 
 function ContextControls() {
-    const { gl, controls } = useThree();
-    const [canRender, setCanRender] = useState(false);
-    const [visibility, setVisibility] = useState({ rename: true, focus: true, flipX: true, flipZ: true, move: true, rotate: true, duplicate: true, copy: true, paste: true, modifier: false, group: false, array: false, delete: true, });
-    const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 });
-    const { selectedAssets } = useSelectedAssets();
-    const { setContextAction } = useContextActionStore();
-    const { setIsRenameMode } = useRenameModeStore();
-    const rightDrag = useRef(false);
-    const isRightMouseDown = useRef(false);
+  const { gl, controls } = useThree();
+  const [canRender, setCanRender] = useState(false);
+  const [visibility, setVisibility] = useState({
+    rename: true,
+    focus: true,
+    flipX: true,
+    flipZ: true,
+    move: true,
+    rotate: true,
+    duplicate: true,
+    copy: true,
+    paste: true,
+    modifier: false,
+    group: false,
+    array: false,
+    delete: true,
+  });
+  const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 });
+  const { selectedAssets } = useSelectedAssets();
+  const { setContextAction } = useContextActionStore();
+  const { setIsRenameMode } = useRenameModeStore();
+  const rightDrag = useRef(false);
+  const isRightMouseDown = useRef(false);
 
-    useEffect(() => {
-        if (selectedAssets.length === 1) {
-            setVisibility({
-                rename: true,
-                focus: true,
-                flipX: true,
-                flipZ: true,
-                move: true,
-                rotate: true,
-                duplicate: true,
-                copy: true,
-                paste: true,
-                modifier: false,
-                group: false,
-                array: false,
-                delete: true,
-            });
-        } else if (selectedAssets.length > 1) {
-            setVisibility({
-                rename: false,
-                focus: true,
-                flipX: true,
-                flipZ: true,
-                move: true,
-                rotate: true,
-                duplicate: true,
-                copy: true,
-                paste: true,
-                modifier: false,
-                group: true,
-                array: false,
-                delete: true,
-            });
-        } else {
-            setVisibility({
-                rename: false,
-                focus: false,
-                flipX: false,
-                flipZ: false,
-                move: false,
-                rotate: false,
-                duplicate: false,
-                copy: false,
-                paste: false,
-                modifier: false,
-                group: false,
-                array: false,
-                delete: false,
-            });
+  useEffect(() => {
+    if (selectedAssets.length === 1) {
+      setVisibility({
+        rename: true,
+        focus: true,
+        flipX: true,
+        flipZ: true,
+        move: true,
+        rotate: true,
+        duplicate: true,
+        copy: true,
+        paste: true,
+        modifier: false,
+        group: false,
+        array: false,
+        delete: true,
+      });
+    } else if (selectedAssets.length > 1) {
+      setVisibility({
+        rename: false,
+        focus: true,
+        flipX: true,
+        flipZ: true,
+        move: true,
+        rotate: true,
+        duplicate: true,
+        copy: true,
+        paste: true,
+        modifier: false,
+        group: true,
+        array: false,
+        delete: true,
+      });
+    } else {
+      setVisibility({
+        rename: false,
+        focus: false,
+        flipX: false,
+        flipZ: false,
+        move: false,
+        rotate: false,
+        duplicate: false,
+        copy: false,
+        paste: false,
+        modifier: false,
+        group: false,
+        array: false,
+        delete: false,
+      });
+    }
+  }, [selectedAssets]);
+
+  useEffect(() => {
+    const canvasElement = gl.domElement;
+
+    const onPointerDown = (evt: any) => {
+      if (evt.button === 2) {
+        isRightMouseDown.current = true;
+        rightDrag.current = false;
+      }
+    };
+
+    const onPointerMove = () => {
+      if (isRightMouseDown.current) {
+        rightDrag.current = true;
+      }
+    };
+
+    const onPointerUp = (evt: any) => {
+      if (evt.button === 2) {
+        isRightMouseDown.current = false;
+      }
+    };
+
+    const handleContextClick = (event: MouseEvent) => {
+      event.preventDefault();
+      if (rightDrag.current) return;
+      if (selectedAssets.length > 0) {
+        setMenuPosition({
+          x: event.clientX - gl.domElement.width / 2,
+          y: event.clientY - gl.domElement.height / 2,
+        });
+        setCanRender(true);
+        if (controls) {
+          (controls as CameraControls).enabled = false;
         }
-    }, [selectedAssets]);
-
-    useEffect(() => {
-        const canvasElement = gl.domElement;
-
-        const onPointerDown = (evt: any) => {
-            if (evt.button === 2) {
-                isRightMouseDown.current = true;
-                rightDrag.current = false;
-            }
-        };
-
-        const onPointerMove = () => {
-            if (isRightMouseDown.current) {
-                rightDrag.current = true;
-            }
-        };
-
-        const onPointerUp = (evt: any) => {
-            if (evt.button === 2) {
-                isRightMouseDown.current = false;
-            }
-        };
-
-        const handleContextClick = (event: MouseEvent) => {
-            event.preventDefault();
-            if (rightDrag.current) return;
-            if (selectedAssets.length > 0) {
-                setMenuPosition({ x: event.clientX - gl.domElement.width / 2, y: event.clientY - gl.domElement.height / 2 });
-                setCanRender(true);
-                if (controls) {
-                    (controls as CameraControls).enabled = false;
-                }
-            } else {
-                setCanRender(false);
-                if (controls) {
-                    (controls as CameraControls).enabled = true;
-                }
-            }
-        };
-
-        if (selectedAssets.length > 0) {
-            canvasElement.addEventListener('pointerdown', onPointerDown);
-            canvasElement.addEventListener('pointermove', onPointerMove);
-            canvasElement.addEventListener('pointerup', onPointerUp);
-            canvasElement.addEventListener('contextmenu', handleContextClick)
-        } else {
-            setCanRender(false);
-            if (controls) {
-                (controls as CameraControls).enabled = true;
-            }
-            setMenuPosition({ x: 0, y: 0 });
-        }
-
-        return () => {
-            canvasElement.removeEventListener('pointerdown', onPointerDown);
-            canvasElement.removeEventListener('pointermove', onPointerMove);
-            canvasElement.removeEventListener('pointerup', onPointerUp);
-            canvasElement.removeEventListener('contextmenu', handleContextClick);
-        };
-    }, [gl, selectedAssets]);
-
-    const handleAssetRename = () => {
+      } else {
         setCanRender(false);
         if (controls) {
-            (controls as CameraControls).enabled = true;
+          (controls as CameraControls).enabled = true;
         }
-        setContextAction("renameAsset");
-        setIsRenameMode(true);
-    }
-    const handleAssetFocus = () => {
-        setCanRender(false);
-        if (controls) {
-            (controls as CameraControls).enabled = true;
-        }
-        setContextAction("focusAsset");
-    }
-    const handleAssetMove = () => {
-        setCanRender(false);
-        if (controls) {
-            (controls as CameraControls).enabled = true;
-        }
-        setContextAction("moveAsset")
-    }
-    const handleAssetRotate = () => {
-        setCanRender(false);
-        if (controls) {
-            (controls as CameraControls).enabled = true;
-        }
-        setContextAction("rotateAsset")
-    }
-    const handleAssetCopy = () => {
-        setCanRender(false);
-        if (controls) {
-            (controls as CameraControls).enabled = true;
-        }
-        setContextAction("copyAsset")
-    }
-    const handleAssetPaste = () => {
-        setCanRender(false);
-        if (controls) {
-            (controls as CameraControls).enabled = true;
-        }
-        setContextAction("pasteAsset")
-    }
-    const handleAssetDelete = () => {
-        setCanRender(false);
-        if (controls) {
-            (controls as CameraControls).enabled = true;
-        }
-        setContextAction("deleteAsset")
-    }
-    const handleAssetDuplicate = () => {
-        setCanRender(false);
-        if (controls) {
-            (controls as CameraControls).enabled = true;
-        }
-        setContextAction("duplicateAsset")
+      }
+    };
+
+    if (selectedAssets.length > 0) {
+      canvasElement.addEventListener("pointerdown", onPointerDown);
+      canvasElement.addEventListener("pointermove", onPointerMove);
+      canvasElement.addEventListener("pointerup", onPointerUp);
+      canvasElement.addEventListener("contextmenu", handleContextClick);
+    } else {
+      setCanRender(false);
+      if (controls) {
+        (controls as CameraControls).enabled = true;
+      }
+      setMenuPosition({ x: 0, y: 0 });
     }
 
-    return (
-        <>
-            {canRender && (
-                <ScreenSpace depth={1} >
-                    <Html
-                        style={{
-                            position: 'fixed',
-                            top: menuPosition.y,
-                            left: menuPosition.x,
-                            zIndex: 1000
-                        }}
-                    >
-                        <ContextMenu
-                            visibility={visibility}
-                            onRename={() => handleAssetRename()}
-                            onFocus={() => handleAssetFocus()}
-                            onFlipX={() => console.log("Flip to X")}
-                            onFlipZ={() => console.log("Flip to Z")}
-                            onMove={() => handleAssetMove()}
-                            onRotate={() => handleAssetRotate()}
-                            onDuplicate={() => handleAssetDuplicate()}
-                            onCopy={() => handleAssetCopy()}
-                            onPaste={() => handleAssetPaste()}
-                            onGroup={() => console.log("Group")}
-                            onArray={() => console.log("Array")}
-                            onDelete={() => handleAssetDelete()}
-                        />
-                    </Html>
-                </ScreenSpace>
-            )}
-        </>
-    );
+    return () => {
+      canvasElement.removeEventListener("pointerdown", onPointerDown);
+      canvasElement.removeEventListener("pointermove", onPointerMove);
+      canvasElement.removeEventListener("pointerup", onPointerUp);
+      canvasElement.removeEventListener("contextmenu", handleContextClick);
+    };
+  }, [controls, gl, selectedAssets]);
+
+  const handleAssetRename = () => {
+    setCanRender(false);
+    if (controls) {
+      (controls as CameraControls).enabled = true;
+    }
+    setContextAction("renameAsset");
+    setIsRenameMode(true);
+  };
+  const handleAssetFocus = () => {
+    setCanRender(false);
+    if (controls) {
+      (controls as CameraControls).enabled = true;
+    }
+    setContextAction("focusAsset");
+  };
+  const handleAssetMove = () => {
+    setCanRender(false);
+    if (controls) {
+      (controls as CameraControls).enabled = true;
+    }
+    setContextAction("moveAsset");
+  };
+  const handleAssetRotate = () => {
+    setCanRender(false);
+    if (controls) {
+      (controls as CameraControls).enabled = true;
+    }
+    setContextAction("rotateAsset");
+  };
+  const handleAssetCopy = () => {
+    setCanRender(false);
+    if (controls) {
+      (controls as CameraControls).enabled = true;
+    }
+    setContextAction("copyAsset");
+  };
+  const handleAssetPaste = () => {
+    setCanRender(false);
+    if (controls) {
+      (controls as CameraControls).enabled = true;
+    }
+    setContextAction("pasteAsset");
+  };
+  const handleAssetDelete = () => {
+    setCanRender(false);
+    if (controls) {
+      (controls as CameraControls).enabled = true;
+    }
+    setContextAction("deleteAsset");
+  };
+  const handleAssetDuplicate = () => {
+    setCanRender(false);
+    if (controls) {
+      (controls as CameraControls).enabled = true;
+    }
+    setContextAction("duplicateAsset");
+  };
+
+  return (
+    <>
+      {canRender && (
+        <ScreenSpace depth={1}>
+          <Html
+            style={{
+              position: "fixed",
+              top: menuPosition.y,
+              left: menuPosition.x,
+              zIndex: 1000,
+            }}
+          >
+            <ContextMenu
+              visibility={visibility}
+              onRename={() => handleAssetRename()}
+              onFocus={() => handleAssetFocus()}
+              onFlipX={() => console.log("Flip to X")}
+              onFlipZ={() => console.log("Flip to Z")}
+              onMove={() => handleAssetMove()}
+              onRotate={() => handleAssetRotate()}
+              onDuplicate={() => handleAssetDuplicate()}
+              onCopy={() => handleAssetCopy()}
+              onPaste={() => handleAssetPaste()}
+              onGroup={() => console.log("Group")}
+              onArray={() => console.log("Array")}
+              onDelete={() => handleAssetDelete()}
+            />
+          </Html>
+        </ScreenSpace>
+      )}
+    </>
+  );
 }
 
 export default ContextControls;
diff --git a/app/src/modules/scene/controls/controls.tsx b/app/src/modules/scene/controls/controls.tsx
index c41a4bd..d63f0ac 100644
--- a/app/src/modules/scene/controls/controls.tsx
+++ b/app/src/modules/scene/controls/controls.tsx
@@ -18,6 +18,7 @@ import ContextControls from "./contextControls/contextControls";
 import SelectionControls2D from "./selectionControls/selection2D/selectionControls2D";
 import UndoRedo2DControls from "./undoRedoControls/undoRedo2D/undoRedo2DControls";
 import UndoRedo3DControls from "./undoRedoControls/undoRedo3D/undoRedo3DControls";
+import { useCameraShortcuts } from "../../../hooks/useCameraShortcuts";
 
 export default function Controls() {
     const controlsRef = useRef<CameraControls>(null);
@@ -116,6 +117,7 @@ export default function Controls() {
             stopInterval();
         };
     }, [toggleView, state, socket]);
+    useCameraShortcuts(controlsRef);
 
     return (
         <>
diff --git a/app/src/modules/scene/controls/selectionControls/selection3D/moveControls3D.tsx b/app/src/modules/scene/controls/selectionControls/selection3D/moveControls3D.tsx
index d68a17a..e0940c9 100644
--- a/app/src/modules/scene/controls/selectionControls/selection3D/moveControls3D.tsx
+++ b/app/src/modules/scene/controls/selectionControls/selection3D/moveControls3D.tsx
@@ -64,6 +64,7 @@ function MoveControls3D({ boundingBoxRef }: any) {
             setContextAction(null);
             moveAssets()
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [contextAction])
 
     useEffect(() => {
@@ -176,6 +177,7 @@ function MoveControls3D({ boundingBoxRef }: any) {
             canvasElement.removeEventListener("keydown", onKeyDown);
             canvasElement?.removeEventListener("keyup", onKeyUp);
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [camera, controls, scene, toggleView, selectedAssets, socket, pastedObjects, duplicatedObjects, movedObjects, rotatedObjects, keyEvent, initialStates]);
 
     const calculateDragOffset = useCallback((point: THREE.Object3D, hitPoint: THREE.Vector3) => {
@@ -223,6 +225,7 @@ function MoveControls3D({ boundingBoxRef }: any) {
                 setDragOffset(newOffset);
             }
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [axisConstraint, camera, movedObjects])
 
     useFrame(() => {
diff --git a/app/src/modules/scene/controls/selectionControls/selection3D/selectionControls3D.tsx b/app/src/modules/scene/controls/selectionControls/selection3D/selectionControls3D.tsx
index 1dab7bc..ed458c2 100644
--- a/app/src/modules/scene/controls/selectionControls/selection3D/selectionControls3D.tsx
+++ b/app/src/modules/scene/controls/selectionControls/selection3D/selectionControls3D.tsx
@@ -67,6 +67,7 @@ const SelectionControls3D: React.FC = () => {
             setContextAction(null);
             deleteSelection()
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [contextAction])
 
     useEffect(() => {
@@ -222,12 +223,14 @@ const SelectionControls3D: React.FC = () => {
             helper.enabled = false;
             helper.dispose();
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [camera, controls, scene, toggleView, selectedAssets, copiedObjects, pastedObjects, duplicatedObjects, movedObjects, socket, rotatedObjects, activeModule, toolMode]);
 
     useEffect(() => {
         if (activeModule !== "builder" || toolMode !== 'cursor' || toggleView) {
             clearSelection();
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [activeModule, toolMode, toggleView]);
 
     const selectAssets = useCallback(() => {
@@ -362,7 +365,7 @@ const SelectionControls3D: React.FC = () => {
                 removeAsset(uuid);
             });
 
-            echo.success("Selected models removed!");
+            echo.warn("Selected models removed!");
             clearSelection();
         }
     };
diff --git a/app/src/modules/scene/scene.tsx b/app/src/modules/scene/scene.tsx
index b5e6739..635edd2 100644
--- a/app/src/modules/scene/scene.tsx
+++ b/app/src/modules/scene/scene.tsx
@@ -14,6 +14,7 @@ import { getAllProjects } from "../../services/dashboard/getAllProjects";
 import { getUserData } from "../../functions/getUserData";
 import { useLoadingProgress, useSocketStore } from "../../store/builder/store";
 import { Color, SRGBColorSpace } from "three";
+import { compressImage } from "../../utils/compressImage";
 
 export default function Scene({ layout }: { readonly layout: "Main Layout" | "Comparison Layout"; }) {
     const map = useMemo(() => [
@@ -31,23 +32,24 @@ export default function Scene({ layout }: { readonly layout: "Main Layout" | "Co
     const { loadingProgress } = useLoadingProgress();
 
     useEffect(() => {
-        if (!projectId && loadingProgress > 1) return;
+        if (!projectId || loadingProgress !== 0) return;
         getAllProjects(userId, organization).then((projects) => {
             if (!projects || !projects.Projects) return;
             let project = projects.Projects.find((val: any) => val.projectUuid === projectId || val._id === projectId);
             const canvas = document.getElementById("sceneCanvas")?.getElementsByTagName("canvas")[0];
             if (!canvas) return;
-            const screenshotDataUrl = (canvas as HTMLCanvasElement)?.toDataURL("image/png");
-            const updateProjects = {
-                projectId: project?._id,
-                organization,
-                userId,
-                projectName: project?.projectName,
-                thumbnail: screenshotDataUrl,
-            };
-            if (projectSocket) {
-                projectSocket.emit("v1:project:update", updateProjects);
-            }
+            compressImage((canvas as HTMLCanvasElement)?.toDataURL("image/png")).then((screenshotDataUrl) => {
+                const updateProjects = {
+                    projectId: project?._id,
+                    organization,
+                    userId,
+                    projectName: project?.projectName,
+                    thumbnail: screenshotDataUrl,
+                };
+                if (projectSocket) {
+                    projectSocket.emit("v1:project:update", updateProjects);
+                }
+            });
         }).catch((err) => {
             console.error(err);
         });
@@ -64,7 +66,7 @@ export default function Scene({ layout }: { readonly layout: "Main Layout" | "Co
                 onContextMenu={(e) => { e.preventDefault(); }}
                 performance={{ min: 0.9, max: 1.0 }}
                 onCreated={(e) => { e.scene.background = layout === "Main Layout" ? null : new Color(0x19191d); }}
-                gl={{ outputColorSpace: SRGBColorSpace, powerPreference: "high-performance", antialias: true }}
+                gl={{ outputColorSpace: SRGBColorSpace, powerPreference: "high-performance", antialias: true, preserveDrawingBuffer: true }}
             >
                 <Setup />
                 <Collaboration />
diff --git a/app/src/modules/scene/tools/measurementTool.tsx b/app/src/modules/scene/tools/measurementTool.tsx
index 1da41b3..9f8189d 100644
--- a/app/src/modules/scene/tools/measurementTool.tsx
+++ b/app/src/modules/scene/tools/measurementTool.tsx
@@ -1,241 +1,272 @@
 import * as THREE from "three";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useThree, useFrame } from "@react-three/fiber";
 import { useToolMode } from "../../../store/builder/store";
-import { Html } from "@react-three/drei";
+import { Html, Line } from "@react-three/drei";
 
 const MeasurementTool = () => {
-    const { gl, raycaster, pointer, camera, scene } = useThree();
-    const { toolMode } = useToolMode();
+  const { gl, raycaster, pointer, camera, scene } = useThree();
+  const { toolMode } = useToolMode();
 
-    const [points, setPoints] = useState<THREE.Vector3[]>([]);
-    const [tubeGeometry, setTubeGeometry] = useState<THREE.TubeGeometry | null>(
-        null
-    );
-    const groupRef = useRef<THREE.Group>(null);
-    const [startConePosition, setStartConePosition] =
-        useState<THREE.Vector3 | null>(null);
-    const [endConePosition, setEndConePosition] = useState<THREE.Vector3 | null>(
-        null
-    );
-    const [startConeQuaternion, setStartConeQuaternion] = useState(
-        new THREE.Quaternion()
-    );
-    const [endConeQuaternion, setEndConeQuaternion] = useState(
-        new THREE.Quaternion()
-    );
-    const [coneSize, setConeSize] = useState({ radius: 0.2, height: 0.5 });
+  const [points, setPoints] = useState<THREE.Vector3[]>([]);
+  const [linePoints, setLinePoints] = useState<THREE.Vector3[] | null>(null);
+  const [axisLock, setAxisLock] = useState<"x" | "y" | "z" | null>(null);
+  const groupRef = useRef<THREE.Group>(null);
+  const keysPressed = useRef<Set<string>>(new Set());
 
-    const MIN_RADIUS = 0.001, MAX_RADIUS = 0.1;
-    const MIN_CONE_RADIUS = 0.01, MAX_CONE_RADIUS = 0.4;
-    const MIN_CONE_HEIGHT = 0.035, MAX_CONE_HEIGHT = 2.0;
+  // Axis lock key handling
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.altKey) {
+        if (e.key.toLowerCase() === "x") keysPressed.current.add("x");
+        else if (e.key.toLowerCase() === "y") keysPressed.current.add("y");
+        else if (e.key.toLowerCase() === "z") keysPressed.current.add("z");
 
-    useEffect(() => {
-        const canvasElement = gl.domElement;
-        let drag = false;
-        let isLeftMouseDown = false;
-
-        const onMouseDown = () => {
-            isLeftMouseDown = true;
-            drag = false;
-        };
-
-        const onMouseUp = (evt: any) => {
-            isLeftMouseDown = false;
-            if (evt.button === 0 && !drag) {
-                raycaster.setFromCamera(pointer, camera);
-                const intersects = raycaster
-                    .intersectObjects(scene.children, true)
-                    .filter(
-                        (intersect) =>
-                            !intersect.object.name.includes("Roof") &&
-                            !intersect.object.name.includes("MeasurementReference") &&
-                            !intersect.object.name.includes("agv-collider") &&
-                            !intersect.object.name.includes("zonePlane") &&
-                            !intersect.object.name.includes("SelectionGroup") &&
-                            !intersect.object.name.includes("selectionAssetGroup") &&
-                            !intersect.object.name.includes("SelectionGroupBoundingBoxLine") &&
-                            !intersect.object.name.includes("SelectionGroupBoundingBox") &&
-                            !intersect.object.name.includes("SelectionGroupBoundingLine") &&
-                            intersect.object.type !== "GridHelper"
-                    );
-
-                if (intersects.length > 0) {
-                    const intersectionPoint = intersects[0].point.clone();
-                    if (points.length < 2) {
-                        setPoints([...points, intersectionPoint]);
-                    } else {
-                        setPoints([intersectionPoint]);
-                    }
-                }
-            }
-        };
-
-        const onMouseMove = () => {
-            if (isLeftMouseDown) drag = true;
-        };
-
-        const onContextMenu = (evt: any) => {
-            evt.preventDefault();
-            if (!drag) {
-                evt.preventDefault();
-                setPoints([]);
-                setTubeGeometry(null);
-            }
-        };
-
-        if (toolMode === "MeasurementScale") {
-            canvasElement.addEventListener("pointerdown", onMouseDown);
-            canvasElement.addEventListener("pointermove", onMouseMove);
-            canvasElement.addEventListener("pointerup", onMouseUp);
-            canvasElement.addEventListener("contextmenu", onContextMenu);
-        } else {
-            resetMeasurement();
-            setPoints([]);
-        }
-
-        return () => {
-            canvasElement.removeEventListener("pointerdown", onMouseDown);
-            canvasElement.removeEventListener("pointermove", onMouseMove);
-            canvasElement.removeEventListener("pointerup", onMouseUp);
-            canvasElement.removeEventListener("contextmenu", onContextMenu);
-        };
-    }, [toolMode, camera, raycaster, pointer, scene, points]);
-
-    useFrame(() => {
-        if (points.length === 1) {
-            raycaster.setFromCamera(pointer, camera);
-            const intersects = raycaster
-                .intersectObjects(scene.children, true)
-                .filter(
-                    (intersect) =>
-                        !intersect.object.name.includes("Roof") &&
-                        !intersect.object.name.includes("MeasurementReference") &&
-                        !intersect.object.name.includes("agv-collider") &&
-                        !intersect.object.name.includes("zonePlane") &&
-                        !intersect.object.name.includes("SelectionGroup") &&
-                        !intersect.object.name.includes("selectionAssetGroup") &&
-                        !intersect.object.name.includes("SelectionGroupBoundingBoxLine") &&
-                        !intersect.object.name.includes("SelectionGroupBoundingBox") &&
-                        !intersect.object.name.includes("SelectionGroupBoundingLine") &&
-                        intersect.object.type !== "GridHelper"
-                );
-
-            if (intersects.length > 0) {
-                updateMeasurement(points[0], intersects[0].point);
-            }
-        } else if (points.length === 2) {
-            updateMeasurement(points[0], points[1]);
-        } else {
-            resetMeasurement();
-        }
-    });
-
-    const updateMeasurement = (start: THREE.Vector3, end: THREE.Vector3) => {
-        const distance = start.distanceTo(end);
-
-        const radius = THREE.MathUtils.clamp(distance * 0.02, MIN_RADIUS, MAX_RADIUS);
-        const coneRadius = THREE.MathUtils.clamp(distance * 0.05, MIN_CONE_RADIUS, MAX_CONE_RADIUS);
-        const coneHeight = THREE.MathUtils.clamp(distance * 0.2, MIN_CONE_HEIGHT, MAX_CONE_HEIGHT);
-
-        setConeSize({ radius: coneRadius, height: coneHeight });
-
-        const direction = new THREE.Vector3().subVectors(end, start).normalize();
-
-        const offset = direction.clone().multiplyScalar(coneHeight * 0.5);
-
-        let tubeStart = start.clone().add(offset);
-        let tubeEnd = end.clone().sub(offset);
-
-        tubeStart.y = Math.max(tubeStart.y, 0);
-        tubeEnd.y = Math.max(tubeEnd.y, 0);
-
-        const curve = new THREE.CatmullRomCurve3([tubeStart, tubeEnd]);
-        setTubeGeometry(new THREE.TubeGeometry(curve, 20, radius, 8, false));
-
-        setStartConePosition(tubeStart);
-        setEndConePosition(tubeEnd);
-        setStartConeQuaternion(getArrowOrientation(start, end));
-        setEndConeQuaternion(getArrowOrientation(end, start));
+        if (keysPressed.current.has("x")) setAxisLock("x");
+        else if (keysPressed.current.has("y")) setAxisLock("y");
+        else if (keysPressed.current.has("z")) setAxisLock("z");
+      } else if (e.key === "Escape") {
+        setPoints([]);
+        setLinePoints(null);
+        setAxisLock(null);
+      }
     };
 
-    const resetMeasurement = () => {
-        setTubeGeometry(null);
-        setStartConePosition(null);
-        setEndConePosition(null);
+    const handleKeyUp = (e: KeyboardEvent) => {
+      keysPressed.current.delete(e.key.toLowerCase());
+      if (keysPressed.current.has("x")) setAxisLock("x");
+      else if (keysPressed.current.has("y")) setAxisLock("y");
+      else if (keysPressed.current.has("z")) setAxisLock("z");
+      else setAxisLock(null);
     };
 
-    const getArrowOrientation = (start: THREE.Vector3, end: THREE.Vector3) => {
-        const direction = new THREE.Vector3()
-            .subVectors(end, start)
-            .normalize()
-            .negate();
-        const quaternion = new THREE.Quaternion();
-        quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), direction);
-        return quaternion;
+    window.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("keyup", handleKeyUp);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("keyup", handleKeyUp);
+    };
+  }, []);
+
+  const getLineColor = useCallback(() => {
+    switch (axisLock) {
+      case "x":
+        return "#d94522"; // Red for X axis
+      case "y":
+        return "#22ab2e"; // Green for Y axis
+      case "z":
+        return "#227bd9"; // Blue for Z axis
+      default:
+        return "#b18ef1"; // Default purple
+    }
+  }, [axisLock]);
+
+  // Apply axis lock to a point
+  const applyAxisLock = useCallback(
+    (point: THREE.Vector3, referencePoint: THREE.Vector3) => {
+      const lockedPoint = point.clone();
+
+      switch (axisLock) {
+        case "x":
+          lockedPoint.y = referencePoint.y;
+          lockedPoint.z = referencePoint.z;
+          break;
+        case "y":
+          lockedPoint.x = referencePoint.x;
+          lockedPoint.z = referencePoint.z;
+          break;
+        case "z":
+          lockedPoint.x = referencePoint.x;
+          lockedPoint.y = referencePoint.y;
+          break;
+      }
+
+      return lockedPoint;
+    },
+    [axisLock]
+  );
+
+  useEffect(() => {
+    const canvasElement = gl.domElement;
+    let drag = false;
+    let isLeftMouseDown = false;
+
+    const onMouseDown = () => {
+      isLeftMouseDown = true;
+      drag = false;
     };
 
-    useEffect(() => {
-        if (points.length === 2) {
-            // console.log(points[0].distanceTo(points[1]));
+    const onMouseUp = (evt: any) => {
+      isLeftMouseDown = false;
+      if (evt.button === 0 && !drag) {
+        raycaster.setFromCamera(pointer, camera);
+        const intersects = raycaster
+          .intersectObjects(scene.children, true)
+          .filter(
+            (intersect) =>
+              !intersect.object.name.includes("Roof") &&
+              !intersect.object.name.includes("MeasurementReference") &&
+              !intersect.object.name.includes("agv-collider") &&
+              !intersect.object.name.includes("zonePlane") &&
+              !intersect.object.name.includes("SelectionGroup") &&
+              !intersect.object.name.includes("selectionAssetGroup") &&
+              !intersect.object.name.includes(
+                "SelectionGroupBoundingBoxLine"
+              ) &&
+              !intersect.object.name.includes("SelectionGroupBoundingBox") &&
+              !intersect.object.name.includes("SelectionGroupBoundingLine") &&
+              intersect.object.type !== "GridHelper"
+          );
+
+        if (intersects.length > 0) {
+          let intersectionPoint = intersects[0].point.clone();
+          if (axisLock && points.length > 0) {
+            intersectionPoint = applyAxisLock(
+              intersectionPoint,
+              points[points.length - 1]
+            );
+          }
+          if (points.length < 2) {
+            setPoints([...points, intersectionPoint]);
+          } else {
+            setPoints([intersectionPoint]);
+          }
         }
-    }, [points]);
+      }
+    };
 
-    return (
-        <group ref={groupRef} name="MeasurementGroup">
-            {startConePosition && (
-                <mesh
-                    name="MeasurementReference"
-                    position={startConePosition}
-                    quaternion={startConeQuaternion}
-                >
-                    <coneGeometry args={[coneSize.radius, coneSize.height, 16]} />
-                    <meshBasicMaterial color="yellow" />
-                </mesh>
-            )}
-            {endConePosition && (
-                <mesh
-                    name="MeasurementReference"
-                    position={endConePosition}
-                    quaternion={endConeQuaternion}
-                >
-                    <coneGeometry args={[coneSize.radius, coneSize.height, 16]} />
-                    <meshBasicMaterial color="yellow" />
-                </mesh>
-            )}
-            {tubeGeometry && (
-                <mesh name="MeasurementReference" geometry={tubeGeometry}>
-                    <meshBasicMaterial color="yellow" />
-                </mesh>
-            )}
+    const onMouseMove = () => {
+      if (isLeftMouseDown) drag = true;
+    };
 
-            {startConePosition && endConePosition && (
-                <Html
-                    scale={THREE.MathUtils.clamp(
-                        startConePosition.distanceTo(endConePosition) * 0.25,
-                        0,
-                        10
-                    )}
-                    position={[
-                        (startConePosition.x + endConePosition.x) / 2,
-                        (startConePosition.y + endConePosition.y) / 2,
-                        (startConePosition.z + endConePosition.z) / 2,
-                    ]}
-                    // class
-                    wrapperClass="distance-text-wrapper"
-                    className="distance-text"
-                    // other
-                    zIndexRange={[1, 0]}
-                    prepend
-                    sprite
-                >
-                    <div>
-                        {(startConePosition.distanceTo(endConePosition) + (coneSize.height)).toFixed(2)} m
-                    </div>
-                </Html>
-            )}
-        </group>
-    );
+    const onContextMenu = (evt: any) => {
+      evt.preventDefault();
+      if (!drag) {
+        setPoints([]);
+        setLinePoints(null);
+      }
+    };
+
+    if (toolMode === "MeasurementScale") {
+      canvasElement.addEventListener("pointerdown", onMouseDown);
+      canvasElement.addEventListener("pointermove", onMouseMove);
+      canvasElement.addEventListener("pointerup", onMouseUp);
+      canvasElement.addEventListener("contextmenu", onContextMenu);
+    } else {
+      setPoints([]);
+      setLinePoints(null);
+    }
+
+    return () => {
+      canvasElement.removeEventListener("pointerdown", onMouseDown);
+      canvasElement.removeEventListener("pointermove", onMouseMove);
+      canvasElement.removeEventListener("pointerup", onMouseUp);
+      canvasElement.removeEventListener("contextmenu", onContextMenu);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [toolMode, camera, raycaster, pointer, scene, points, axisLock]);
+
+  useFrame(() => {
+    if (points.length === 1) {
+      // live preview for second point
+      raycaster.setFromCamera(pointer, camera);
+      const intersects = raycaster
+        .intersectObjects(scene.children, true)
+        .filter(
+          (intersect) =>
+            !intersect.object.name.includes("Roof") &&
+            !intersect.object.name.includes("MeasurementReference") &&
+            !intersect.object.name.includes("agv-collider") &&
+            !intersect.object.name.includes("zonePlane") &&
+            !intersect.object.name.includes("SelectionGroup") &&
+            !intersect.object.name.includes("selectionAssetGroup") &&
+            !intersect.object.name.includes("SelectionGroupBoundingBoxLine") &&
+            !intersect.object.name.includes("SelectionGroupBoundingBox") &&
+            !intersect.object.name.includes("SelectionGroupBoundingLine") &&
+            intersect.object.type !== "GridHelper"
+        );
+
+      if (intersects.length > 0) {
+        let tempEnd = intersects[0].point.clone();
+        if (axisLock) {
+          tempEnd = applyAxisLock(tempEnd, points[0]);
+        }
+        updateMeasurement(points[0], tempEnd);
+      }
+    } else if (points.length === 2) {
+      // second point already fixed
+      updateMeasurement(points[0], points[1]);
+    } else {
+      setLinePoints(null);
+    }
+  });
+
+  const updateMeasurement = (start: THREE.Vector3, end: THREE.Vector3) => {
+    setLinePoints([start.clone(), end.clone()]);
+  };
+
+  return (
+    <group ref={groupRef} name="MeasurementGroup">
+      {linePoints && (
+        <>
+          {/* Outline line */}
+          <Line
+            points={linePoints}
+            color="black"
+            lineWidth={6} // thicker than main line
+            depthTest={false}
+            depthWrite={false}
+            renderOrder={998} // render behind main line
+          />
+
+          {/* Main line */}
+          <Line
+            points={linePoints}
+            color={getLineColor()}
+            lineWidth={2} // actual line width
+            depthTest={false}
+            depthWrite={false}
+            transparent={false}
+            opacity={1}
+            renderOrder={999} // render on top
+          />
+        </>
+      )}
+
+      {points.map((point, index) => (
+        <Html
+          key={index}
+          position={point}
+          scale={0.5}
+          wrapperClass="measurement-label-wrapper"
+          className="measurement-label"
+          zIndexRange={[1, 0]}
+          prepend
+          sprite
+        >
+          <div className="measurement-point"></div>
+        </Html>
+      ))}
+
+      {linePoints && linePoints.length === 2 && (
+        <Html
+          position={[
+            (linePoints[0].x + linePoints[1].x) / 2,
+            (linePoints[0].y + linePoints[1].y) / 2,
+            (linePoints[0].z + linePoints[1].z) / 2,
+          ]}
+          scale={0.5}
+          wrapperClass="distance-text-wrapper"
+          className="distance-text"
+          zIndexRange={[2, 1]}
+          prepend
+          sprite
+        >
+          <div>{linePoints[0].distanceTo(linePoints[1]).toFixed(2)} m</div>
+        </Html>
+      )}
+    </group>
+  );
 };
 
 export default MeasurementTool;
diff --git a/app/src/modules/visualization/zone/DisplayZone.tsx b/app/src/modules/visualization/zone/DisplayZone.tsx
index 42fe4c4..b8d117a 100644
--- a/app/src/modules/visualization/zone/DisplayZone.tsx
+++ b/app/src/modules/visualization/zone/DisplayZone.tsx
@@ -241,21 +241,18 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
         {Object.keys(zonesData).length !== 0 ? (
           <>
             {Object.values(zonesData).map((zone, index) => (
-              <>
-                { }
-                <div
-                  key={index}
-                  className={`zone ${selectedZone.zoneUuid === zone.zoneUuid ? "active" : ""
-                    }`}
-                  onClick={() => {
+              <div
+                key={`${index}_${zone.zoneName}`}
+                className={`zone ${selectedZone.zoneUuid === zone.zoneUuid ? "active" : ""
+                  }`}
+                onClick={() => {
 
-                    handleSelect2dZoneData(zonesData[zone.zoneUuid]?.zoneUuid, zone.zoneName)
-                  }
-                  }
-                >
-                  {zone.zoneName}
-                </div>
-              </>
+                  handleSelect2dZoneData(zonesData[zone.zoneUuid]?.zoneUuid, zone.zoneName)
+                }
+                }
+              >
+                {zone.zoneName}
+              </div>
             ))}
           </>
         ) : (
diff --git a/app/src/store/builder/store.ts b/app/src/store/builder/store.ts
index bd84d59..0fadaf3 100644
--- a/app/src/store/builder/store.ts
+++ b/app/src/store/builder/store.ts
@@ -436,6 +436,16 @@ export const useZoneAssetId = create<ZoneAssetState>((set) => ({
     setZoneAssetId: (asset) => set({ zoneAssetId: asset }),
 }));
 
+interface ResourceManagementState {
+    resourceManagementId: string;
+    setResourceManagementId: (id: string) => void;
+}
+
+export const useResourceManagementId = create<ResourceManagementState>((set) => ({
+    resourceManagementId: "", // default value
+    setResourceManagementId: (id: string) => set({ resourceManagementId: id }),
+}));
+
 // version visible hidden
 interface VersionHistoryState {
     viewVersionHistory: boolean;
diff --git a/app/src/styles/components/form.scss b/app/src/styles/components/form.scss
index 67accd2..31b9015 100644
--- a/app/src/styles/components/form.scss
+++ b/app/src/styles/components/form.scss
@@ -9,6 +9,7 @@
   border-radius: #{$border-radius-large};
   outline: 1px solid var(--border-color);
   z-index: 100;
+  backdrop-filter: blur(4px);
   .header {
     @include flex-center;
     gap: 8px;
diff --git a/app/src/styles/components/tools.scss b/app/src/styles/components/tools.scss
index c07f11a..e01160d 100644
--- a/app/src/styles/components/tools.scss
+++ b/app/src/styles/components/tools.scss
@@ -31,6 +31,7 @@
   }
 
   .draw-tools,
+  .transform-tools,
   .general-options,
   .activeDropicon {
     @include flex-center;
diff --git a/app/src/styles/layout/resourceManagement.scss b/app/src/styles/layout/resourceManagement.scss
index 400a98c..131220f 100644
--- a/app/src/styles/layout/resourceManagement.scss
+++ b/app/src/styles/layout/resourceManagement.scss
@@ -1,491 +1,703 @@
 @use "../abstracts/variables" as *;
 @use "../abstracts/mixins" as *;
 
-
-
 .resourceManagement-container {
-    .navigation-wrapper {
-        @include flex-space-between;
-        justify-content: space-around;
+  .navigation-wrapper {
+    @include flex-space-between;
+    justify-content: space-around;
 
-        .navigation {
+    .navigation {
+      padding: 4px 12px;
+      border-radius: 20px;
+      text-wrap: nowrap;
+      margin: 6px 0;
+      cursor: pointer;
 
-            padding: 4px 12px;
-            border-radius: 20px;
-            text-wrap: nowrap;
-            margin: 6px 0;
-            cursor: pointer;
+      &.active {
+        background: var(--background-color-button);
+      }
+    }
+  }
 
-            &.active {
-                background: var(--background-color-button);
-            }
-        }
+  .search-container {
+    position: relative;
+    padding: 4px 2px;
 
+    .search-wrapper {
+      padding: 0;
+
+      input {
+        padding-right: 85px;
+      }
     }
 
-    .search-container {
+    .select-catagory {
+      position: absolute;
+      top: 50%;
+      right: 8px;
+      transform: translate(0, -50%);
+      z-index: 10;
+
+      .regularDropdown-container {
+        padding: 2px 8px;
+      }
+    }
+  }
+
+  .category-wrapper {
+    display: flex;
+    gap: 12px;
+    width: 100%;
+    overflow: auto;
+    padding: 8px 10px;
+
+    .category {
+      text-wrap: nowrap;
+      position: relative;
+      cursor: pointer;
+      color: var(--text-disabled);
+
+      &.active {
+        color: var(--text-color);
+
+        &::after {
+          content: "";
+          position: absolute;
+          bottom: -6px;
+          left: 0;
+          width: 100%;
+          height: 2px;
+          border-radius: 100px;
+          background: var(--background-color-button);
+        }
+      }
+    }
+  }
+
+  .assetManagement-wrapper {
+    max-height: calc(62vh - 12px);
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    margin-top: 7px;
+    // padding: 7px 2px;
+  }
+
+  // HRM
+  .hrm-container {
+    .analysis-wrapper {
+      border-radius: 20px;
+      padding: 16px;
+
+      display: flex;
+      flex-direction: column;
+      gap: 14px;
+
+      outline: 1px solid var(--border-color);
+      outline-offset: -1px;
+      background: var(--background-color);
+
+      &.active {
+        outline: 1px solid var(--Color-Hover, #ccacff);
+      }
+
+      header {
         position: relative;
-        padding: 4px 2px;
+        @include flex-space-between;
+        padding-bottom: 6px;
 
-        .search-wrapper {
-            padding: 0;
+        .user-details {
+          display: flex;
+          gap: 6px;
 
-            input {
-                padding-right: 85px;
-            }
-        }
-
-        .select-catagory {
-            position: absolute;
-            top: 50%;
-            right: 8px;
-            transform: translate(0, -50%);
-            z-index: 10;
-
-            .regularDropdown-container {
-                padding: 2px 8px;
-            }
-        }
-    }
-
-    .category-wrapper {
-        display: flex;
-        gap: 12px;
-        width: 100%;
-        overflow: auto;
-        padding: 8px 10px;
-
-        .category {
-            text-wrap: nowrap;
+          .user-image-wrapper {
+            width: 28px;
+            height: 28px;
+            border-radius: 50%;
+            background-color: #fff;
             position: relative;
-            cursor: pointer;
-            color: var(--text-disabled);
 
-            &.active {
-                color: var(--text-color);
+            .status {
+              border-radius: 50%;
+              width: 6px;
+              height: 6px;
+              outline: 1px solid #2f2c32;
 
-                &::after {
-                    content: "";
-                    position: absolute;
-                    bottom: -6px;
-                    left: 0;
-                    width: 100%;
-                    height: 2px;
-                    border-radius: 100px;
-                    background: var(--background-color-button);
-                }
+              position: absolute;
+              bottom: 0;
+              right: 0;
 
+              &.Active {
+                background-color: #44e5c6;
+              }
             }
-        }
-    }
+          }
 
-    .assetManagement-wrapper {
-        max-height: calc(62vh - 12px);
-        overflow: auto;
+          .details {
+            max-width: 144px;
+            .input-value{
+              max-width: 120px;
+            }
+            .employee-id {
+              color: #b7b7c6;
+              font-size: $tiny;
+            }
+          }
+        }
+
+        .see-more {
+          padding: 4px 12px;
+          border-radius: 20px;
+          text-wrap: nowrap;
+          margin: 6px 0;
+          cursor: pointer;
+          background: var(--background-color-button);
+        }
+
+        &::after {
+          content: "";
+          position: absolute;
+          bottom: -7px;
+          left: 0;
+          width: 100%;
+          height: 1px;
+          background-color: #6f6f7a;
+        }
+      }
+
+      .content {
         display: flex;
         flex-direction: column;
-        gap: 12px;
-        margin-top: 7px;
-        // padding: 7px 2px;
-    }
+        gap: 4px;
 
-    // HRM
-    .hrm-container {
-        .analysis-wrapper {
-            border-radius: 20px;
-            padding: 16px;
+        .task-info {
+          padding: 8px 0;
+          display: flex;
+          flex-direction: column;
+          gap: 6px;
 
+          .task-wrapper {
             display: flex;
-            flex-direction: column;
+            justify-content: space-between;
+            align-items: center;
+
+            .task-label {
+              display: flex;
+              align-items: center;
+              gap: 3px;
+
+              .label-text {
+                color: #b7b7c6;
+              }
+            }
+          }
+        }
+
+        .task-stats {
+          display: grid;
+          grid-template-columns: repeat(1, 1fr); // Two equal-width columns
+          gap: 4px;
+
+          .stat-item {
+            border-radius: 100px;
+            @include flex-space-between;
+            background: linear-gradient(
+              162.53deg,
+              rgba(51, 51, 51, 0.7) 0%,
+              rgba(45, 36, 55, 0.7) 106.84%
+            );
+            border: 1px solid #ffffff0d;
+            padding: 6px;
+
+            .stat-wrapper {
+              display: flex;
+              align-items: center;
+              gap: 4px;
+            }
+
+            span,
+            .stat-value {
+              font-size: 10px;
+              display: flex;
+            }
+          }
+        }
+
+        .location-wrapper {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 6px 0;
+
+          .location-header {
+            display: flex;
+            gap: 6px;
+
+            .icon {
+              display: flex;
+            }
+
+            .header {
+              font-size: 12px;
+              color: #b7b7c6;
+            }
+          }
+        }
+
+        .task-actions {
+          display: grid;
+          grid-template-columns: repeat(2, 1fr); // Two equal-width columns
+          gap: 4px;
+          margin-top: 3px;
+
+          button {
+            line-height: 133%;
+            font-size: 11px;
+            border: 1px solid var(--Linear-Border, #564b69);
+            border-radius: 100px;
+            padding: 4px 0;
+
+            &:last-child {
+              background-color: #cc2c1e;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // ASSET MANAGEMENT
+  .assetManagement-container {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+
+    .assetManagement-card-wrapper {
+      padding: 16px;
+      border: 1px solid #564b69;
+      border-radius: 20px;
+      gap: 10px;
+
+      header {
+        border-bottom: 1px solid #595965;
+        padding-bottom: 8px;
+
+        .header-wrapper {
+          display: flex;
+          gap: 8px;
+
+          .icon {
+            min-width: 28px;
+            height: 28px;
+            border-radius: 7px;
+            @include flex-center;
+            background: var(--background-color-button);
+          }
+
+          .asset-image {
+            width: 114px;
+            height: 112px;
+            border-radius: 15.2px;
+            object-fit: cover;
+          }
+
+          .asset-details-container {
+            width: 100%;
+            @include flex-space-between;
+
+            .asset-details {
+              display: flex;
+              gap: 4px;
+              width: 100%;
+              max-width: 160px;
+              .input-value {
+                width: fit-content;
+              }
+              .asset-model {
+                color: var(--text-disabled);
+                display: none;
+              }
+            }
+          }
+
+          .asset-status-wrapper {
+            padding: 4px 8px;
+            border: 1px solid var(--text-color-dark, #f3f3fdd9);
+            border-radius: 100px;
+            @include flex-space-between;
+            gap: 4px;
+
+            .indication {
+              width: 6px;
+              height: 6px;
+              border-radius: 100%;
+
+              &.Online {
+                background-color: #44e5c6;
+              }
+            }
+
+            .status {
+              font-size: $small;
+            }
+          }
+        }
+      }
+
+      .asset-contents {
+        display: flex;
+        flex-direction: column;
+        gap: 3px;
+
+        .asset-wrapper {
+          @include flex-space-between;
+          padding: 6px 0;
+          gap: 20px;
+
+          .key-wrapper,
+          .viewMore {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+
+            .icon {
+              @include flex-center;
+            }
+          }
+
+          .viewMore {
+            padding: 8px;
+            border-radius: 100px;
+            background: var(--background-color-button);
+            cursor: pointer;
+          }
+
+          .progress-wrapper {
+            flex: 1;
+            @include flex-space-between;
+            gap: 4px;
+
+            .progress-bar {
+              width: 100%;
+              height: 5px;
+              border-radius: 20px;
+              background-color: #6f6f7a;
+              position: relative;
+
+              .filled-value {
+                position: absolute;
+                top: 0;
+                left: 0;
+                height: 100%;
+                width: 10px;
+                background-color: #ccacff;
+                border-radius: 20px;
+              }
+            }
+          }
+        }
+      }
+
+      .asset-estimate {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+
+        &__label {
+          color: #b7b7c6;
+          font-size: 14px;
+        }
+
+        &__value {
+          font-weight: 500;
+          font-size: 16px;
+        }
+
+        &__unit-cost {
+          display: flex;
+          flex-direction: column;
+          gap: 4px;
+        }
+
+        &__breakdown {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          gap: 2px;
+        }
+
+        &__view-button {
+          cursor: pointer;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          gap: 4px;
+          background-color: var(--background-color-button);
+          border-radius: 20px;
+          padding: 8px 0;
+        }
+
+        &__view-text {
+          font-weight: 500;
+          // color: #4A4AFF;
+        }
+      }
+
+      &.openViewMore {
+        outline-offset: -1px;
+        outline: 1px solid var(--Color-Hover, #ccacff);
+
+        header {
+          display: flex;
+          flex-direction: column;
+          gap: 6px;
+
+          .header-wrapper {
             gap: 14px;
 
-            outline: 1px solid var(--border-color);
-            outline-offset: -1px;
-            background: var(--background-color);
+            .asset-details-container {
+              flex-direction: column;
+              align-items: start;
+              justify-content: start;
 
-            &.active {
-                outline: 1px solid var(--Color-Hover, #CCACFF);
-            }
-
-            header {
-                position: relative;
-                @include flex-space-between;
-                padding: 3px 0;
-
-                .user-details {
-                    display: flex;
-                    gap: 6px;
-
-                    .user-image-wrapper {
-                        width: 28px;
-                        height: 28px;
-                        border-radius: 50%;
-                        background-color: #fff;
-                        position: relative;
-
-                        .status {
-                            border-radius: 50%;
-                            width: 6px;
-                            height: 6px;
-                            outline: 1px solid #2F2C32;
-
-                            position: absolute;
-                            bottom: 0;
-                            right: 0;
-
-                            &.Active {
-                                background-color: #44E5C6;
-                            }
-                        }
-                    }
-
-                    .details {
-                        .employee-id {
-                            color: #B7B7C6;
-                            font-size: $tiny;
-
-                        }
-                    }
-                }
-
-                .see-more {
-
-                    padding: 4px 12px;
-                    border-radius: 20px;
-                    text-wrap: nowrap;
-                    margin: 6px 0;
-                    cursor: pointer;
-                    background: var(--background-color-button);
-                }
-
-                &::after {
-                    content: "";
-                    position: absolute;
-                    bottom: -7px;
-                    left: 0;
-                    width: 100%;
-                    height: 1px;
-                    background-color: #6F6F7A;
-                }
-            }
-
-            .content {
+              .asset-details {
                 display: flex;
                 flex-direction: column;
                 gap: 4px;
-
-                .task-info {
-                    padding: 8px 0;
-                    display: flex;
-                    flex-direction: column;
-                    gap: 6px;
-
-                    .task-wrapper {
-                        display: flex;
-                        justify-content: space-between;
-                        align-items: center;
-
-                        .task-label {
-                            display: flex;
-                            align-items: center;
-                            gap: 3px;
-
-                            .label-text {
-                                color: #B7B7C6;
-                            }
-                        }
-                    }
-                }
-
-                .task-stats {
-                    display: grid;
-                    grid-template-columns: repeat(1, 1fr); // Two equal-width columns
-                    gap: 4px;
-
-                    .stat-item {
-                        border-radius: 100px;
-                        @include flex-space-between;
-                        background: linear-gradient(162.53deg,
-                                rgba(51, 51, 51, 0.7) 0%,
-                                rgba(45, 36, 55, 0.7) 106.84%);
-                        border: 1px solid #FFFFFF0D;
-                        padding: 6px;
-
-                        .stat-wrapper {
-                            display: flex;
-                            align-items: center;
-                            gap: 4px;
-                        }
-
-                        span,
-                        .stat-value {
-                            font-size: 10px;
-                            display: flex;
-                        }
-                    }
-                }
-
-                .location-wrapper {
-                    display: flex;
-                    align-items: center;
-                    justify-content: space-between;
-                    padding: 6px 0;
-
-                    .location-header {
-                        display: flex;
-                        gap: 6px;
-
-                        .icon {
-                            display: flex;
-                        }
-
-                        .header {
-                            font-size: 12px;
-                            color: #B7B7C6;
-                        }
-                    }
-                }
-
-                .task-actions {
-                    display: grid;
-                    grid-template-columns: repeat(2, 1fr); // Two equal-width columns
-                    gap: 4px;
-                    margin-top: 3px;
-
-                    button {
-                        line-height: 133%;
-                        font-size: 11px;
-                        border: 1px solid var(--Linear-Border, #564B69);
-                        border-radius: 100px;
-                        padding: 4px 0;
-
-                        &:last-child {
-                            background-color: #CC2C1E;
-                        }
-                    }
+                max-width: 144px;
+                .input-value {
+                  text-wrap: wrap;
+                  font-size: 1rem;
                 }
+              }
 
+              .asset-status-wrapper {
+                margin-top: 8px;
+              }
             }
+          }
         }
+      }
+    }
+  }
+}
+
+// ASSET MANAGEMENT
+.assetManagement-container {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  position: relative;
+
+  .assetManagement-card-wrapper {
+    padding: 16px;
+    border: 1px solid #564b69;
+    border-radius: 20px;
+    gap: 10px;
+    position: relative;
+
+    header {
+      border-bottom: 1px solid #595965;
+      padding-bottom: 8px;
+
+      .header-wrapper {
+        display: flex;
+        gap: 8px;
+
+        .icon {
+          min-width: 28px;
+          height: 28px;
+          border-radius: 7px;
+          @include flex-center;
+          background: var(--background-color-button);
+        }
+
+        .drop-icon {
+          position: absolute;
+          top: 18px;
+          right: 16px;
+          cursor: pointer;
+        }
+
+        .asset-image {
+          width: 114px;
+          height: 112px;
+          border-radius: 15.2px;
+          object-fit: cover;
+        }
+
+        .asset-details-container {
+          width: 100%;
+          @include flex-space-between;
+
+          .asset-details {
+            // .asset-name{
+            //     overflow: hidden;
+            // }
+            .asset-model {
+              color: var(--text-disabled);
+            }
+          }
+        }
+
+        .asset-status-wrapper {
+          padding: 4px 8px;
+          border: 1px solid var(--text-color-dark, #f3f3fdd9);
+          border-radius: 100px;
+          @include flex-space-between;
+          gap: 4px;
+
+          .indication {
+            width: 6px;
+            height: 6px;
+            border-radius: 100%;
+
+            &.Online {
+              background-color: #44e5c6;
+            }
+          }
+
+          .status {
+            font-size: $small;
+          }
+        }
+      }
     }
 
-    // ASSET MANAGEMENT
-    .assetManagement-container {
+    .asset-contents {
+      display: flex;
+      flex-direction: column;
+      gap: 3px;
+
+      .asset-wrapper {
+        @include flex-space-between;
+        padding: 6px 0;
+        gap: 20px;
+
+        .key-wrapper,
+        .viewMore {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+
+          .icon {
+            @include flex-center;
+          }
+        }
+
+        .viewMore {
+          padding: 8px;
+          border-radius: 100px;
+          background: var(--background-color-button);
+          cursor: pointer;
+        }
+
+        .progress-wrapper {
+          flex: 1;
+          @include flex-space-between;
+          gap: 4px;
+
+          .progress-bar {
+            width: 100%;
+            height: 5px;
+            border-radius: 20px;
+            background-color: #6f6f7a;
+            position: relative;
+
+            .filled-value {
+              position: absolute;
+              top: 0;
+              left: 0;
+              height: 100%;
+              width: 10px;
+              background-color: #ccacff;
+              border-radius: 20px;
+            }
+          }
+        }
+      }
+    }
+
+    .asset-estimate {
+      margin-top: 5px;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+
+      &__label {
+        color: #b7b7c6;
+        font-size: 14px;
+      }
+
+      &__value {
+        font-weight: 500;
+        font-size: 16px;
+      }
+
+      &__unit-cost {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+
+      &__breakdown {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        gap: 2px;
+      }
+
+      &__view-button {
+        cursor: pointer;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 4px;
+        background-color: var(--background-color-button);
+        border-radius: 20px;
+        padding: 8px 0;
+      }
+
+      &__view-text {
+        font-weight: 500;
+        // color: #4A4AFF;
+      }
+    }
+
+    &.openViewMore {
+      outline-offset: -1px;
+      outline: 1px solid var(--Color-Hover, #ccacff);
+
+      header {
         display: flex;
         flex-direction: column;
         gap: 6px;
 
-        .assetManagement-card-wrapper {
-            padding: 16px;
-            border: 1px solid #564B69;
-            border-radius: 20px;
-            gap: 10px;
+        .header-wrapper {
+          gap: 20px;
 
+          .asset-details-container {
+            flex-direction: column;
+            align-items: start;
+            justify-content: center;
 
+            .asset-details {
+              display: flex;
+              flex-direction: column;
+              gap: 4px;
 
-            header {
-                border-bottom: 1px solid #595965;
-                padding-bottom: 8px;
-
-
-                .header-wrapper {
-                    display: flex;
-                    gap: 8px;
-
-                    .icon {
-                        min-width: 28px;
-                        height: 28px;
-                        border-radius: 7px;
-                        @include flex-center;
-                        background: var(--background-color-button);
-                    }
-
-                    .asset-image {
-                        width: 114px;
-                        height: 112px;
-                        border-radius: 15.2px;
-                        object-fit: cover;
-                    }
-
-                    .asset-details-container {
-                        width: 100%;
-                        @include flex-space-between;
-
-                        .asset-details {
-
-                            // .asset-name{
-                            //     overflow: hidden;
-                            // }
-                            .asset-model {
-                                color: var(--text-disabled);
-
-                            }
-                        }
-                    }
-
-                    .asset-status-wrapper {
-                        padding: 4px 8px;
-                        border: 1px solid var(--text-color-dark, #F3F3FDD9);
-                        border-radius: 100px;
-                        @include flex-space-between;
-                        gap: 4px;
-
-                        .indication {
-                            width: 6px;
-                            height: 6px;
-                            border-radius: 100%;
-
-                            &.Online {
-                                background-color: #44E5C6;
-                            }
-                        }
-
-                        .status {
-                            font-size: $small;
-                        }
-                    }
-                }
+              .asset-name {
+                font-size: 16px;
+              }
             }
 
-            .asset-contents {
-                display: flex;
-                flex-direction: column;
-                gap: 3px;
-
-                .asset-wrapper {
-                    @include flex-space-between;
-                    padding: 6px 0;
-                    gap: 20px;
-
-                    .key-wrapper,
-                    .viewMore {
-                        display: flex;
-                        align-items: center;
-                        gap: 6px;
-
-                        .icon {
-                            @include flex-center;
-                        }
-                    }
-
-                    .viewMore {
-                        padding: 8px;
-                        border-radius: 100px;
-                        background: var(--background-color-button);
-                        cursor: pointer;
-                    }
-
-                    .progress-wrapper {
-                        flex: 1;
-                        @include flex-space-between;
-                        gap: 4px;
-
-                        .progress-bar {
-                            width: 100%;
-                            height: 5px;
-                            border-radius: 20px;
-                            background-color: #6F6F7A;
-                            position: relative;
-
-                            .filled-value {
-                                position: absolute;
-                                top: 0;
-                                left: 0;
-                                height: 100%;
-                                width: 10px;
-                                background-color: #CCACFF;
-                                border-radius: 20px;
-                            }
-                        }
-                    }
-                }
+            .asset-status-wrapper {
+              margin-top: 4px;
             }
-
-            .asset-estimate {
-                display: flex;
-                flex-direction: column;
-                gap: 10px;
-
-                &__label {
-                    color: #B7B7C6;
-                    font-size: 14px;
-                }
-
-                &__value {
-                    font-weight: 500;
-                    font-size: 16px;
-                }
-
-                &__unit-cost {
-                    display: flex;
-                    flex-direction: column;
-                    gap: 4px;
-                }
-
-                &__breakdown {
-                    display: flex;
-                    flex-direction: row;
-                    justify-content: space-between;
-                    gap: 2px;
-                }
-
-                &__view-button {
-                    cursor: pointer;
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                    gap: 4px;
-                    background-color: var(--background-color-button);
-                    border-radius: 20px;
-                    padding: 8px 0;
-                }
-
-                &__view-text {
-                    font-weight: 500;
-                    // color: #4A4AFF;
-                }
-            }
-
-            &.openViewMore {
-                outline-offset: -1px;
-                outline: 1px solid var(--Color-Hover, #CCACFF);
-
-                header {
-                    display: flex;
-                    flex-direction: column;
-                    gap: 6px;
-
-                    .header-wrapper {
-
-                        gap: 20px;
-
-                        .asset-details-container {
-                            flex-direction: column;
-                            align-items: start;
-                            justify-content: center;
-
-                            .asset-details {
-                                display: flex;
-                                flex-direction: column;
-                                gap: 4px;
-
-                                .asset-name {
-                                    font-size: 16px;
-                                }
-                            }
-
-                            .asset-status-wrapper {
-                                margin-top: 4px;
-                            }
-                        }
-                    }
-                }
-
-
-
-            }
-
+          }
         }
+      }
     }
-
-}
\ No newline at end of file
+  }
+}
diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss
index 549cbbc..aa8e84e 100644
--- a/app/src/styles/layout/sidebar.scss
+++ b/app/src/styles/layout/sidebar.scss
@@ -516,6 +516,7 @@
               width: 50px;
               border-radius: 100px;
               cursor: pointer;
+
               &:hover {
                 outline: 1px solid var(--accent-color);
               }
@@ -586,6 +587,7 @@
               align-items: center;
               justify-content: center;
               border-radius: 8px;
+
               &:hover {
                 background: var(--background-color);
                 outline: 1px solid #aaaaaa29;
@@ -600,6 +602,7 @@
 
             .kebab-icon {
               display: flex;
+
               svg {
                 transform: rotate(90deg) scale(0.8);
               }
@@ -1434,6 +1437,11 @@
       padding: 12px;
       border-radius: #{$border-radius-large};
 
+      outline: 1px solid var(--border-color);
+      outline-offset: -1px;
+      border-radius: 12px;
+      background: var(--background-color);
+
       .compare-simulations-header {
         font-weight: var(--font-weight-medium);
       }
@@ -1598,8 +1606,13 @@
     .animations-lists {
       max-height: 210px;
       overflow: auto;
+      .no-animation {
+        padding: 6px 8px;
+        line-height: 20px;
+      }
       .animations-list-wrapper {
         padding: 0 4px;
+
         .animations-list {
           margin: 2px 0;
           padding: 4px 12px;
@@ -1789,7 +1802,8 @@
       padding: 14px;
       padding-bottom: 0;
       margin-bottom: 8px;
-      .input-toggle-container{
+
+      .input-toggle-container {
         padding: 4px 0;
         margin-bottom: 8px;
       }
diff --git a/app/src/styles/scene/comments.scss b/app/src/styles/scene/comments.scss
index 480594a..ed4a1be 100644
--- a/app/src/styles/scene/comments.scss
+++ b/app/src/styles/scene/comments.scss
@@ -171,8 +171,8 @@
     .messages-wrapper {
       padding: 12px;
       padding-top: 0;
-      max-height: 50vh;
-      overflow-y: auto;
+      max-height: 36vh;
+      overflow: auto;
       .edit-container {
         .input-container {
           textarea {
diff --git a/app/src/styles/scene/scene.scss b/app/src/styles/scene/scene.scss
index 6358c81..dee2536 100644
--- a/app/src/styles/scene/scene.scss
+++ b/app/src/styles/scene/scene.scss
@@ -130,15 +130,25 @@
   svg {
     display: none;
   }
-  .c-jiwtRJ{
+  .c-jiwtRJ {
     align-items: center;
   }
 }
 
-.stats{
+.stats {
   top: auto !important;
   bottom: 36px !important;
   left: 12px !important;
   border-radius: 6px;
   overflow: hidden;
 }
+
+.measurement-point {
+  height: 12px;
+  width: 12px;
+  border-radius: 50%;
+  background: #b18ef1;
+  outline: 2px solid black;
+  outline-offset: -1px;
+  transform: translate(-50%, -50%);
+}
diff --git a/app/src/utils/compressImage.ts b/app/src/utils/compressImage.ts
new file mode 100644
index 0000000..3aafcea
--- /dev/null
+++ b/app/src/utils/compressImage.ts
@@ -0,0 +1,39 @@
+export async function compressImage(
+  dataUrl: string,
+  maxWidth = 400,
+  maxHeight = 400
+): Promise<string> {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.src = dataUrl;
+
+    img.onload = () => {
+      const { width, height } = img;
+
+      // Calculate aspect ratio preserving resize
+      let newWidth = width;
+      let newHeight = height;
+
+      if (width > height) {
+        if (width > maxWidth) {
+          newWidth = maxWidth;
+          newHeight = (height * maxWidth) / width;
+        }
+      } else {
+        if (height > maxHeight) {
+          newHeight = maxHeight;
+          newWidth = (width * maxHeight) / height;
+        }
+      }
+
+      const offCanvas = document.createElement("canvas");
+      const ctx = offCanvas.getContext("2d");
+
+      offCanvas.width = newWidth;
+      offCanvas.height = newHeight;
+
+      ctx?.drawImage(img, 0, 0, newWidth, newHeight);
+      resolve(offCanvas.toDataURL("image/png"));
+    };
+  });
+}
diff --git a/app/src/utils/shortcutkeys/handleShortcutKeys.ts b/app/src/utils/shortcutkeys/handleShortcutKeys.ts
index 507e31b..6a03563 100644
--- a/app/src/utils/shortcutkeys/handleShortcutKeys.ts
+++ b/app/src/utils/shortcutkeys/handleShortcutKeys.ts
@@ -221,8 +221,12 @@ const KeyPressListener: React.FC = () => {
 
     // Shortcuts specific for sidebar visibility toggle and others specific to sidebar if added
     handleSidebarShortcuts(keyCombination);
+
+
     // Active module selection (builder, simulation, etc.)
-    handleModuleSwitch(keyCombination);
+    if (event.location === 0) { // Location 0 = standard keyboard (not numpad)
+      handleModuleSwitch(keyCombination);
+    }
     // Common editing tools: cursor | delete | free-hand
     handlePrimaryTools(keyCombination);
     // Shortcuts specific to the builder module (e.g., drawing and measurement tools)