diff --git a/public/images/aboutCompany/roveHomeSlider/1.png b/public/images/aboutCompany/roveHomeSlider/1.png
new file mode 100644
index 0000000..b025108
Binary files /dev/null and b/public/images/aboutCompany/roveHomeSlider/1.png differ
diff --git a/public/images/aboutCompany/roveHomeSlider/2.png b/public/images/aboutCompany/roveHomeSlider/2.png
new file mode 100644
index 0000000..8cf4653
Binary files /dev/null and b/public/images/aboutCompany/roveHomeSlider/2.png differ
diff --git a/public/images/aboutCompany/roveHomeSlider/3.png b/public/images/aboutCompany/roveHomeSlider/3.png
new file mode 100644
index 0000000..f035302
Binary files /dev/null and b/public/images/aboutCompany/roveHomeSlider/3.png differ
diff --git a/public/images/aboutCompany/roveHomeSlider/4.png b/public/images/aboutCompany/roveHomeSlider/4.png
new file mode 100644
index 0000000..50eeda5
Binary files /dev/null and b/public/images/aboutCompany/roveHomeSlider/4.png differ
diff --git a/src/components/aboutComplex/LivingSolutionSlider.tsx b/src/components/aboutComplex/LivingSolutionSlider.tsx
index c2183e8..9703b32 100644
--- a/src/components/aboutComplex/LivingSolutionSlider.tsx
+++ b/src/components/aboutComplex/LivingSolutionSlider.tsx
@@ -67,7 +67,7 @@ const LivingSolutionSlider = () => {
   }, [imageWidth, selectedImageIndex, window.innerWidth]);
 
   return (
-    <div className="flex flex-col gap-6 " {...handlers}>
+    <div className="flex flex-col gap-6" {...handlers}>
       <div
         className="relative col-span-full overflow-x-hidden flex flex-col"
         style={{ height: "clamp(30rem, 12.6318rem + 21.6933vw, 75rem)" }}
diff --git a/src/components/aboutComplex/RoveHomeSlider.tsx b/src/components/aboutComplex/RoveHomeSlider.tsx
new file mode 100644
index 0000000..561c8e4
--- /dev/null
+++ b/src/components/aboutComplex/RoveHomeSlider.tsx
@@ -0,0 +1,164 @@
+import { useEffect, useRef, useState } from "react";
+import Button from "../Button";
+import LeftArrowIcon from "../icons/LeftArrowIcon";
+import RightArrowIcon from "../icons/RightArrowIcon";
+import { useSwipeable } from "react-swipeable";
+
+interface IRoveHomeSlide {
+  src: string;
+  title: string;
+  desc1: string;
+  desc2: string;
+  id: string;
+}
+
+const rovehomeSlides: IRoveHomeSlide[] = [
+  {
+    id: "1",
+    src: "/images/aboutCompany/roveHomeSlider/1.png",
+    title: "Rove Home",
+    desc2:
+      "We’ve handpicked prime locations to ensure you get the very best. From interiors that uplift and energise, and amenities that are thoughtful and engaging to contemporarily stylish yet cosy apartments, we decided that this is the kind of place where we’d like to live – so we set out to build exactly that. We think you’ll agree.",
+    desc1:
+      "Rove Home branded residences are an extension of the Rove Hotels brand. These branded residences are for hassle-free living, with personalized expressions of your ideal living environment. ",
+  },
+  {
+    id: "2",
+    src: "/images/aboutCompany/roveHomeSlider/2.png",
+    title: "Marasi Dri",
+    desc2:
+      "Marasi Drive’s proximity to Downtown Dubai, grants easy access to its iconic attractions, its strategic location ensures seamless connectivity to Al Khail Road and Sheikh Zayed Road, facilitating effortless travel across the city and beyond",
+    desc1:
+      "The dynamic essence of Rove comes to life at an all new address - Marasi Drive, Business Bay. Enjoy an urban living experience beyond the ordinary. Join us on this exciting journey as we unfold innovations transforming your daily moments into unforgettable living experiences in true Rove style. Enjoy every facet of contemporary lifestyle living, prioritizing value, efficiency, and a vibrant atmosphere. It is more than just a home.",
+  },
+  {
+    id: "3",
+    src: "/images/aboutCompany/roveHomeSlider/3.png",
+    title: "A home for the young and young-at-heart",
+    desc2:
+      "Enjoy every facet of contemporary lifestyle living, prioritizing value, efficiency, and a vibrant atmosphere. It is more than just a home.",
+    desc1:
+      "The dynamic essence of Rove comes to life at an all new address - Marasi Drive, Business Bay. Enjoy an urban living experience beyond the ordinary. Join us on this exciting journey as we unfold innovations transforming your daily moments into unforgettable living experiences in true Rove style. ",
+  },
+  {
+    id: "4",
+    src: "/images/aboutCompany/roveHomeSlider/4.png",
+    title: "Unique and innovative",
+    desc2:
+      "Our commitment to shaping a space that tickles your artistic sensibilities and ignites your love for innovation is unparalleled. It’s a place that would surely excite and delight Rovers like no other!",
+    desc1:
+      "At Rove Home Marasi Drive, you can feel the exhilaration in the atmosphere! We’ve expertly crafted an urban oasis where captivating design, vibrant art, and cutting-edge technology come together seamlessly.",
+  },
+];
+
+const RoveHomeSlider = () => {
+  const [offset, setOffset] = useState(0);
+  const [imageWidth, setImageWidth] = useState(0);
+  const imageRef = useRef<HTMLImageElement>(null);
+
+  const handlers = useSwipeable({
+    onSwipedLeft: next,
+    onSwipedRight: prev,
+    trackMouse: true,
+  });
+
+  function next() {
+    if (offset > -1 * (rovehomeSlides.length - 1)) {
+      setOffset((prev) => prev - 1);
+    }
+  }
+
+  function prev() {
+    if (offset < 0) {
+      setOffset((prev) => prev + 1);
+    }
+  }
+
+  // const handleOnRightClick = () => {
+  //   if (offset > -1 * (rovehomeSlides.length - 1)) {
+  //     setOffset((prev) => prev - 1);
+  //   }
+  // };
+
+  // const handleOnLeftClick = () => {
+  //   if (offset < 0) {
+  //     setOffset((prev) => prev + 1);
+  //   }
+  // };
+
+  useEffect(() => {
+    if (!imageRef.current) return;
+    const width = imageRef.current.width;
+    setImageWidth(width);
+  }, [imageRef.current?.width]);
+
+  return (
+    <div
+      className="col-span-full relative xl:aspect-video sm:aspect-[7.6/10] grid grid-cols-12 items-end pb-6 sm:pl-4 sm:px-0 px-4"
+      {...handlers}
+    >
+      {/* <div className="absolute w-full h-full z-50" ></div> */}
+      <div className="bg-[#F3F3F2] select-none p-8 z-50 xl:col-span-3 col-span-6 xl:col-start-3 rounded-2xl xl:min-h-[520px] sm:flex hidden flex-col justify-between">
+        <div>
+          <h2 className="text-subheadline-m font-semibold text-[#00BED7] pb-4 ">
+            {rovehomeSlides[offset * -1].title}
+          </h2>
+          <p className="text-[#73787C] text-m ">
+            {rovehomeSlides[offset * -1].desc1}
+          </p>
+          <p className="text-[#73787C] text-m pt-4">
+            {rovehomeSlides[offset * -1].desc2}
+          </p>
+        </div>
+        <div className="flex justify-between items-end justify-self-end">
+          <div className="flex gap-3 pt-8">
+            <Button icon={<LeftArrowIcon />} onClick={prev} />
+            <Button icon={<RightArrowIcon />} onClick={next} />
+          </div>
+          <p className="text-l text-[#00BED7]">
+            {rovehomeSlides.length - rovehomeSlides.length + 1 - offset}/
+            {rovehomeSlides.length}
+          </p>
+        </div>
+      </div>
+      <div className="sm:absolute lg:w-[calc(100vw-5px)] sm:w-screen w-[calc(100vw-32px)] overflow-hidden xl:aspect-video sm:aspect-[7.6/10]  rounded-2xl sm:rounded-ee-2xl sm:rounded-es-2xl rounded-ee-none rounded-es-none">
+        <div
+          className="w-fit flex transition-transform duration-300 ease-in-out"
+          style={{ transform: `translateX(${offset * imageWidth}px)` }}
+        >
+          {rovehomeSlides.map((slide) => (
+            <div className="flex w-screen flex-col select-none">
+              <img
+                ref={imageRef}
+                key={slide.id}
+                src={slide.src}
+                alt=""
+                className="select-none pointer-events-none xl:aspect-video sm:aspect-[7.6/10] aspect-video object-cover xl:h-auto"
+              />
+              <div className="flex p-4 flex-col gap-3 bg-white rounded-ee-2xl rounded-es-2xl  sm:w-full w-[calc(100vw-32px)] h-full sm:hidden">
+                <h2 className="text-[#00BED7] font-semibold text-subheadline-m">
+                  {slide.title}
+                </h2>
+                <p className="mobile-text-s text-[#73787C]">{slide.desc1}</p>
+                <p className="mobile-text-s text-[#73787C]">{slide.desc2}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+        <div className="flex gap-1 justify-center pt-4 ">
+          {rovehomeSlides.map((_, index) => (
+            <div
+              className={`rounded-full transition-all duration-300 ease-in-out sm:hidden ${
+                offset === -1 * index
+                  ? "bg-[#0D1922] w-6"
+                  : "bg-[#0D192266] w-2"
+              }   h-2`}
+            ></div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RoveHomeSlider;
diff --git a/src/index.css b/src/index.css
index 81d7b83..0eefd44 100644
--- a/src/index.css
+++ b/src/index.css
@@ -74,6 +74,14 @@ html {
   .text-button-m {
   }
 
+  .mobile-text-s {
+    font-family: "Usual", sans-serif;
+    line-height: 140%;
+    font-size: clamp(10px, 0.01rem + 0.93vw, 20px);
+  }
+
+  .mobile-subheadline-m {
+  }
   .rubber-headline-indent {
     text-indent: clamp(209px, -0.4197rem + 16.8396vw, 842px);
   }
diff --git a/src/pages/AboutComplex.tsx b/src/pages/AboutComplex.tsx
index 88753ad..639a072 100644
--- a/src/pages/AboutComplex.tsx
+++ b/src/pages/AboutComplex.tsx
@@ -3,6 +3,7 @@ import Footer from "../components/Footer";
 import Button from "../components/Button";
 import LeftArrowIcon from "../components/icons/LeftArrowIcon";
 import LivingSolutionSlider from "../components/aboutComplex/LivingSolutionSlider";
+import RoveHomeSlider from "../components/aboutComplex/RoveHomeSlider";
 
 interface ICityItem {
   time: number;
@@ -158,13 +159,7 @@ const AboutComplex = () => {
           </div>
         </div>
         {/* RoveHome roof */}
-        <div className="col-span-full">
-          <img
-            src="/images/aboutCompany/rovehome_roof.png"
-            alt=""
-            className="w-full"
-          />
-        </div>
+        <RoveHomeSlider />
         {/* Rove around the city */}
         <div className="col-span-full px-6 grid grid-cols-12 xl:pt-[100px] sm:pt-16 pt-14">
           <div className="text-caption-m font-semibold text-[#73787C] xl:col-span-1 col-span-full uppercase pb-3">