diff --git a/app/src/assets/image/wallTextures/defaultTexture.jpg b/app/src/assets/image/wallTextures/defaultTexture.jpg
new file mode 100644
index 0000000..97dfb91
Binary files /dev/null and b/app/src/assets/image/wallTextures/defaultTexture.jpg differ
diff --git a/app/src/assets/image/wallTextures/wallTexture.png b/app/src/assets/image/wallTextures/wallTexture.png
new file mode 100644
index 0000000..d3a7a0a
Binary files /dev/null and b/app/src/assets/image/wallTextures/wallTexture.png differ
diff --git a/app/src/components/layout/scenes/MainScene.tsx b/app/src/components/layout/scenes/MainScene.tsx
index b15f28f..10894eb 100644
--- a/app/src/components/layout/scenes/MainScene.tsx
+++ b/app/src/components/layout/scenes/MainScene.tsx
@@ -1,44 +1,52 @@
-import React from 'react'
-import { useLoadingProgress, useSaveVersion, useSocketStore, useWidgetSubOption } from '../../../store/builder/store';
-import useModuleStore, { useThreeDStore } from '../../../store/useModuleStore';
-import { usePlayButtonStore } from '../../../store/usePlayButtonStore';
-import { useSelectedZoneStore } from '../../../store/visualization/useZoneStore';
-import { useFloatingWidget } from '../../../store/visualization/useDroppedObjectsStore';
-import { useSelectedUserStore } from '../../../store/collaboration/useCollabStore';
-import KeyPressListener from '../../../utils/shortcutkeys/handleShortcutKeys';
-import LoadingPage from '../../templates/LoadingPage';
-import ModuleToggle from '../../ui/ModuleToggle';
-import SideBarLeft from '../sidebarLeft/SideBarLeft';
-import SideBarRight from '../sidebarRight/SideBarRight';
-import RealTimeVisulization from '../../../modules/visualization/RealTimeVisulization';
-import MarketPlace from '../../../modules/market/MarketPlace';
-import Tools from '../../ui/Tools';
-import SimulationPlayer from '../../ui/simulation/simulationPlayer';
-import ControlsPlayer from '../controls/ControlsPlayer';
-import SelectFloorPlan from '../../temporary/SelectFloorPlan';
-import { createHandleDrop } from '../../../modules/visualization/functions/handleUiDrop';
-import Scene from '../../../modules/scene/scene';
-import { useComparisonProduct, useMainProduct } from '../../../store/simulation/useSimulationStore';
-import { useProductContext } from '../../../modules/simulation/products/productContext';
-import { useProductStore } from '../../../store/simulation/useProductStore';
-import RegularDropDown from '../../ui/inputs/RegularDropDown';
+import React from "react";
+import {
+  useLoadingProgress,
+  useSaveVersion,
+  useSocketStore,
+  useWidgetSubOption,
+} from "../../../store/builder/store";
+import useModuleStore, { useThreeDStore } from "../../../store/useModuleStore";
+import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
+import { useSelectedZoneStore } from "../../../store/visualization/useZoneStore";
+import { useFloatingWidget } from "../../../store/visualization/useDroppedObjectsStore";
+import { useSelectedUserStore } from "../../../store/collaboration/useCollabStore";
+import KeyPressListener from "../../../utils/shortcutkeys/handleShortcutKeys";
+import LoadingPage from "../../templates/LoadingPage";
+import ModuleToggle from "../../ui/ModuleToggle";
+import SideBarLeft from "../sidebarLeft/SideBarLeft";
+import SideBarRight from "../sidebarRight/SideBarRight";
+import RealTimeVisulization from "../../../modules/visualization/RealTimeVisulization";
+import MarketPlace from "../../../modules/market/MarketPlace";
+import Tools from "../../ui/Tools";
+import SimulationPlayer from "../../ui/simulation/simulationPlayer";
+import ControlsPlayer from "../controls/ControlsPlayer";
+import SelectFloorPlan from "../../temporary/SelectFloorPlan";
+import { createHandleDrop } from "../../../modules/visualization/functions/handleUiDrop";
+import Scene from "../../../modules/scene/scene";
+import {
+  useComparisonProduct,
+  useMainProduct,
+} from "../../../store/simulation/useSimulationStore";
+import { useProductContext } from "../../../modules/simulation/products/productContext";
+import { useProductStore } from "../../../store/simulation/useProductStore";
+import RegularDropDown from "../../ui/inputs/RegularDropDown";
 
 function MainScene() {
-    const { products } = useProductStore();
-    const { setMainProduct } = useMainProduct();
-    const { selectedProductStore } = useProductContext();
-    const { selectedProduct } = selectedProductStore();
-    const { isVersionSaved } = useSaveVersion();
-    const { activeModule } = useModuleStore();
-    const { selectedUser } = useSelectedUserStore();
-    const { loadingProgress } = useLoadingProgress();
-    const { toggleThreeD } = useThreeDStore();
-    const { isPlaying } = usePlayButtonStore();
-    const { widgetSubOption } = useWidgetSubOption();
-    const { visualizationSocket } = useSocketStore();
-    const { selectedZone } = useSelectedZoneStore();
-    const { setFloatingWidget } = useFloatingWidget();
-    const { comparisonProduct } = useComparisonProduct();
+  const { products } = useProductStore();
+  const { setMainProduct } = useMainProduct();
+  const { selectedProductStore } = useProductContext();
+  const { selectedProduct } = selectedProductStore();
+  const { isVersionSaved } = useSaveVersion();
+  const { activeModule } = useModuleStore();
+  const { selectedUser } = useSelectedUserStore();
+  const { loadingProgress } = useLoadingProgress();
+  const { toggleThreeD } = useThreeDStore();
+  const { isPlaying } = usePlayButtonStore();
+  const { widgetSubOption } = useWidgetSubOption();
+  const { visualizationSocket } = useSocketStore();
+  const { selectedZone } = useSelectedZoneStore();
+  const { setFloatingWidget } = useFloatingWidget();
+  const { comparisonProduct } = useComparisonProduct();
 
     const handleSelectLayout = (option: string) => {
         const product = products.find((product) => product.productName === option);
@@ -47,68 +55,71 @@ function MainScene() {
         }
     };
 
-    return (
+  return (
+    <>
+      {!selectedUser && (
         <>
-            {!selectedUser && (
-                <>
-                    <KeyPressListener />
-                    {loadingProgress > 0 && <LoadingPage progress={loadingProgress} />}
-                    {!isPlaying && (
-                        <>
-                            {toggleThreeD && <ModuleToggle />}
-                            <SideBarLeft />
-                            <SideBarRight />
-                        </>
-                    )}
-                    <RealTimeVisulization />
-                    {activeModule === "market" && <MarketPlace />}
-                    {activeModule !== "market" && !isPlaying && !isVersionSaved && (
-                        <Tools />
-                    )}
-                    {(isPlaying || comparisonProduct !== null) && activeModule === "simulation" && <SimulationPlayer />}
-                    {(isPlaying || comparisonProduct !== null) && activeModule !== "simulation" && <ControlsPlayer />}
+          <KeyPressListener />
+          {loadingProgress > 0 && <LoadingPage progress={loadingProgress} />}
+          {!isPlaying && (
+            <>
+              {toggleThreeD && <ModuleToggle />}
+              <SideBarLeft />
+              <SideBarRight />
+            </>
+          )}
+          <RealTimeVisulization />
+          {activeModule === "market" && <MarketPlace />}
+          {activeModule !== "market" && !isPlaying && !isVersionSaved && (
+            <Tools />
+          )}
+          {(isPlaying || comparisonProduct !== null) &&
+            activeModule === "simulation" &&
+            loadingProgress == 0 && <SimulationPlayer />}
+          {(isPlaying || comparisonProduct !== null) &&
+            activeModule !== "simulation" && <ControlsPlayer />}
 
-                    {/* remove this later */}
-                    {activeModule === "builder" && !toggleThreeD && <SelectFloorPlan />}
-                </>
-            )}
-            <div
-                className="scene-container"
-                id="work-space-three-d-canvas"
-                style={{
-                    height: isPlaying || activeModule !== "visualization" ? "100vh" : "",
-                    width: isPlaying || activeModule !== "visualization" ? "100vw" : "",
-                    left: isPlaying || activeModule !== "visualization" ? "0%" : "",
-                    borderRadius:
-                        isPlaying || activeModule !== "visualization" ? "" : "6px",
-                }}
-                role="application"
-                onDrop={(event) =>
-                    createHandleDrop({
-                        widgetSubOption,
-                        visualizationSocket,
-                        selectedZone,
-                        setFloatingWidget,
-                        event,
-                    })
-                }
-                onDragOver={(event) => event.preventDefault()}
-            >
-                <Scene layout="Main Layout" />
-            </div>
-
-            {selectedProduct && isVersionSaved && !isPlaying && (
-                <div className="selectLayout-wrapper">
-                    <RegularDropDown
-                        header={selectedProduct.productName}
-                        options={products.map((l) => l.productName)} // Pass layout names as options
-                        onSelect={handleSelectLayout}
-                        search={false}
-                    />
-                </div>
-            )}
+          {/* remove this later */}
+          {activeModule === "builder" && !toggleThreeD && <SelectFloorPlan />}
         </>
-    )
+      )}
+      <div
+        className="scene-container"
+        id="work-space-three-d-canvas"
+        style={{
+          height: isPlaying || activeModule !== "visualization" ? "100vh" : "",
+          width: isPlaying || activeModule !== "visualization" ? "100vw" : "",
+          left: isPlaying || activeModule !== "visualization" ? "0%" : "",
+          borderRadius:
+            isPlaying || activeModule !== "visualization" ? "" : "6px",
+        }}
+        role="application"
+        onDrop={(event) =>
+          createHandleDrop({
+            widgetSubOption,
+            visualizationSocket,
+            selectedZone,
+            setFloatingWidget,
+            event,
+          })
+        }
+        onDragOver={(event) => event.preventDefault()}
+      >
+        <Scene layout="Main Layout" />
+      </div>
+
+      {selectedProduct && isVersionSaved && !isPlaying && (
+        <div className="selectLayout-wrapper">
+          <RegularDropDown
+            header={selectedProduct.productName}
+            options={products.map((l) => l.productName)} // Pass layout names as options
+            onSelect={handleSelectLayout}
+            search={false}
+          />
+        </div>
+      )}
+    </>
+  );
 }
 
-export default MainScene
\ No newline at end of file
+export default MainScene;
diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/WallProperties.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/WallProperties.tsx
new file mode 100644
index 0000000..ee1d87b
--- /dev/null
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/WallProperties.tsx
@@ -0,0 +1,213 @@
+import { useEffect, useState } from "react";
+import InputWithDropDown from "../../../../ui/inputs/InputWithDropDown";
+import { AddIcon, RemoveIcon } from "../../../../icons/ExportCommonIcons";
+
+// Texture Imports
+import wallTexture1 from "../../../../../assets/image/wallTextures/wallTexture.png";
+import defaultTexture from "../../../../../assets/image/wallTextures/defaultTexture.jpg";
+
+// Define Material type
+type Material = {
+  texture: string;
+  textureName: string;
+};
+
+// Initial and default material
+const initialMaterial: Material = {
+  texture: wallTexture1,
+  textureName: "Grunge Concrete Wall",
+};
+
+const defaultMaterial: Material = {
+  texture: defaultTexture,
+  textureName: "Default Material",
+};
+
+const WallProperties = () => {
+  const [wallProperties, setWallProperties] = useState({
+    height: "10",
+    thickness: "10",
+    length: "10",
+  });
+
+  const [activeSide, setActiveSide] = useState<"side1" | "side2">("side1");
+
+  const [materials, setMaterials] = useState<Material[]>([initialMaterial]);
+
+  const [selectedMaterials, setSelectedMaterials] = useState<{
+    side1: Material | null;
+    side2: Material | null;
+  }>({
+    side1: null,
+    side2: null,
+  });
+
+  // Select initial material for both sides on mount
+  useEffect(() => {
+    setSelectedMaterials({
+      side1: initialMaterial,
+      side2: initialMaterial,
+    });
+  }, []);
+
+  const handleInputChange = (
+    key: keyof typeof wallProperties,
+    newValue: string
+  ) => {
+    setWallProperties((prev) => ({
+      ...prev,
+      [key]: newValue,
+    }));
+  };
+
+  const handleAddMaterial = () => {
+    const newMaterial: Material = {
+      texture: defaultMaterial.texture,
+      textureName: `Material ${materials.length + 1}`,
+    };
+    setMaterials([...materials, newMaterial]);
+  };
+
+  const handleSelectMaterial = (material: Material) => {
+    setSelectedMaterials((prev) => ({
+      ...prev,
+      [activeSide]: material,
+    }));
+  };
+
+  const handleRemoveMaterial = (index: number) => {
+    const updatedMaterials = materials.filter((_, i) => i !== index);
+
+    // Ensure there's always at least one material
+    const newMaterials =
+      updatedMaterials.length === 0 ? [defaultMaterial] : updatedMaterials;
+    setMaterials(newMaterials);
+
+    // Deselect the material if it's the one removed
+    setSelectedMaterials((prev) => {
+      const updated = { ...prev };
+      ["side1", "side2"].forEach((side) => {
+        if (
+          updated[side as "side1" | "side2"]?.texture ===
+          materials[index].texture
+        ) {
+          updated[side as "side1" | "side2"] = defaultMaterial;
+        }
+      });
+      return updated;
+    });
+  };
+
+  return (
+    <div className="wall-properties-container">
+      <div className="header">Wall</div>
+      <div className="wall-properties">
+        <InputWithDropDown
+          label="Height"
+          value={wallProperties.height}
+          onChange={(val) => handleInputChange("height", val)}
+        />
+        <InputWithDropDown
+          label="Thickness"
+          value={wallProperties.thickness}
+          onChange={(val) => handleInputChange("thickness", val)}
+        />
+        <InputWithDropDown
+          label="Length"
+          value={wallProperties.length}
+          onChange={(val) => handleInputChange("length", val)}
+        />
+      </div>
+
+      <section>
+        <div className="header-wrapper">
+          <div className="header">Materials</div>
+          <button className="addMaterial" onClick={handleAddMaterial}>
+            <AddIcon />
+          </button>
+        </div>
+
+        <div className="material-preview">
+          <div className="sides-wrapper">
+            <div
+              className={`side-wrapper ${
+                activeSide === "side1" ? "active" : ""
+              }`}
+              onClick={() => setActiveSide("side1")}
+            >
+              <div className="label">Side 1</div>
+              <div className="texture-image">
+                {selectedMaterials.side1 && (
+                  <img
+                    src={selectedMaterials.side1.texture}
+                    alt={selectedMaterials.side1.textureName}
+                  />
+                )}
+              </div>
+            </div>
+
+            <div
+              className={`side-wrapper ${
+                activeSide === "side2" ? "active" : ""
+              }`}
+              onClick={() => setActiveSide("side2")}
+            >
+              <div className="label">Side 2</div>
+              <div className="texture-image">
+                {selectedMaterials.side2 && (
+                  <img
+                    src={selectedMaterials.side2.texture}
+                    alt={selectedMaterials.side2.textureName}
+                  />
+                )}
+              </div>
+            </div>
+          </div>
+
+          <div className="preview">
+            {selectedMaterials[activeSide] && (
+              <img
+                src={selectedMaterials[activeSide]!.texture}
+                alt={selectedMaterials[activeSide]!.textureName}
+              />
+            )}
+          </div>
+        </div>
+
+        <div className="materials">
+          {materials.length === 0 ? (
+            <div className="no-materials">No materials added yet.</div>
+          ) : (
+            <div className="material-container">
+              {materials.map((material, index) => (
+                <div
+                  className="material-wrapper"
+                  key={`${material.textureName}_${index}`}
+                  onClick={() => handleSelectMaterial(material)}
+                >
+                  <div className="material-property">
+                    <div className="material-image">
+                      <img src={material.texture} alt={material.textureName} />
+                    </div>
+                    <div className="material-name">{material.textureName}</div>
+                  </div>
+                  <div
+                    className="delete-material"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleRemoveMaterial(index);
+                    }}
+                  >
+                    <RemoveIcon />
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default WallProperties;
diff --git a/app/src/components/templates/LoadingPage.tsx b/app/src/components/templates/LoadingPage.tsx
index 329c19f..7e25c51 100644
--- a/app/src/components/templates/LoadingPage.tsx
+++ b/app/src/components/templates/LoadingPage.tsx
@@ -4,6 +4,7 @@ import { LogoIconLarge } from "../icons/Logo";
 import { useParams } from "react-router-dom";
 import { useProjectName } from "../../store/builder/store";
 import { getAllProjects } from "../../services/dashboard/getAllProjects";
+import { useComparisonProduct } from "../../store/simulation/useSimulationStore";
 
 interface LoadingPageProps {
   progress: number; // Expect progress as a percentage (0-100)
@@ -12,6 +13,8 @@ interface LoadingPageProps {
 const LoadingPage: React.FC<LoadingPageProps> = ({ progress }) => {
   const { projectName, setProjectName } = useProjectName();
   const { projectId } = useParams();
+  const { comparisonProduct } = useComparisonProduct();
+
   const validatedProgress = Math.min(100, Math.max(0, progress));
   const generateThumbnail = async () => {
     const email = localStorage.getItem("email");
@@ -30,25 +33,24 @@ const LoadingPage: React.FC<LoadingPageProps> = ({ progress }) => {
 
       const domainParts = emailParts[1].split(".");
       const Organization = domainParts[0];
-      const projects = await getAllProjects(
-        userId, Organization
+      const projects = await getAllProjects(userId, Organization);
+      const filterProject = projects?.Projects.find(
+        (val: any) => val.projectUuid === projectId || val._id === projectId
       );
-      const filterProject = projects?.Projects.find((val: any) => val.projectUuid === projectId || val._id
-        === projectId)
 
-      setProjectName(filterProject.projectName)
-
-    }
-    catch {
-
-    }
-  }
+      setProjectName(filterProject.projectName);
+    } catch {}
+  };
   useEffect(() => {
     generateThumbnail();
   }, []);
   return (
     <RenderOverlay>
-      <div className="loading-wrapper">
+      <div
+        className={`loading-wrapper ${
+          comparisonProduct != null ? "comparisionLoading" : ""
+        }`}
+      >
         <div className="loading-container">
           <div className="project-name">{projectName}</div>
           <div className="loading-hero-container">
diff --git a/app/src/components/ui/compareVersion/CompareLayOut.tsx b/app/src/components/ui/compareVersion/CompareLayOut.tsx
index 7cdba4b..6cce453 100644
--- a/app/src/components/ui/compareVersion/CompareLayOut.tsx
+++ b/app/src/components/ui/compareVersion/CompareLayOut.tsx
@@ -4,7 +4,10 @@ import {
   LayoutIcon,
   ResizerIcon,
 } from "../../icons/SimulationIcons";
-import { useLoadingProgress, useSaveVersion } from "../../../store/builder/store";
+import {
+  useLoadingProgress,
+  useSaveVersion,
+} from "../../../store/builder/store";
 import Search from "../inputs/Search";
 import OuterClick from "../../../utils/outerClick";
 import { useProductStore } from "../../../store/simulation/useProductStore";
@@ -13,7 +16,8 @@ import { useComparisonProduct } from "../../../store/simulation/useSimulationSto
 import { usePauseButtonStore, usePlayButtonStore } from "../../../store/usePlayButtonStore";
 
 const CompareLayOut = () => {
-  const { comparisonProduct, setComparisonProduct, clearComparisonProduct } = useComparisonProduct();
+  const { comparisonProduct, setComparisonProduct, clearComparisonProduct } =
+    useComparisonProduct();
   const { products } = useProductStore();
   const { setLoadingProgress } = useLoadingProgress();
   const [width, setWidth] = useState("50vw");
@@ -23,6 +27,7 @@ const CompareLayOut = () => {
   const startWidthRef = useRef<number>(0);
   const startXRef = useRef<number>(0);
   const { setIsVersionSaved } = useSaveVersion();
+  const { loadingProgress } = useLoadingProgress();
   const { setIsPlaying } = usePlayButtonStore();
   const { setIsPaused } = usePauseButtonStore();
 
@@ -124,14 +129,16 @@ const CompareLayOut = () => {
       ref={wrapperRef}
       style={{ width }}
     >
-      <button
-        title="resize-canvas"
-        id="compare-resize-slider-btn"
-        className="resizer"
-        onMouseDown={handleStartResizing}
-      >
-        <ResizerIcon />
-      </button>
+      {loadingProgress == 0 && (
+        <button
+          title="resize-canvas"
+          id="compare-resize-slider-btn"
+          className="resizer"
+          onMouseDown={handleStartResizing}
+        >
+          <ResizerIcon />
+        </button>
+      )}
       <div className="chooseLayout-container">
         {comparisonProduct && (
           <div className="compare-layout-canvas-container">
@@ -158,7 +165,7 @@ const CompareLayOut = () => {
               {showLayoutDropdown && (
                 <div className="displayLayouts-container">
                   <div className="header">Layouts</div>
-                  <Search onChange={() => { }} />
+                  <Search onChange={() => {}} />
                   <div className="layouts-container">
                     {products.map((layout) => (
                       <button
diff --git a/app/src/modules/simulation/machine/instances/machineInstances.tsx b/app/src/modules/simulation/machine/instances/machineInstances.tsx
index eac048f..2db71f1 100644
--- a/app/src/modules/simulation/machine/instances/machineInstances.tsx
+++ b/app/src/modules/simulation/machine/instances/machineInstances.tsx
@@ -2,20 +2,23 @@ import React from "react";
 import MachineInstance from "./machineInstance/machineInstance";
 import MachineContentUi from "../../ui3d/MachineContentUi";
 import { useSceneContext } from "../../../scene/sceneContext";
+import { useViewSceneStore } from "../../../../store/builder/store";
 
 function MachineInstances() {
-    const { machineStore } = useSceneContext();
-    const { machines } = machineStore();
-    return (
-        <>
-            {machines.map((machine: MachineStatus) => (
-                <React.Fragment key={machine.modelUuid}>
-                    <MachineInstance machineDetail={machine} />
-                    <MachineContentUi machine={machine} />
-                </React.Fragment>
-            ))}
-        </>
-    );
+  const { machineStore } = useSceneContext();
+  const { machines } = machineStore();
+  const { viewSceneLabels } = useViewSceneStore();
+
+  return (
+    <>
+      {machines.map((machine: MachineStatus) => (
+        <React.Fragment key={machine.modelUuid}>
+          <MachineInstance machineDetail={machine} />
+          {viewSceneLabels && <MachineContentUi machine={machine} />}
+        </React.Fragment>
+      ))}
+    </>
+  );
 }
 
 export default MachineInstances;
diff --git a/app/src/modules/simulation/storageUnit/instances/storageUnitInstances.tsx b/app/src/modules/simulation/storageUnit/instances/storageUnitInstances.tsx
index 72ad0e9..278a16b 100644
--- a/app/src/modules/simulation/storageUnit/instances/storageUnitInstances.tsx
+++ b/app/src/modules/simulation/storageUnit/instances/storageUnitInstances.tsx
@@ -1,22 +1,24 @@
-import React from 'react'
-import StorageUnitInstance from './storageUnitInstance/storageUnitInstance'
-import StorageContentUi from '../../ui3d/StorageContentUi';
-import { useSceneContext } from '../../../scene/sceneContext';
+import React from "react";
+import StorageUnitInstance from "./storageUnitInstance/storageUnitInstance";
+import StorageContentUi from "../../ui3d/StorageContentUi";
+import { useSceneContext } from "../../../scene/sceneContext";
+import { useViewSceneStore } from "../../../../store/builder/store";
 
 function StorageUnitInstances() {
-    const { storageUnitStore } = useSceneContext();
-    const { storageUnits } = storageUnitStore();
+  const { storageUnitStore } = useSceneContext();
+  const { storageUnits } = storageUnitStore();
+  const { viewSceneLabels } = useViewSceneStore();
 
-    return (
-        <>
-            {storageUnits.map((storageUnit: StorageUnitStatus) => (
-                <React.Fragment key={storageUnit.modelUuid}>
-                    <StorageUnitInstance storageUnit={storageUnit} />
-                    <StorageContentUi storageUnit={storageUnit} />
-                </React.Fragment>
-            ))}
-        </>
-    )
+  return (
+    <>
+      {storageUnits.map((storageUnit: StorageUnitStatus) => (
+        <React.Fragment key={storageUnit.modelUuid}>
+          <StorageUnitInstance storageUnit={storageUnit} />
+          {viewSceneLabels && <StorageContentUi storageUnit={storageUnit} />}
+        </React.Fragment>
+      ))}
+    </>
+  );
 }
 
-export default StorageUnitInstances
\ No newline at end of file
+export default StorageUnitInstances;
diff --git a/app/src/modules/simulation/vehicle/instances/vehicleInstances.tsx b/app/src/modules/simulation/vehicle/instances/vehicleInstances.tsx
index 708a4e1..d81a91c 100644
--- a/app/src/modules/simulation/vehicle/instances/vehicleInstances.tsx
+++ b/app/src/modules/simulation/vehicle/instances/vehicleInstances.tsx
@@ -2,21 +2,23 @@ import React from "react";
 import VehicleInstance from "./instance/vehicleInstance";
 import VehicleContentUi from "../../ui3d/VehicleContentUi";
 import { useSceneContext } from "../../../scene/sceneContext";
+import { useViewSceneStore } from "../../../../store/builder/store";
 
 function VehicleInstances() {
     const { vehicleStore } = useSceneContext();
     const { vehicles } = vehicleStore();
+  const { viewSceneLabels } = useViewSceneStore();
 
-    return (
-        <>
-            {vehicles.map((vehicle: VehicleStatus) => (
-                <React.Fragment key={vehicle.modelUuid}>
-                    <VehicleInstance agvDetail={vehicle} />
-                    <VehicleContentUi vehicle={vehicle} />
-                </React.Fragment>
-            ))}
-        </>
-    );
+  return (
+    <>
+      {vehicles.map((vehicle: VehicleStatus) => (
+        <React.Fragment key={vehicle.modelUuid}>
+          <VehicleInstance agvDetail={vehicle} />
+          {viewSceneLabels && <VehicleContentUi vehicle={vehicle} />}
+        </React.Fragment>
+      ))}
+    </>
+  );
 }
 
 export default VehicleInstances;
diff --git a/app/src/pages/Project.tsx b/app/src/pages/Project.tsx
index 5ab5d05..cc984af 100644
--- a/app/src/pages/Project.tsx
+++ b/app/src/pages/Project.tsx
@@ -6,6 +6,7 @@ import {
   useUserName,
   useWallItems,
   useSaveVersion,
+  useViewSceneStore,
   useProjectName,
   useRenameModeStore,
   useSelectedFloorItem,
diff --git a/app/src/store/builder/store.ts b/app/src/store/builder/store.ts
index ab636eb..c384f20 100644
--- a/app/src/store/builder/store.ts
+++ b/app/src/store/builder/store.ts
@@ -680,3 +680,31 @@ export const useVersionStore = create<VersionListStore>((set) => ({
       ),
     })),
 }));
+
+
+
+interface ViewSceneState {
+  viewSceneLabels: boolean;
+  setViewSceneLabels: (value: boolean | ((prev: boolean) => boolean)) => void;
+}
+
+export const useViewSceneStore = create<ViewSceneState>((set) => ({
+  viewSceneLabels: getInitialViewSceneLabels(),
+  setViewSceneLabels: (value) => {
+    set((state) => {
+      const newValue =
+        typeof value === 'function' ? value(state.viewSceneLabels) : value;
+
+      // Store in localStorage manually
+      localStorage.setItem('viewSceneLabels', JSON.stringify(newValue));
+
+      return { viewSceneLabels: newValue };
+    });
+  },
+}));
+
+function getInitialViewSceneLabels(): boolean {
+  if (typeof window === 'undefined') return false; // SSR safety
+  const saved = localStorage.getItem('viewSceneLabels');
+  return saved ? JSON.parse(saved) : false;
+}
diff --git a/app/src/styles/components/input.scss b/app/src/styles/components/input.scss
index 9ce31a7..829a327 100644
--- a/app/src/styles/components/input.scss
+++ b/app/src/styles/components/input.scss
@@ -46,6 +46,7 @@ textarea {
 }
 
 input[type="number"] {
+
   // Chrome, Safari, Edge, Opera
   &::-webkit-outer-spin-button,
   &::-webkit-inner-spin-button {
@@ -146,6 +147,7 @@ input[type="number"] {
       border-radius: #{$border-radius-large};
       cursor: pointer;
       background: transparent;
+
       &:hover {
         background: var(--background-color-secondary);
       }
@@ -337,6 +339,7 @@ input[type="number"] {
       max-width: 80%;
       text-overflow: ellipsis;
     }
+
     &:hover {
       background: #333333;
     }
@@ -413,6 +416,7 @@ input[type="number"] {
       cursor: pointer;
       transition: background-color 0.3s ease;
       border-radius: #{$border-radius-large};
+
       &:hover {
         color: var(--accent-color);
         background: var(--highlight-accent-color);
@@ -483,6 +487,7 @@ input[type="number"] {
     position: relative;
     cursor: pointer;
 
+
     .check-box-style {
       position: absolute;
       height: 20px;
@@ -714,21 +719,26 @@ input[type="number"] {
   .input-header-container {
     padding: 6px 12px;
     @include flex-space-between;
+
     .arrow-container {
       transition: all 0.2s;
       @include flex-center;
     }
   }
+
   .upload-custom-asset-button {
     padding: 6px 12px;
     @include flex-space-between;
+
     .title {
       white-space: nowrap;
       width: 40%;
     }
+
     input {
       display: none;
     }
+
     .upload-button {
       width: 60%;
       background: var(--highlight-accent-color);
@@ -738,6 +748,7 @@ input[type="number"] {
       text-align: center;
     }
   }
+
   .canvas-wrapper {
     height: 150px;
     width: 100%;
@@ -745,6 +756,7 @@ input[type="number"] {
     padding-right: 4px;
     overflow: hidden;
     position: relative;
+
     .canvas-container {
       width: 100%;
       height: 100%;
@@ -752,4 +764,4 @@ input[type="number"] {
       background: var(--background-color-gray);
     }
   }
-}
+}
\ No newline at end of file
diff --git a/app/src/styles/layout/compareLayout.scss b/app/src/styles/layout/compareLayout.scss
index e7d54c6..c338f7c 100644
--- a/app/src/styles/layout/compareLayout.scss
+++ b/app/src/styles/layout/compareLayout.scss
@@ -52,7 +52,7 @@
         border-radius: 50%;
         cursor: ew-resize;
         transition: transform 0.1s ease;
-        z-index: 10;
+        z-index: 100;
     }
 
     .chooseLayout-container {
@@ -161,9 +161,7 @@
                         width: 100%;
 
                         &:hover {
-                            background-color: var(
-                                --highlight-text-color
-                            ) !important;
+                            background-color: var(--highlight-text-color) !important;
                             border-radius: 4px;
 
                             .layout {
@@ -254,6 +252,7 @@
                                 display: flex;
                             }
                         }
+
                         .metric-value {
                             padding-top: 6px;
                             font-size: var(--font-size-xlarge);
@@ -289,6 +288,7 @@
                                 top: -57%;
                                 left: 220%;
                             }
+
                             &::after {
                                 content: "";
                                 position: absolute;
@@ -300,21 +300,19 @@
                                 background-color: #b7b7c6;
 
                                 // Custom polygon shape (adjust if needed)
-                                clip-path: polygon(
-                                    96% 52%,
-                                    96% 54%,
-                                    45% 53%,
-                                    3% 100%,
-                                    0 100%,
-                                    42% 52%
-                                );
+                                clip-path: polygon(96% 52%,
+                                        96% 54%,
+                                        45% 53%,
+                                        3% 100%,
+                                        0 100%,
+                                        42% 52%);
 
                                 z-index: 0; // Behind any inner content
                             }
                         }
 
                         // Optional: content above the shape
-                        > * {
+                        >* {
                             position: relative;
                             z-index: 1;
                         }
@@ -322,12 +320,14 @@
                         &:nth-child(2) {
                             grid-column-start: 1;
                             grid-row-start: 2;
+
                             .metric-label {
                                 white-space: normal;
                                 width: 50px;
                                 left: 230%;
                             }
                         }
+
                         &:nth-child(3) {
                             grid-row: span 2 / span 2;
                             grid-column-start: 2;
@@ -367,21 +367,19 @@
                             height: 100%;
 
                             background: var(--background-color, wheat);
-                            clip-path: polygon(
-                                25% 0%,
-                                75% 0%,
-                                100% 50%,
-                                75% 100%,
-                                25% 100%,
-                                0% 50%
-                            );
+                            clip-path: polygon(25% 0%,
+                                    75% 0%,
+                                    100% 50%,
+                                    75% 100%,
+                                    25% 100%,
+                                    0% 50%);
                             filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
 
                             z-index: 0;
                         }
 
                         // Content stays above the shape
-                        > * {
+                        >* {
                             position: relative;
                             z-index: 1;
                         }
@@ -586,4 +584,4 @@
             position: relative;
         }
     }
-}
+}
\ No newline at end of file
diff --git a/app/src/styles/layout/loading.scss b/app/src/styles/layout/loading.scss
index 57473c2..5b4fe12 100644
--- a/app/src/styles/layout/loading.scss
+++ b/app/src/styles/layout/loading.scss
@@ -6,6 +6,16 @@
   width: 100vw;
   background: var(--background-color-solid);
 
+  &.comparisionLoading {
+
+    position: fixed;
+    top: 0;
+    right: 0;
+
+    height: 100vh;
+    width: 50vw;
+  }
+
   .loading-container {
     position: relative;
     height: 100%;
@@ -59,6 +69,12 @@
     }
 
     .progress-container {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+
       .progress-value {
         font-family: #{$font-josefin-sans};
         font-weight: #{$thin-weight};
@@ -69,7 +85,7 @@
 
       .progress-indicator-container {
         height: 6px;
-        width: 60vw;
+        width: 60%;
         background: var(--highlight-accent-color);
         border-radius: #{$border-radius-small};
         position: relative;
diff --git a/app/src/styles/scene/scene.scss b/app/src/styles/scene/scene.scss
index 81c0451..2ac8f98 100644
--- a/app/src/styles/scene/scene.scss
+++ b/app/src/styles/scene/scene.scss
@@ -4,11 +4,21 @@
 .distance-text-wrapper,
 .zone-name-wrapper,
 .pointer-none {
-  pointer-events: none !important;
+  pointer-events: auto !important;
+  background-color: gray;
+}
+
+.zone-name-wrapper {
+  background: var(--background-color-accent);
+  color: var(--text-button-color);
+  outline: 1px solid var(--border-color);
+  border-radius: #{$border-radius-medium};
+  backdrop-filter: blur(12px);
 }
 
 .distance-text {
   pointer-events: none !important;
+
   div {
     position: absolute;
     transform: translate(-50%, -50%) scale(0.8);
@@ -22,18 +32,16 @@
     border-radius: #{$border-radius-medium};
     box-shadow: var(--box-shadow-light);
   }
+
   .area {
     background: #008cff;
   }
 }
 
-.zone-name{
-  background: var(--background-color);
-  padding: 2px 8px;
+.zone-name {
+  padding: 2px 10px;
   text-wrap: nowrap;
-  backdrop-filter: blur(12px);
-  border-radius: #{$border-radius-medium};
-  outline: 1px solid var(--border-color);
+  color: var(--text-button-color);
 }
 
 //
@@ -54,19 +62,55 @@
   border-radius: #{$border-radius-large};
   outline: 1px solid var(--border-color);
   transform: translate(-50%, 12px);
-  z-index: 100;
+  z-index: 2;
+
   .presets-container {
     @include flex-center;
     gap: 4px;
+
     .preset {
       background: var(--background-color);
       padding: 2px 8px;
       border-radius: #{$border-radius-large};
       outline: 1px solid var(--border-color);
     }
+
     .active {
       background: var(--background-color-accent);
       color: var(--text-button-color);
     }
   }
 }
+
+
+
+.label-toogler {
+  position: fixed;
+  bottom: 4%;
+  right: 1.5%;
+  z-index: 10;
+
+  // background: var(--background-color);
+  // backdrop-filter: blur(10px);
+  // outline: 1px solid var(--border-color);
+  border-radius: 8px;
+
+  .input-toggle-container {
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: end;
+    gap: 12px;
+
+    .check-box {
+      width: 35px;
+      height: 20px;
+
+      .check-box-style {
+        width: 16px;
+        height: 16px;
+        background: var(--text-button-color) !important;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/app/src/utils/shortcutkeys/handleShortcutKeys.ts b/app/src/utils/shortcutkeys/handleShortcutKeys.ts
index c8fd7b8..0a1066d 100644
--- a/app/src/utils/shortcutkeys/handleShortcutKeys.ts
+++ b/app/src/utils/shortcutkeys/handleShortcutKeys.ts
@@ -13,6 +13,7 @@ import {
   useShortcutStore,
   useToggleView,
   useToolMode,
+  useViewSceneStore,
 } from "../../store/builder/store";
 import useCameraModeStore, {
   usePlayButtonStore,
@@ -41,6 +42,7 @@ const KeyPressListener: React.FC = () => {
   const { setIsVersionSaved } = useSaveVersion();
   const { isLogListVisible, setIsLogListVisible } = useLogger();
   const { hidePlayer, setHidePlayer } = usePlayerStore();
+  const { viewSceneLabels, setViewSceneLabels } = useViewSceneStore();
   const { isRenameMode, setIsRenameMode } = useRenameModeStore();
   const { selectedFloorItem } = useSelectedFloorItem();
 
@@ -158,6 +160,12 @@ const KeyPressListener: React.FC = () => {
   };
 
   const handleKeyPress = (event: KeyboardEvent) => {
+    console.log(
+      "isTextInput(document.activeElement): ",
+      isTextInput(document.activeElement)
+    );
+    if (isTextInput(document.activeElement)) return;
+
     const keyCombination = detectModifierKeys(event);
 
     if (isTextInput(document.activeElement) && keyCombination !== "ESCAPE")
@@ -183,6 +191,7 @@ const KeyPressListener: React.FC = () => {
       keyCombination === "Ctrl+R"
     )
       return;
+    console.log("keyCombination: ", keyCombination);
 
     event.preventDefault();
 
@@ -211,6 +220,10 @@ const KeyPressListener: React.FC = () => {
     if (keyCombination === "Ctrl+Shift+?") {
       setShowShortcuts(!showShortcuts);
     }
+    if (keyCombination === "U") {
+      console.log("viewSceneLabels: ", viewSceneLabels);
+      setViewSceneLabels((prev) => !prev);
+    }
 
     if (selectedFloorItem && keyCombination === "F2") {
       setIsRenameMode(true);