diff --git a/client/src/components/ApartmentSidebar.tsx b/client/src/components/ApartmentSidebar.tsx
index 6773373..8775547 100644
--- a/client/src/components/ApartmentSidebar.tsx
+++ b/client/src/components/ApartmentSidebar.tsx
@@ -9,7 +9,7 @@ interface ApartmentSidebarProps {
 
 const ApartmentSidebar = ({ currentApartment }: ApartmentSidebarProps) => {
   const navigate = useNavigate();
-  const unitNo = currentApartment.Unit_No.split("-")[1];
+  // const unitNo = currentApartment.Unit_No.split("-")[1];
   const wing =
     currentApartment.Unit_No.split("-")[0] === "E" ? "East Wing" : "West Wing";
 
@@ -18,11 +18,16 @@ const ApartmentSidebar = ({ currentApartment }: ApartmentSidebarProps) => {
   };
 
   return (
-    <div className="flex gap-2 w-full">
+    <div className="flex gap-2 w-full ">
       <div className="rounded-2xl overflow-clip flex-none relative w-1/2">
-        <p className="absolute top-[30px] left-6 font-semibold text-m text-white">
-          View from window
-        </p>
+        <div className="absolute top-[67.5px] left-6 flex flex-col">
+          <p className=" font-semibold text-[33.75px] text-white">
+            View from window
+          </p>
+          <p className=" font-semibold text-[56.25px] text-white">
+            Burj Khalifa
+          </p>
+        </div>
         <img
           src="/images/view_from_window.png"
           alt=""
@@ -30,37 +35,69 @@ const ApartmentSidebar = ({ currentApartment }: ApartmentSidebarProps) => {
         />
       </div>
       <div className="flex gap-2 flex-col flex-1 w-1/2 aspect-square">
-        <div className="flex flex-col rounded-2xl bg-white p-6 gap-6 h-full">
-          <h2 className="font-semibold text-[#0D1922] text-subheadline-s">
-            Parameters
+        <div className="flex flex-col rounded-2xl bg-white p-6 h-full">
+          <h2 className="text-[56.25px] text-[#0D1922] font-semibold leading-[78.75px]">
+            {currentApartment.Unit_Type}, {currentApartment.Total_Area_Sqft}{" "}
+            Sqft
           </h2>
-          <div className="flex flex-col gap-3">
-            <div className="flex justify-between text-m">
-              <p className="text-[#73787C]">Complex</p>
-              <p className="text-[#0D1922]">{currentApartment.Project_Name}</p>
-            </div>
-            <div className="flex justify-between text-m">
-              <p className="text-[#73787C]">Section</p>
-              <p className="text-[#0D1922]">{wing}</p>
-            </div>
-            <div className="flex justify-between text-m">
-              <p className="text-[#73787C]">Floor</p>
-              <p className="text-[#0D1922]">{currentApartment.Floor}</p>
-            </div>
-            <div className="flex justify-between text-m">
-              <p className="text-[#73787C]">Number</p>
-              <p className="text-[#0D1922]">{unitNo}</p>
-            </div>
-            <div className="flex justify-between text-m">
-              <p className="text-[#73787C]">Size</p>
-              <p className="text-[#0D1922]">
+          <p className="text-[39.2px] text-[#00BED7] font-normal leading-[55.12px] pt-[22.5px]">
+            {currentApartment.Project_Name}
+          </p>
+          <div className="flex gap-2 items-center pt-1 pb-4 border-b">
+            <p className="text-[#0D1922B2] font-semibold text-[33.75px] ">
+              {wing}
+            </p>
+            <div className="bg-[#E2E2DC] w-[11.25px] h-[11.25px] rounded-full"></div>
+            <p className="text-[#0D1922B2] font-semibold text-[33.75px] ">
+              Floor {currentApartment.Floor}
+            </p>
+            <div className="bg-[#E2E2DC] w-[11.25px] h-[11.25px] rounded-full"></div>
+            <p className="text-[#0D1922B2] font-semibold text-[33.75px] ">
+              {currentApartment.Unit_No}
+            </p>
+          </div>
+          <div className="pt-6 flex flex-col gap-3">
+            <div className="flex justify-between">
+              <p className="text-[#0D192266] text-[45px] leading-[56.25px]">
+                Total Area
+              </p>
+              <p className="text-[#0D1922] text-[45px] leading-[56.25px]">
                 {currentApartment.Total_Area_Sqft} Sqft
               </p>
             </div>
+            <div className="flex justify-between">
+              <p className="text-[#0D192266] text-[45px] leading-[56.25px]">
+                Suite Area
+              </p>
+              <p className="text-[#0D1922] text-[45px] leading-[56.25px]">
+                {currentApartment.Suite_Area_Sqft} Sqft
+              </p>
+            </div>
+            <div className="flex justify-between">
+              <p className="text-[#0D192266] text-[45px] leading-[56.25px]">
+                Balcony Area
+              </p>
+              <p className="text-[#0D1922] text-[45px] leading-[56.25px]">
+                {currentApartment.Balcony_Area_Sqft} Sqft
+              </p>
+            </div>
+            <div className="flex justify-between">
+              <p className="text-[#0D192266] text-[45px] leading-[56.25px]">
+                Status
+              </p>
+              <p className="text-[#0D1922] text-[45px] leading-[56.25px]">
+                {currentApartment.Property_Status}
+              </p>
+            </div>
+            <div className="flex justify-between">
+              <p className="text-[#0D192266] text-[45px] leading-[56.25px]">
+                Parking Space
+              </p>
+              <p className="text-[#0D1922] text-[45px] leading-[56.25px]">1</p>
+            </div>
           </div>
-          <p className="text-[#00BED7] font-semibold text-subheadline-s leading-7">
+          <p className="pt-6 font-semibold text-subheadline-s text-[#00BED7] mt-auto">
             Unvailiable
-            {/* AED {formatNumber(1668888, ",", 3, 1)} */}
           </p>
         </div>
         <div className="rounded-2xl bg-white flex flex-col p-6 gap-4 flex-1 lg:flex-none justify-between">
diff --git a/client/src/components/ButtomPanel.tsx b/client/src/components/ButtomPanel.tsx
index 07641cf..09b3985 100644
--- a/client/src/components/ButtomPanel.tsx
+++ b/client/src/components/ButtomPanel.tsx
@@ -14,7 +14,7 @@ const ButtomPanel = () => {
         <Button
           text="Disclaimer"
           buttonType="special"
-          className="pl-2"
+          className="pl-[8px]"
           icon={<DisclaimerIcon />}
           onClick={handleOnDisclaimerClick}
           isCircleRounded
diff --git a/client/src/components/ButtomPanelCompass.tsx b/client/src/components/ButtomPanelCompass.tsx
index 23bdab4..f4dec4b 100644
--- a/client/src/components/ButtomPanelCompass.tsx
+++ b/client/src/components/ButtomPanelCompass.tsx
@@ -20,7 +20,7 @@ const ButtomPanelCompass = () => {
             text="Disclaimer"
             buttonType="special"
             isCircleRounded
-            className="pl-2"
+            className="pl-[8px]"
             icon={<DisclaimerIcon />}
             onClick={handleOnDisclaimerClick}
           />
diff --git a/client/src/components/Button.tsx b/client/src/components/Button.tsx
index c2a07ab..97574e8 100644
--- a/client/src/components/Button.tsx
+++ b/client/src/components/Button.tsx
@@ -45,7 +45,7 @@ const Button = ({
       onClick={onClick}
       className={`zoom-280 min-w-[40px] max-h-[40px] ${rounded}  ${
         icon && !text ? "p-[10px] " : padding
-      }  transition-all duration-300 ease-in-out text-[16px] pointer-events-auto flex gap-1 items-center align-middle h-fit ${backgroundColor} ${textColor} ${border} ${disabledStyle} ${
+      }  transition-all duration-300 ease-in-out text-[16px] pointer-events-auto flex gap-[4px] items-center align-middle h-fit ${backgroundColor} ${textColor} ${border} ${disabledStyle} ${
         className ? className : ""
       }`}
     >
diff --git a/client/src/components/Checkbox.tsx b/client/src/components/Checkbox.tsx
index 4873ed3..bb67073 100644
--- a/client/src/components/Checkbox.tsx
+++ b/client/src/components/Checkbox.tsx
@@ -11,36 +11,36 @@ const Checkbox = ({ onClick, checkbox }: CheckboxProps) => {
   return (
     <div
       onClick={() => onClick(checkbox.id)}
-      className={` zoom-280 flex justify-between bg-white p-3 rounded-lg  transition-[background] duration-300 ease-in-out select-none ${
+      className={` zoom-280 flex justify-between bg-white p-[12px] rounded-[8px]  transition-[background] duration-300 ease-in-out select-none ${
         checkbox.disabled
           ? "pointer-events-none touch-none"
           : "hover:bg-[#F3F3F2] cursor-pointer"
       }`}
     >
-      <div className="flex gap-3">
+      <div className="flex gap-[12px]">
         {checkbox.disabled ? (
-          <div className="bg-[#E2E2DC] rounded-[4px] w-6 h-6 text-white flex justify-center items-center">
+          <div className="bg-[#E2E2DC] rounded-[4px] w-[24px] h-[24px] text-white flex justify-center items-center">
             <MinusIcon />
           </div>
         ) : (
           <div
-            className={` rounded-[4px] w-6 h-6 flex justify-center items-center ease-in-out duration-300 transition-[background] ${
+            className={` rounded-[4px] w-[24px] h-[24px] flex justify-center items-center ease-in-out duration-300 transition-[background] ${
               checkbox.selected ? "bg-[#00BED7]" : "bg-[#E2E2DC]"
             }`}
           >
             {checkbox.selected ? <SelectedCheckboxIcon /> : <></>}
           </div>
         )}
-        <p className="text-s text-[#73787C]">{checkbox.title}</p>
+        <p className="text-[16px] text-[#73787C]">{checkbox.title}</p>
       </div>
       {!checkbox.disabled ? (
-        <div className="bg-[#00BED7] rounded-full text-white w-6 h-6 flex items-center justify-center font-semibold text-caption-s ">
-          <div className="h-fit align-middle text-center flex items-center justify-center leading-1">
+        <div className="bg-[#00BED7] rounded-full text-white w-[24px] h-[24px] flex items-center justify-center font-semibold text-[12px] ">
+          <div className="h-fit align-middle text-center flex items-center justify-center leading-[4px]">
             8
           </div>
         </div>
       ) : (
-        <div className="bg-[#E2E2DC] rounded-full text-white w-6 h-6 flex items-center justify-center font-semibold text-caption-s">
+        <div className="bg-[#E2E2DC] rounded-full text-white w-[24px] h-[24px] flex items-center justify-center font-semibold text-[12px]">
           <div className="h-fit align-middle text-center flex">
             <MinusIcon />
           </div>
diff --git a/client/src/components/MultiRangeSlider.tsx b/client/src/components/MultiRangeSlider.tsx
index e02f6e1..753a026 100644
--- a/client/src/components/MultiRangeSlider.tsx
+++ b/client/src/components/MultiRangeSlider.tsx
@@ -71,7 +71,7 @@ const MultiRangeSlider = ({
 
   return (
     <div className="zoom-280">
-      <div className="flex justify-between p-3 bg-white rounded-lg relative flex-col">
+      <div className="flex justify-between p-[12px] bg-white rounded-[8px] relative flex-col">
         <div className="flex justify-between">
           <NumericFormat
             thousandSeparator=","
@@ -94,7 +94,7 @@ const MultiRangeSlider = ({
           value={[multirangeSlider.startValue, multirangeSlider.endValue]}
           className={`${
             isDisabled ? "pointer-events-none text disabled" : ""
-          } absolute -bottom-3 left-0 w-[calc(100%-16px)] z-20`}
+          } absolute -bottom-[12px] left-0 w-[calc(100%-16px)] z-20`}
           onInput={handleOnRangeInputChange}
         />
       </div>
diff --git a/client/src/components/Switch.tsx b/client/src/components/Switch.tsx
index 7e517e7..1c2c1f4 100644
--- a/client/src/components/Switch.tsx
+++ b/client/src/components/Switch.tsx
@@ -12,13 +12,13 @@ const Switch = ({ switcher, onClick }: ISwitchProps) => {
 
   return (
     <div
-      className={`w-10 h-6 zoom-280  relative rounded-full cursor-pointer transition-all duration-300 ease-in-out ${
+      className={`w-[40px] h-[24px] zoom-280  relative rounded-full cursor-pointer transition-all duration-300 ease-in-out ${
         switcher.isSwitched ? "bg-[#00BED7]" : "bg-[#E2E2DC]"
       }`}
       onClick={handleOnClick}
     >
       <div
-        className={`w-5 h-5 bg-[#fff] rounded-full absolute transition-all duration-300 ease-in-out top-[2px] 
+        className={`w-[20px] h-[20px] bg-[#fff] rounded-full absolute transition-all duration-300 ease-in-out top-[2px] 
          ${switcher.isSwitched ? "left-[18px]" : "left-[2px]"}`}
       ></div>
     </div>
diff --git a/client/src/components/SwitchToggle.tsx b/client/src/components/SwitchToggle.tsx
index 96def37..4e3a2f7 100644
--- a/client/src/components/SwitchToggle.tsx
+++ b/client/src/components/SwitchToggle.tsx
@@ -23,7 +23,7 @@ function SwitchToggle({
             lab.id === currentLabel.id
               ? "bg-[#00BED7] text-white"
               : `${isDisabled ? "text-[#0D192266]" : ""}`
-          } rounded-lg px-6 py-[10px] cursor-pointer transition-all duration-300 ease-in-out`}
+          } rounded-lg px-6 py-[24px] cursor-pointer transition-all duration-300 ease-in-out`}
         >
           {lab.label}
         </div>
diff --git a/client/src/components/TransparentSelector.tsx b/client/src/components/TransparentSelector.tsx
new file mode 100644
index 0000000..e296be2
--- /dev/null
+++ b/client/src/components/TransparentSelector.tsx
@@ -0,0 +1,63 @@
+import { useState } from "react";
+import { IOption } from "../types/selectorOption";
+import ChevronDownIcon from "./icons/ChevronDownIcon";
+import CheckIcon from "./icons/CheckIcon";
+import { useClickAway } from "@uidotdev/usehooks";
+
+interface TransparentSelectorProps {
+  options: IOption[];
+  onClick: (optId: string) => void;
+}
+
+const TransparentSelector = ({
+  options,
+  onClick,
+}: TransparentSelectorProps) => {
+  const [isOpened, setIsOpened] = useState(false);
+  const selectedOpt = options.find((opt) => opt.isSelected)?.value;
+  const selectorRef = useClickAway(() => {
+    setIsOpened(false);
+  }) as React.LegacyRef<HTMLDivElement> | undefined;
+  const handleOnClick = () => {
+    setIsOpened((prev) => !prev);
+  };
+
+  return (
+    <div className="relative" ref={selectorRef}>
+      <div
+        className="text-[#00BED7] text-[38.4px] flex gap-[19.2px] items-center justify-center cursor-pointer select-none"
+        onClick={handleOnClick}
+      >
+        {selectedOpt && <p className="text-[38.4px]">{selectedOpt} floor</p>}
+        <div
+          className={`zoom-280 ease-in-out duration-300 transition-transform ${
+            isOpened ? "-rotate-180" : ""
+          }`}
+        >
+          <ChevronDownIcon />
+        </div>
+      </div>
+
+      {isOpened && options.length !== 0 && (
+        <div className="flex flex-col bg-white p-[19.2px] absolute gap list-shadow">
+          {options.map((opt) => (
+            <div
+              key={opt.id}
+              onClick={() => onClick(opt.id)}
+              className="px-[28.8px] py-[19.2px] text-[33.6px] flex gap-[19.2px]"
+            >
+              {opt.isSelected && (
+                <div className="zoom-280 text-[#00BED7]">
+                  <CheckIcon />
+                </div>
+              )}
+              <p className="flex text-nowrap">{opt.value} floor</p>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TransparentSelector;
diff --git a/client/src/components/apartmentPage/ApartmentLayout.tsx b/client/src/components/apartmentPage/ApartmentLayout.tsx
index 7c97530..f8095fd 100644
--- a/client/src/components/apartmentPage/ApartmentLayout.tsx
+++ b/client/src/components/apartmentPage/ApartmentLayout.tsx
@@ -29,7 +29,7 @@ const ApartmentLayout = ({ currentApartment }: ApartmentLayoutProps) => {
     <div className="p-10 pt-6 rounded-2xl bg-white flex flex-col items-center gap-8 relative h-full flex-1">
       <div className="w-full xl:px-[304px] sm:px-24 h-full flex justify-center items-center">
         <img
-          className="w-full h-full object-contain max-h-[628px]"
+          className="w-full h-full object-contain max-h-[1362px]"
           src={imageLayout ? imageLayout : apartmentLayoutImage}
           alt=""
         />
@@ -37,7 +37,7 @@ const ApartmentLayout = ({ currentApartment }: ApartmentLayoutProps) => {
       <img
         src="/images/compass.png"
         alt=""
-        className="absolute right-10 bottom-10"
+        className="absolute right-10 bottom-10 zoom-280"
       />
       <SwitchToggle
         isDisabled
diff --git a/client/src/components/complexPage/SequenceSlider.tsx b/client/src/components/complexPage/SequenceSlider.tsx
index 60d9278..e71c8d2 100644
--- a/client/src/components/complexPage/SequenceSlider.tsx
+++ b/client/src/components/complexPage/SequenceSlider.tsx
@@ -251,7 +251,7 @@ function SequenceSlider({ path }: SequenceSliderProps) {
       </div>
       <Button
         disabled={isAnimate}
-        className={`p-3 rounded-full transition-colors absolute left-6 top-[calc(50%-24px)] z-50 ${
+        className={`p-3 rounded-full transition-colors absolute left-4 top-[calc(50%-24px)] z-50 ${
           isAnimate ? "opacity-50" : "opacity-100"
         }`}
         isCircleRounded
@@ -261,7 +261,7 @@ function SequenceSlider({ path }: SequenceSliderProps) {
       />
       <Button
         disabled={isAnimate}
-        className={`p-3 rounded-full transition-colors absolute right-6 top-[calc(50%-24px)] z-50 ${
+        className={`p-3 rounded-full transition-colors absolute right-4 top-[calc(50%-24px)] z-50 ${
           isAnimate ? "opacity-50" : "opacity-100"
         }`}
         buttonType="fab"
diff --git a/client/src/components/complexWingPage/SequenceWing/SequenceWing.tsx b/client/src/components/complexWingPage/SequenceWing/SequenceWing.tsx
index 80f7fbb..af14f00 100644
--- a/client/src/components/complexWingPage/SequenceWing/SequenceWing.tsx
+++ b/client/src/components/complexWingPage/SequenceWing/SequenceWing.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { MouseEvent, useEffect, useState } from "react";
+import { useDebounce } from "@uidotdev/usehooks";
 import { IDesctiptionFloor } from "../../../types/descriptionFloor";
 import useModal from "../../../store/useModal";
 import { descriptions } from "../../../consts/masterplan";
@@ -9,7 +10,6 @@ import { IAparmentRes } from "../../../types/apartmentsRes";
 import useMasterplanFilters from "../../../store/useMasterplanFilters";
 import { initialRoveHomeCheckboxes } from "../../../consts/initialMasterplanFilters";
 import { pageInitial } from "../../../consts/initialMasterplanFilters";
-import { useDebounce } from "@uidotdev/usehooks";
 import { getFilteredApartments } from "../../../calc/getFilteredApartments";
 import FloorNumbers from "./FloorNumbers";
 import WingSignatures from "./WingSignatures";
@@ -189,7 +189,7 @@ const SequenceWing = () => {
     setModal(
       <WingFloorModal
         currentFloor={currentHoveredFloor}
-        floorApartments={apartments}
+        floorApartments={currentHoveredApartments}
       />
     );
     setIsDescriptionFloorMobile(false);
diff --git a/client/src/components/complexWingPage/SkygardenSidebar/LayoutSlider.tsx b/client/src/components/complexWingPage/SkygardenSidebar/LayoutSlider.tsx
index b6fe1b6..de81d7a 100644
--- a/client/src/components/complexWingPage/SkygardenSidebar/LayoutSlider.tsx
+++ b/client/src/components/complexWingPage/SkygardenSidebar/LayoutSlider.tsx
@@ -31,7 +31,7 @@ const LayoutSlider = () => {
         currentLabel={currentLabel}
         onClick={handleOnSwitchClick}
       />
-      <div className="flex w-full overflow-x-hidden max-w-[1100px] mx-auto overflow-hidden select-none pt-6">
+      <div className="flex w-full overflow-x-hidden max-w-[1800px]  mx-auto overflow-hidden select-none pt-6">
         <div
           className="flex w-full transition-all duration-300"
           style={{
diff --git a/client/src/components/complexWingPage/SkygardenSidebar/SkygardenIndoorLayout.tsx b/client/src/components/complexWingPage/SkygardenSidebar/SkygardenIndoorLayout.tsx
index 75efcdf..91da8ab 100644
--- a/client/src/components/complexWingPage/SkygardenSidebar/SkygardenIndoorLayout.tsx
+++ b/client/src/components/complexWingPage/SkygardenSidebar/SkygardenIndoorLayout.tsx
@@ -1,11 +1,11 @@
 function SkygardenIndoorLayout() {
   return (
     <img
-      className="zoom-280"
+      // className="zoom-280"
       src="/images/masterplanWing/skygardenIndoor.png"
       alt=""
-      width={672}
-      height={544}
+      width={1800}
+      height={1374}
     />
   );
 }
diff --git a/client/src/components/complexWingPage/SkygardenSidebar/SkygardenOutdoorLayout.tsx b/client/src/components/complexWingPage/SkygardenSidebar/SkygardenOutdoorLayout.tsx
index ae0c11f..f845f2a 100644
--- a/client/src/components/complexWingPage/SkygardenSidebar/SkygardenOutdoorLayout.tsx
+++ b/client/src/components/complexWingPage/SkygardenSidebar/SkygardenOutdoorLayout.tsx
@@ -1,10 +1,12 @@
 const SkygardenOutdoorLayout = () => {
   return (
     <img
-      className="zoom-280"
+      // className="zoom-280"
       src="/images/masterplanWing/skygardenOutdoor.png"
-      width={672}
-      height={544}
+      width={1800}
+      height={1374}
+      // width={672}
+      // height={544}
       alt=""
     />
   );
diff --git a/client/src/components/complexWingPage/SkygardenSidebar/ZoneSlider.tsx b/client/src/components/complexWingPage/SkygardenSidebar/ZoneSlider.tsx
index 5f42591..f26495e 100644
--- a/client/src/components/complexWingPage/SkygardenSidebar/ZoneSlider.tsx
+++ b/client/src/components/complexWingPage/SkygardenSidebar/ZoneSlider.tsx
@@ -62,7 +62,7 @@ const ZoneSlider = () => {
   }
 
   return (
-    <div className="flex flex-col gap-6 pt-[1147px] pb-[96px]" {...handlers}>
+    <div className="flex flex-col gap-6 pt-[1747px] pb-[96px]" {...handlers}>
       {/* <div className="flex flex-col gap-6 pt-[1108.5px]" {...handlers}> */}
       <div className="relative col-span-full overflow-x-hidden flex flex-col h-[892px] border-b">
         {/* <div className="relative col-span-full overflow-x-hidden flex flex-col h-[372px] "> */}
diff --git a/client/src/components/modals/mobile/AboutCompexMobileModal/AboutComplexMobileModal.tsx b/client/src/components/modals/mobile/AboutCompexMobileModal/AboutComplexMobileModal.tsx
index fbd7c86..dbc8b8e 100644
--- a/client/src/components/modals/mobile/AboutCompexMobileModal/AboutComplexMobileModal.tsx
+++ b/client/src/components/modals/mobile/AboutCompexMobileModal/AboutComplexMobileModal.tsx
@@ -16,8 +16,8 @@ const AboutComplexMobileModal = ({
   floor,
 }: AboutComplexMobileModalProps) => {
   return (
-    <div className="absolute min-h-screen w-screen bg-[#F3F3F2] pt-20 px-6 pb-6">
-      <div className="flex flex-col lg:col-span-7 col-span-full ">
+    <div className="absolute min-h-screen w-screen bg-[#F3F3F2] pt-20 px-6 pb-6 flex flex-col">
+      <div className="flex flex-col lg:col-span-7 col-span-full h-full flex-1">
         {currentApartment && (
           <ButtonPanel
             currentApartment={currentApartment}
@@ -29,7 +29,7 @@ const AboutComplexMobileModal = ({
           <ApartmentLayout currentApartment={currentApartment} />
         )}
         {currentApartment && (
-          <div className="lg:col-span-2 rounded-lg col-span-full pt-6">
+          <div className="lg:col-span-2 rounded-lg col-span-full pt-6 flex flex-1">
             <ApartmentSidebar currentApartment={currentApartment} />
           </div>
         )}
diff --git a/client/src/components/modals/mobile/AboutCompexMobileModal/ButtonPanel.tsx b/client/src/components/modals/mobile/AboutCompexMobileModal/ButtonPanel.tsx
index 81289b0..88a7028 100644
--- a/client/src/components/modals/mobile/AboutCompexMobileModal/ButtonPanel.tsx
+++ b/client/src/components/modals/mobile/AboutCompexMobileModal/ButtonPanel.tsx
@@ -19,7 +19,7 @@ const ButtonPanel = ({
   apartments,
   floor,
 }: ButtonPanelProps) => {
-  const unitNo = currentApartment.Unit_No.split("-")[1];
+  // const unitNo = currentApartment.Unit_No.split("-")[1];
   const [isFavorite, setIsFavorite] = useState(false);
   const { setFavorites } = useFavorites();
   const { setModal } = useModal();
@@ -77,7 +77,7 @@ const ButtonPanel = ({
   }, [currentApartment.id]);
 
   return (
-    <div className="flex justify-between w-full gap-4 items-center pb-3">
+    <div className="flex justify-between w-full gap-4 items-center pb-4">
       <div className="flex gap-4 items-center ">
         <Button
           icon={<LeftArrowSliderIcon />}
@@ -85,10 +85,10 @@ const ButtonPanel = ({
           onClick={handleOnBackClick}
         />
         <div className="flex flex-col">
-          <p className="text-[#73787C] text-caption-m font-semibold">
+          {/* <p className="text-[#73787C] text-caption-m font-semibold">
             № {unitNo}
-          </p>
-          <h2 className="text-subheadline-s font-semibold text-[#0D1922]">
+          </p> */}
+          <h2 className="text-[67.5px] font-semibold text-[#0D1922]">
             {currentApartment.Unit_Type}
           </h2>
         </div>
diff --git a/client/src/components/modals/mobile/WingFloorModal.tsx b/client/src/components/modals/mobile/WingFloorModal.tsx
index 44a4df6..d6e19be 100644
--- a/client/src/components/modals/mobile/WingFloorModal.tsx
+++ b/client/src/components/modals/mobile/WingFloorModal.tsx
@@ -14,7 +14,8 @@ import WestWingTopLevelsHighlighting from "../../complexWingPage/FloorSidebar/We
 import WestWingTopLevelsLayout from "../../complexWingPage/FloorSidebar/WestWingTopLevelsLayout";
 import { filterCurrentApartment } from "../../../calc/filterCurrentApartment";
 import MobileApartmentDescription from "../../complexWingPage/MobileApartmentDescription";
-import ChevronDownIcon from "../../icons/ChevronDownIcon";
+import TransparentSelector from "../../TransparentSelector";
+import { IOption } from "../../../types/selectorOption";
 
 const getDefaultApartments = (currentFloor: IDesctiptionFloor | null) => {
   if (!currentFloor) return [];
@@ -64,6 +65,7 @@ const WingFloorModal = ({
   );
   const [isDescVisible, setIsDescVisible] = useState(false);
   const [mousePos, setMousePos] = useState<number[]>([0, 0]);
+  const [optionsFloors, setOptionsFloors] = useState<IOption[]>([]);
   const wing =
     floorApartments.length > 0 &&
     floorApartments[0].Unit_No.split("-")[0] === "E"
@@ -90,12 +92,6 @@ const WingFloorModal = ({
 
     setCurrentApartmentType(apartmentType);
 
-    // const apartments = [
-    //   ...getDefaultApartments(currentFloor),
-    //   ...floorApartments,
-    // ];
-    // console.log("apartments", apartments);
-
     const apartment = filterCurrentApartment(apartments, apartmentType);
     if (!apartment) return;
 
@@ -123,6 +119,13 @@ const WingFloorModal = ({
     }
   }
 
+  const handleOnFloorOptionClick = (floorId: string) => {
+    const updatedOptions = [...optionsFloors].map((floor) => {
+      return { ...floor, isSelected: floor.id === floorId };
+    });
+    setOptionsFloors(updatedOptions);
+  };
+
   useEffect(() => {
     if (!currentFloor) return;
     const defaultApartment: IAparmentRes[] = getDefaultApartments(currentFloor);
@@ -141,6 +144,49 @@ const WingFloorModal = ({
     };
   }, []);
 
+  useEffect(() => {
+    if (!currentFloor) return;
+    const { floor: selectedFloor } = currentFloor;
+
+    if (selectedFloor === 11) {
+      const floors = Array.from({ length: 4 }).map((_, index) => {
+        const floor: IOption = {
+          isSelected: index + 11 === 11,
+          value: `${index + 11}`,
+          id: `${index + 11}`,
+        };
+        return floor;
+      });
+      setOptionsFloors(floors);
+      return;
+    }
+
+    if (selectedFloor === 31) {
+      const floors = Array.from({ length: 4 }).map((_, index) => {
+        const floor: IOption = {
+          isSelected: index + 28 === 31,
+          value: `${index + 28}`,
+          id: `${index + 28}`,
+        };
+        return floor;
+      });
+      setOptionsFloors(floors);
+      return;
+    }
+
+    const floors = Array.from({ length: 4 }).map((_, index) => {
+      const floorIndex = selectedFloor - 1 + index;
+      const floor: IOption = {
+        isSelected: floorIndex === selectedFloor,
+        value: `${index - 1 + selectedFloor}`,
+        id: `${index - 1 + selectedFloor}`,
+      };
+      return floor;
+    });
+
+    setOptionsFloors(floors);
+  }, [currentFloor]);
+
   return (
     <>
       <div
@@ -183,10 +229,9 @@ const WingFloorModal = ({
           </div>
           <div className="pt-6 flex justify-between items-center">
             <div className="flex flex-col">
-              <TransparentSelector />
-              {/* <h2 className="font-semibold text-[#0D1922] text-subheadline-m">
+              <h2 className="font-semibold text-[#0D1922] text-subheadline-m">
                 {currentFloor?.floor} floor
-              </h2> */}
+              </h2>
               <p className="text-s">{wing}</p>
             </div>
             <div className="py-[8.44px] px-2 text-white bg-[#00BED7] rounded-full text-caption-m">
@@ -194,29 +239,48 @@ const WingFloorModal = ({
             </div>
           </div>
           <div className="flex justify-between items-center py-2 px-4 rounded-lg bg-white">
-            <div className="">{currentFloor?.floor} floor</div>
+            <TransparentSelector
+              options={optionsFloors}
+              onClick={handleOnFloorOptionClick}
+            />
             <div className="flex items-center justify-center gap-6">
               <div className="flex gap-2 text-[#0D1922B2] items-center">
-                <div className="w-[48px] h-[48px] flex items-center bg-[#A19E9E] text-white justify-center rounded-full pt-[1.5px] pb-[2.5px]">
-                  1
+                <div className="w-[48px] h-[48px] text-caption-m flex items-center bg-[#A19E9E] text-white justify-center rounded-full pt-[1.5px] pb-[2.5px]">
+                  {
+                    floorApartments.filter(
+                      (aprt) => aprt.Unit_Type === "Studio Flex"
+                    ).length
+                  }
                 </div>
                 <p className="text-caption-m font-semibold">Studio flex</p>
               </div>
               <div className="flex gap-2 text-[#0D1922B2] items-center">
-                <div className="w-[48px] h-[48px] flex items-center bg-[#8299AD] text-white justify-center rounded-full pt-[1.5px] pb-[2.5px]">
-                  11
+                <div className="w-[48px] h-[48px] text-caption-m flex items-center bg-[#8299AD] text-white justify-center rounded-full pt-[1.5px] pb-[2.5px]">
+                  {
+                    floorApartments.filter(
+                      (aprt) => aprt.Unit_Type === "Studio Squared"
+                    ).length
+                  }
                 </div>
                 <p className="text-caption-m font-semibold">Studio</p>
               </div>
               <div className="flex gap-2 text-[#0D1922B2] items-center">
-                <div className="w-[48px] h-[48px] flex items-center bg-[#BFC9D1] text-white justify-center rounded-full pt-[1.5px] pb-[2.5px]">
-                  3
+                <div className="w-[48px] h-[48px] text-caption-m flex items-center bg-[#BFC9D1] text-white justify-center rounded-full pt-[1.5px] pb-[2.5px]">
+                  {
+                    floorApartments.filter(
+                      (aprt) => aprt.Unit_Type === "1 BR Squared"
+                    ).length
+                  }
                 </div>
                 <p className="text-caption-m font-semibold">1 Bedroom</p>
               </div>
               <div className="flex gap-2 text-[#0D1922B2] items-center">
-                <div className="w-[48px] h-[48px] flex items-center bg-[#878FA3] text-white justify-center rounded-full pt-[1.5px] pb-[2.5px]">
-                  7
+                <div className="w-[48px] h-[48px] text-caption-m flex items-center bg-[#878FA3] text-white justify-center rounded-full pt-[1.5px] pb-[2.5px]">
+                  {
+                    floorApartments.filter(
+                      (aprt) => aprt.Unit_Type === "2 BR Squared"
+                    ).length
+                  }
                 </div>
                 <p className="text-caption-m font-semibold">2 Bedroom</p>
               </div>
@@ -274,40 +338,38 @@ const WingFloorModal = ({
     </>
   );
 };
-interface IOption {
-  id: string;
-  value: string;
-  isSelected: boolean;
-}
 
-interface TransparentSelectorProps {
-  options: IOption;
-  setOptions: React.Dispatch<React.SetStateAction<IOption[]>>;
-}
+// const TransparentSelector = ({
+//   options,
+//   setOptions,
+// }: TransparentSelectorProps) => {
+//   const [isOpened, setIsOpened] = useState(false);
+//   const handleOnClick = () => {
+//     setIsOpened((prev) => !prev);
+//   };
 
-const TransparentSelector = ({
-  options,
-  setOptions,
-}: TransparentSelectorProps) => {
-  const [isOpened, setIsOpened] = useState(false);
-  const handleOnClick = () => {
-    setIsOpened((prev) => !prev);
-  };
-
-  return (
-    <>
-      <div
-        className="text-[#00BED7] text-[38.4px] flex gap-[19.2px] items-center justify-center cursor-pointer select-none"
-        onClick={handleOnClick}
-      >
-        <p>11 floor</p>
-        <div className="zoom-280">
-          <ChevronDownIcon />
-        </div>
-      </div>
-      {isOpened && <div className="flex flex-col"></div>}
-    </>
-  );
-};
+//   return (
+//     <div className="relative">
+//       <div
+//         className="text-[#00BED7] text-[38.4px] flex gap-[19.2px] items-center justify-center cursor-pointer select-none"
+//         onClick={handleOnClick}
+//       >
+//         <p>11 floor</p>
+//         <div
+//           className={`zoom-280 ease-in-out duration-300 transition-transform ${
+//             isOpened ? "-rotate-180" : ""
+//           }`}
+//         >
+//           <ChevronDownIcon />
+//         </div>
+//       </div>
+//       {isOpened && (
+//         <div className="flex flex-col bg-black p-[19.2px] absolute -bottom-[49px]">
+//           {options.map}
+//         </div>
+//       )}
+//     </div>
+//   );
+// };
 
 export default WingFloorModal;
diff --git a/client/src/components/virtualTour/ButtomPanelCompassVirualTour.tsx b/client/src/components/virtualTour/ButtomPanelCompassVirualTour.tsx
index 2e397ea..0d980da 100644
--- a/client/src/components/virtualTour/ButtomPanelCompassVirualTour.tsx
+++ b/client/src/components/virtualTour/ButtomPanelCompassVirualTour.tsx
@@ -19,7 +19,7 @@ const ButtomPanelCompassVirtualTour = () => {
           <Button
             text="Disclaimer"
             buttonType="special"
-            className="pl-2"
+            className="pl-[8px]"
             icon={<DisclaimerIcon />}
             onClick={handleOnDisclaimerClick}
           />
diff --git a/client/src/index.css b/client/src/index.css
index 6e0072a..a3939a1 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -54,6 +54,10 @@ html {
     zoom: 280%;
   }
 
+  .list-shadow {
+    box-shadow: 0px 4.8px 19.2px 0px #00000026;
+  }
+
   .desc-shadow {
     box-shadow: 0px 4px 20px 1px #00000026;
   }
diff --git a/client/src/pages/AboutComplex.tsx b/client/src/pages/AboutComplex.tsx
index 0319923..00ef162 100644
--- a/client/src/pages/AboutComplex.tsx
+++ b/client/src/pages/AboutComplex.tsx
@@ -6,8 +6,6 @@ import LivingSolutionSlider from "../components/aboutComplex/LivingSolutionSlide
 import RoveHomeSlider from "../components/aboutComplex/RoveHomeSlider";
 import { useNavigate } from "react-router-dom";
 
-const isMobile = true;
-
 interface ICityItem {
   time: number;
   title: string;
@@ -129,12 +127,8 @@ const AboutComplex = () => {
 
   return (
     <>
-      <section
-        className={`xl:pt-16 sm:pt-10 font-usual ${
-          isMobile ? "pt-16" : ""
-        } grid grid-cols-12 select-none`}
-      >
-        <div className="flex px-6 py-4 col-span-full h-16 relative">
+      <section className={`xl:pt-16 font-usual grid grid-cols-12 select-none`}>
+        <div className="flex px-6 py-4 col-span-full h-[180px] relative">
           <div className="fixed z-[100]">
             <Button
               onClick={handleOnBackClick}
@@ -145,23 +139,23 @@ const AboutComplex = () => {
           </div>
         </div>
         {/* About Rove Home */}
-        <h1 className="uppercase xl:rubber-headline-indent text-headline-s xl:px-6 px-4 col-span-full pb-6">
+        <h1 className="uppercase text-headline-s px-4 col-span-full pb-6">
           Rove Home this residence a complete ecosystem that has everything
           you’ll ever need. This isn’t just where you’ll live. It’s where you’ll
           thrive.
         </h1>
 
         <div className="col-span-full px-6 grid grid-cols-12">
-          <div className="text-caption-m font-semibold text-[#73787C] xl:col-span-1 uppercase col-span-full pb-3">
+          <div className="text-caption-m font-semibold text-[#73787C] uppercase col-span-full pb-3">
             About rove home
           </div>
-          <div className="xl:col-start-3 col-span-full grid grid-cols-10 gap-6 xl:pb-[100px] sm:pb-16 pb-20">
+          <div className="col-span-full grid grid-cols-10 gap-6 pb-20">
             <img
               src="/images/aboutCompany/rovehome.png"
               alt=""
               className="col-span-full"
             />
-            <div className="xl:col-span-4 sm:col-span-6 col-span-full text-l text-[#73787C]">
+            <div className="col-span-5 text-s text-[#73787C]">
               Embrace Rove’s forever-young spirit at Rove Home, where inspiring
               design and vibrant art installations converge with an exceptional
               location and an extended playlist of life-enhancing{" "}
@@ -171,7 +165,7 @@ const AboutComplex = () => {
         {/* RoveHome roof */}
         <RoveHomeSlider />
         {/* Rove around the city */}
-        <div className="col-span-full px-6 grid grid-cols-12 xl:pt-[100px] sm:pt-16 pt-14">
+        <div className="col-span-full px-6 grid grid-cols-12  pt-14">
           <div className="text-caption-m font-semibold text-[#73787C] xl:col-span-1 col-span-full uppercase pb-3">
             ROVE AROUND THE CITY
           </div>
diff --git a/client/src/types/selectorOption.ts b/client/src/types/selectorOption.ts
new file mode 100644
index 0000000..ca3c4a5
--- /dev/null
+++ b/client/src/types/selectorOption.ts
@@ -0,0 +1,7 @@
+interface IOption {
+  id: string;
+  value: string;
+  isSelected: boolean;
+}
+
+export type { IOption };
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index 48380e5..730c25b 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -16,6 +16,7 @@ export default {
         4: "45px",
         3: "33.75px",
         2: "22.5px",
+        16: "180px",
       },
       margin: {
         6: "67.5px",
@@ -23,9 +24,11 @@ export default {
         4: "45px",
         3: "33.75px",
         2: "22.5px",
+        16: "180px",
       },
       gap: {
         2: "22.5px",
+        3: "33.75px",
         4: "45px",
         8: "90px",
         6: "67.5px",
@@ -47,6 +50,10 @@ export default {
       fontSize: {
         xs: "28.8px",
       },
+      inset: {
+        6: "67.5px",
+        4: "45px",
+      },
     },
   },
   plugins: [],