diff --git a/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx b/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx
index 31c7761..e116c15 100644
--- a/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx
@@ -57,7 +57,7 @@ const ZoneProperties: React.FC = () => {
     };
     // Call your API to update the zone
     let response = await zoneCameraUpdate(zonesdata, organization);
-    console.log("response: ", response);
+    // console.log("response: ", response);
     if (response.message === "updated successfully") {
       setZones((prevZones: any[]) =>
         prevZones.map((zone) =>
diff --git a/app/src/components/ui/inputs/InputWithDropDown.tsx b/app/src/components/ui/inputs/InputWithDropDown.tsx
index c6316d6..f749af7 100644
--- a/app/src/components/ui/inputs/InputWithDropDown.tsx
+++ b/app/src/components/ui/inputs/InputWithDropDown.tsx
@@ -52,8 +52,8 @@ const InputWithDropDown: React.FC<InputWithDropDownProps> = ({
           max={max}
           step={step}
           type="number"
-          // defaultValue={value}
-          value={value}
+          defaultValue={value}
+          // value={value}
           onChange={(e) => {
             onChange(e.target.value);
           }}
diff --git a/app/src/components/ui/list/DropDownList.tsx b/app/src/components/ui/list/DropDownList.tsx
index 3ec828e..1947138 100644
--- a/app/src/components/ui/list/DropDownList.tsx
+++ b/app/src/components/ui/list/DropDownList.tsx
@@ -98,6 +98,7 @@ const DropDownList: React.FC<DropDownListProps> = ({
         assets: assetsInZone,
       };
     });
+  
     setZoneDataList(updatedZoneList);
   }, [zones, floorItems]);
 
diff --git a/app/src/components/ui/list/List.tsx b/app/src/components/ui/list/List.tsx
index 8ec9dcc..d5db7fb 100644
--- a/app/src/components/ui/list/List.tsx
+++ b/app/src/components/ui/list/List.tsx
@@ -19,6 +19,7 @@ import {
 } from "../../../store/builder/store";
 import { zoneCameraUpdate } from "../../../services/visulization/zone/zoneCameraUpdation";
 import { setFloorItemApi } from "../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi";
+import OuterClick from "../../../utils/outerClick";
 
 interface Asset {
   id: string;
@@ -43,13 +44,14 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
   const { activeModule } = useModuleStore();
   const { selectedZone, setSelectedZone } = useSelectedZoneStore();
   const { zoneAssetId, setZoneAssetId } = useZoneAssetId();
-  const { zones } = useZones();
+  const { zones, setZones } = useZones();
   const { setSubModule } = useSubModuleStore();
   const [expandedZones, setExpandedZones] = useState<Record<string, boolean>>(
     {}
   );
   const { setFloorItems } = useFloorItems();
 
+
   useEffect(() => {
     useSelectedZoneStore.getState().setSelectedZone({
       zoneName: "",
@@ -82,7 +84,6 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
       const organization = email?.split("@")[1]?.split(".")[0] ?? "";
 
       let response = await getZoneData(id, organization);
-
       setSelectedZone({
         zoneName: response?.zoneName,
         activeSides: response?.activeSides ?? [],
@@ -125,6 +126,14 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
     const response = await zoneCameraUpdate(zonesdata, organization);
     if (response.message === "updated successfully") {
       setSelectedZone((prev) => ({ ...prev, zoneName: newName }));
+
+      setZones((prevZones: any[]) =>
+        prevZones.map((zone) =>
+          zone.zoneId === selectedZone.zoneId
+            ? { ...zone, zoneName: newName }
+            : zone
+        )
+      );
     }
   }
 
@@ -138,7 +147,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
         zoneAssetId.id,
         newName
       );
-      console.log("response: ", response);
+      // console.log("response: ", response);
       setFloorItems((prevFloorItems: any[]) =>
         prevFloorItems.map((floorItems) =>
           floorItems.modelUuid === zoneAssetId.id
@@ -156,6 +165,69 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
     );
   };
 
+  useEffect(() => {
+    let drag = false;
+    let isLeftMouseDown = false;
+
+    const contextClassNames = ["list-wrapper", "zone-properties-container", "list-container"];
+
+    const isOutsideClick = (target: EventTarget | null) => {
+      if (!(target instanceof HTMLElement)) return true;
+      return !contextClassNames.some(className =>
+        target.closest(`.${className}`)
+      );
+    };
+
+    const onMouseDown = (evt: MouseEvent) => {
+      if (evt.button === 0) {
+        isLeftMouseDown = true;
+        drag = false;
+      }
+    };
+
+    const onMouseMove = () => {
+      if (isLeftMouseDown) {
+        drag = true;
+      }
+    };
+
+    const onMouseUp = (evt: MouseEvent) => {
+      if (evt.button === 0) {
+        isLeftMouseDown = false;
+        if (drag) return;
+
+        if (isOutsideClick(evt.target)) {
+          // Clear selected zone
+          setSelectedZone({
+            zoneId: '',
+            zoneName: '',
+            activeSides: [],
+            panelOrder: [],
+            lockedPanels: [],
+            widgets: [],
+            zoneViewPortTarget: [],
+            zoneViewPortPosition: []
+          });
+          setZoneAssetId({
+            id: '',
+            name: '',
+          });
+        }
+      }
+    };
+
+    document.addEventListener('mousedown', onMouseDown);
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+
+    return () => {
+      document.removeEventListener('mousedown', onMouseDown);
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', onMouseUp);
+    };
+  }, []);
+
+
   return (
     <>
       {items?.length > 0 ? (
@@ -169,7 +241,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
                   toggleZoneExpansion(item.id);
                 }}
               >
-                <div className={`list-item ${item.active ? "active" : ""}`}>
+                <div className={`list-item ${selectedZone.zoneId === item.id ? "active" : ""}`}>
                   <div className="zone-header">
                     <button className="value" id="zone-name">
                       <RenameInput
@@ -211,7 +283,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
                     {item.assets.map((asset) => (
                       <li
                         key={`asset-${asset.id}`}
-                        className="list-container asset-item"
+                        className={`list-container asset-item ${zoneAssetId?.id === asset.id ? "active" : ""}`}
                       >
                         <div className="list-item">
                           <button
diff --git a/app/src/modules/builder/groups/zoneGroup.tsx b/app/src/modules/builder/groups/zoneGroup.tsx
index 91be7f5..5b567af 100644
--- a/app/src/modules/builder/groups/zoneGroup.tsx
+++ b/app/src/modules/builder/groups/zoneGroup.tsx
@@ -533,7 +533,7 @@ const ZoneGroup: React.FC = () => {
           <group
             key={zone.zoneId}
             name={zone.zoneName}
-            visible={zone.zoneName === selectedZone.zoneName}
+            visible={zone.zoneId === selectedZone.zoneId}
           >
             {zone.points
               .slice(0, -1)
@@ -576,24 +576,50 @@ const ZoneGroup: React.FC = () => {
                   </mesh>
                 );
               })}
-            {!toggleView && (
-              <Html
-                // data
-                key={zone.zoneId}
-                position={[
-                  zone.viewPortCenter[0],
-                  zone.viewPortCenter[1] + 4,
-                  zone.viewPortCenter[2],
-                ]}
-                // class
-                className="zone-name-wrapper"
-                // other
-                center
-                distanceFactor={20}
-              >
-                <div className="zone-name">{zone.zoneName}</div>
-              </Html>
-            )}
+            {!toggleView &&
+              (() => {
+                const points3D = zone.points || [];
+                const coords2D = points3D.map((p: any) => [p[0], p[2]]);
+
+                // Ensure the polygon is closed
+                if (
+                  coords2D.length >= 3 &&
+                  (coords2D[0][0] !== coords2D[coords2D.length - 1][0] ||
+                    coords2D[0][1] !== coords2D[coords2D.length - 1][1])
+                ) {
+                  coords2D.push(coords2D[0]);
+                }
+
+                const polygon = turf.polygon([coords2D]);
+                const center2D = turf.center(polygon).geometry.coordinates;
+
+                // Calculate the average Y value
+                const sumY = points3D.reduce(
+                  (sum: number, p: any) => sum + p[1],
+                  0
+                );
+                const avgY = points3D.length > 0 ? sumY / points3D.length : 0;
+
+                const htmlPosition: [number, number, number] = [
+                  center2D[0],
+                  avgY + (CONSTANTS.zoneConfig.height || 0) + 1.5,
+                  center2D[1],
+                ];
+
+                return (
+                  <Html
+                    // data
+                    key={zone.zoneId}
+                    position={htmlPosition}
+                    // class
+                    className="zone-name-wrapper"
+                    // others
+                    center
+                  >
+                    <div className="zone-name">{zone.zoneName}</div>
+                  </Html>
+                );
+              })()}
           </group>
         ))}
       </group>
diff --git a/app/src/modules/visualization/widgets/3d/Dropped3dWidget.tsx b/app/src/modules/visualization/widgets/3d/Dropped3dWidget.tsx
index dd0b3fc..ccb88c4 100644
--- a/app/src/modules/visualization/widgets/3d/Dropped3dWidget.tsx
+++ b/app/src/modules/visualization/widgets/3d/Dropped3dWidget.tsx
@@ -41,6 +41,7 @@ export default function Dropped3dWidgets() {
   const { raycaster, gl, scene, mouse, camera }: ThreeState = useThree();
   const { widgetSubOption } = useWidgetSubOption();
   const { selectedZone } = useSelectedZoneStore();
+  let lastClientY = useRef<number | null>(null);
   const { top, setTop } = useTopData();
   const { left, setLeft } = useLeftData();
   const { rightSelect, setRightSelect } = useRightSelected();
@@ -411,6 +412,7 @@ export default function Dropped3dWidgets() {
         }
       }
     };
+   
 
     const handleMouseMove = (event: MouseEvent) => {
       if (!rightClickSelected || !rightSelect) return;
@@ -465,27 +467,59 @@ export default function Dropped3dWidgets() {
         }
       }
 
+      // if (rightSelect === "Vertical Move") {
+      //   // console.log('rightSelect: ', rightSelect);
+
+      //   // console.log('floorPlanesVertical: ', floorPlanesVertical);
+      //   // console.log('planeIntersect.current: ', planeIntersect.current);
+      //   // const intersect = raycaster.ray.intersectPlane(
+      //   //   floorPlanesVertical,
+      //   //   planeIntersect.current
+      //   // );
+      //   // console.log('intersect: ', intersect);
+     
+      //   let intersect = event.clientY
+        
+      //   if (intersect && typeof intersectcontextmenu === "number") {
+      //     console.log('intersect: ', intersect);
+      //     const diff = intersect - intersectcontextmenu;
+      //     const unclampedY = selectedWidget.position[1] + diff;
+      //     const newY = Math.max(0, unclampedY); // Prevent going below floor (y=0)
+
+      //     setintersectcontextmenu(intersect);
+
+      //     const newPosition: [number, number, number] = [
+      //       selectedWidget.position[0],
+      //       newY,
+      //       selectedWidget.position[2],
+      //     ];
+      //     console.log('newPosition: ', newPosition);
+
+
+      //     updateWidgetPosition(selectedZoneId, rightClickSelected, newPosition);
+      //   }
+      // }
       if (rightSelect === "Vertical Move") {
-        const intersect = raycaster.ray.intersectPlane(
-          floorPlanesVertical,
-          planeIntersect.current
-        );
-
-        if (intersect && typeof intersectcontextmenu === "number") {
-          const diff = intersect.y - intersectcontextmenu;
-          const unclampedY = selectedWidget.position[1] + diff;
-          const newY = Math.max(0, unclampedY); // Prevent going below floor (y=0)
-
-          setintersectcontextmenu(intersect.y);
-
-          const newPosition: [number, number, number] = [
-            selectedWidget.position[0],
-            newY,
-            selectedWidget.position[2],
-          ];
-
-          updateWidgetPosition(selectedZoneId, rightClickSelected, newPosition);
+        if (lastClientY.current === null) {
+          lastClientY.current = event.clientY;
+          return;
         }
+    
+        const diff = lastClientY.current - event.clientY; // dragging up = increase Y
+        const scaleFactor = 0.05; // tune this based on your scene scale
+    
+        const unclampedY = selectedWidget.position[1] + diff * scaleFactor;
+        const newY = Math.max(0, unclampedY);
+    
+        lastClientY.current = event.clientY;
+    
+        const newPosition: [number, number, number] = [
+          selectedWidget.position[0],
+          newY,
+          selectedWidget.position[2],
+        ];
+    
+        updateWidgetPosition(selectedZoneId, rightClickSelected, newPosition);
       }
 
       if (rightSelect?.startsWith("Rotate")) {
@@ -668,9 +702,12 @@ export default function Dropped3dWidgets() {
 
     raycaster.setFromCamera(mouse, camera);
 
+    const up = new THREE.Vector3(0, 1, 0);
     const cameraDirection = new THREE.Vector3();
     camera.getWorldDirection(cameraDirection);
-    const verticalPlane = new THREE.Plane(cameraDirection);
+    const right = new THREE.Vector3().crossVectors(up, cameraDirection).normalize();
+    const verticalPlane = new THREE.Plane(right, 0);
+    // const verticalPlane = new THREE.Plane(cameraDirection);
     setFloorPlanesVertical(verticalPlane);
 
     const intersectPoint = raycaster.ray.intersectPlane(
diff --git a/app/src/modules/visualization/widgets/3d/cards/ProductionCapacity.tsx b/app/src/modules/visualization/widgets/3d/cards/ProductionCapacity.tsx
index 19fe97d..324f53c 100644
--- a/app/src/modules/visualization/widgets/3d/cards/ProductionCapacity.tsx
+++ b/app/src/modules/visualization/widgets/3d/cards/ProductionCapacity.tsx
@@ -195,35 +195,35 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
     }
   }, [chartMeasurements, chartDuration, widgetName]);
 
-  useEffect(() => {}, [rotation]);
+  useEffect(() => { }, [rotation]);
 
   return (
+
     <Html
+      // data
       position={position}
       scale={[0.5, 0.5, 0.5]}
       rotation={rotation}
+      // class
+      wrapperClass="pointer-none"
+      // other
       transform
-      sprite={true}
       zIndexRange={[1, 0]}
-      // style={{
-      //   transform: transformStyle.transform,
-      //   transformStyle: "preserve-3d",
-      //   transition: "transform 0.1s ease-out",
-      // }}
+      prepend
+      // sprite
+      distanceFactor={20}
+      // events
       onDragOver={(e) => {
         e.preventDefault();
         e.stopPropagation();
       }}
       onDrop={(e) => {
         e.preventDefault();
-        // e.stopPropagation();
       }}
-      wrapperClass="pointer-none"
     >
       <div
-        className={`productionCapacity-wrapper card ${
-          selectedChartId?.id === id ? "activeChart" : ""
-        }`}
+        className={`productionCapacity-wrapper card ${selectedChartId?.id === id ? "activeChart" : ""
+          }`}
         onClick={() => setSelectedChartId({ id: id, type: type })}
         onContextMenu={onContextMenu}
         style={{
diff --git a/app/src/modules/visualization/widgets/3d/cards/ReturnOfInvestment.tsx b/app/src/modules/visualization/widgets/3d/cards/ReturnOfInvestment.tsx
index 6aed5ca..65029b2 100644
--- a/app/src/modules/visualization/widgets/3d/cards/ReturnOfInvestment.tsx
+++ b/app/src/modules/visualization/widgets/3d/cards/ReturnOfInvestment.tsx
@@ -242,12 +242,12 @@ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({
       rotation={rotation}
       scale={[0.5, 0.5, 0.5]}
       transform
-      sprite={true}
-      // style={{
-      //   transform: transformStyle.transform,
-      //   transformStyle: "preserve-3d",
-      //   transition: "transform 0.1s ease-out",
-      // }}
+      zIndexRange={[1, 0]}
+      prepend 
+      distanceFactor={20}
+      
+
+  
     >
       <div
         className={`returnOfInvestment card ${
diff --git a/app/src/modules/visualization/widgets/3d/cards/StateWorking.tsx b/app/src/modules/visualization/widgets/3d/cards/StateWorking.tsx
index da5c411..b591a21 100644
--- a/app/src/modules/visualization/widgets/3d/cards/StateWorking.tsx
+++ b/app/src/modules/visualization/widgets/3d/cards/StateWorking.tsx
@@ -121,7 +121,9 @@ const StateWorking: React.FC<StateWorkingProps> = ({
       scale={[0.5, 0.5, 0.5]}
       transform
       zIndexRange={[1, 0]}
-      sprite={true}
+      // sprite={true}
+      prepend 
+      distanceFactor={20}
       // style={{
       //   transform: transformStyle.transform,
       //   transformStyle: "preserve-3d",
diff --git a/app/src/modules/visualization/widgets/3d/cards/Throughput.tsx b/app/src/modules/visualization/widgets/3d/cards/Throughput.tsx
index f003607..ef74f14 100644
--- a/app/src/modules/visualization/widgets/3d/cards/Throughput.tsx
+++ b/app/src/modules/visualization/widgets/3d/cards/Throughput.tsx
@@ -223,7 +223,9 @@ const Throughput: React.FC<ThroughputProps> = ({
       scale={[0.5, 0.5, 0.5]}
       transform
       zIndexRange={[1, 0]}
-      sprite={true}
+      prepend 
+      distanceFactor={20}
+      // sprite={true}
     >
       <div
         className={`throughput-wrapper card ${selectedChartId?.id === id ? "activeChart" : ""
diff --git a/app/src/modules/visualization/widgets/floating/DroppedFloatingWidgets.tsx b/app/src/modules/visualization/widgets/floating/DroppedFloatingWidgets.tsx
index 409b9ad..f6ae253 100644
--- a/app/src/modules/visualization/widgets/floating/DroppedFloatingWidgets.tsx
+++ b/app/src/modules/visualization/widgets/floating/DroppedFloatingWidgets.tsx
@@ -478,7 +478,6 @@ const DroppedObjects: React.FC = () => {
 
   const widthMultiplier = parseFloat(containerWidth) * 0.13;
 
-  console.log('zone?.objects: ', zone?.objects);
   return (
     <div
       onPointerMove={handlePointerMove}
diff --git a/app/src/modules/visualization/zone/DisplayZone.tsx b/app/src/modules/visualization/zone/DisplayZone.tsx
index 17d88cf..46781f5 100644
--- a/app/src/modules/visualization/zone/DisplayZone.tsx
+++ b/app/src/modules/visualization/zone/DisplayZone.tsx
@@ -176,7 +176,7 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
       const email = localStorage.getItem("email") || "";
       const organization = email?.split("@")[1]?.split(".")[0];
       let response = await getSelect2dZoneData(zoneId, organization);
-      console.log("response: ", response);
+
       let res = await getFloatingZoneData(zoneId, organization);
       console.log("res: ", res);
 
diff --git a/app/src/styles/components/lists.scss b/app/src/styles/components/lists.scss
index 825999d..3edf62f 100644
--- a/app/src/styles/components/lists.scss
+++ b/app/src/styles/components/lists.scss
@@ -85,3 +85,12 @@
     margin-left: 20px;
   }
 }
+
+.list-container.active {
+  .list-item {
+    background: var(--highlight-accent-color);
+    .input-value {
+      color: var(--highlight-text-color);
+    }
+  }
+}
diff --git a/app/src/styles/components/simulation/simulation.scss b/app/src/styles/components/simulation/simulation.scss
index b7ac080..db7b580 100644
--- a/app/src/styles/components/simulation/simulation.scss
+++ b/app/src/styles/components/simulation/simulation.scss
@@ -105,6 +105,7 @@
         height: fit-content;
         cursor: pointer;
         transition: all 0.2s;
+        outline: 1px solid transparent;
 
         &:hover {
           outline: 1px solid var(--border-color);