diff --git a/client/public/images/markers/2.png b/client/public/images/markers/2.png
new file mode 100644
index 0000000..990afb7
Binary files /dev/null and b/client/public/images/markers/2.png differ
diff --git a/client/src/components/complexWingPage/FloorDescription.tsx b/client/src/components/complexWingPage/FloorDescription.tsx
index 5d3ccc3..9991ffc 100644
--- a/client/src/components/complexWingPage/FloorDescription.tsx
+++ b/client/src/components/complexWingPage/FloorDescription.tsx
@@ -5,20 +5,20 @@ import { IDesctiptionFloor } from "../../types/descriptionFloor";
 interface FloorDescriptionProps {
   descriptionFloor: IDesctiptionFloor | null;
   floorApartments: IAparmentRes[];
+  isLeft: boolean;
 }
 
 const FloorDescription = ({
   descriptionFloor,
   floorApartments,
+  isLeft,
 }: FloorDescriptionProps) => {
   const { isSidebar } = useWingSidebar();
   return (
     <>
       <div
         className={`bg-white rounded-2xl p-6 flex flex-col gap-4 w-[364px] absolute left-[414px] transition-opacity duration-300 desc-shadow ${
-          isSidebar && descriptionFloor?.wing === "West Wing"
-            ? "opacity-100"
-            : "opacity-100"
+          isSidebar ? "opacity-0" : "opacity-100"
         }`}
       >
         <div className="relative">
@@ -101,7 +101,11 @@ const FloorDescription = ({
               <p className="text-s text-[#0D1922] text-nowrap">Unvailiable</p>
             </div>
           </div>
-          <div className="w-0 h-0 border-t-0 border-r-[7px] border-b-[12px] border-l-[7px] border-transparent border-b-white -rotate-90 absolute top-0 -left-[35px]"></div>
+          <div
+            className={`w-0 h-0 border-t-0 border-r-[7px] border-b-[12px] border-l-[7px] border-transparent border-b-white  absolute top-0 ${
+              !isLeft ? "-left-[35px] -rotate-90" : "-right-[35px] rotate-90"
+            } `}
+          ></div>
         </div>
       </div>
     </>
diff --git a/client/src/components/complexWingPage/SequenceWing/MobileFloorDescription.tsx b/client/src/components/complexWingPage/SequenceWing/MobileFloorDescription.tsx
index 8ee7862..a953289 100644
--- a/client/src/components/complexWingPage/SequenceWing/MobileFloorDescription.tsx
+++ b/client/src/components/complexWingPage/SequenceWing/MobileFloorDescription.tsx
@@ -8,12 +8,14 @@ interface MobileFloorDescriptionProps {
   descriptionFloor: IDesctiptionFloor | null;
   floorApartments: IAparmentRes[];
   isLeft: boolean;
+  onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
 
 const MobileFloorDescription = ({
   descriptionFloor,
   floorApartments,
   isLeft,
+  onClick,
 }: MobileFloorDescriptionProps) => {
   return (
     <>
@@ -104,6 +106,7 @@ const MobileFloorDescription = ({
               <p className="text-s text-[#0D1922] text-nowrap">Unvailiable</p>
             </div>
             <Button
+              onClick={onClick}
               buttonType="cta"
               className="justify-center"
               text="Explore"
@@ -111,7 +114,11 @@ const MobileFloorDescription = ({
               iconPos="right"
             />
           </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-[6px] border-b-[14px] border-l-[6px] border-transparent border-b-white absolute ${
+              isLeft ? "right-[0px]" : "left-[0px]"
+            } -top-[35px] `}
+          ></div>
         </div>
       </div>
     </>
diff --git a/client/src/components/complexWingPage/SequenceWing/MobileSkygardenDescription.tsx b/client/src/components/complexWingPage/SequenceWing/MobileSkygardenDescription.tsx
new file mode 100644
index 0000000..77fd6a6
--- /dev/null
+++ b/client/src/components/complexWingPage/SequenceWing/MobileSkygardenDescription.tsx
@@ -0,0 +1,72 @@
+import Button from "../../Button";
+import CrossIcon from "../../icons/CrossIcon";
+import RightArrowSliderIcon from "../../icons/RightArrowSliderIcon";
+
+interface MobileSkygardenDescriptionProps {
+  onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  isLeft: boolean;
+}
+
+const MobileSkygardenDescription = ({
+  onClick,
+  isLeft,
+}: MobileSkygardenDescriptionProps) => {
+  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-fit`}
+      >
+        <div className="relative">
+          <div className="flex justify-between border-b pb-4">
+            <div className="flex flex-col items-start justify-start">
+              <p
+                className={`text-[#0D1922] font-semibold text-[20px] duration-300 ease-in-out text-subheadline-s`}
+              >
+                Sky Garden
+              </p>
+            </div>
+            <Button buttonType="tertiary" icon={<CrossIcon />} />
+          </div>
+          <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>
+                <p className="text-s text-[#73787C] w-full">Indoor</p>
+              </div>
+              <p className="text-s 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 p-1 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
+                  <p className="h-full w-full flex justify-center items-center">
+                    8
+                  </p>
+                </div>
+                <p className="text-s text-[#73787C]">Studio</p>
+              </div>
+              <p className="text-s text-[#0D1922] text-nowrap">14 amenties</p>
+            </div>
+
+            <Button
+              onClick={onClick}
+              buttonType="cta"
+              className="justify-center"
+              text="Explore"
+              icon={<RightArrowSliderIcon />}
+              iconPos="right"
+            />
+          </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 ${
+              isLeft ? "right-[0px]" : "left-[0px]"
+            } -top-[35px] `}
+          ></div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default MobileSkygardenDescription;
diff --git a/client/src/components/complexWingPage/SequenceWing/SequenceWing.tsx b/client/src/components/complexWingPage/SequenceWing/SequenceWing.tsx
index 0f9be83..0e70d02 100644
--- a/client/src/components/complexWingPage/SequenceWing/SequenceWing.tsx
+++ b/client/src/components/complexWingPage/SequenceWing/SequenceWing.tsx
@@ -26,6 +26,8 @@ import WingSignatures from "./WingSignatures";
 import { isMobile } from "react-device-detect";
 import FloorsHighlighting from "./FloorsHighlighting";
 import MobileFloorDescription from "./MobileFloorDescription";
+import WingFloorModal from "../../modals/mobile/WingFloorModal";
+import MobileSkygardenDescription from "./MobileSkygardenDescription";
 
 const skyGardenFloor = 22;
 
@@ -55,9 +57,6 @@ const SequenceWing = () => {
   );
   const [isLeft, setIsLeft] = useState(false);
 
-  const [isDescriptionFloorMobile, setIsDescriptionFloorMobile] =
-    useState(false);
-
   const {
     apartmentTypeCheckboxes,
     switchers,
@@ -99,16 +98,17 @@ const SequenceWing = () => {
 
   const handleOnFloorClick = () => {
     if (!currentHoveredFloor && !currentHoveredApartments) return;
-    setSelectedApartments(currentHoveredApartments);
     setCurrentFloor(currentHoveredFloor);
-    if (!isMobile) {
-      setIsFloorSidebar(true);
-      setIsSkygardenSidebar(false);
-      setIsSidebar(true);
-    } else {
-      setIsDescriptionFloorMobile(true);
-      // setModal(<WingFloorModal />);
-    }
+    setSelectedApartments(currentHoveredApartments);
+
+    const screenWidth = window.innerWidth;
+
+    const isMobile = screenWidth <= mobileWidht;
+    if (isMobile) return;
+    // <640
+    setIsFloorSidebar(true);
+    setIsSkygardenSidebar(false);
+    setIsSidebar(true);
   };
 
   const handleOnSkygardenClick = () => {
@@ -125,34 +125,39 @@ const SequenceWing = () => {
     e: MouseEvent<Element, MouseEvent<Element, MouseEvent>> | any
   ) => {
     const screenWidth = window.innerWidth;
+    const _isLeft = e.clientX > screenWidth / 2;
+    setIsLeft(_isLeft);
+    // <640
+    if (screenWidth <= mobileWidht) return;
+
     // const _top = screenHeight / 16;
     if (screenWidth > laptopWidth) {
-      setMousePos([e.clientX - 384, e.clientY + top - 25]);
+      const x = _isLeft ? e.clientX - 795 : e.clientX - 384;
+      setMousePos([x, e.clientY + top - 25]);
     } else {
       // 640-1072
       if (screenWidth > mobileWidht) {
-        setMousePos([e.clientX - 354, e.clientY + top - 25]);
-        // <640
-      } else {
-        setMousePos([e.clientX - 384, e.clientY + Math.abs(top) - 20]);
+        const x = _isLeft ? e.clientX + left - 800 : e.clientX - 385 + left;
+        setMousePos([x, e.clientY + top - 25]);
       }
     }
   };
+
   const handleOnMouseDown = (
     e: MouseEvent<Element, MouseEvent<Element, MouseEvent>> | any
   ) => {
+    const isFloorClicked = Boolean(e.target.dataset.id);
+    if (!isFloorClicked) return;
     const screenWidth = window.innerWidth;
-    if (screenWidth > laptopWidth) {
-      setMousePos([e.clientX - 384, e.clientY + Math.abs(top) - 20]);
-    } else {
-      // 640-1072
-      if (screenWidth > mobileWidht) {
-        setMousePos([e.clientX - 444 + left, e.clientY + Math.abs(top) + 30]);
-        // <640
-      } else {
-        setMousePos([e.clientX - 384, e.clientY + Math.abs(top) - 20]);
-      }
-    }
+    const _isLeft = e.clientX > screenWidth / 2;
+    setIsLeft(_isLeft);
+
+    if (screenWidth > mobileWidht) return;
+    // <640
+
+    const x = _isLeft ? e.clientX - 724 + left : e.clientX - 444 + left;
+
+    setMousePos([x, e.clientY + Math.abs(top) + 20]);
   };
 
   // function handleOnMouseDown(e: MouseEvent | any) {
@@ -205,41 +210,27 @@ const SequenceWing = () => {
     e: MouseEvent<Element, MouseEvent<Element, MouseEvent>> | any
   ) => {
     e.stopPropagation();
-    if (!currentHoveredFloor) return;
-    // setModal(
-    //   <WingFloorModal
-    //     currentFloor={currentHoveredFloor}
-    //     floorApartments={currentHoveredApartments}
-    //   />
-    // );
-    setIsDescriptionFloorMobile(false);
+    // if (!currentHoveredFloor) return;
+    setModal(
+      <WingFloorModal
+        currentFloor={currentHoveredFloor}
+        floorApartments={currentHoveredApartments}
+      />
+    );
   };
 
-  // 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 handleOnExploreSkygardenClick = (
+    e: MouseEvent<Element, MouseEvent<Element, MouseEvent>> | any
+  ) => {
+    e.stopPropagation();
+    // if (!currentHoveredFloor) return;
+    setModal(
+      <WingFloorModal
+        currentFloor={currentHoveredFloor}
+        floorApartments={currentHoveredApartments}
+      />
+    );
+  };
 
   useEffect(() => {
     handleResize();
@@ -313,18 +304,18 @@ const SequenceWing = () => {
     sortList,
   ]);
 
-  // useEffect(() => {
-  //   if (isLoading) {
-  //     setModal(<LoaderModal />);
-  //   } else {
-  //     setModal(null);
-  //   }
-  // }, [isLoading, setModal]);
+  useEffect(() => {
+    if (isLoading) {
+      setModal(<LoaderModal />);
+    } else {
+      setModal(null);
+    }
+  }, [isLoading, setModal]);
 
   return (
     <div className="absolute left-0 overflow-hidden h-screen w-screen select-none">
       <div
-        className=" absolute h-[calc(100vh-56px)] right-0 w-1/2 duration-300 transition-all "
+        className=" absolute h-[calc(100vh-56px)] right-0 w-1/2 duration-300 transition-all sm:block hidden"
         style={{ right: `${isFloorSidebar ? "0" : "-50%"}` }}
       >
         <FloorSidebar
@@ -334,7 +325,7 @@ const SequenceWing = () => {
         />
       </div>
       <div
-        className=" absolute h-[calc(100vh-56px)] right-0 w-1/2 duration-300 transition-all"
+        className=" absolute h-[calc(100vh-56px)] right-0 w-1/2 duration-300 transition-all sm:block hidden"
         style={{ right: `${isSkygardenSidebar ? "0" : "-50%"}` }}
       >
         <SkygardenSidebar onMouseEnter={handleOnWingWrapperMouseLeave} />
@@ -352,7 +343,7 @@ const SequenceWing = () => {
         }}
       >
         <div
-          className={`absolute z-40 top-0 left-0 transition-opacity duration-300 ease-in-out lg:flex hidden ${
+          className={`absolute z-40 top-0 left-0 transition-opacity duration-300 ease-in-out sm:flex hidden ${
             currentHoveredFloor?.floor === skyGardenFloor && isWrapperHovered
               ? "opacity-100"
               : "opacity-0"
@@ -366,7 +357,7 @@ const SequenceWing = () => {
             }`,
           }}
         >
-          <SkygardenDescription />
+          <SkygardenDescription isLeft={isLeft} />
         </div>
 
         <div
@@ -387,12 +378,13 @@ const SequenceWing = () => {
           }}
         >
           <FloorDescription
+            isLeft={isLeft}
             descriptionFloor={currentHoveredFloor}
             floorApartments={currentHoveredApartments}
           />
         </div>
         <div
-          className={`absolute z-40 top-0 left-0 transition-opacity duration-300 ease-in-out lg:hidden flex ${
+          className={`absolute z-40 top-0 left-0 transition-opacity duration-300 ease-in-out sm:hidden flex ${
             currentHoveredFloor?.floor !== skyGardenFloor &&
             currentHoveredFloor &&
             isWrapperHovered
@@ -411,22 +403,25 @@ const SequenceWing = () => {
             floorApartments={currentHoveredApartments}
           />
         </div>
-        {/* <div
-          className={`absolute z-40 top-0 left-0 transition-opacity duration-300 ease-in-out ${
-            isDescriptionFloorMobile ? "opacity-100" : "opacity-0"
+
+        <div
+          className={`absolute z-40 top-0 left-0 transition-opacity duration-300 ease-in-out sm:hidden flex ${
+            currentHoveredFloor?.floor === skyGardenFloor &&
+            currentHoveredFloor &&
+            isWrapperHovered
+              ? "opacity-100"
+              : "opacity-0"
           }`}
           style={{
-            top: `${mousePos[1]}px`,
+            top: mousePos[1],
             left: `${mousePos[0]}px`,
-            // top: `${mousePos[1] + 140}px`,
-            // left: `${mousePos[0] + 366}px`,
           }}
         >
-          <MobileFloorDescription
-            descriptionFloor={currentHoveredFloor}
-            floorApartments={currentHoveredApartments}
+          <MobileSkygardenDescription
+            onClick={handleOnExploreSkygardenClick}
+            isLeft={isLeft}
           />
-        </div> */}
+        </div>
 
         <img
           width={`${width}px`}
diff --git a/client/src/components/complexWingPage/SkygardenDescription.tsx b/client/src/components/complexWingPage/SkygardenDescription.tsx
index ef456ad..ef43abe 100644
--- a/client/src/components/complexWingPage/SkygardenDescription.tsx
+++ b/client/src/components/complexWingPage/SkygardenDescription.tsx
@@ -1,4 +1,8 @@
-const SkygardenDescription = () => {
+interface ISkygardenDescriptionProps {
+  isLeft: boolean;
+}
+
+const SkygardenDescription = ({ isLeft }: ISkygardenDescriptionProps) => {
   return (
     <div className=" p-6">
       <div
@@ -26,7 +30,11 @@ const SkygardenDescription = () => {
               <p className="text-s text-[#0D1922] text-nowrap">14 amenties</p>
             </div>
           </div>
-          <div className="w-0 h-0 border-t-0 border-r-[7px] border-b-[12px] border-l-[7px] border-transparent border-b-white -rotate-90 absolute top-0 -left-[35px]"></div>
+          <div
+            className={`w-0 h-0 border-t-0 border-r-[7px] border-b-[12px] border-l-[7px] border-transparent border-b-white absolute top-0  ${
+              isLeft ? "-right-[35px] rotate-90" : "-left-[35px] -rotate-90"
+            }`}
+          ></div>
         </div>
       </div>
     </div>
diff --git a/client/src/components/masterplanPage/map/Map.tsx b/client/src/components/masterplanPage/map/Map.tsx
index 60c54fb..690bea1 100644
--- a/client/src/components/masterplanPage/map/Map.tsx
+++ b/client/src/components/masterplanPage/map/Map.tsx
@@ -30,11 +30,6 @@ const Map = () => {
           animationType: "easeOutQuart",
           animationTime: 500,
         }}
-        velocityAnimation={{
-          sensitivity: 100,
-          animationTime: 100,
-          animationType: "easeOut",
-        }}
       >
         <ZoomControlls />
         <TransformComponent
diff --git a/client/src/components/masterplanPage/map/Marker.tsx b/client/src/components/masterplanPage/map/Marker.tsx
index ca49910..bd4fdf5 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
@@ -23,6 +23,7 @@ const Marker = (props: MarkerComponentProps) => {
   };
 
   const handleOnClick = () => {
+    if (!currentMarker || currentMarker?.isDisabled) return;
     navigate(`../masterplan/${currentMarker?.itemNumber}`);
     setHoveredMarker(null);
   };
@@ -34,31 +35,58 @@ const Marker = (props: MarkerComponentProps) => {
 
   return (
     <div
-      className="relative transition-transform "
+      className="relative transition-transform"
       style={{ transform: `scale(${markerScale})` }}
     >
-      <div
-        className={`flex items-end absolute w-[108px] top-[22px] right-[72px] transition-all duration-300 ease-in-out ${
-          hoveredMarker &&
-          hoveredMarker.itemNumber !== currentMarker?.itemNumber
-            ? "brightness-[.7]"
-            : ""
-        } ${currentMarker?.isPopupLeft ? "block" : "hidden"}`}
-      >
-        <div className={`flex items-center py-2 `}>
-          <div className={`bg-white px-2 py-1 rounded-lg `}>
-            {currentMarker && (
-              <img src={currentMarker.popup} alt="1" width={108} height={54} />
-            )}
-          </div>
-          <div className="relative w-[5.5px] h-2">
-            <div className="w-0 h-0 border-y-4 border-l-8 border-r-0 border-transparent border-l-[#fff] absolute top-0 -left-[2.5px]" />
+      {!currentMarker?.isDisabled ? (
+        <div
+          className={`flex items-end absolute w-[108px] top-[22px] right-[72px] transition-all duration-300 ease-in-out ${
+            hoveredMarker &&
+            hoveredMarker.itemNumber !== currentMarker?.itemNumber
+              ? "brightness-[.7]"
+              : ""
+          } ${currentMarker?.isPopupLeft ? "block" : "hidden"}`}
+        >
+          <div className={`flex items-center py-[8px] `}>
+            <div className={`bg-white px-[8px] py-[4px] rounded-[8px] `}>
+              {currentMarker && (
+                <img
+                  src={currentMarker.popup}
+                  alt="1"
+                  width={108}
+                  height={54}
+                />
+              )}
+            </div>
+            <div className="relative w-[5.5px] h-[8px]">
+              <div className="w-0 h-0 border-y-4 border-l-8 border-r-0 border-transparent border-l-[#fff] absolute top-0 -left-[2.5px]" />
+            </div>
           </div>
         </div>
-      </div>
+      ) : (
+        <div
+          className={`flex items-end absolute w-[130px] top-[40px] right-[64px] transition-all duration-300 ease-in-out ${
+            hoveredMarker &&
+            hoveredMarker.itemNumber !== currentMarker?.itemNumber
+              ? "brightness-[.7]"
+              : ""
+          } ${currentMarker?.isPopupLeft ? "block" : "hidden"}`}
+        >
+          <div className={`flex items-center py-[8px] `}>
+            <div
+              className={`bg-white px-[8px] py-[4px] rounded-[8px] text-[16px] font-semibold`}
+            >
+              Coming Soon
+            </div>
+            <div className="relative w-[5.5px] h-[8px]">
+              <div className="w-0 h-0 border-y-4 border-l-8 border-r-0 border-transparent border-l-[#fff] absolute top-0 -left-[2.5px]" />
+            </div>
+          </div>
+        </div>
+      )}
       <div
         onClick={handleOnClick}
-        className={`flex gap-1 transition-all duration-300 ease-in-out cursor-pointer ${
+        className={`flex gap-[4px] transition-all duration-300 ease-in-out cursor-pointer ${
           hoveredMarker &&
           hoveredMarker.itemNumber !== currentMarker?.itemNumber
             ? "brightness-[.7]"
@@ -71,34 +99,41 @@ const Marker = (props: MarkerComponentProps) => {
         >
           <img
             id="marker"
-            src="/images/markers/1.png"
+            src={currentMarker?.imgSrc}
             alt="1"
             width={72}
             height={98}
           />
         </div>
       </div>
-      <div
-        className={`flex items-end absolute w-[108px] top-[22px] left-[72px] transition-all duration-300 ease-in-out ${
-          currentMarker?.isPopupLeft ? "hidden" : "block"
-        } ${
-          hoveredMarker &&
-          hoveredMarker.itemNumber !== currentMarker?.itemNumber
-            ? "brightness-[.7]"
-            : ""
-        }`}
-      >
-        <div className={`flex items-center py-2`}>
-          <div className="relative w-[5.5px] h-2">
-            <div className="w-0 h-0 border-y-4 border-r-8 border-l-0 border-transparent border-r-[#fff] absolute top-0 -right-[2.5px]" />
-          </div>
-          <div className={`bg-white px-2 py-1 rounded-lg`}>
-            {currentMarker && (
-              <img src={currentMarker.popup} alt="1" width={108} height={54} />
-            )}
+      {!currentMarker?.isDisabled && (
+        <div
+          className={`flex items-end absolute w-[108px] top-[22px] left-[76px] transition-all duration-300 ease-in-out ${
+            currentMarker?.isPopupLeft ? "hidden" : "block"
+          } ${
+            hoveredMarker &&
+            hoveredMarker.itemNumber !== currentMarker?.itemNumber
+              ? "brightness-[.7]"
+              : ""
+          }`}
+        >
+          <div className={`flex items-center py-[8px]`}>
+            <div className="relative w-[5.5px] h-[8px]">
+              <div className="w-0 h-0 border-y-[4px] border-r-[8px] border-l-0 border-transparent border-r-[#fff] absolute top-0 -right-[2.5px]" />
+            </div>
+            <div className={`bg-white px-[8px] py-[4px] rounded-[8px]`}>
+              {currentMarker && (
+                <img
+                  src={currentMarker.popup}
+                  alt="1"
+                  width={108}
+                  height={54}
+                />
+              )}
+            </div>
           </div>
         </div>
-      </div>
+      )}
     </div>
   );
 };
diff --git a/client/src/components/modals/mobile/WingFloorModal.tsx b/client/src/components/modals/mobile/WingFloorModal.tsx
index 011d72e..f395c49 100644
--- a/client/src/components/modals/mobile/WingFloorModal.tsx
+++ b/client/src/components/modals/mobile/WingFloorModal.tsx
@@ -2,8 +2,18 @@ import { useSwipeable } from "react-swipeable";
 import useModal from "../../../store/useModal";
 import { useEffect, useState } from "react";
 import MinusIcon from "../../icons/MinusIcon";
+import { IDesctiptionFloor } from "../../../types/descriptionFloor";
+import { IAparmentRes } from "../../../types/apartmentsRes";
 
-const WingFloorModal = () => {
+interface WingFloorModalProps {
+  currentFloor: IDesctiptionFloor | null;
+  floorApartments: IAparmentRes[];
+}
+
+const WingFloorModal = ({
+  currentFloor,
+  floorApartments,
+}: WingFloorModalProps) => {
   const { setModal } = useModal();
   const [isAnimate, setIsAnimate] = useState(false);
 
diff --git a/client/src/components/searchPage/LayoutOptions.tsx b/client/src/components/searchPage/LayoutOptions.tsx
index 317c76d..f1ca916 100644
--- a/client/src/components/searchPage/LayoutOptions.tsx
+++ b/client/src/components/searchPage/LayoutOptions.tsx
@@ -12,10 +12,7 @@ import { updateAccessToken } from "../../api/updateAccessToken";
 import useApartments from "../../store/useApartments";
 import useSearchFilters from "../../store/useSearchFilters";
 import { useDebounce } from "@uidotdev/usehooks";
-import {
-  perPageInitial,
-  pageInitial,
-} from "../../consts/initialMasterplanFilters";
+import { perPageInitial } from "../../consts/initialMasterplanFilters";
 import { getFilteredApartments } from "../../calc/getFilteredApartments";
 import SearchLoader from "./SearchLoader";
 
diff --git a/client/src/consts/markers.ts b/client/src/consts/markers.ts
index 0e56f08..c35cc42 100644
--- a/client/src/consts/markers.ts
+++ b/client/src/consts/markers.ts
@@ -2,25 +2,31 @@ import { Marker } from "../types/marker";
 
 const markers: Marker[] = [
   {
-    top: 38.2,
-    left: 54,
+    top: 33.5,
+    left: 51.5,
     itemNumber: 0,
     popup: "/images/markers/popups/1.svg",
     isPopupLeft: true,
+    isDisabled: true,
+    imgSrc: "/images/markers/2.png",
   },
   {
-    top: 39.5,
-    left: 56,
+    top: 35.5,
+    left: 53,
     itemNumber: 1,
     popup: "/images/markers/popups/1.svg",
     isPopupLeft: false,
+    isDisabled: false,
+    imgSrc: "/images/markers/1.png",
   },
   {
-    top: 73,
-    left: 22.5,
+    top: 69,
+    left: 20.0,
     itemNumber: 2,
     popup: "/images/markers/popups/1.svg",
-    isPopupLeft: false,
+    isPopupLeft: true,
+    isDisabled: true,
+    imgSrc: "/images/markers/2.png",
   },
 ];
 
diff --git a/client/src/types/marker.ts b/client/src/types/marker.ts
index f1d618a..aee8c05 100644
--- a/client/src/types/marker.ts
+++ b/client/src/types/marker.ts
@@ -3,6 +3,8 @@ import { MarkerComponentProps } from "react-image-marker";
 type Marker = MarkerComponentProps & {
   popup: string;
   isPopupLeft: boolean;
+  imgSrc: string;
+  isDisabled: boolean;
 };
 
 export type { Marker };
diff --git a/server/.env b/server/.env
index d1e6a69..1b8a6c4 100644
--- a/server/.env
+++ b/server/.env
@@ -1,2 +1,2 @@
-PORT=4003
-REFRESH_TOKEN=1000.da3146d49fa8a399f0c635e74954ff9c.e010dbb1bb605d7e1aa5bf7fc0521f8b
\ No newline at end of file
+PORT=4113
+REFRESH_TOKEN=1000.ca08e1e4dc5fe081e2bd7fdbd0adf5e6.68b8da640d7322a889f10eddbcf5ee6b
\ No newline at end of file