diff --git a/public/images/about-complex/dubai-marina/amenties.jpg b/public/images/about-complex/dubai-marina/amenties.jpg
index 27b6955..068495e 100644
Binary files a/public/images/about-complex/dubai-marina/amenties.jpg and b/public/images/about-complex/dubai-marina/amenties.jpg differ
diff --git a/public/images/about-complex/dubai-marina/central_map.png b/public/images/about-complex/dubai-marina/central_map.png
new file mode 100644
index 0000000..dd4d438
Binary files /dev/null and b/public/images/about-complex/dubai-marina/central_map.png differ
diff --git a/public/images/about-complex/dubai-marina/community.jpg b/public/images/about-complex/dubai-marina/community.jpg
index 81c3998..23dffd1 100644
Binary files a/public/images/about-complex/dubai-marina/community.jpg and b/public/images/about-complex/dubai-marina/community.jpg differ
diff --git a/public/images/about-complex/dubai-marina/community1.jpg b/public/images/about-complex/dubai-marina/community1.jpg
deleted file mode 100644
index dc0fb41..0000000
Binary files a/public/images/about-complex/dubai-marina/community1.jpg and /dev/null differ
diff --git a/public/images/about-complex/dubai-marina/community2.jpg b/public/images/about-complex/dubai-marina/community2.jpg
index 288e189..632b5e7 100644
Binary files a/public/images/about-complex/dubai-marina/community2.jpg and b/public/images/about-complex/dubai-marina/community2.jpg differ
diff --git a/public/images/about-complex/dubai-marina/convenience2.jpg b/public/images/about-complex/dubai-marina/convenience2.jpg
deleted file mode 100644
index a07438f..0000000
Binary files a/public/images/about-complex/dubai-marina/convenience2.jpg and /dev/null differ
diff --git a/public/images/about-complex/dubai-marina/design.jpg b/public/images/about-complex/dubai-marina/design.jpg
index c929971..47d0ab4 100644
Binary files a/public/images/about-complex/dubai-marina/design.jpg and b/public/images/about-complex/dubai-marina/design.jpg differ
diff --git a/public/images/about-complex/dubai-marina/fitness1.jpg b/public/images/about-complex/dubai-marina/fitness1.jpg
index 9063ce6..638d5ea 100644
Binary files a/public/images/about-complex/dubai-marina/fitness1.jpg and b/public/images/about-complex/dubai-marina/fitness1.jpg differ
diff --git a/public/images/about-complex/dubai-marina/fitness2.jpg b/public/images/about-complex/dubai-marina/fitness2.jpg
index 000b422..8b80a88 100644
Binary files a/public/images/about-complex/dubai-marina/fitness2.jpg and b/public/images/about-complex/dubai-marina/fitness2.jpg differ
diff --git a/public/images/about-complex/dubai-marina/wellness.jpg b/public/images/about-complex/dubai-marina/wellness.jpg
index c3d2130..8d4dfbe 100644
Binary files a/public/images/about-complex/dubai-marina/wellness.jpg and b/public/images/about-complex/dubai-marina/wellness.jpg differ
diff --git a/src/components/FullScreenButton.tsx b/src/components/FullScreenButton.tsx
index 69f6ef1..1a02ce3 100644
--- a/src/components/FullScreenButton.tsx
+++ b/src/components/FullScreenButton.tsx
@@ -1,8 +1,8 @@
-import { Dispatch, SetStateAction, useEffect } from "react";
-import FullScreenIcon from "./icons/FullScreenIcon";
-import Button from "./ui/Button";
-import CloseFullscreenIcon from "./icons/CloseFullscreenIcon";
-import { isMobileSafari } from "react-device-detect";
+import { Dispatch, SetStateAction, useEffect } from 'react';
+import FullScreenIcon from './icons/FullScreenIcon';
+import Button from './ui/Button';
+import CloseFullscreenIcon from './icons/CloseFullscreenIcon';
+import { isMobileSafari } from 'react-device-detect';
 
 interface IFullScreenProps {
   onFullScreenChange: Dispatch<SetStateAction<boolean>>;
@@ -17,12 +17,12 @@ function FullScreenButton({
 }: IFullScreenProps) {
   useEffect(() => {
     onFullScreenChange(!!document.fullscreenElement);
-    document.addEventListener("fullscreenchange", () =>
+    document.addEventListener('fullscreenchange', () =>
       onFullScreenChange(!!document.fullscreenElement)
     );
 
     return () =>
-      document.removeEventListener("fullscreenchange", () =>
+      document.removeEventListener('fullscreenchange', () =>
         onFullScreenChange(!!document.fullscreenElement)
       );
   }, [onFullScreenChange]);
@@ -30,8 +30,8 @@ function FullScreenButton({
   if (isMobileSafari) return null;
 
   return (
-    <Button onlyIcon size="small" variant="secondary" onClick={handleClick}>
-      <span className="2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
+    <Button onlyIcon size='small' variant='secondary' onClick={handleClick}>
+      <span className='2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5'>
         {isFullScreen ? <CloseFullscreenIcon /> : <FullScreenIcon />}
       </span>
     </Button>
diff --git a/src/components/Slider.tsx b/src/components/Slider.tsx
index 9f02708..02963c9 100644
--- a/src/components/Slider.tsx
+++ b/src/components/Slider.tsx
@@ -1,13 +1,13 @@
-import { useEffect, useState } from "react";
-import ArrowLeftIcon from "./icons/ArrowLeftIcon";
-import ArrowRightIcon from "./icons/ArrowRightIcon";
-import { dubaiMarinaSlider } from "../data/aboutDubaiMarina";
-import { AnimatePresence, motion } from "motion/react";
+import { useEffect, useState } from 'react';
+import ArrowLeftIcon from './icons/ArrowLeftIcon';
+import ArrowRightIcon from './icons/ArrowRightIcon';
+import { dubaiMarinaSlider } from '../data/aboutDubaiMarina';
+import { AnimatePresence, motion } from 'motion/react';
 
 function Slider({
   categoryName,
 }: {
-  categoryName: "Wellness" | "Fitness" | "Community" | "Convenience";
+  categoryName: 'Wellness' | 'Fitness' | 'Community' | 'Convenience';
 }) {
   const [currentSlide, setCurrentSlide] = useState(0);
   const [direction, setDirection] = useState(-1);
@@ -31,29 +31,29 @@ function Slider({
   }, [categoryName]);
 
   return (
-    <div className="relative w-[63.333vw] h-[27.639vw] rounded-3xl overflow-hidden">
+    <div className='relative w-[63.333vw] h-[27.639vw] rounded-3xl overflow-hidden max-md:w-[91.111vw] max-md:h-[110.556vw]'>
       <AnimatePresence custom={direction}>
         <motion.div
           key={currentSlide}
-          className="absolute inset-0 bg-cover bg-no-repeat bg-center"
+          className='absolute inset-0 bg-cover bg-no-repeat bg-center before:absolute before:inset-0 before:bg-[#0D1922]/20 before:z-10'
           style={{
             backgroundImage: `url(${dubaiMarinaSlider[categoryName][currentSlide].image})`,
           }}
           custom={direction}
-          initial={{ x: direction > 0 ? "100%" : "-100%" }}
-          animate={{ x: 0, transition: { duration: 0.5, ease: "easeInOut" } }}
+          initial={{ x: direction > 0 ? '100%' : '-100%' }}
+          animate={{ x: 0, transition: { duration: 0.5, ease: 'easeInOut' } }}
           exit={{
-            x: direction > 0 ? "100%" : "-100%",
-            transition: { duration: 0.8, ease: "easeInOut" },
+            x: direction > 0 ? '100%' : '-100%',
+            transition: { duration: 0.8, ease: 'easeInOut' },
           }}
         />
       </AnimatePresence>
-      <div className="relative z-10 w-full h-full flex flex-col justify-between p-6">
-        <div className="flex flex-col gap-4">
-          <AnimatePresence mode="wait">
+      <div className='relative z-10 w-full h-full flex flex-col justify-between p-6'>
+        <div className='flex flex-col gap-4'>
+          <AnimatePresence mode='wait'>
             <motion.h3
               key={`title-${currentSlide}`}
-              className="text-subheadline-m"
+              className='text-subheadline-m text-white max-md:text-h5'
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
               exit={{ opacity: 0 }}
@@ -62,10 +62,10 @@ function Slider({
               {dubaiMarinaSlider[categoryName][currentSlide].title}
             </motion.h3>
           </AnimatePresence>
-          <AnimatePresence mode="wait">
+          <AnimatePresence mode='wait'>
             <motion.p
               key={`desc-${currentSlide}`}
-              className="text-s w-[19.861vw] tracking-[-0.02em] leading-[140%]"
+              className='text-s w-[19.861vw] tracking-[-0.02em] leading-[140%] text-white max-md:w-full max-md:text-caption-m'
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
               exit={{ opacity: 0 }}
@@ -75,24 +75,23 @@ function Slider({
             </motion.p>
           </AnimatePresence>
         </div>
-
-        <div className="flex items-center gap-[0.556vw] relative">
+        <div className='flex items-center gap-[0.556vw] relative max-md:gap-[2.222vw]'>
           <div
-            className="w-10 h-10 rounded-xl text-[#0D1922] bg-white flex items-center justify-center cursor-pointer hover:bg-[#F3F3F2] transition-all duration-200"
+            className='w-10 h-10 rounded-xl text-[#0D1922] bg-white flex items-center justify-center cursor-pointer hover:bg-[#F3F3F2] transition-all duration-200'
             onClick={handlePreviousSlide}
           >
-            <span className="w-5 h-5">
+            <span className='w-5 h-5'>
               <ArrowLeftIcon />
             </span>
           </div>
-          <div className="text-s">
+          <div className='text-s text-white'>
             {currentSlide + 1}/{dubaiMarinaSlider[categoryName].length}
           </div>
           <div
-            className="w-10 h-10 rounded-xl text-[#0D1922] bg-white flex items-center justify-center cursor-pointer hover:bg-[#F3F3F2] transition-all duration-200"
+            className='w-10 h-10 rounded-xl text-[#0D1922] bg-white flex items-center justify-center cursor-pointer hover:bg-[#F3F3F2] transition-all duration-200'
             onClick={handleNextSlide}
           >
-            <span className="w-5 h-5">
+            <span className='w-5 h-5'>
               <ArrowRightIcon />
             </span>
           </div>
diff --git a/src/components/SliderMobile.tsx b/src/components/SliderMobile.tsx
new file mode 100644
index 0000000..264e177
--- /dev/null
+++ b/src/components/SliderMobile.tsx
@@ -0,0 +1,106 @@
+import { motion, useScroll, useTransform } from 'framer-motion';
+import Slider from './Slider';
+import { useRef } from 'react';
+function SliderMobile() {
+  const sliderMobileRef = useRef(null);
+  const { scrollYProgress } = useScroll({
+    target: sliderMobileRef,
+    offset: ['start start', 'end end'],
+  });
+
+  const opacityFirstSlide = useTransform(
+    scrollYProgress,
+    [0, 1 / 4, 1 / 2],
+    [1, 0, 0]
+  );
+  const opacitySecondSlide = useTransform(
+    scrollYProgress,
+    [1 / 4, 1 / 2, 3 / 4],
+    [1, 1, 0]
+  );
+  const opacityThirdSlide = useTransform(
+    scrollYProgress,
+    [1 / 2, 3 / 4, 1],
+    [1, 1, 0]
+  );
+  const opacityFourthSlide = useTransform(scrollYProgress, [3 / 4, 1], [1, 1]);
+
+  return (
+    <div
+      className='min-md:hidden flex flex-col gap-[6.667vw]'
+      ref={sliderMobileRef}
+    >
+      <motion.div
+        className='sticky top-[18vw] h-full flex flex-col gap-[6.667vw]'
+        style={{ opacity: opacityFirstSlide }}
+      >
+        <div className='h-[2px] bg-gray-300 w-full'></div>
+        <h5
+          className={
+            'text-h5 tracking-[-0.02em] mt-[0.556vw] font-[500] text-[#00BED7] text-center р-10'
+          }
+        >
+          Wellness
+        </h5>
+        <p className='text-m text-center text-[#0D1922]/70 mt-[-2.222vw]'>
+          Unlock your inner zen in our wellness playground
+        </p>
+        <Slider categoryName='Wellness' />
+      </motion.div>
+      <motion.div
+        className='sticky h-full top-[18vw] flex flex-col gap-[6.667vw] bg-white'
+        style={{ opacity: opacitySecondSlide }}
+      >
+        <div className='h-[2px] bg-gray-300 w-full'></div>
+        <h5
+          className={
+            'text-h5 tracking-[-0.02em] mt-[0.556vw] font-[500] text-[#00BED7] text-center'
+          }
+        >
+          Fitness
+        </h5>
+        <p className='text-m text-center text-[#0D1922]/70 mt-[-2.222vw]'>
+          Cancel all your membership. Your new home has it all
+        </p>
+        <Slider categoryName='Fitness' />
+      </motion.div>
+      <motion.div
+        className='sticky h-full top-[18vw] flex flex-col gap-[6.667vw] bg-white'
+        style={{ opacity: opacityThirdSlide }}
+      >
+        <div className='h-[2px] bg-gray-300 w-full'></div>
+        <h5
+          className={
+            'text-h5 tracking-[-0.02em] mt-[0.556vw] font-[500] text-[#00BED7] text-center'
+          }
+        >
+          Community
+        </h5>
+        <p className='text-m text-center text-[#0D1922]/70 mt-[-2.222vw] h-10'>
+          Connect. Engage. Thrive.
+        </p>
+        <Slider categoryName='Community' />
+      </motion.div>
+      <motion.div
+        className='sticky h-full top-[18vw] flex flex-col gap-[6.667vw] z-3 bg-white'
+        style={{ opacity: opacityFourthSlide }}
+      >
+        <div className='h-[2px] bg-gray-300 w-full'></div>
+        <h5
+          className={
+            'text-h5 tracking-[-0.02em] mt-[0.556vw] font-[500] text-[#00BED7] text-center'
+          }
+        >
+          Convenience
+        </h5>
+        <p className='text-m text-center text-[#0D1922]/70 mt-[-2.222vw] h-10'>
+          Your smart living hub
+        </p>
+        <Slider categoryName='Convenience' />
+      </motion.div>
+      <div className='h-[40vw]'></div>
+    </div>
+  );
+}
+
+export default SliderMobile;
diff --git a/src/data/aboutDubaiMarina.ts b/src/data/aboutDubaiMarina.ts
index 48add73..fdff6a1 100644
--- a/src/data/aboutDubaiMarina.ts
+++ b/src/data/aboutDubaiMarina.ts
@@ -80,7 +80,7 @@ export const dubaiMarinaSlider = {
       title: 'Multi-Purpose Hall',
       description:
         'Designed for gatherings, gamings, and entertainment, step into a vibrant multi-functional indoor and outdoor space that can be rented for special events.',
-      image: '/images/about-complex/dubai-marina/community1.jpg',
+      image: '/images/about-complex/dubai-marina/community.jpg',
     },
     {
       title: 'Lobby Lounge',
@@ -99,7 +99,7 @@ export const dubaiMarinaSlider = {
     {
       title: 'Entrance & Concierge',
       description: 'An unforgettable welcome, every time you come home.',
-      image: '/images/about-complex/dubai-marina/convenience2.jpg',
+      image: '/images/about-complex/dubai-marina/design.jpg',
     },
   ],
 } as const;
diff --git a/src/pages/AboutComplexPage.tsx b/src/pages/AboutComplexPage.tsx
index 1f8bcf8..57b613a 100644
--- a/src/pages/AboutComplexPage.tsx
+++ b/src/pages/AboutComplexPage.tsx
@@ -4,22 +4,23 @@ import {
   motion,
   useInView,
   AnimatePresence,
-} from "motion/react";
-import { useRef, useState } from "react";
+} from 'motion/react';
+import { useRef, useState } from 'react';
 import {
   dubaiMarinaFeatures,
   dubaiMarinaDescription,
   roveHomeDescription,
   dubaiMarinaSlider,
   sliderBadgesCategory,
-} from "../data/aboutDubaiMarina";
-
-import EqualIcon from "../components/icons/EqualIcon";
-import TextBox from "../components/ui/TextBox";
-import clsx from "clsx";
-import Slider from "../components/Slider";
-import PlusIcon from "../components/icons/map/PlusIcon";
-import useWindowSize from "../hooks/useWindowSize";
+} from '../data/aboutDubaiMarina';
+import EqualIcon from '../components/icons/EqualIcon';
+import TextBox from '../components/ui/TextBox';
+import clsx from 'clsx';
+import Slider from '../components/Slider';
+import PlusIcon from '../components/icons/map/PlusIcon';
+import useWindowSize from '../hooks/useWindowSize';
+import FullScreenButton from '../components/FullScreenButton';
+import SliderMobile from '../components/SliderMobile';
 
 function AboutComplexPage() {
   const containerRef = useRef(null);
@@ -28,11 +29,11 @@ function AboutComplexPage() {
   const { width } = useWindowSize();
 
   const [selectedCategorySlider, setSelectedCategorySlider] =
-    useState<keyof typeof dubaiMarinaSlider>("Wellness");
+    useState<keyof typeof dubaiMarinaSlider>('Wellness');
 
   const { scrollYProgress } = useScroll({
     target: containerRef,
-    offset: ["start start", "end start"],
+    offset: ['start start', 'end start'],
   });
 
   const firstSectionOpacity = useTransform(scrollYProgress, [0, 0.2], [1, 0]);
@@ -40,7 +41,7 @@ function AboutComplexPage() {
   const secondSectionY = useTransform(
     scrollYProgress,
     [0, 0.4],
-    ["100dvh", "0dvh"]
+    ['100dvh', '0dvh']
   );
 
   const isSliderInView = useInView(sliderRef, {
@@ -53,44 +54,44 @@ function AboutComplexPage() {
   });
 
   return (
-    <div className="relative bg-white" ref={containerRef}>
+    <div className='relative bg-white' ref={containerRef}>
       <motion.section
-        className="2xl:h-[calc(100dvh-4.444vw)] w-full bg-white text-black 2xl:fixed top-[4.444vw] left-0 right-0 max-md:top-[15.556vw]] 
-        max-md:bg-[url(/images/about-complex/dubai-marina/tower-mobile.png)] max-md:bg-cover max-md:bg-top max-md:bg-no-repeat max-md:aspect-[360/584]"
+        className='md:h-[calc(100dvh-4.444vw)] w-full bg-white text-black 2xl:fixed top-[4.444vw] left-0 right-0 z-0 max-md:top-[15.556vw]] 
+        max-md:bg-[url(/images/about-complex/dubai-marina/tower-mobile.png)] max-md:bg-cover max-md:bg-top max-md:bg-no-repeat max-md:aspect-[360/584]'
         style={{
           opacity: width > 768 ? firstSectionOpacity : 1,
         }}
       >
-        <div className="absolute inset-0 max-md:relative">
+        <div className='absolute inset-0 max-md:relative'>
           <img
-            src="/images/about-complex/dubai-marina/tower.jpg"
-            alt="dubai marina about"
-            className="h-full w-full object-cover object-top max-md:hidden"
+            src='/images/about-complex/dubai-marina/tower.jpg'
+            alt='dubai marina about'
+            className='h-full w-full object-cover object-top max-md:hidden'
           />
           <img
-            src="/images/about-complex/dubai-marina/logo.png"
-            alt="dubai marina about"
-            className="absolute top-[5vw] right-[2.778vw] w-[9.931vw] h-[4.444vw] max-md:top-[6.667vw] max-md:right-[4.444vw] max-md:w-[21.389vw] max-md:h-[9.444vw]"
+            src='/images/about-complex/dubai-marina/logo.png'
+            alt='dubai marina about'
+            className='absolute top-[5vw] right-[2.778vw] w-[9.931vw] h-[4.444vw] max-md:top-[6.667vw] max-md:right-[4.444vw] max-md:w-[21.389vw] max-md:h-[9.444vw]'
           />
         </div>
-        <div className="relative h-full flex flex-col justify-between 2xl:gap-[4.444vw] flex-1 w-full pt-[5vw] pb-[2.5vw] pl-[2.222vw] max-md:px-[4.444vw] max-md:block ">
-          <div className="font-bold whitespace-pre-line space-y-8 max-md:space-y-4">
-            <h1 className="text-[5vw] leading-none tracking-[-0.07em] font-mixcase-unmixed font-[500] max-md:text-[8.889vw]">
+        <div className='relative h-full flex flex-col justify-between 2xl:gap-[4.444vw] flex-1 w-full pt-[5vw] pb-[2.5vw] pl-[2.222vw] max-md:px-[4.444vw] max-md:block '>
+          <div className='font-bold whitespace-pre-line space-y-8 max-md:space-y-4'>
+            <h1 className='text-[5vw] leading-none tracking-[-0.07em] font-mixcase-unmixed font-[500] max-md:text-[8.889vw]'>
               {`Rove Home
                   Dubai Marina`}
             </h1>
-            <div className="space-y-2 font-[400]">
+            <div className='space-y-2 font-[400]'>
               {roveHomeDescription.map((description) => (
                 <TextBox text={description} />
               ))}
             </div>
           </div>
-          <div className="space-y-8 max-md:hidden">
-            <h4 className="text-h4 text-[#00BED7] font-[500] whitespace-pre-line">
+          <div className='space-y-8 max-md:hidden'>
+            <h4 className='text-h4 text-[#00BED7] font-[500] whitespace-pre-line'>
               {`Own the last slice of 
                     Dubai Marina, ROVE Style`}
             </h4>
-            <p className="text-s text-[#0D1922B2] whitespace-pre-line ">
+            <p className='text-s text-[#0D1922B2] whitespace-pre-line '>
               {`With an extended playlist of life-enhancing
                 amenities, Rove Home is a complete ecosystem
                 that has everything you'll ever need.`}
@@ -99,79 +100,80 @@ function AboutComplexPage() {
         </div>
       </motion.section>
       <motion.section
-        className="w-full text-white bg-white flex justify-center top-[4.444vw] left-0 right-0 max-md:top-0 overflow-x-hidden"
+        className='w-full text-white bg-white flex justify-center max-md:top-0 max-md:overflow-x-clip'
         style={{
           y: width > 768 ? secondSectionY : 0,
           zIndex: 1,
         }}
       >
-        <div className="w-full">
-          <div className="flex flex-col items-center gap-[2.222vw] w-full max-md:py-[8.889vw] max-md:px-[4.444vw]">
-            <div className="space-y-8 2xl:hidden self-start">
-              <h4 className="text-h4 text-[#00BED7] font-[500] whitespace-pre-line">
+        <div className='w-full'>
+          <div className='flex flex-col items-center gap-[2.222vw] w-full max-md:py-[8.889vw] max-md:px-[4.444vw]'>
+            <div className='space-y-8 min-md:hidden self-start'>
+              <h4 className='text-h4 text-[#00BED7] font-[500] whitespace-pre-line'>
                 {`Own the last slice of Dubai
                  Marina, ROVE Style`}
               </h4>
-              <p className="text-s text-[#0D1922B2] whitespace-pre-line ">
+              <p className='text-s text-[#0D1922B2] whitespace-pre-line '>
                 {`With an extended playlist of life-enhancing
                 amenities, Rove Home is a complete ecosystem
                 that has everything you'll ever need.`}
               </p>
             </div>
-            <div className="2xl:px-[2.222vw] flex pt-[7.222vw] flex-col items-center gap-[2.222vw] max-md:pt-[17.778vw]">
-              <h1 className="text-[3.889vw] text-[#0D1922] font-mixcase-unmixed max-md:text-[6.667vw]">
+            <div className='2xl:px-[2.222vw] flex pt-[7.222vw] flex-col items-center gap-[2.222vw] max-md:pt-[17.778vw]'>
+              <h1 className='text-[3.889vw] text-[#0D1922] font-mixcase-unmixed max-md:text-[6.667vw]'>
                 Rove Home has it all
               </h1>
-              <p className="text-s text-[#0D1922B2] text-center tracking-[-0.02em] whitespace-pre-line">
+              <p className='text-s text-[#0D1922B2] text-center tracking-[-0.02em] whitespace-pre-line'>
                 {`Rove Home Dubai Marina features modern-day
                   conveniences, carefully curated for an active
                   and social lifestyle.`}
               </p>
             </div>
-
-            <div className="max-md:overflow-x-auto max-md:self-start max-md:w-screen max-md:-ml-[4.444vw] flex gap-[0.556vw] mt-[0.833vw] 2xl:h-[26.667vw] px-[2.222vw] max-md:pl-[4.444vw] max-md:pr-[2vw] max-md:gap-[2.222vw] max-md:snap-x">
+            <div className='flex gap-[0.556vw] mt-[0.833vw] 2xl:h-[26.667vw]  max-md:pl-[4.444vw] max-md:pr-[2vw] max-md:gap-[2.222vw] max-md:snap-x max-md:py-[6.667vw] max-md:overflow-x-auto max-md:self-start max-md:w-screen max-md:-ml-[4.444vw] '>
               {dubaiMarinaFeatures.map((feature) => (
                 <div
                   key={feature.name}
-                  className={`rounded-3xl flex-1 2xl:h-[26.667vw] w-full flex flex-col items-center py-[1.667vw] justify-end bg-cover bg-center bg-no-repeat max-md:w-[91.111vw] max-md:flex-none aspect-[328/287] max-md:snap-always max-md:snap-center`}
+                  className={`rounded-3xl flex-1 2xl:h-[26.667vw] w-full flex flex-col items-center py-[1.667vw] justify-end bg-cover bg-center bg-no-repeat relative before:absolute before:inset-0 before:bg-[#0D1922]/10 before:z-2 before:rounded-3xl
+                    max-md:w-[91.111vw] max-md:flex-none aspect-[268/384] max-md:aspect-[328/287] max-md:snap-always max-md:snap-center max-md:py-[4.444vw]`}
                   style={{
                     backgroundImage: `url(${feature.image})`,
                   }}
                 >
-                  <h5 className="text-h5 text-white tracking-[-0.02em]">
+                  <h5 className='text-h5 text-white tracking-[-0.02em] z-2'>
                     {feature.name}
                   </h5>
                 </div>
               ))}
             </div>
           </div>
-          <div className="flex flex-col items-center pt-[4.444vw] h-auto px-8 gap-[4.444vw] max-md:hidden">
-            <h1 className="font-mixcase-unmixed text-[3.889vw] text-[#0D1922] tracking-[-0.05em]">
-              Dubai, <span className="text-[#0D192266]">within reach</span>
+          <div className='flex flex-col items-center pt-[4.444vw] px-8 gap-[4.444vw] max-md:px-[4.444vw]'>
+            <h1 className='font-mixcase-unmixed 2xl:text-[3.889vw] text-[#0D1922] tracking-[-0.05em] max-md:text-2xl'>
+              Dubai, <span className='text-[#0D192266]'>within reach</span>
             </h1>
-            <div className="flex w-full text-[#0D192266] gap-[1.111vw]">
+            <SliderMobile />
+            <div className='flex w-full text-[#0D1922]/40 gap-[1.111vw] max-md:hidden'>
               {dubaiMarinaDescription.map((descriptionItem) => (
                 <div
-                  className="flex-1 text-center flex flex-col gap-[1.111vw] cursor-pointer hover:text-[#0D1922B2] transition-all duration-200"
+                  className='flex-1 text-center flex flex-col gap-[1.111vw] cursor-pointer hover:text-[#0D1922B2] transition-all duration-200'
                   onClick={() =>
                     setSelectedCategorySlider(descriptionItem.title)
                   }
                 >
-                  <div className="h-[2px] bg-gray-300 w-full"></div>
+                  <div className='h-[2px] bg-gray-300 w-full'></div>
                   <h5
                     className={clsx(
-                      "text-h5 tracking-[-0.02em] mt-[0.556vw] font-[500]",
+                      'text-h5 tracking-[-0.02em] mt-[0.556vw] font-[500]',
                       descriptionItem.title === selectedCategorySlider &&
-                        "text-[#00BED7]"
+                        'text-[#00BED7]'
                     )}
                   >
                     {descriptionItem.title}
                   </h5>
                   <p
                     className={clsx(
-                      "text-s leading-[125%] tracking-[-0.02em]",
+                      'text-s leading-[125%] tracking-[-0.02em]',
                       descriptionItem.title === selectedCategorySlider &&
-                        "text-[#0D1922]"
+                        'text-[#0D1922]'
                     )}
                   >
                     {descriptionItem.description}
@@ -179,8 +181,11 @@ function AboutComplexPage() {
                 </div>
               ))}
             </div>
-            <AnimatePresence mode="wait">
-              <div ref={sliderRef} className="flex flex-col gap-8">
+            <AnimatePresence mode='wait'>
+              <div
+                ref={sliderRef}
+                className='flex flex-col gap-8 max-md:hidden'
+              >
                 <motion.div
                   key={`slider-${selectedCategorySlider}`}
                   initial={{ opacity: 0, y: 40 }}
@@ -190,13 +195,13 @@ function AboutComplexPage() {
                       : { opacity: 0, y: 140 }
                   }
                   exit={{ opacity: 0, y: -40 }}
-                  transition={{ duration: 0.6, ease: "easeIn" }}
+                  transition={{ duration: 0.6, ease: 'easeIn' }}
                 >
                   <Slider categoryName={selectedCategorySlider} />
                 </motion.div>
                 <motion.div
                   key={`badges-${selectedCategorySlider}`}
-                  className="flex gap-[0.556vw] w-[63.333vw] flex-wrap justify-center"
+                  className='flex gap-[0.556vw] w-[63.333vw] flex-wrap justify-center'
                 >
                   {sliderBadgesCategory[selectedCategorySlider].map(
                     (badgeItem, index) => (
@@ -207,7 +212,7 @@ function AboutComplexPage() {
                         transition={{
                           duration: 0.3,
                           delay: index * 0.1,
-                          ease: "easeOut",
+                          ease: 'easeOut',
                         }}
                       >
                         <TextBox text={badgeItem} />
@@ -218,90 +223,138 @@ function AboutComplexPage() {
               </div>
             </AnimatePresence>
           </div>
-          <div className="text-center w-full flex flex-col items-center gap-[2.222vw] bg-white">
-            <h1 className="font-mixcase-unmixed text-[3.889vw] text-[#0D1922] w-[44.861vw] leading-[100%] tracking-[-0.05em] pt-[8.056vw]">
+          <div className='text-center w-full flex flex-col items-center gap-[2.222vw] bg-white max-md:gap-[6.667vw]'>
+            <h1 className='font-mixcase-unmixed text-[3.889vw] text-[#0D1922] w-[44.861vw] leading-[100%] tracking-[-0.05em] pt-[8.056vw] max-md:text-[6.667vw] max-md:w-full'>
               Dubai's first-ever combinable Apartments
             </h1>
-            <TextBox text="On-demand" />
-            <p className="text-s text-[#0D1922B2] leading-[140%] tracking-[-0.02em] whitespace-pre-line">
+            <TextBox text='On-demand' />
+            <p className='text-s text-[#0D1922B2] leading-[140%] tracking-[-0.02em] whitespace-pre-line'>
               {`Enjoy the option to combine 2 apartments and create
                 a larger space and configuration.`}
             </p>
-            <div className="flex gap-4 relative">
-              <div className="w-[19.028vw] text-[#0D1922] h-[27.778vw] p-[1.667vw] rounded-2xl bg-[#F3F3F2] text-left bg-[url(/images/about-complex/dubai-marina/studio.png)] bg-[length:7.778vw_17.847vw] bg-no-repeat bg-center">
-                <h4 className="text-h4 tracking-[-0.02em] font-[500]">
+            <div className='flex gap-4 relative max-md:flex-col max-md:gap-[2.222vw] max-md:w-full max-md:px-[4.444vw]'>
+              <div
+                className='w-[19.028vw] text-[#0D1922] h-[27.778vw] p-[1.667vw] rounded-2xl bg-[#F3F3F2] text-left bg-[url(/images/about-complex/dubai-marina/studio.png)] bg-[length:7.778vw_17.847vw] bg-no-repeat bg-center
+                max-md:w-full max-md:h-[75.556vw] max-md:bg-[length:25.556vw_58.333vw] max-md:p-[4.444vw]'
+              >
+                <h4 className='text-h4 tracking-[-0.02em] font-[500] max-md:text-h5'>
                   Studio²
                 </h4>
               </div>
-              <div className="w-10 h-10 rounded-full bg-[#0D1922] flex items-center justify-center absolute left-[18.500vw] self-center">
-                <span className="w-5 h-5">
+              <div
+                className='w-10 h-10 rounded-full bg-[#0D1922] flex items-center justify-center absolute left-[18.500vw] self-center
+              max-md:top-[71.111vw] max-md:left-[45vw]'
+              >
+                <span className='w-5 h-5'>
                   <PlusIcon />
                 </span>
               </div>
-              <div className="w-[19.028vw] text-[#0D1922] h-[27.778vw] p-6 rounded-2xl bg-[#F3F3F2] text-left bg-[url(/images/about-complex/dubai-marina/studio.png)] bg-[length:7.778vw_17.847vw] bg-no-repeat bg-center">
-                <h4 className="text-h4 tracking-[-0.02em] font-[500]">
+              <div
+                className='w-[19.028vw] text-[#0D1922] h-[27.778vw] p-6 rounded-2xl bg-[#F3F3F2] text-left bg-[url(/images/about-complex/dubai-marina/studio.png)] bg-[length:7.778vw_17.847vw] bg-no-repeat bg-center 
+                max-md:w-full max-md:h-[75.556vw] max-md:bg-[length:25.556vw_58.333vw] max-md:p-[4.444vw]'
+              >
+                <h4 className='text-h4 tracking-[-0.02em] font-[500] max-md:text-h5'>
                   Studio²
                 </h4>
               </div>
-              <div className="w-10 h-10 rounded-full bg-[#0D1922] flex items-center justify-center absolute left-[38.333vw] self-center">
-                <span className="w-5 h-5">
+              <div
+                className='w-10 h-10 rounded-full bg-[#0D1922] flex items-center justify-center absolute left-[38.333vw] self-center
+              max-md:top-[148.611vw] max-md:left-[45vw] '
+              >
+                <span className='w-5 h-5'>
                   <EqualIcon />
                 </span>
               </div>
-              <div className="w-[30.972vw] text-[#0D1922] h-[27.778vw] p-6 rounded-2xl bg-[#F3F3F2] text-left bg-[url(/images/about-complex/dubai-marina/1_bedroom.png)] bg-[length:15.972vw_17.847vw] bg-no-repeat bg-center">
-                <h4 className="text-h4 tracking-[-0.02em] font-[500]">
+              <div
+                className='w-[30.972vw] text-[#0D1922] h-[27.778vw] p-6 rounded-2xl bg-[#F3F3F2] text-left bg-[url(/images/about-complex/dubai-marina/1_bedroom.png)] bg-[length:15.972vw_17.847vw] bg-no-repeat bg-center 
+                max-md:w-full max-md:h-[111.111vw] max-md:bg-[length:63.889vw_71.389vw] max-md:p-[4.444vw]'
+              >
+                <h4 className='text-h4 tracking-[-0.02em] font-[500] max-md:text-h5'>
                   1 Bedroom²
                 </h4>
               </div>
             </div>
-            <div className="flex gap-4 relative">
-              <div className="w-[19.028vw] text-[#0D1922] h-[27.778vw] p-6 rounded-2xl bg-[#F3F3F2] text-left bg-[url(/images/about-complex/dubai-marina/2_studio.png)] bg-[length:13.125vw_17.847vw] bg-no-repeat bg-center">
-                <h4 className="text-h4 tracking-[-0.02em] font-[500]">
+            <h5 className='2xl:hidden text-h5 text-[#0D1922B2]'>or</h5>
+            <div className='flex gap-4 relative max-md:flex-col max-md:gap-[2.222vw] max-md:w-full max-md:px-[4.444vw]'>
+              <div
+                className='w-[19.028vw] text-[#0D1922] h-[27.778vw] p-6 rounded-2xl bg-[#F3F3F2] text-left bg-[url(/images/about-complex/dubai-marina/2_studio.png)] bg-[length:13.125vw_17.847vw] bg-no-repeat bg-center 
+                max-md:w-full max-md:h-[75.556vw] max-md:bg-[length:38.889vw_52.5vw] max-md:p-[4.444vw]'
+              >
+                <h4 className='text-h4 tracking-[-0.02em] font-[500] max-md:text-h5'>
                   Studio²
                 </h4>
               </div>
-              <div className="w-10 h-10 rounded-full bg-[#0D1922] flex items-center justify-center absolute left-[18.500vw] self-center">
-                <span className="w-5 h-5">
+              <div
+                className='w-10 h-10 rounded-full bg-[#0D1922] flex items-center justify-center absolute left-[18.500vw] self-center
+              max-md:top-[71.111vw] max-md:left-[45vw]'
+              >
+                <span className='w-5 h-5'>
                   <PlusIcon />
                 </span>
               </div>
-              <div className="w-[30.972vw] text-[#0D1922] h-[27.778vw] p-6 rounded-2xl bg-[#F3F3F2] text-left bg-[url(/images/about-complex/dubai-marina/1_bedroom_rotated.png)] bg-[length:17.847vw_13.681vw] bg-no-repeat bg-center">
-                <h4 className="text-h4 tracking-[-0.02em] font-[500]">
+              <div
+                className='w-[30.972vw] text-[#0D1922] h-[27.778vw] p-6 rounded-2xl bg-[#F3F3F2] text-left bg-[url(/images/about-complex/dubai-marina/1_bedroom_rotated.png)] bg-[length:17.847vw_13.681vw] bg-no-repeat bg-center 
+                max-md:w-full max-md:h-[75.556vw] max-md:bg-[length:56.111vw_43.056vw] max-md:p-[4.444vw]'
+              >
+                <h4 className='text-h4 tracking-[-0.02em] font-[500] max-md:text-h5'>
                   1 Bedroom²
                 </h4>
               </div>
-              <div className="w-10 h-10 rounded-full bg-[#0D1922] flex items-center justify-center absolute left-[50.300vw] self-center">
-                <span className="w-5 h-5">
+              <div
+                className='w-10 h-10 rounded-full bg-[#0D1922] flex items-center justify-center absolute left-[50.300vw] self-center
+              max-md:top-[148.611vw] max-md:left-[45vw]'
+              >
+                <span className='w-5 h-5'>
                   <EqualIcon />
                 </span>
               </div>
-              <div className="w-[30.972vw] text-[#0D1922] h-[27.778vw] p-6 rounded-2xl bg-[#F3F3F2] text-left bg-[url(/images/about-complex/dubai-marina/2_bedroom.png)] bg-[length:19.028vw_17.847vw] bg-no-repeat bg-center">
-                <h4 className="text-h4 tracking-[-0.02em] font-[500]">
+              <div
+                className='w-[30.972vw] text-[#0D1922] h-[27.778vw] p-6 rounded-2xl bg-[#F3F3F2] text-left bg-[url(/images/about-complex/dubai-marina/2_bedroom.png)] bg-[length:19.028vw_17.847vw] bg-no-repeat bg-center
+              max-md:w-full max-md:h-[111.111vw] max-md:bg-[length:76.267vw_71.389vw] max-md:p-[4.444vw]'
+              >
+                <h4 className='text-h4 tracking-[-0.02em] font-[500] max-md:text-h5'>
                   2 Bedroom²
                 </h4>
               </div>
             </div>
           </div>
-          <div className="flex flex-col items-center gap-[2.222vw] bg-white px-[2.222vw] pb-[8.333vw]">
-            <h1 className="font-mixcase-unmixed text-[3.889vw] text-[#0D1922] w-[44.861vw] leading-[100%] tracking-[-0.05em] pt-[7.222vw]">
+          <div className='flex flex-col items-center gap-[2.222vw] bg-white px-[2.222vw] pb-[8.333vw] max-md:gap-[6.667vw] max-md:px-[4.444vw]'>
+            <h1
+              className='font-mixcase-unmixed text-[3.889vw] text-[#0D1922] w-[44.861vw] leading-[100%] tracking-[-0.05em] pt-[7.222vw] text-center
+            max-md:text-[6.667vw] max-md:w-full'
+            >
               Live central. Live centred
             </h1>
-            <p className="text-s text-[#0D1922B2] leading-[140%] tracking-[-0.02em] text-center whitespace-pre-line">
+            <p className='text-s text-[#0D1922B2] leading-[140%] tracking-[-0.02em] text-center 2xl:whitespace-pre-line'>
               {`Located in the heart of Dubai Marina, Rove Home Dubai Marina is where active
                 living meets modern convenience. Enjoy an energetic lifestyle surrounded by
                 trendy cafés, shops, and entertainment options – all within reach.`}
             </p>
             <motion.img
               ref={mapRef}
-              src="/images/about-complex/dubai-marina/central_map.jpg"
-              alt=""
-              className="rounded-3xl object-cover object-center aspect-[1376/609]"
-              initial={{ width: "47.083vw" }}
+              src='/images/about-complex/dubai-marina/central_map.png'
+              alt='central map'
+              className='rounded-3xl object-cover object-center aspect-[1376/609] max-md:hidden'
+              initial={{ width: '47.083vw' }}
               animate={
-                isMapInView ? { width: "95.556vw" } : { width: "47.083vw" }
+                isMapInView ? { width: '95.556vw' } : { width: '47.083vw' }
               }
-              transition={{ duration: 0.6, ease: "easeInOut" }}
+              transition={{ duration: 0.6, ease: 'easeInOut' }}
             />
+            <div className='min-md:hidden relative w-[89.167vw] aspect-square overflow-hidden rounded-2xl'>
+              <img
+                src='/images/about-complex/dubai-marina/central_map.png'
+                alt='central map'
+                className='w-full h-full object-cover object-center scale-120'
+              />
+              <div className='absolute bottom-[1.111vw] right-[1.111vw] w-[11.111vw] h-[11.111vw]'>
+                <FullScreenButton
+                  isFullScreen={false}
+                  onClick={() => {}}
+                  onFullScreenChange={() => {}}
+                />
+              </div>
+            </div>
           </div>
         </div>
       </motion.section>