diff --git a/client/src/components/ButtomPanel.tsx b/client/src/components/ButtomPanel.tsx
index e42d2a3..07641cf 100644
--- a/client/src/components/ButtomPanel.tsx
+++ b/client/src/components/ButtomPanel.tsx
@@ -10,18 +10,16 @@ const ButtomPanel = () => {
   };
   return (
     <div className="absolute z-20 bottom-0 left-0 w-full select-none touch-none pointer-events-none flex gap-2 justify-between items-end">
-      <div className="flex flex-col gap-2">
-        <div className="flex gap-2 pb-6 pl-6">
-          <Button
-            text="Disclaimer"
-            buttonType="special"
-            className="pl-2"
-            icon={<DisclaimerIcon />}
-            onClick={handleOnDisclaimerClick}
-            isCircleRounded
-          />
-          <Button text="Privacy Policy" buttonType="special" isCircleRounded />
-        </div>
+      <div className="flex gap-[22.5px] pb-6 pl-6">
+        <Button
+          text="Disclaimer"
+          buttonType="special"
+          className="pl-2"
+          icon={<DisclaimerIcon />}
+          onClick={handleOnDisclaimerClick}
+          isCircleRounded
+        />
+        <Button text="Privacy Policy" buttonType="special" isCircleRounded />
       </div>
       <div className="p-6">
         <div className="bg-[#0D192266] rounded-full backdrop-blur-sm">
diff --git a/client/src/components/ButtomPanelCompass.tsx b/client/src/components/ButtomPanelCompass.tsx
index 765bef9..23bdab4 100644
--- a/client/src/components/ButtomPanelCompass.tsx
+++ b/client/src/components/ButtomPanelCompass.tsx
@@ -15,15 +15,16 @@ const ButtomPanelCompass = () => {
   return (
     <div className="absolute z-20 bottom-0 left-0 w-full select-none touch-none pointer-events-none flex gap-2 justify-between items-end">
       <div className="flex flex-col gap-2">
-        <div className="flex gap-2 pb-6 pl-6">
+        <div className="flex gap-[22.5px] pb-6 pl-6">
           <Button
             text="Disclaimer"
             buttonType="special"
+            isCircleRounded
             className="pl-2"
             icon={<DisclaimerIcon />}
             onClick={handleOnDisclaimerClick}
           />
-          <Button text="Privacy Policy" buttonType="special" />
+          <Button text="Privacy Policy" buttonType="special" isCircleRounded />
         </div>
       </div>
       <div className="p-6">
@@ -32,7 +33,7 @@ const ButtomPanelCompass = () => {
             style={{ transform: `rotate(${currentCompassRotate - 180}deg)` }}
             src="/images/masterplan/compass.png"
             alt="compass"
-            className="transition-transform duration-[750ms] ease-in-out"
+            className="transition-transform duration-[750ms] ease-in-out w-[292.5px] h-[292.5px]"
           />
         </div>
       </div>
diff --git a/client/src/components/Button.tsx b/client/src/components/Button.tsx
index 916f2b6..d1e27ea 100644
--- a/client/src/components/Button.tsx
+++ b/client/src/components/Button.tsx
@@ -35,7 +35,7 @@ const Button = ({
   const textColor = textColors[buttonType];
   const border = borders[buttonType];
   const padding = paddings[buttonType];
-  const rounded = isCircleRounded ? "rounded-full" : "rounded-lg";
+  const rounded = isCircleRounded ? "rounded-full" : "rounded-[8px]";
   const disabledStyle = disabled ? "bg-[#0D192214] text-gray-400" : "";
 
   return (
@@ -44,8 +44,8 @@ const Button = ({
       disabled={disabled}
       onClick={onClick}
       className={`zoom-280 min-w-10 max-h-10 ${rounded}  ${
-        icon && !text ? "p-[10px]" : padding
-      }  transition-all duration-300 ease-in-out text-s pointer-events-auto flex gap-1 items-center  align-middle h-fit ${backgroundColor} ${textColor} ${border} ${disabledStyle} ${
+        icon && !text ? "p-[10px] " : padding
+      }  transition-all duration-300 ease-in-out text-s pointer-events-auto flex gap-1 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 8d42bb9..4873ed3 100644
--- a/client/src/components/Checkbox.tsx
+++ b/client/src/components/Checkbox.tsx
@@ -11,7 +11,7 @@ const Checkbox = ({ onClick, checkbox }: CheckboxProps) => {
   return (
     <div
       onClick={() => onClick(checkbox.id)}
-      className={`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-3 rounded-lg  transition-[background] duration-300 ease-in-out select-none ${
         checkbox.disabled
           ? "pointer-events-none touch-none"
           : "hover:bg-[#F3F3F2] cursor-pointer"
diff --git a/client/src/components/MultiRangeSlider.tsx b/client/src/components/MultiRangeSlider.tsx
index d1db0d4..e02f6e1 100644
--- a/client/src/components/MultiRangeSlider.tsx
+++ b/client/src/components/MultiRangeSlider.tsx
@@ -70,7 +70,7 @@ const MultiRangeSlider = ({
   }, [multirangeSlider.endValue]);
 
   return (
-    <div className="">
+    <div className="zoom-280">
       <div className="flex justify-between p-3 bg-white rounded-lg relative flex-col">
         <div className="flex justify-between">
           <NumericFormat
diff --git a/client/src/components/Switch.tsx b/client/src/components/Switch.tsx
index 73441ba..7e517e7 100644
--- a/client/src/components/Switch.tsx
+++ b/client/src/components/Switch.tsx
@@ -12,7 +12,7 @@ const Switch = ({ switcher, onClick }: ISwitchProps) => {
 
   return (
     <div
-      className={`w-10 h-6  relative rounded-full cursor-pointer transition-all duration-300 ease-in-out ${
+      className={`w-10 h-6 zoom-280  relative rounded-full cursor-pointer transition-all duration-300 ease-in-out ${
         switcher.isSwitched ? "bg-[#00BED7]" : "bg-[#E2E2DC]"
       }`}
       onClick={handleOnClick}
diff --git a/client/src/components/complexPage/ComplexTopPanel.tsx b/client/src/components/complexPage/ComplexTopPanel.tsx
index 23d1eb5..e0a508d 100644
--- a/client/src/components/complexPage/ComplexTopPanel.tsx
+++ b/client/src/components/complexPage/ComplexTopPanel.tsx
@@ -65,9 +65,9 @@ const ComplexTopPanel = () => {
         <img src="../images/top_shadow.png" className="w-screen" alt="" />
       </div>
       <div
-        className={`absolute top-[62px] left-0 z-20 w-full p-4 grid grid-cols-12 select-none touch-none pointer-events-none`}
+        className={`absolute top-[172px] left-0 z-20 w-full p-[45px] grid grid-cols-12 select-none touch-none pointer-events-none`}
       >
-        <div className="flex gap-2 sm:col-span-5 col-span-7">
+        <div className="flex gap-[22.5px] col-span-8">
           <Button
             icon={<LeftArrowSliderIcon />}
             buttonType="cta"
@@ -94,21 +94,7 @@ const ComplexTopPanel = () => {
             onClick={handleOnAboutComplexClick}
           />
         </div>
-        <div className="flex flex-col sm:col-start-6 col-start-8 sm:col-span-4 col-span-4 text-white text-center items-start ">
-          <div
-            className={`text-center duration-300 ease-in-out transition-opacity hidden lg:block ${
-              isSidebar ? "opacity-0" : "opacity-100"
-            }`}
-          >
-            <h2 className="font-semibold text-subheadline-s drop-shadow drop-shadow-[0_2px_8px_0px_rgba(62, 84, 100, 0.25)] select-none">
-              ROVE Home Marasi Drive
-            </h2>
-            {/* <p className="text-s drop-shadow drop-shadow-[0_2px_8px_0px_rgba(62, 84, 100, 0.25)]">
-              Select a wing
-            </p> */}
-          </div>
-        </div>
-        <div className="flex gap-2 col-span-1 col-start-12 justify-end">
+        <div className="flex gap-[22.5px] col-span-1 col-start-12 justify-end">
           {isFullscreen ? (
             <Button
               buttonType="fab"
@@ -131,6 +117,15 @@ const ComplexTopPanel = () => {
             isCircleRounded
           />
         </div>
+        <div className="flex flex-col col-start-1 col-span-4 text-white text-center items-start text-[53.25px] pt-[45px]">
+          <div
+            className={`text-center duration-300 ease-in-out transition-opacity`}
+          >
+            <h2 className="font-semibold text-[56.5px] drop-shadow drop-shadow-[0_2px_8px_0px_rgba(62, 84, 100, 0.25)] select-none">
+              ROVE Home Marasi Drive
+            </h2>
+          </div>
+        </div>
       </div>
     </>
   );
diff --git a/client/src/components/complexWingPage/SequenceWing/MobileFloorDescription.tsx b/client/src/components/complexWingPage/SequenceWing/MobileFloorDescription.tsx
index 7274675..785f190 100644
--- a/client/src/components/complexWingPage/SequenceWing/MobileFloorDescription.tsx
+++ b/client/src/components/complexWingPage/SequenceWing/MobileFloorDescription.tsx
@@ -18,22 +18,22 @@ const MobileFloorDescription = ({
   return (
     <>
       <div
-        className={`bg-white rounded-2xl p-6 flex flex-col gap-4 w-[344px] absolute left-[414px] transition-opacity duration-300 desc-shadow h-[328px] pointer-events-auto`}
+        className={`bg-white rounded-2xl p-6 flex flex-col gap-4 w-[825px] absolute left-[414px] transition-opacity duration-300 desc-shadow h-[816px]`}
       >
         <div className="relative">
           <div className="flex justify-between border-b pb-4">
             <div className="flex flex-col">
               <p
-                className={`text-[#0D1922] font-semibold text-[20px] duration-300 ease-in-out text-subheadline-s`}
+                className={`text-[#0D1922] font-semibold duration-300 ease-in-out text-[33.6px]ubheadline-s text-[48px]`}
               >
                 {descriptionFloor?.floor} Floor
               </p>
               <div className="flex gap-2 items-center">
-                <p className="text-[#73787C] font-semibold text-caption-m">
+                <p className="text-[#73787C] font-semibold text-[29px]">
                   {descriptionFloor?.wing}
                 </p>
                 <div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
-                <p className="font-semibold text-caption-m text-[#00BED7]">
+                <p className="font-semibold text-[29px] text-[#00BED7]">
                   {floorApartments.length} units
                 </p>
               </div>
@@ -43,8 +43,8 @@ const MobileFloorDescription = ({
           <div className="flex flex-col gap-4 pt-4">
             <div className="flex items-center justify-between gap-8">
               <div className="flex gap-2 items-center">
-                <div className="min-w-6 min-h-6 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
-                  <p className="p-1 flex justify-center items-center">
+                <div className="min-w-6 min-h-6 h-6 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
+                  <p className="p-1 flex justify-center items-center py-[9.3px] px-[20px] ">
                     {
                       floorApartments.filter(
                         (apart) => apart.Unit_Type === "Studio Flex"
@@ -52,13 +52,17 @@ const MobileFloorDescription = ({
                     }
                   </p>
                 </div>
-                <p className="text-s text-[#73787C] w-full">Studio Flex</p>
+                <p className="text-[33.6px] text-[#73787C] w-full">
+                  Studio Flex
+                </p>
               </div>
-              <p className="text-s text-[#0D1922] text-nowrap">Unvailiable</p>
+              <p className="text-[33.6px] text-[#0D1922] text-nowrap">
+                Unvailiable
+              </p>
             </div>
             <div className="flex items-center justify-between gap-8">
               <div className="flex gap-2 items-center">
-                <div className="min-w-6 min-h-6 p-1 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
+                <div className="min-w-6 min-h-6 h-6 p-1 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
                   <p className="h-full w-full flex justify-center items-center">
                     {
                       floorApartments.filter(
@@ -67,13 +71,15 @@ const MobileFloorDescription = ({
                     }
                   </p>
                 </div>
-                <p className="text-s text-[#73787C]">Studio</p>
+                <p className="text-[33.6px] text-[#73787C]">Studio</p>
               </div>
-              <p className="text-s text-[#0D1922] text-nowrap">Unvailiable</p>
+              <p className="text-[33.6px] text-[#0D1922] text-nowrap">
+                Unvailiable
+              </p>
             </div>
             <div className="flex items-center justify-between gap-8">
               <div className="flex gap-2 items-center">
-                <div className="min-w-6 min-h-6 p-1 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
+                <div className="min-w-6 min-h-6 h-6 p-1 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
                   <p className="h-full w-full flex justify-center items-center">
                     {
                       floorApartments.filter(
@@ -82,13 +88,15 @@ const MobileFloorDescription = ({
                     }
                   </p>
                 </div>
-                <p className="text-s text-[#73787C]">1 Bedroom</p>
+                <p className="text-[33.6px] text-[#73787C]">1 Bedroom</p>
               </div>
-              <p className="text-s text-[#0D1922] text-nowrap">Unvailiable</p>
+              <p className="text-[33.6px] text-[#0D1922] text-nowrap">
+                Unvailiable
+              </p>
             </div>
             <div className="flex items-center justify-between gap-8">
               <div className="flex gap-2 items-center">
-                <div className="min-w-6 min-h-6 p-1 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
+                <div className="min-w-6 min-h-6 h-6 p-1 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
                   <p className="h-full w-full flex justify-center items-center">
                     {
                       floorApartments.filter(
@@ -97,22 +105,24 @@ const MobileFloorDescription = ({
                     }
                   </p>
                 </div>
-                <p className="text-s text-[#73787C] text-nowrap">
+                <p className="text-[33.6px] text-[#73787C] text-nowrap">
                   2 Bedroom, Type A
                 </p>
               </div>
-              <p className="text-s text-[#0D1922] text-nowrap">Unvailiable</p>
+              <p className="text-[33.6px] text-[#0D1922] text-nowrap">
+                Unvailiable
+              </p>
             </div>
             <Button
+              onClick={onClick}
               buttonType="cta"
               className="justify-center"
               text="Explore"
               icon={<RightArrowSliderIcon />}
               iconPos="right"
-              onClick={onClick}
             />
           </div>
-          <div className="w-0 h-0 border-t-0 border-r-[6px] border-b-[14px] border-l-[6px] border-transparent border-b-white absolute -top-[35px] left-[0px]"></div>
+          <div className="w-0 h-0 border-t-0 border-r-[14px] border-b-[33px] border-l-[14px] border-transparent border-b-white absolute -top-[98px] z-[99999] left-[0px]"></div>
         </div>
       </div>
     </>
diff --git a/client/src/components/complexWingPage/SequenceWing/MobileSkygardenDescription.tsx b/client/src/components/complexWingPage/SequenceWing/MobileSkygardenDescription.tsx
index 7fbd3dc..50779a2 100644
--- a/client/src/components/complexWingPage/SequenceWing/MobileSkygardenDescription.tsx
+++ b/client/src/components/complexWingPage/SequenceWing/MobileSkygardenDescription.tsx
@@ -12,13 +12,13 @@ const MobileSkygardenDescription = ({
   return (
     <>
       <div
-        className={`bg-white rounded-2xl p-6 flex flex-col gap-4 w-[344px] absolute left-[414px] transition-opacity duration-300 desc-shadow h-[240px] pointer-events-auto`}
+        className={`bg-white rounded-2xl flex flex-col gap-4 w-[825px] absolute left-[414px] transition-opacity duration-300 desc-shadow h-fit pointer-events-auto p-[57px]`}
       >
         <div className="relative">
           <div className="flex justify-between border-b pb-4">
             <div className="flex flex-col">
               <p
-                className={`text-[#0D1922] font-semibold text-[20px] duration-300 ease-in-out text-subheadline-s`}
+                className={`text-[#0D1922] font-semibold text-[48px] duration-300 ease-in-out`}
               >
                 Sky Garden
               </p>
@@ -28,21 +28,29 @@ const MobileSkygardenDescription = ({
           <div className="flex flex-col gap-4 pt-4">
             <div className="flex items-center justify-between gap-8">
               <div className="flex gap-2 items-center">
-                <div className="min-w-6 min-h-6 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
-                  <p className="p-1 flex justify-center items-center">8</p>
+                <div className="min-w-6 min-h-6 h-6  rounded-full bg-[#00BED7] text-white text-xs font-semibold">
+                  <p className="py-[9.3px] px-[20px] flex justify-center items-center">
+                    8
+                  </p>
                 </div>
-                <p className="text-s text-[#73787C] w-full">Indoor</p>
+                <p className="text-[33.6px] text-[#73787C] w-full">Indoor</p>
               </div>
-              <p className="text-s text-[#0D1922] text-nowrap">3 amenties</p>
+              <p className="text-[33.6px] text-[#0D1922] text-nowrap">
+                3 amenties
+              </p>
             </div>
             <div className="flex items-center justify-between gap-8">
               <div className="flex gap-2 items-center">
-                <div className="min-w-6 min-h-6 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
-                  <p className="p-1 flex justify-center items-center">8</p>
+                <div className="min-w-6 min-h-6 h-6  rounded-full bg-[#00BED7] text-white text-xs font-semibold">
+                  <p className="p-1 flex justify-center items-center py-[9.3px] px-[20px]">
+                    8
+                  </p>
                 </div>
-                <p className="text-s text-[#73787C] w-full">Studio</p>
+                <p className="text-[33.6px] text-[#73787C] w-full">Studio</p>
               </div>
-              <p className="text-s text-[#0D1922] text-nowrap">14 amenties</p>
+              <p className="text-[33.6px] text-[#0D1922] text-nowrap">
+                14 amenties
+              </p>
             </div>
             <Button
               buttonType="cta"
@@ -53,7 +61,7 @@ const MobileSkygardenDescription = ({
               onClick={onClick}
             />
           </div>
-          <div className="w-0 h-0 border-t-0 border-r-[6px] border-b-[14px] border-l-[6px] border-transparent border-b-white absolute -top-[35px] left-[0px]"></div>
+          <div className="w-0 h-0 border-t-0 border-r-[14px] border-b-[33px] border-l-[14px] border-transparent border-b-white absolute -top-[89px] left-[0px]"></div>
         </div>
       </div>
     </>
diff --git a/client/src/components/complexWingPage/SequenceWing/SequenceWing.tsx b/client/src/components/complexWingPage/SequenceWing/SequenceWing.tsx
index c6f2e82..80f7fbb 100644
--- a/client/src/components/complexWingPage/SequenceWing/SequenceWing.tsx
+++ b/client/src/components/complexWingPage/SequenceWing/SequenceWing.tsx
@@ -2,13 +2,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { MouseEvent, useEffect, useState } from "react";
 import { IDesctiptionFloor } from "../../../types/descriptionFloor";
-import useWingSidebar from "../../../store/useWingSidebar";
 import useModal from "../../../store/useModal";
-import {
-  laptopWidth,
-  mobileWidht,
-  descriptions,
-} from "../../../consts/masterplan";
+import { descriptions } from "../../../consts/masterplan";
 import { updateAccessToken } from "../../../api/updateAccessToken";
 import { IAparmentRes } from "../../../types/apartmentsRes";
 import useMasterplanFilters from "../../../store/useMasterplanFilters";
@@ -16,7 +11,6 @@ import { initialRoveHomeCheckboxes } from "../../../consts/initialMasterplanFilt
 import { pageInitial } from "../../../consts/initialMasterplanFilters";
 import { useDebounce } from "@uidotdev/usehooks";
 import { getFilteredApartments } from "../../../calc/getFilteredApartments";
-import LoaderModal from "../../modals/LoaderModal";
 import FloorNumbers from "./FloorNumbers";
 import WingSignatures from "./WingSignatures";
 import FloorsHighlighting from "./FloorsHighlighting";
@@ -31,7 +25,7 @@ const SequenceWing = () => {
   const [width, setWidth] = useState<number>(0);
   const [top, setTop] = useState<number>(0);
   const [left, setLeft] = useState<number>(0);
-  const { isSidebar, setIsSidebar } = useWingSidebar();
+  // const { isSidebar, setIsSidebar } = useWingSidebar();
   const [mousePos, setMousePos] = useState<[number, number]>([0, 0]);
   const [currentHoveredFloor, setHoverCurrentFloor] =
     useState<null | IDesctiptionFloor>(null);
@@ -109,7 +103,7 @@ const SequenceWing = () => {
   ) {
     const isFloorClicked = Boolean(e.target.dataset.id);
     if (isFloorClicked) {
-      setMousePos([e.clientX - 384, e.clientY + Math.abs(top) - 20]);
+      setMousePos([e.clientX - 364, e.clientY + Math.abs(top) - 20]);
     } else {
       setIsDescriptionFloorMobile(false);
     }
@@ -121,41 +115,14 @@ const SequenceWing = () => {
       // detect mouse pos
       const screenWidth = window.innerWidth;
       const screenHeight = window.innerHeight;
-      // >1072
-      if (screenWidth > laptopWidth) {
-        const _top = screenWidth / 2 - screenHeight / 2;
-        setMousePos([e.clientX + 1284, e.clientY + Math.abs(_top) + 40]);
-      } else {
-        // 640-1072
-        if (screenWidth > mobileWidht) {
-          const _top = screenHeight / 4;
-          const _left = laptopWidth - screenWidth;
-          setMousePos([
-            e.clientX - 640 + _left,
-            e.clientY + Math.abs(_top) + 20,
-          ]);
-          // <640
-        } else {
-          const _top = screenHeight / 2.5;
-          const _left = laptopWidth - screenWidth;
-          setMousePos([
-            e.clientX - 440 + _left,
-            e.clientY + Math.abs(_top) + 20,
-          ]);
-        }
-      }
+      const _top = screenWidth / 2 - screenHeight / 2;
+      setMousePos([e.clientX + 1184, e.clientY + Math.abs(_top) + 50]);
 
       //detect currentFloor, current sidebar and apartment on floor
       if (!currentHoveredFloor && !currentHoveredApartments) return;
       setCurrentFloor(currentHoveredFloor);
-      // if (!isMobile) {
-      //   setIsFloorSidebar(true);
-      //   setIsSkygardenSidebar(false);
-      //   setIsSidebar(true);
-      // } else {
       setIsDescriptionFloorMobile(true);
       setCurrentFloor(null);
-      // }
     }
   }
   // function handleOnMouseDown(e: MouseEvent | any) {
@@ -214,32 +181,6 @@ const SequenceWing = () => {
     setLeft(_left);
   }
 
-  // function handleResize() {
-  //   const screenWidth = window.innerWidth;
-  //   const screenHeight = window.innerHeight;
-  //   // >1072
-  //   if (screenWidth > laptopWidth) {
-  //     setWidth(screenWidth);
-  //     setTop(screenWidth / 2 - screenHeight / 2);
-  //     setLeft(0);
-  //   } else {
-  //     // 640-1072
-  //     if (screenWidth > mobileWidht) {
-  //       const _top = screenHeight / 4;
-  //       setTop(_top);
-  //       // <640
-  //     } else {
-  //       const _top = screenHeight / 2.5;
-  //       setTop(_top);
-  //     }
-  //     const _left = laptopWidth - screenWidth;
-  //     const _width = screenWidth + _left * 2;
-
-  //     setWidth(_width);
-  //     setLeft(_left);
-  //   }
-  // }
-
   const handleOnExploreFloorClick = (
     e: MouseEvent<Element, MouseEvent<Element, MouseEvent>> | any
   ) => {
@@ -274,13 +215,6 @@ const SequenceWing = () => {
     };
   }, []);
 
-  useEffect(() => {
-    if (!isSidebar) {
-      setIsFloorSidebar(false);
-      setIsSkygardenSidebar(false);
-    }
-  }, [isSidebar]);
-
   useEffect(() => {
     const localStorageToken = `${localStorage.getItem("ACCESS_TOKEN")}`;
     const perPage = 1000;
diff --git a/client/src/components/header/Header/DesktopHeader.tsx b/client/src/components/header/Header/DesktopHeader.tsx
index 7287779..d280420 100644
--- a/client/src/components/header/Header/DesktopHeader.tsx
+++ b/client/src/components/header/Header/DesktopHeader.tsx
@@ -1,13 +1,12 @@
 import Auth from "../Auth/Auth";
 import Logo from "../../Logo";
 import Navbar from "../Navbar/Navbar";
-import Location from "../Location";
 
 const DesktopHeader = () => (
   <header className="bg-white w-full text-white sm:grid grid-cols-6 fixed left-0 top-0 z-[99999900] font-usual text-m select-none items-center">
     <div className="flex gap-4 col-span-2">
       <Logo />
-      <Location />
+      {/* <Location /> */}
     </div>
     <Navbar />
     <Auth isAuth={false} />
diff --git a/client/src/components/header/Navbar/NavbarDesktop.tsx b/client/src/components/header/Navbar/NavbarDesktop.tsx
index 60b1bef..7095ea1 100644
--- a/client/src/components/header/Navbar/NavbarDesktop.tsx
+++ b/client/src/components/header/Navbar/NavbarDesktop.tsx
@@ -9,7 +9,7 @@ interface NavbarProps {
 
 const NavbarDesktop = ({ selectedTab, onTabClick, tabs }: NavbarProps) => (
   <nav
-    className={`text-[#73787C] self-center col-span-2 justify-center flex h-full `}
+    className={`text-[#73787C] self-center col-span-2 justify-center flex h-full`}
   >
     {tabs.map((tab) => (
       <NavbarTabDesktop
diff --git a/client/src/components/header/Navbar/NavbarTabDesktop.tsx b/client/src/components/header/Navbar/NavbarTabDesktop.tsx
index 88270f1..9a43e1e 100644
--- a/client/src/components/header/Navbar/NavbarTabDesktop.tsx
+++ b/client/src/components/header/Navbar/NavbarTabDesktop.tsx
@@ -13,11 +13,11 @@ const NavbarTabDesktop = ({
 }: NavbarTabProps) => {
   return (
     <button
-      className="px-4 text-[#73787C] hover:text-black relative w-fit h-full"
+      className="px-[45px] text-[#73787C] hover:text-black relative w-fit h-full"
       onClick={() => onClick(tab)}
     >
       <div
-        className={`border-b-2 h-full flex items-center transition-all duration-300 text-[38.4px] ${
+        className={`border-b-2 h-full flex items-center transition-all duration-300 text-[45px] ${
           isSelected
             ? "border-b-[#00BED7]"
             : "border-b-transparent hover:border-b-[#E2E2DC] active:border-b-[#00BED7]"
diff --git a/client/src/components/masterplanPage/TopPanel.tsx b/client/src/components/masterplanPage/TopPanel.tsx
index 785f9f1..72d5484 100644
--- a/client/src/components/masterplanPage/TopPanel.tsx
+++ b/client/src/components/masterplanPage/TopPanel.tsx
@@ -31,7 +31,7 @@ const TopPanel = () => {
         <img src="/images/top_shadow.png" className="w-screen" alt="" />
       </div>
       <div
-        className={`absolute top-[172px] left-0 z-20 w-full p-4 flex justify-end gap-2 select-none touch-none pointer-events-none`}
+        className={`absolute top-[172px] left-0 z-20 w-full p-4 flex justify-end gap-[22.5px] select-none touch-none pointer-events-none`}
       >
         {isFullscreen ? (
           <Button
diff --git a/client/src/components/masterplanPage/map/Marker.tsx b/client/src/components/masterplanPage/map/Marker.tsx
index 7a136e6..f9b700a 100644
--- a/client/src/components/masterplanPage/map/Marker.tsx
+++ b/client/src/components/masterplanPage/map/Marker.tsx
@@ -7,7 +7,7 @@ import { useNavigate } from "react-router-dom";
 
 const Marker = (props: MarkerComponentProps) => {
   const { setHoveredMarker, hoveredMarker } = useMarker();
-  const [markerScale, setMarkerScale] = useState(1);
+  const [markerScale, setMarkerScale] = useState(0.5);
   const navigate = useNavigate();
   const currentMarker = markers.find(
     (marker) => marker.itemNumber === props.itemNumber
diff --git a/client/src/components/masterplanPage/map/ZoomControlls.tsx b/client/src/components/masterplanPage/map/ZoomControlls.tsx
index 474465d..ed6406a 100644
--- a/client/src/components/masterplanPage/map/ZoomControlls.tsx
+++ b/client/src/components/masterplanPage/map/ZoomControlls.tsx
@@ -14,7 +14,7 @@ const ZoomControlls = () => {
   };
 
   return (
-    <div className="absolute top-1/2 right-4 z-50 flex flex-col gap-2">
+    <div className="absolute top-1/2 right-4 z-50 flex flex-col gap-[22.5px]">
       <Button
         buttonType="primary"
         icon={<ZoomIcon />}
diff --git a/client/src/components/modals/DisclaimerModal.tsx b/client/src/components/modals/DisclaimerModal.tsx
index 442047b..63f346c 100644
--- a/client/src/components/modals/DisclaimerModal.tsx
+++ b/client/src/components/modals/DisclaimerModal.tsx
@@ -9,29 +9,29 @@ const DisclaimerModal = () => {
 
   return (
     <div className="absolute z-[99999999] top-0 left-0 w-screen bg-[#0D192266] h-screen backdrop-blur-[6px] grid grid-cols-12  items-center">
-      <div className="bg-white rounded-lg col-span-4 col-start-5 py-[37px] px-8">
-        <div className=" w-full h-1 flex justify-between">
-          <div className="h-[2px] bg-[#00BED7] w-1/3 rounded-full"></div>
-          <button onClick={handleOnCloseClick}>
+      <div className="bg-white rounded-[38.4px] w-[1184px] col-start-4 pt-[45px] pb-[90px] px-[90px]">
+        <div className=" w-full h-[67.5px] flex justify-between items-center">
+          <div className="h-[4.8px] bg-[#00BED7] w-[350px] rounded-full "></div>
+          <button onClick={handleOnCloseClick} className="zoom-280">
             <CrossIcon />
           </button>
         </div>
-        <h2 className="text-subheadline-m font-semibold py-6">Disclaimer</h2>
+        <h2 className="text-[57.6px] font-semibold pb-6">Disclaimer</h2>
         <div className="flex flex-col gap-4">
-          <p className="text-caption-m">
+          <p className="text-[33.75px]">
             This masterplan has been designed solely to provide an impression of
             the Rove Home projects as well as the approximate location of
             existing and proposed facilities, services, and destinations and is
             not intended for any other purpose.
           </p>
-          <p className="text-caption-m">
+          <p className="text-[33.75px]">
             All elements including the interior design used in the units and
             images shown in the virtual tour are only for illustration. The
             pictures of the proposed residential units, furniture, landscaping,
             amenities, color schemes, fixtures, and accessories among all other
             items are illustrative to showcase the units.
           </p>
-          <p className="text-caption-m">
+          <p className="text-[33.75px]">
             IRTH does not make any representation or give any warranty
             concerning the future developments shown, or the current or future
             amenities, location, or existence of any facilities, services, and
@@ -39,7 +39,7 @@ const DisclaimerModal = () => {
             any other information are approximate and for indicative purposes
             only and are not to scale.
           </p>
-          <p className="text-caption-m">
+          <p className="text-[33.75px]">
             IRTH gives notice that this virtual tour (including units,
             amenities, plans of the property) does not constitute any part of a
             sale offer or sale and purchase contract.
diff --git a/client/src/components/modals/ZoomHintModal.tsx b/client/src/components/modals/ZoomHintModal.tsx
index 4a36200..25a6979 100644
--- a/client/src/components/modals/ZoomHintModal.tsx
+++ b/client/src/components/modals/ZoomHintModal.tsx
@@ -43,17 +43,17 @@ const ZoomHint = () => {
 
   return (
     <div
-      className={`absolute z-10 m-auto top-[calc(50%-60px)] left-[calc(50%-140px)] flex flex-col items-center bg-[#0D192266] backdrop-blur-md p-4 text-white gap-3 rounded-lg transition-opacity duration-300 ${
+      className={`absolute z-10 m-auto top-[calc(50%-60px)] left-[calc(50%-334px)] flex flex-col items-center bg-[#0D192266] backdrop-blur-md p-4 text-white gap-[33.75px] rounded-lg transition-opacity duration-300 ${
         isTransparent ? "opacity-0" : "opacity-100"
       }`}
       ref={ref}
     >
-      <div className="flex gap-4 items-center">
+      <div className="flex gap-4 items-center zoom-280">
         <SearchPlusIcon />
         <LineIcon />
         <OpenFullscreenIcon />
       </div>
-      <p>Zoom and Move to select a location</p>
+      <p className="text-[40px]">Zoom and Move to select a location</p>
     </div>
   );
 };
diff --git a/client/src/components/modals/mobile/MasterplanFiltersModal.tsx b/client/src/components/modals/mobile/MasterplanFiltersModal.tsx
index b7293d5..a545eb8 100644
--- a/client/src/components/modals/mobile/MasterplanFiltersModal.tsx
+++ b/client/src/components/modals/mobile/MasterplanFiltersModal.tsx
@@ -120,13 +120,11 @@ const MasterplanFiltersModal = () => {
 
   return (
     <div
-      className="bg-[#F3F3F2] rounded-ss-2xl rounded-se-2xl h-full p-6 flex flex-col gap-6"
+      className="bg-[#F3F3F2] rounded-ss-2xl rounded-se-2xl h-full p-[67.5px] flex flex-col gap-[67.5px]"
       {...handlers}
     >
-      <div className="flex justify-between pb-6 border-b">
-        <h2 className="text-[#0D1922] text-subheadline-m font-semibold">
-          Filters
-        </h2>
+      <div className="flex justify-between pb-[67.5px] border-b-[2.8px]">
+        <h2 className="text-[#0D1922] text-[67.5px] font-semibold">Filters</h2>
         <Button
           buttonType="secondary"
           isCircleRounded
@@ -136,8 +134,8 @@ const MasterplanFiltersModal = () => {
         />
       </div>
       <div className="flex flex-col w-full">
-        <p className="text-[#0D1922] text-s pb-4">Apartment type</p>
-        <div className="grid grid-cols-2 gap-2">
+        <p className="text-[#0D1922] text-[40px] pb-[45px]">Apartment type</p>
+        <div className="grid grid-cols-2 gap-[22.5px]">
           {localApartmentTypeCheckboxes.map((checkbox) => (
             <Checkbox
               checkbox={checkbox}
@@ -147,12 +145,12 @@ const MasterplanFiltersModal = () => {
           ))}
         </div>
       </div>
-      <div className="grid grid-cols-2 gap-6 border-b pb-12">
+      <div className="grid grid-cols-2 gap-[67.5px] border-b-[2.8px] pb-[135px] pt-[67.5px]">
         {localMultirangeSliders.map((slider) => (
-          <div className="flex flex-col gap-3">
+          <div className="flex flex-col gap-[33.75px]">
             <div className="flex justify-between items-center">
-              <p className="text-[#0D1922] text-s ">{slider.title}</p>
-              <p className="text-[#73787C] text-s">{slider.unit}</p>
+              <p className="text-[#0D1922] text-[40px]">{slider.title}</p>
+              <p className="text-[#73787C] text-[40px]">{slider.unit}</p>
             </div>
             <MultiRangeSlider
               onChange={handleOnSliderValueChange}
@@ -160,18 +158,18 @@ const MasterplanFiltersModal = () => {
             />
           </div>
         ))}
-        <div className="flex flex-col gap-2 pt-6">
+        <div className="flex flex-col gap-[22.5px] pt-[67.5px]">
           {localSwitchers.map((switcher) => (
             <div key={switcher.id} className="flex justify-between w-full">
-              <p className="text-s text-[#73787C]">{switcher.title}</p>
+              <p className="text-[40px] text-[#73787C]">{switcher.title}</p>
               <Switch switcher={switcher} onClick={handleOnSwitcherClick} />
             </div>
           ))}
         </div>
       </div>
-      <div className="flex flex-col w-full">
-        <p className="text-[#0D1922] text-s pb-4">Views</p>
-        <div className="grid grid-cols-2 gap-2">
+      <div className="flex flex-col w-full pb-[135px] border-b-[2.8px]">
+        <p className="text-[#0D1922] text-[40px] pb-[45px]">Views</p>
+        <div className="grid grid-cols-2 gap-[22.5px]">
           {localViewCheckboxes.map((checkbox) => (
             <Checkbox
               checkbox={checkbox}
@@ -182,7 +180,8 @@ const MasterplanFiltersModal = () => {
         </div>
       </div>
       <div className="flex justify-between">
-        <p className="text-[#00BED7] text-m">195 apartments found</p>
+        {/* <p className="text-[#00BED7] text-[45px]">195 apartments found</p> */}
+        <p className="text-[#00BED7] text-[45px]"></p>
         <Button
           icon={<ResetIcon />}
           text="Reset filters"
diff --git a/client/src/components/modals/mobile/MobileModalWrapper.tsx b/client/src/components/modals/mobile/MobileModalWrapper.tsx
index 0607787..fa46a75 100644
--- a/client/src/components/modals/mobile/MobileModalWrapper.tsx
+++ b/client/src/components/modals/mobile/MobileModalWrapper.tsx
@@ -35,9 +35,9 @@ const MobileModalWrapper = ({
   return (
     <div
       className={`h-screen w-screen  ${
-        isHeightScreen ? "" : "pt-20"
-      }  absolute z-[99999998] top-0 transition-all duration-300 ease-in-out ${
-        isAnimate ? "" : "backdrop-blur-none"
+        isHeightScreen ? "" : "pt-[225px]"
+      }  absolute z-[99999999] top-0 transition-all duration-300 ease-in-out ${
+        isAnimate ? "backdrop-blur-lg" : "backdrop-blur-none"
       }`}
     >
       <div
diff --git a/client/src/consts/buttonStyles.ts b/client/src/consts/buttonStyles.ts
index 75bf804..21313c7 100644
--- a/client/src/consts/buttonStyles.ts
+++ b/client/src/consts/buttonStyles.ts
@@ -22,22 +22,22 @@ const textColors: ButtonStyle = {
 
 const borders: ButtonStyle = {
   cta: "",
-  primary: "border border-[#ffffff] active:border-[#00BED7]",
-  secondary: " border border-[#E2E2DC] active:border-[#00BED7]",
+  primary: "border-[1px] border-[#ffffff] active:border-[#00BED7]",
+  secondary: " border-[1px] border-[#E2E2DC] active:border-[#00BED7]",
   tertiary: "",
   fab: "rounded-full",
-  favorite: "rounded-full border border-[#E2E2DC]",
+  favorite: "rounded-full border-[1px] border-[#E2E2DC]",
   special: "rounded-full",
 };
 
 const paddings: ButtonStyle = {
-  cta: "py-3 px-6",
-  primary: "py-[10px] pr-6 pl-4",
-  secondary: "py-3 px-6",
-  tertiary: "py-1 px-3",
-  fab: "py-3 px-6",
+  cta: "py-[12px] px-[24px]",
+  primary: "py-[10px] pr-[24px] pl-4",
+  secondary: "py-[12px] px-[24px]",
+  tertiary: "py-[4px] px-[12px]",
+  fab: "py-[12px] px-[24px]",
   favorite: "p-[10px]",
-  special: "py-1 px-3",
+  special: "py-[4px] px-[12px]",
 };
 
 export { textColors, backgroundColors, borders, paddings };
diff --git a/client/src/index.css b/client/src/index.css
index 516986f..cf57995 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -179,7 +179,8 @@ html {
     .text-caption-m {
       font-family: "Usual", sans-serif;
       line-height: 135%;
-      font-size: clamp(12px, 0.4994rem + 0.313vw, 14px);
+      /* font-size: clamp(12px, 0.4994rem + 0.313vw, 14px); */
+      font-size: 28.8px;
     }
 
     .text-s {
@@ -195,9 +196,10 @@ html {
     }
 
     .text-subheadline-s {
+      /* text-[48px] */
       font-family: "Usual", sans-serif;
       line-height: 140%;
-      font-size: clamp(16px, -0.0023rem + 1.252vw, 24px);
+      font-size: 48px;
     }
 
     .text-subheadline-m {
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index 614c86b..c0a48be 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -2,7 +2,32 @@
 export default {
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
-    extend: {},
+    extend: {
+      borderWidth: {
+        DEFAULT: "2.4px",
+      },
+      padding: {
+        6: "67.5px",
+        1: "11.25px",
+      },
+      gap: {
+        2: "22.5px",
+        4: "45px",
+        8: "90px",
+      },
+      minHeight: {
+        6: "57.6px",
+      },
+      height: {
+        6: "57.6px",
+      },
+      minWidth: {
+        6: "57.6px",
+      },
+      fontSize: {
+        xs: "28.8px",
+      },
+    },
   },
   plugins: [],
 };