diff --git a/app/src/components/layout/scenes/MainScene.tsx b/app/src/components/layout/scenes/MainScene.tsx
index 67dc35a..4139b5a 100644
--- a/app/src/components/layout/scenes/MainScene.tsx
+++ b/app/src/components/layout/scenes/MainScene.tsx
@@ -52,7 +52,7 @@ function MainScene() {
   const { visualizationSocket } = useSocketStore();
   const { selectedZone } = useSelectedZoneStore();
   const { setFloatingWidget } = useFloatingWidget();
-  const { clearComparisonProduct } = useComparisonProduct();
+  const { comparisonProduct, clearComparisonProduct } = useComparisonProduct();
   const { selectedFloorItem, setSelectedFloorItem } = useSelectedFloorItem();
   const { setName } = useAssetsStore();
   const { projectId } = useParams()
@@ -120,7 +120,9 @@ function MainScene() {
         </>
       )}
       <div
-        className="scene-container"
+        className={`scene-container${
+          comparisonProduct?.productUuid ? " half-view" : ""
+        }`}
         id="work-space-three-d-canvas"
         style={{
           height: isPlaying || activeModule !== "visualization" ? "100vh" : "",
diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/WallProperties.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/WallProperties.tsx
index a3e09e9..f3cb792 100644
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/WallProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/WallProperties.tsx
@@ -13,23 +13,26 @@ type Material = {
   textureName: string;
 };
 
-// Initial and default material
-const initialMaterial: Material = {
-  texture: wallTexture1,
-  textureName: "Grunge Concrete Wall",
-};
-
+// Default and initial materials
 const defaultMaterial: Material = {
   texture: defaultTexture,
   textureName: "Default Material",
 };
 
+const initialMaterial: Material = {
+  texture: wallTexture1,
+  textureName: "Grunge Concrete Wall",
+};
+
 const WallProperties = () => {
   const { wallHeight, wallThickness, setWallHeight, setWallThickness } = useBuilderStore();
 
   const [activeSide, setActiveSide] = useState<"side1" | "side2">("side1");
 
-  const [materials, setMaterials] = useState<Material[]>([initialMaterial]);
+  const [materials, setMaterials] = useState<Material[]>([
+    defaultMaterial,
+    initialMaterial,
+  ]);
 
   const [selectedMaterials, setSelectedMaterials] = useState<{
     side1: Material | null;
@@ -39,11 +42,11 @@ const WallProperties = () => {
     side2: null,
   });
 
-  // Select initial material for both sides on mount
+  // Set default material initially for both sides
   useEffect(() => {
     setSelectedMaterials({
-      side1: initialMaterial,
-      side2: initialMaterial,
+      side1: defaultMaterial,
+      side2: defaultMaterial,
     });
   }, []);
 
@@ -71,21 +74,16 @@ const WallProperties = () => {
   };
 
   const handleRemoveMaterial = (index: number) => {
-    const updatedMaterials = materials.filter((_, i) => i !== index);
+    const removedTexture = materials[index].texture;
 
-    // Ensure there's always at least one material
-    const newMaterials =
-      updatedMaterials.length === 0 ? [defaultMaterial] : updatedMaterials;
+    const updatedMaterials = materials.filter((_, i) => i !== index);
+    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
-        ) {
+        if (updated[side as "side1" | "side2"]?.texture === removedTexture) {
           updated[side as "side1" | "side2"] = defaultMaterial;
         }
       });
@@ -119,42 +117,43 @@ const WallProperties = () => {
 
         <div className="material-preview">
           <div className="sides-wrapper">
-            <div
-              className={`side-wrapper ${activeSide === "side1" ? "active" : ""
-                }`}
+            <button
+              className={`side-wrapper ${activeSide === "side1" ? "active" : ""}`}
               onClick={() => setActiveSide("side1")}
             >
               <div className="label">Side 1</div>
               <div className="texture-image">
                 {selectedMaterials.side1 && (
                   <img
+                    draggable={false}
                     src={selectedMaterials.side1.texture}
                     alt={selectedMaterials.side1.textureName}
                   />
                 )}
               </div>
-            </div>
+            </button>
 
-            <div
-              className={`side-wrapper ${activeSide === "side2" ? "active" : ""
-                }`}
+            <button
+              className={`side-wrapper ${activeSide === "side2" ? "active" : ""}`}
               onClick={() => setActiveSide("side2")}
             >
               <div className="label">Side 2</div>
               <div className="texture-image">
                 {selectedMaterials.side2 && (
                   <img
+                    draggable={false}
                     src={selectedMaterials.side2.texture}
                     alt={selectedMaterials.side2.textureName}
                   />
                 )}
               </div>
-            </div>
+            </button>
           </div>
 
           <div className="preview">
             {selectedMaterials[activeSide] && (
               <img
+                draggable={false}
                 src={selectedMaterials[activeSide]!.texture}
                 alt={selectedMaterials[activeSide]!.textureName}
               />
@@ -167,29 +166,37 @@ const WallProperties = () => {
             <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);
-                    }}
+              {materials.map((material, index) => {
+                const isSelected = selectedMaterials[activeSide]?.texture === material.texture;
+
+                return (
+                  <button
+                    className={`material-wrapper ${isSelected ? "selectedMaterial" : ""}`}
+                    key={`${material.textureName}_${index}`}
+                    onClick={() => handleSelectMaterial(material)}
                   >
-                    <RemoveIcon />
-                  </div>
-                </div>
-              ))}
+                    <div className="material-property">
+                      <div className="material-image">
+                        <img
+                          draggable={false}
+                          src={material.texture}
+                          alt={material.textureName}
+                        />
+                      </div>
+                      <div className="material-name">{material.textureName}</div>
+                    </div>
+                    <button
+                      className="delete-material"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleRemoveMaterial(index);
+                      }}
+                    >
+                      <RemoveIcon />
+                    </button>
+                  </button>
+                );
+              })}
             </div>
           )}
         </div>
diff --git a/app/src/components/ui/compareVersion/CompareLayOut.tsx b/app/src/components/ui/compareVersion/CompareLayOut.tsx
index e111252..1a5f14c 100644
--- a/app/src/components/ui/compareVersion/CompareLayOut.tsx
+++ b/app/src/components/ui/compareVersion/CompareLayOut.tsx
@@ -127,7 +127,7 @@ const CompareLayOut = () => {
       ref={wrapperRef}
       style={{ width }}
     >
-      {loadingProgress == 0 && comparisonProduct && (
+      {loadingProgress == 0 && comparisonProduct?.productUuid && (
         <button
           title="resize-canvas"
           id="compare-resize-slider-btn"
diff --git a/app/src/components/ui/compareVersion/ComparisonResult.tsx b/app/src/components/ui/compareVersion/ComparisonResult.tsx
index 0ea1258..f5c00f0 100644
--- a/app/src/components/ui/compareVersion/ComparisonResult.tsx
+++ b/app/src/components/ui/compareVersion/ComparisonResult.tsx
@@ -153,7 +153,7 @@ const ComparisonResult = () => {
 
         <div className="cycle-time-container comparisionCard">
           <div className="cycle-main">
-            <div className="cycle-header">Cycle Time</div>
+            <h4 className="cycle-header">Cycle Time</h4>
             <div className="layers-wrapper">
               <div className="layers">
                 <div className="layer-name">{comparedProducts[0]?.productName}</div>
@@ -202,7 +202,7 @@ const ComparisonResult = () => {
         </div>
 {/* 
         <div className="overallDowntime-container comparisionCard">
-          <div className="overallDowntime-header">Overall Downtime</div>
+          <h4 className="overallDowntime-header">Overall Downtime</h4>
           <div className="totalDownTime-wrapper">
             <div className="totalDownTime">
               <div className="totalDownTime-right">
@@ -221,7 +221,7 @@ const ComparisonResult = () => {
         </div> */}
 
         <div className="overallScrapRate comparisionCard">
-          <div className="overallScrapRate-header">Production Capacity</div>
+          <h4 className="overallScrapRate-header">Production Capacity</h4>
           <div className="overallScrapRate-wrapper">
             <div className="overallScrapRate-value">
               <div className="overallScrapRate-label">{highestProductivityProduct?.productName}</div>
diff --git a/app/src/components/ui/compareVersion/result-card/PerformanceResult.tsx b/app/src/components/ui/compareVersion/result-card/PerformanceResult.tsx
index fde2958..f86ecf4 100644
--- a/app/src/components/ui/compareVersion/result-card/PerformanceResult.tsx
+++ b/app/src/components/ui/compareVersion/result-card/PerformanceResult.tsx
@@ -13,7 +13,7 @@ const PerformanceResult = ({ comparedProducts }: any) => {
         <div className="icon">
           <PerformanceIcon />
         </div>
-        <div className="head">Performance result</div>
+        <h4 className="head">Performance result</h4>
       </div>
 
       <div className="metrics-container">
diff --git a/app/src/components/ui/simulation/AssetDetailsCard.tsx b/app/src/components/ui/simulation/AssetDetailsCard.tsx
index 15c5574..34dfb6f 100644
--- a/app/src/components/ui/simulation/AssetDetailsCard.tsx
+++ b/app/src/components/ui/simulation/AssetDetailsCard.tsx
@@ -13,6 +13,7 @@ interface AssetDetailsCardInterface {
   enableStatue?: boolean;
   count?: number;
   totalCapacity?: number;
+  activeTime?: any;
   assetDetails?: {
     assetName: string;
     const: string;
@@ -59,6 +60,7 @@ const AssetDetailsCard: React.FC<AssetDetailsCardInterface> = ({
   status,
   count,
   totalCapacity,
+  activeTime,
   assetDetails,
 }) => {
   const [moreDetails, setMoreDetails] = useState(false);
@@ -75,7 +77,10 @@ const AssetDetailsCard: React.FC<AssetDetailsCardInterface> = ({
           <div className="content">
             <div className="name">{name}</div>
             {enableStatue && (
-              <div className="status-container">{GetStatus(status)}</div>
+              <>
+                <div className="active-time">Active Time : <span className="value">{activeTime}</span></div>
+                <div className="status-container">{GetStatus(status)}</div>
+              </>
             )}
             {!enableStatue && totalCapacity && (
               <div className="storage-container">Storage/Inventory</div>
diff --git a/app/src/components/ui/simulation/simulationPlayer.tsx b/app/src/components/ui/simulation/simulationPlayer.tsx
index d60bb6e..5fc8790 100644
--- a/app/src/components/ui/simulation/simulationPlayer.tsx
+++ b/app/src/components/ui/simulation/simulationPlayer.tsx
@@ -167,7 +167,7 @@ const SimulationPlayer: React.FC = () => {
   return (
     <>
       {isPlaying && activeModule === "simulation" && (
-        <div className="label-toogler">
+        <div className="label-toogler "> {/* bottom */}
           <InputToggle
             value={viewSceneLabels}
             inputKey="1"
@@ -187,7 +187,7 @@ const SimulationPlayer: React.FC = () => {
                     <div className="icon">
                       <HourlySimulationIcon />
                     </div>
-                    <div className="label">ThroughPut</div>
+                    <h4 className="label">ThroughPut</h4>
                   </div>
                   <div className="progress-wrapper">
                     <div
diff --git a/app/src/modules/simulation/ui3d/MachineContentUi.tsx b/app/src/modules/simulation/ui3d/MachineContentUi.tsx
index bad89ed..587dfad 100644
--- a/app/src/modules/simulation/ui3d/MachineContentUi.tsx
+++ b/app/src/modules/simulation/ui3d/MachineContentUi.tsx
@@ -26,7 +26,7 @@ const MachineContentUi: React.FC<MachineContentUiProps> = ({ machine }) => {
       center
       distanceFactor={20}
     >
-      <AssetDetailsCard name={machine.modelName} status={machine.state} />
+      <AssetDetailsCard name={machine.modelName} status={machine.state} activeTime={machine.activeTime}/>
     </Html>
   );
 };
diff --git a/app/src/modules/simulation/ui3d/RoboticArmContentUi.tsx b/app/src/modules/simulation/ui3d/RoboticArmContentUi.tsx
index dbe32c6..f946721 100644
--- a/app/src/modules/simulation/ui3d/RoboticArmContentUi.tsx
+++ b/app/src/modules/simulation/ui3d/RoboticArmContentUi.tsx
@@ -26,7 +26,7 @@ const RoboticArmContentUi: React.FC<RoboticArmContentUiProps> = ({ roboticArm })
       center
       distanceFactor={20}
     >
-      <AssetDetailsCard name={roboticArm.modelName} status={roboticArm.state} />
+      <AssetDetailsCard name={roboticArm.modelName} status={roboticArm.state} activeTime={roboticArm.activeTime}/>
     </Html>
   );
 };
diff --git a/app/src/modules/simulation/ui3d/VehicleContentUi.tsx b/app/src/modules/simulation/ui3d/VehicleContentUi.tsx
index 0173081..63aefc8 100644
--- a/app/src/modules/simulation/ui3d/VehicleContentUi.tsx
+++ b/app/src/modules/simulation/ui3d/VehicleContentUi.tsx
@@ -44,6 +44,8 @@ const VehicleContentUi: React.FC<VehicleContentUiProps> = ({ vehicle }) => {
         status={vehicle.state}
         count={vehicle.currentLoad}
         totalCapacity={vehicle.point.action.loadCapacity}
+        activeTime={vehicle.activeTime}
+        
       />
     </Html>
   );
diff --git a/app/src/styles/base/global.scss b/app/src/styles/base/global.scss
index 3b12635..56dc3cc 100644
--- a/app/src/styles/base/global.scss
+++ b/app/src/styles/base/global.scss
@@ -28,6 +28,9 @@ section,
     border: none;
   }
 }
+.scene-container.half-view{
+  width: 50vw !important;
+}
 
 .tooltip {
   position: absolute;
diff --git a/app/src/styles/components/simulation/simulation.scss b/app/src/styles/components/simulation/simulation.scss
index 302ad7a..12d33e6 100644
--- a/app/src/styles/components/simulation/simulation.scss
+++ b/app/src/styles/components/simulation/simulation.scss
@@ -9,15 +9,16 @@
   transform: translate(-50%, 0);
   width: 70vw;
   transition: all 0.3s;
+
   &.hide {
     width: fit-content;
-    .simulation-player-container
-      .controls-container
-      .simulation-button-container {
+
+    .simulation-player-container .controls-container .simulation-button-container {
       width: 32px;
       height: 24px;
     }
   }
+
   .simulation-player-container {
     background: var(--background-color);
     padding: 7px;
@@ -327,6 +328,7 @@
   }
 
   .open {
+
     .start-displayer,
     .end-displayer {
       display: none;
@@ -423,13 +425,16 @@
       cursor: pointer;
       transition: all 0.2s;
       outline: 1px solid transparent;
+
       &:hover {
         outline: 1px solid var(--border-color);
         color: var(--accent-color);
       }
+
       &.hide {
         width: 32px;
       }
+
       .icon {
         width: 16px;
         height: 16px;
@@ -496,6 +501,7 @@
 
 .asset-details-card-wrapper {
   pointer-events: none;
+
   .asset-details-card-container {
     position: relative;
     padding: 8px;
@@ -527,6 +533,7 @@
     .asset-details-header {
       @include flex-space-between;
       gap: 12px;
+
       .content {
         .name {
           text-wrap: nowrap;
@@ -536,20 +543,34 @@
           margin-bottom: 4px;
           text-transform: capitalize;
         }
+
         .status-container {
           .status {
             display: flex;
             align-items: center;
             gap: 6px;
+            padding-top: 4px;
+
             .icon {
               @include flex-center;
             }
           }
         }
+
+        .active-time {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          .value {
+            color: var(--highlight-text-color);
+          }
+        }
+
         .storage-container {
           font-size: var(--font-size-tiny);
           color: var(--highlight-text-color);
         }
+        
       }
     }
 
@@ -561,6 +582,7 @@
       border-radius: #{$border-radius-small};
       overflow: hidden;
       position: relative;
+
       .process-running {
         height: 100%;
         width: 35%;
@@ -584,6 +606,7 @@
       top: -2px;
       padding: 4px;
       padding-right: 8px;
+
       .count-ui-container {
         background: var(--background-color-solid);
         padding: 8px;
@@ -593,19 +616,24 @@
         max-width: 80px;
         position: absolute;
         left: 0;
+
         .content {
           @include flex-center;
           gap: 2px;
+
           .icon {
             @include flex-center;
           }
+
           .display {
             font-size: var(--font-size-small);
           }
         }
+
         .value-container {
           @include flex-center;
           gap: 4px;
+
           .progress-bar {
             display: flex;
             align-items: center;
@@ -621,13 +649,12 @@
             background: var(--background-color);
             overflow: hidden;
             position: relative;
+
             .fill {
               height: 100%;
-              background: linear-gradient(
-                to top,
-                var(--background-color-accent) var(--process-fill-percentage),
-                transparent var(--process-fill-percentage)
-              );
+              background: linear-gradient(to top,
+                  var(--background-color-accent) var(--process-fill-percentage),
+                  transparent var(--process-fill-percentage));
             }
           }
 
@@ -645,6 +672,7 @@
   from {
     transform: translateX(-100%);
   }
+
   to {
     transform: translateX(300%);
   }
@@ -654,10 +682,12 @@
   0% {
     background-position: 0% 50%;
   }
+
   50% {
     background-position: 100% 50%;
   }
+
   100% {
     background-position: 0% 50%;
   }
-}
+}
\ No newline at end of file
diff --git a/app/src/styles/layout/compareLayout.scss b/app/src/styles/layout/compareLayout.scss
index 9d3ae0a..15c0a6b 100644
--- a/app/src/styles/layout/compareLayout.scss
+++ b/app/src/styles/layout/compareLayout.scss
@@ -2,614 +2,613 @@
 @use "../abstracts/mixins" as *;
 
 .initial-selectLayout-wrapper {
-    position: fixed;
-    top: 100px;
-    right: 40px;
-    z-index: 10;
+  position: fixed;
+  top: 100px;
+  right: 40px;
+  z-index: 10;
 
-    .regularDropdown-container {
-        background: var(--background-color);
-    }
+  .regularDropdown-container {
+    background: var(--background-color);
+  }
 }
 
 .selectLayout-wrapper {
-    position: fixed;
-    left: 40px;
-    top: 100px;
-    z-index: 10;
+  position: fixed;
+  left: 40px;
+  top: 100px;
+  z-index: 10;
 
-    .regularDropdown-container {
-        background: var(--background-color);
-    }
+  .regularDropdown-container {
+    background: var(--background-color);
+  }
 }
 
 .compareLayOut-wrapper {
-    position: fixed;
-    top: 0;
-    right: 0;
-    z-index: 2;
-    height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 2;
+  height: 100vh;
+  background: var(--background-color);
+  backdrop-filter: blur(20px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  animation: slideInFromRight 0.4s ease-out forwards;
+  user-select: none;
+  border-left: 2px solid var(--border-color);
+  pointer-events: none;
+
+  .resizer {
+    width: 32px;
+    height: 32px;
+    @include flex-center;
+    padding: 6px;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    transform: translate(-50%, -50%);
     background: var(--background-color);
     backdrop-filter: blur(20px);
+    box-shadow: $box-shadow-heavy;
+    border-radius: 50%;
+    cursor: ew-resize;
+    transition: transform 0.1s ease;
+    z-index: 100;
+    // pointer-events: all;
+    opacity: 0;
+  }
+
+  .chooseLayout-container {
+    width: 100%;
+    height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
-    animation: slideInFromRight 0.4s ease-out forwards;
-    user-select: none;
-    border-left: 2px solid var(--border-color);
-    pointer-events: none;
+    position: relative;
+    overflow: hidden;
 
-    .resizer {
-        width: 32px;
-        height: 32px;
-        @include flex-center;
-        padding: 6px;
-        position: absolute;
-        top: 50%;
-        left: 0;
-        transform: translate(-50%, -50%);
+    .compare-layout-canvas-container {
+      position: absolute;
+      height: 100vh;
+      width: 50vw;
+      top: 0;
+      right: 0;
+    }
+
+    .chooseLayout-wrapper {
+      background: var(--background-color);
+      backdrop-filter: blur(20px);
+      padding: 20px;
+      border-radius: 8px;
+      box-shadow: $box-shadow-medium;
+      max-width: 80%;
+      text-align: center;
+      position: relative;
+      pointer-events: all;
+
+      .icon {
+        width: 100%;
+        margin-bottom: 15px;
+        text-align: center;
+
+        svg {
+          width: 100%;
+        }
+      }
+
+      .value {
+        margin-bottom: 15px;
+        font-size: var(--font-size-small);
+        font-weight: 500;
+        color: var(--text-primary);
+      }
+
+      button {
+        display: block;
+        margin: 0 auto;
+        padding: 8px 16px;
+        background: var(--background-color-button);
+        color: var(--icon-default-color-active);
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        transition: all 0.2s ease;
+
+        &:hover {
+          transform: translateY(-1px);
+        }
+      }
+
+      .displayLayouts-container {
+        max-width: 170px;
+        height: auto;
         background: var(--background-color);
         backdrop-filter: blur(20px);
-        box-shadow: $box-shadow-heavy;
-        border-radius: 50%;
-        cursor: ew-resize;
-        transition: transform 0.1s ease;
-        z-index: 100;
-        pointer-events: all;
-    }
-
-    .chooseLayout-container {
-        width: 100%;
-        height: 100%;
+        padding: 6px;
+        border-radius: 8px;
+        box-shadow: $box-shadow-medium;
+        position: absolute;
+        right: 0;
+        top: 100%;
+        transform: translate(50%, -10px);
         display: flex;
-        justify-content: center;
-        align-items: center;
-        position: relative;
-        overflow: hidden;
+        flex-direction: column;
+        gap: 6px;
 
-        .compare-layout-canvas-container {
-            position: absolute;
-            height: 100vh;
-            width: 100vw;
-            top: 0;
-            right: 0;
+        .header {
+          text-align: left;
+          padding-top: 6px;
+          padding-left: 6px;
         }
 
-        .chooseLayout-wrapper {
-            background: var(--background-color);
-            backdrop-filter: blur(20px);
-            padding: 20px;
-            border-radius: 8px;
-            box-shadow: $box-shadow-medium;
-            max-width: 80%;
-            text-align: center;
-            position: relative;
-            pointer-events: all;
+        .search-wrapper {
+          padding: 6px 0;
 
-            .icon {
-                width: 100%;
-                margin-bottom: 15px;
-                text-align: center;
-
-                svg {
-                    width: 100%;
-                }
-            }
-
-            .value {
-                margin-bottom: 15px;
-                font-size: var(--font-size-small);
-                font-weight: 500;
-                color: var(--text-primary);
-            }
-
-            button {
-                display: block;
-                margin: 0 auto;
-                padding: 8px 16px;
-                background: var(--background-color-button);
-                color: var(--icon-default-color-active);
-                border: none;
-                border-radius: 4px;
-                cursor: pointer;
-                transition: all 0.2s ease;
-
-                &:hover {
-                    transform: translateY(-1px);
-                }
-            }
-
-            .displayLayouts-container {
-                max-width: 170px;
-                height: auto;
-                background: var(--background-color);
-                backdrop-filter: blur(20px);
-                padding: 6px;
-                border-radius: 8px;
-                box-shadow: $box-shadow-medium;
-                position: absolute;
-                right: 0;
-                top: 100%;
-                transform: translate(50%, -10px);
-                display: flex;
-                flex-direction: column;
-                gap: 6px;
-
-                .header {
-                    text-align: left;
-                    padding-top: 6px;
-                    padding-left: 6px;
-                }
-
-                .search-wrapper {
-                    padding: 6px 0;
-
-                    .search-container {
-                        padding: 0;
-                        border-radius: 6px;
-                    }
-                }
-
-                .layouts-container {
-                    .layout {
-                        padding: 6px 0;
-                    }
-
-                    .layout-wrapper {
-                        display: flex;
-                        align-items: center;
-                        gap: 6px;
-                        cursor: pointer;
-                        padding: 0 10px;
-                        background: none;
-                        width: 100%;
-
-                        &:hover {
-                            background-color: var(
-                                --highlight-text-color
-                            ) !important;
-                            border-radius: 4px;
-
-                            .layout {
-                                color: var(--text-button-color) !important;
-                            }
-
-                            svg {
-                                path {
-                                    fill: var(--text-button-color) !important;
-                                }
-                            }
-                        }
-                    }
-                }
-            }
+          .search-container {
+            padding: 0;
+            border-radius: 6px;
+          }
         }
+
+        .layouts-container {
+          .layout {
+            padding: 6px 0;
+          }
+
+          .layout-wrapper {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            cursor: pointer;
+            padding: 0 10px;
+            background: none;
+            width: 100%;
+
+            &:hover {
+              background-color: var(--highlight-text-color) !important;
+              border-radius: 4px;
+
+              .layout {
+                color: var(--text-button-color) !important;
+              }
+
+              svg {
+                path {
+                  fill: var(--text-button-color) !important;
+                }
+              }
+            }
+          }
+        }
+      }
     }
+  }
 }
 
 .compare-result-container {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    position: fixed;
-    bottom: 40px;
-    width: 100%;
-    min-height: 200px;
-    z-index: 10;
-    background: var(--background-color-secondary);
-    backdrop-filter: blur(20px);
-    padding: 18px 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  position: fixed;
+  bottom: 40px;
+  width: 100%;
+  min-height: 200px;
+  z-index: 10;
+  background: var(--background-color-secondary);
+  backdrop-filter: blur(20px);
+  padding: 18px 8px;
 
-    .header {
-        width: fit-content;
-        background-color: var(--background-color-solid);
-        color: var(--background-color-accent);
-        padding: 6px 10px;
-        border-radius: 6px;
+  .header {
+    width: fit-content;
+    background-color: var(--background-color-solid);
+    color: var(--background-color-accent);
+    padding: 6px 10px;
+    border-radius: 6px;
+  }
+
+  .compare-result-wrapper {
+    display: flex;
+    gap: 12px;
+
+    h4 {
+      font-weight: 600;
     }
 
-    .compare-result-wrapper {
+    .comparisionCard {
+      position: relative;
+      flex: 1;
+      width: auto;
+      max-height: 200px;
+      background: var(--background-color);
+      outline: 1px solid var(--border-color);
+      outline-offset: -1px;
+      border-radius: 12px;
+      padding: 8px 12px;
+      overflow: hidden;
+    }
+
+    .performanceResult-wrapper {
+      min-width: 328px;
+      flex: 0;
+      position: relative;
+      padding-right: 65px;
+
+      .header {
         display: flex;
         gap: 12px;
+        align-items: center;
+      }
 
-        .comparisionCard {
-            position: relative;
-            flex: 1;
-            width: auto;
-            max-height: 200px;
-            background: var(--background-color);
-            outline: 1px solid var(--border-color);
-            outline-offset: -1px;
-            border-radius: 12px;
-            padding: 8px 12px;
-            overflow: hidden;
+      .metrics-container {
+        display: flex;
+        gap: 12px;
+        height: 100%;
+
+        .metrics-left {
+          display: flex;
+          flex-direction: column;
+          justify-content: space-around;
+          height: 100%;
+
+          .metric {
+            .metric-label {
+              display: flex;
+              align-items: center;
+              gap: 6px;
+
+              span {
+                display: flex;
+              }
+            }
+
+            .metric-value {
+              padding-top: 6px;
+              font-size: var(--font-size-xlarge);
+              color: var(--background-color-accent);
+              font-weight: 600;
+            }
+          }
+
+          .label {
+            padding-bottom: 68px;
+          }
         }
 
-        .performanceResult-wrapper {
-            min-width: 328px;
-            flex: 0;
+        .metrics-right {
+          height: fit-content;
+          display: grid;
+          grid-template-columns: repeat(2, 1fr);
+          grid-template-rows: repeat(2, 1fr);
+
+          gap: 2px;
+          overflow: visible;
+
+          margin: auto 0;
+
+          .metric-wrapper {
             position: relative;
-            padding-right: 65px;
+            width: 64px;
+            height: 50px;
+            overflow: visible; // allow content like labels to overflow
 
-            .header {
-                display: flex;
-                gap: 12px;
-                align-items: center;
-            }
+            &:nth-child(1) {
+              .metric-label {
+                top: -57%;
+                left: 220%;
+              }
 
-            .metrics-container {
-                display: flex;
-                gap: 12px;
-                height: 100%;
-
-                .metrics-left {
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: space-around;
-                    height: 100%;
-
-                    .metric {
-                        .metric-label {
-                            display: flex;
-                            align-items: center;
-                            gap: 6px;
-
-                            span {
-                                display: flex;
-                            }
-                        }
-
-                        .metric-value {
-                            padding-top: 6px;
-                            font-size: var(--font-size-xlarge);
-                            color: var(--background-color-accent);
-                            font-weight: 600;
-                        }
-                    }
-
-                    .label {
-                        padding-bottom: 68px;
-                    }
-                }
-
-                .metrics-right {
-                    height: fit-content;
-                    display: grid;
-                    grid-template-columns: repeat(2, 1fr);
-                    grid-template-rows: repeat(2, 1fr);
-
-                    gap: 2px;
-                    overflow: visible;
-
-                    margin: auto 0;
-
-                    .metric-wrapper {
-                        position: relative;
-                        width: 64px;
-                        height: 50px;
-                        overflow: visible; // allow content like labels to overflow
-
-                        &:nth-child(1) {
-                            .metric-label {
-                                top: -57%;
-                                left: 220%;
-                            }
-
-                            &::after {
-                                content: "";
-                                position: absolute;
-
-                                top: -100%;
-                                left: 50%;
-                                width: 100%; // Required for visible shape
-                                height: 40px;
-                                background-color: #b7b7c6;
-
-                                // Custom polygon shape (adjust if needed)
-                                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;
-                        }
-
-                        &: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;
-                            grid-row-start: 1;
-                            margin-top: 40%;
-                            left: -16px;
-                            position: relative;
-                        }
-                    }
-
-                    .metric-label {
-                        position: absolute;
-                        top: 0px;
-                        left: 0%;
-                        white-space: nowrap;
-
-                        transform: translate(-50%, -50%);
-
-                        font-size: 10px;
-                        z-index: 1;
-                    }
-
-                    .metric {
-                        width: 100%;
-                        height: 100%;
-                        position: relative;
-                        display: flex;
-                        justify-content: center;
-                        align-items: center;
-
-                        &::after {
-                            content: "";
-                            position: absolute;
-                            top: 0;
-                            left: 0;
-                            width: 100%;
-                            height: 100%;
-
-                            background: var(--background-color, wheat);
-                            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;
-                        }
-                    }
-                }
-            }
-
-            .simulation-tag {
-                background: var(--background-color-button);
-
-                color: var(--icon-default-color-active);
+              &::after {
+                content: "";
                 position: absolute;
-                bottom: 0;
-                right: 0;
-                padding: 10px 5px;
-                border-radius: 12px 0 0 0;
+
+                top: -100%;
+                left: 50%;
+                width: 100%; // Required for visible shape
+                height: 40px;
+                background-color: #b7b7c6;
+
+                // Custom polygon shape (adjust if needed)
+                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;
+            }
+
+            &: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;
+              grid-row-start: 1;
+              margin-top: 40%;
+              left: -16px;
+              position: relative;
+            }
+          }
+
+          .metric-label {
+            position: absolute;
+            top: 0px;
+            left: 0%;
+            white-space: nowrap;
+
+            transform: translate(-50%, -50%);
+
+            font-size: 10px;
+            z-index: 1;
+          }
+
+          .metric {
+            width: 100%;
+            height: 100%;
+            position: relative;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            &::after {
+              content: "";
+              position: absolute;
+              top: 0;
+              left: 0;
+              width: 100%;
+              height: 100%;
+
+              background: var(--background-color, wheat);
+              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;
+            }
+          }
         }
+      }
+
+      .simulation-tag {
+        background: var(--background-color-button);
+
+        color: var(--icon-default-color-active);
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        padding: 10px 5px;
+        border-radius: 12px 0 0 0;
+      }
     }
+  }
 }
 
 @keyframes slideInFromRight {
-    from {
-        transform: translateX(100%);
-        opacity: 0;
-    }
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
 
-    to {
-        transform: translateX(0);
-        opacity: 1;
-    }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
 }
 
 .energy-usage {
-    position: relative;
+  position: relative;
 
-    .energy-usage-wrapper {
-        h4 {
-            font-weight: 600;
-        }
-
-        .value {
-            padding-top: 25px;
-            font-size: var(--font-size-xxxlarge);
-            color: var(--background-color-accent);
-        }
+  .energy-usage-wrapper {
+    .value {
+      padding-top: 25px;
+      font-size: var(--font-size-xxxlarge);
+      color: var(--background-color-accent);
     }
+  }
 
-    .simulation-details {
-        position: absolute;
-        bottom: 12px;
-        right: 12px;
+  .simulation-details {
+    position: absolute;
+    bottom: 12px;
+    right: 12px;
 
-        .simulation-wrapper {
-            display: flex;
-            align-items: center;
-            gap: 6px;
+    .simulation-wrapper {
+      display: flex;
+      align-items: center;
+      gap: 6px;
 
-            .icon {
-                width: 20px;
-                height: 20px;
-                border-radius: 50%;
-                background-color: var(--background-color-accent);
-            }
-        }
+      .icon {
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        background-color: var(--background-color-accent);
+      }
     }
+  }
 
-    .chart {
-        width: 90%;
-        position: absolute;
-        top: 10px;
-        left: 0;
-    }
+  .chart {
+    width: 90%;
+    position: absolute;
+    top: 10px;
+    left: 0;
+  }
 }
 
 .throughPutCard-container {
-    .layers-wrapper {
-        padding: 20px 10px;
-        height: 100%;
-        width: 100%;
-        display: flex;
-        justify-content: space-between;
-        position: relative;
+  .layers-wrapper {
+    padding: 20px 10px;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    position: relative;
 
-        .layer-wrapper {
-            display: flex;
-            flex-direction: column;
+    .layer-wrapper {
+      display: flex;
+      flex-direction: column;
 
-            &:last-child {
-                justify-content: end;
-            }
-        }
-
-        .chart {
-            width: 60%;
-            height: 70%;
-            position: absolute;
-        }
+      &:last-child {
+        justify-content: end;
+      }
     }
 
     .chart {
-        width: 80%;
-        height: 90%;
-        position: absolute;
-        bottom: 0;
-        left: 0;
+      width: 60%;
+      height: 70%;
+      position: absolute;
     }
+  }
+
+  .chart {
+    width: 80%;
+    height: 90%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+  }
 }
 
 .cycle-time-container {
-    position: relative;
+  position: relative;
 
-    .cycle-main {
+  .cycle-main {
+    display: flex;
+    justify-content: space-between;
+    height: 100%;
+
+    .layers-wrapper {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      .layers {
         display: flex;
-        justify-content: space-between;
-        height: 100%;
+        flex-direction: column;
+        gap: 4px;
 
-        .layers-wrapper {
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-
-            .layers {
-                display: flex;
-                flex-direction: column;
-                gap: 4px;
-
-                .layer-name {
-                    color: var(--background-color-accent);
-                }
-
-                .layer-time {
-                    font-size: var(--font-size-large);
-                }
-
-                .layer-profit {
-                    color: #14ca44;
-                    text-align: end;
-
-                    span {
-                        color: #14ca44;
-                    }
-                }
-            }
+        .layer-name {
+          color: var(--background-color-accent);
         }
-    }
 
-    .chart {
-        position: absolute;
-        bottom: 0;
-        left: 10px;
-        width: 60%;
-        height: 80%;
+        .layer-time {
+          font-size: var(--font-size-large);
+        }
+
+        .layer-profit {
+          color: #14ca44;
+          text-align: end;
+
+          span {
+            color: #14ca44;
+          }
+        }
+      }
     }
+  }
+
+  .chart {
+    position: absolute;
+    bottom: 0;
+    left: 10px;
+    width: 60%;
+    height: 80%;
+  }
 }
 
 .overallDowntime-container {
-    .totalDownTime-wrapper {
+  .totalDownTime-wrapper {
+    display: flex;
+
+    .totalDownTime {
+      width: 70%;
+      background: var(--background-color-secondary);
+      backdrop-filter: blur(20px);
+      border-radius: 12px;
+
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      // gap: 20px;
+      padding: 8px 10px;
+      margin: 44px 0;
+
+      .totalDownTime-right {
         display: flex;
+        flex-direction: column;
+        gap: 6px;
+      }
 
-        .totalDownTime {
-            width: 70%;
-            background: var(--background-color-secondary);
-            backdrop-filter: blur(20px);
-            border-radius: 12px;
+      .totalDownTime-left {
+        display: flex;
+        align-items: center;
+        gap: 6px;
 
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            gap: 20px;
-            padding: 8px 10px;
-            margin: 44px 0;
-
-            .totalDownTime-right {
-                display: flex;
-                flex-direction: column;
-                gap: 6px;
-            }
-
-            .totalDownTime-left {
-                display: flex;
-                align-items: center;
-                gap: 6px;
-
-                .value {
-                    font-size: var(--font-size-xlarge);
-                    color: var(--background-color-button);
-                }
-            }
-        }
-
-        .chart {
-            width: 30%;
-            position: relative;
+        .value {
+          font-size: var(--font-size-xlarge);
+          color: var(--background-color-button);
         }
+      }
     }
+
+    .chart {
+      width: 30%;
+      position: relative;
+    }
+  }
 }
 
 .overallScrapRate {
-    .overallScrapRate-wrapper {
-        display: flex;
+  .overallScrapRate-wrapper {
+    display: flex;
 
-        .overallScrapRate-value {
-            width: 50%;
-            display: flex;
-            flex-direction: column;
-            gap: 6px;
-            margin: 40px 0;
+    .overallScrapRate-value {
+      width: 50%;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      margin: 40px 0;
 
-            .overallScrapRate-key {
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-            }
-        }
-
-        .chart {
-            width: 50%;
-            position: relative;
-        }
+      .overallScrapRate-key {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
     }
+
+    .chart {
+      width: 50%;
+      position: relative;
+    }
+  }
 }
diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss
index d5e1a6c..1f6e034 100644
--- a/app/src/styles/layout/sidebar.scss
+++ b/app/src/styles/layout/sidebar.scss
@@ -1114,6 +1114,7 @@
 
           input {
             padding: 5px 4px;
+            text-align: center;
           }
 
           .dropdown {
@@ -1393,16 +1394,20 @@
         }
 
         &.selected {
-          background: var(--background-color-accent);
-          color: var(--text-button-color);
+          background: var(--highlight-accent-color);
+
+          .aisle-color {
+            // color: var(--text-button-color);
+          }
 
           &:hover {
-            background: var(--background-color-accent);
+            // background: var(--background-color-accent);
           }
         }
 
         &:hover {
-          background: var(--background-color-secondary);
+          background: var(--highlight-accent-color);
+          // background: var(--background-color-secondary);
         }
       }
     }
@@ -1527,6 +1532,7 @@
       .header {
         @include flex-space-between;
         border: none;
+
         .eyedrop-button {
           @include flex-center;
         }
@@ -1534,6 +1540,7 @@
 
       .inputs-container {
         @include flex-space-between;
+
         .input-container {
           padding: 0 4px;
           gap: 6px;
@@ -1652,6 +1659,154 @@
   }
 }
 
+.sidebar-right-wrapper {
+  .wall-properties-container {
+    .header {
+
+      color: var(--background-color-button);
+    }
+
+    .wall-properties {
+      padding: 12px 0;
+
+      .value-field-container {
+        padding: 0;
+
+        .input {
+          input {
+            text-align: center;
+          }
+        }
+      }
+    }
+
+    section {
+      padding: 0;
+      margin: 0;
+      max-height: 50vh;
+      overflow: hidden;
+
+      .header-wrapper {
+        display: flex;
+        justify-content: space-between;
+        padding: 12px;
+      }
+
+      .material-preview {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 15px;
+        background: var(--Grays-Gray-6, #F2F2F7);
+        padding: 18px 25px;
+
+        .sides-wrapper {
+          display: flex;
+          justify-content: space-between;
+          width: 100%;
+          background-color: #FCFDFD;
+          border-radius: 4px;
+          overflow: hidden;
+
+          .side-wrapper {
+            flex: 1;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 8px;
+            padding: 8px 0;
+            cursor: pointer;
+
+            .label {
+              color: var(--background-color-button);
+            }
+
+            &.active {
+              background-color: #E0DFFF;
+            }
+
+            .texture-image {
+              width: 20px;
+              height: 20px;
+              border-radius: 50%;
+              overflow: hidden;
+
+              img {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+              }
+            }
+          }
+        }
+
+        .preview {
+          width: 90%;
+          height: 111px;
+
+          img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+        }
+      }
+
+      .materials {
+        max-height: 250px;
+        overflow: auto;
+        margin-bottom: 6px;
+        padding: 0 12px;
+
+        .material-container {
+          display: flex;
+          flex-direction: column;
+          gap: 6px;
+
+          .material-wrapper {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 4px 6px;
+            border-radius: 12px;
+
+            &:hover {
+              background: var(--highlight-accent-color);
+            }
+
+            &.selectedMaterial {
+              background: var(--highlight-accent-color);
+            }
+
+            .material-property {
+              display: flex;
+              align-items: center;
+              gap: 6px;
+
+              .material-image {
+                width: 34px;
+                height: 34px;
+                border-radius: 6px;
+                overflow: hidden;
+
+                img {
+                  width: 100%;
+                  height: 100%;
+                  object-fit: cover;
+                }
+              }
+            }
+
+            .delete-material {
+              cursor: pointer;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
 .assets-container-main {
   width: 100%;
   display: flex;
diff --git a/app/src/styles/scene/scene.scss b/app/src/styles/scene/scene.scss
index 3823ac4..1ab5888 100644
--- a/app/src/styles/scene/scene.scss
+++ b/app/src/styles/scene/scene.scss
@@ -98,7 +98,7 @@
   right: 1.5%;
   z-index: 10;
   border-radius: 8px;
-
+  transition: all 0.3s ease-in-out;
   .input-toggle-container {
     padding: 0;
     display: flex;
@@ -117,4 +117,9 @@
       }
     }
   }
+
+
+}
+.label-toogler.bottom{
+  bottom: 32%;
 }