diff --git a/package.json b/package.json
index 8c9a64b..09aad1c 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "react-dom": "^18.2.0",
     "react-image-marker": "^1.2.0",
     "react-router-dom": "^6.22.3",
+    "react-swipeable": "^7.0.1",
     "react-zoom-pan-pinch": "^3.4.4",
     "usehooks-ts": "^3.1.0",
     "zustand": "^4.5.2"
diff --git a/public/images/company/slider/1.png b/public/images/company/slider/1.png
new file mode 100644
index 0000000..1b3b8bb
Binary files /dev/null and b/public/images/company/slider/1.png differ
diff --git a/public/images/company/slider/2.png b/public/images/company/slider/2.png
new file mode 100644
index 0000000..d93af0e
Binary files /dev/null and b/public/images/company/slider/2.png differ
diff --git a/public/images/company/slider/3.png b/public/images/company/slider/3.png
new file mode 100644
index 0000000..1b3b8bb
Binary files /dev/null and b/public/images/company/slider/3.png differ
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 00be012..6c71813 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -24,7 +24,9 @@ const Button = ({
 
   return (
     <button
-      className={`min-w-[50px] py-3 px-6 transition-[background] duration-300 ease-in-out rounded-lg text-s ${backgroundColor} ${backgroundHoverColor} ${textColor} ${
+      className={`min-w-[40px] ${
+        icon && !text ? "p-[10px]" : "py-3 px-6"
+      }  transition-[background] duration-300 ease-in-out rounded-lg text-s ${backgroundColor} ${backgroundHoverColor} ${textColor} ${
         className ? className : ""
       }`}
     >
diff --git a/src/components/companyPage/OurValues.tsx b/src/components/companyPage/OurValues.tsx
deleted file mode 100644
index 82b4c80..0000000
--- a/src/components/companyPage/OurValues.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-const OurValues = () => {
-  return (
-    <div className="grid grid-cols-12 xl:px-6 px-4 gap-4 xl:gap-y-6 gap-y-35">
-      <div className="xl:h-full uppercase text-[#73787C] font-semibold xl:col-span-1 col-span-full text-caption-m">
-        our values
-      </div>
-      <div className="bg-white xl:col-start-3 xl:col-span-3 sm:col-span-4 col-span-full p-7 rounded-2xl">
-        <div className="flex justify-between items-start pb-[50px]">
-          <p className="text-subheadline-l font-bold text-[#0D1922]">Trust</p>
-          <p className="text-caption-m font-semibold text-[#73787C]">(1)</p>
-        </div>
-        <div className="flex flex-col gap-3 text-[#73787C] text-caption-m font-semibold">
-          <p>
-            Trust is the cornerstone of IRTH's foundation. We uphold an
-            unshakeable commitment to transparency, integrity, and ethical
-            practices in every facet of our operations.
-          </p>
-          <p>
-            Through open communication and responsible stewardship, we build
-            enduring relationships with our stakeholders and business partners,
-            ensuring that trust is at the heart of every interaction.
-          </p>
-        </div>
-      </div>
-      <div className="bg-white xl:col-span-3 sm:col-span-4 col-span-full p-7 rounded-2xl">
-        <div className="flex justify-between items-start pb-[50px]">
-          <p className="text-subheadline-l font-bold text-[#0D1922]">
-            Strength
-          </p>
-          <p className="text-caption-m font-semibold text-[#73787C]">(2)</p>
-        </div>
-        <div className="flex flex-col gap-3 text-[#73787C] text-caption-m font-semibold">
-          <p>
-            Strength isn't just a physical attribute; it's a reflection of our
-            resilience, determination, and unwavering resolve.
-          </p>
-          <p>
-            At IRTH, we harness the strength of our heritage, experience, and
-            expertise to overcome challenges and seize opportunities. With a
-            robust foundation, we stand strong, poised to create lasting impact
-            and achieve remarkable results
-          </p>
-        </div>
-      </div>
-      <div className="bg-white xl:col-span-3 sm:col-span-4 col-span-full p-7 rounded-2xl">
-        <div className="flex justify-between items-start pb-[50px]">
-          <p className="text-subheadline-l font-bold text-[#0D1922]">Agility</p>
-          <p className="text-caption-m font-semibold text-[#73787C]">(3)</p>
-        </div>
-        <div className="flex flex-col gap-3 text-[#73787C] text-caption-m font-semibold">
-          <p>
-            In a rapidly evolving landscape, adaptability is paramount. IRTH
-            embraces agility as a guiding principle, allowing us to swiftly
-            respond to changing dynamics and emerging trends.
-          </p>
-          <p>
-            Our flexible mindset empowers us to navigate complexities, explore
-            new avenues, and innovate with confidence, ensuring that we remain
-            at the forefront of progress.
-          </p>
-        </div>
-      </div>
-      <div className="text-subheadline-m font-semibold text-[#00BED7] xl:col-start-3 xl:col-span-6 col-span-full 2xl:pb-[140px] xl:pb-[120px] sm:pb-[100px] pb-20">
-        These core values not only shape our identity but also drive our
-        actions, decisions, and aspirations as we shape the future of real
-        estate with dedication and purpose.
-      </div>
-      <div className="col-span-full grid xl:grid-cols-12 grid-cols-8 border-y gap-4 sm:py-5 xl:py-6 xl:mb-[120px] 2xl:mb-[140px] mb-[100px]">
-        <div className="2xl:col-start-3 2xl:col-span-5 xl:col-span-6 xl:col-start-3 sm:col-start-4 sm:col-span-5 col-span-full order-2 xl:order-1 ">
-          <img
-            src="./images/company/9.png"
-            alt="9"
-            className="object-cover rounded-2xl w-full"
-          />
-        </div>
-        <div className="flex flex-col 2xl:col-start-8 xl:col-start-9 sm:col-start-1 sm:col-span-3 col-span-full order-1 xl:order-2 ">
-          <h2 className="text-subheadline-l font-bold xl:pb-2 pb-1">
-            Osman Celiker
-          </h2>
-          <div className="flex gap-1 items-center xl:pb-8 pb-6">
-            <div className="bg-[#00BED7] w-3 h-3 rounded-full"></div>
-            <div className="text-m">Managing Director, IRTH</div>
-          </div>
-          <div className="text-[#73787C] text-s pb-4">
-            Osman Celiker, the Managing Director of IRTH, possesses a robust
-            history in real estate development, both on a local and
-            international scale.
-          </div>
-          <div className="text-[#73787C] text-s">
-            Osman oversees a skilled and seasoned development team responsible
-            for crafting remarkable projects. This team has brought to life many
-            local and international projects.
-          </div>
-        </div>
-      </div>
-      <div className="xl:h-full uppercase text-[#73787C] font-semibold xl:col-span-1 col-span-full text-caption-m">
-        our values
-      </div>
-      <div className="grid xl:grid-cols-10 grid-cols-8 xl:col-span-10 col-span-full xl:col-start-3  border gap-6">
-        <div className="2xl:col-span-4 xl:col-span-5 col-span-6 text-[#00BED7] font-bold text-subheadline-m ">
-          Nestled at the pulsating core of Dubai, IRTH’s headquarters finds its
-          strategic abode within the iconic masterpiece, The Opus, envisioned by
-          the architectural virtuoso Zaha Hadid.
-        </div>
-        <div className="2xl:col-span-4 2xl:col-start-1 xl:col-start-1 xl:col-span-5 col-span-6 text-[#73787C] text-s">
-          This exceptional location mirrors our commitment to being at the
-          forefront of innovation and design, reflecting the very essence of our
-          brand. Just as The Opus stands as a testament to architectural
-          brilliance, IRTH’s presence within it signifies our dedication to
-          crafting exceptional legacies within the world of real estate.
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default OurValues;
diff --git a/src/components/companyPage/OurValues/OurValues.tsx b/src/components/companyPage/OurValues/OurValues.tsx
new file mode 100644
index 0000000..57facb6
--- /dev/null
+++ b/src/components/companyPage/OurValues/OurValues.tsx
@@ -0,0 +1,124 @@
+import Slider from "./Slider";
+const OurValues = () => {
+  return (
+    <div>
+      <div className="grid grid-cols-12 xl:px-6 px-4 gap-4 xl:gap-y-6 gap-y-35">
+        <div className="xl:h-full uppercase text-[#73787C] font-semibold xl:col-span-1 col-span-full text-caption-m">
+          our values
+        </div>
+        <div className="bg-white xl:col-start-3 xl:col-span-3 sm:col-span-4 col-span-full p-7 rounded-2xl">
+          <div className="flex justify-between items-start pb-[50px]">
+            <p className="text-subheadline-l font-bold text-[#0D1922]">Trust</p>
+            <p className="text-caption-m font-semibold text-[#73787C]">(1)</p>
+          </div>
+          <div className="flex flex-col gap-3 text-[#73787C] text-caption-m font-semibold">
+            <p>
+              Trust is the cornerstone of IRTH's foundation. We uphold an
+              unshakeable commitment to transparency, integrity, and ethical
+              practices in every facet of our operations.
+            </p>
+            <p>
+              Through open communication and responsible stewardship, we build
+              enduring relationships with our stakeholders and business
+              partners, ensuring that trust is at the heart of every
+              interaction.
+            </p>
+          </div>
+        </div>
+        <div className="bg-white xl:col-span-3 sm:col-span-4 col-span-full p-7 rounded-2xl">
+          <div className="flex justify-between items-start pb-[50px]">
+            <p className="text-subheadline-l font-bold text-[#0D1922]">
+              Strength
+            </p>
+            <p className="text-caption-m font-semibold text-[#73787C]">(2)</p>
+          </div>
+          <div className="flex flex-col gap-3 text-[#73787C] text-caption-m font-semibold">
+            <p>
+              Strength isn't just a physical attribute; it's a reflection of our
+              resilience, determination, and unwavering resolve.
+            </p>
+            <p>
+              At IRTH, we harness the strength of our heritage, experience, and
+              expertise to overcome challenges and seize opportunities. With a
+              robust foundation, we stand strong, poised to create lasting
+              impact and achieve remarkable results
+            </p>
+          </div>
+        </div>
+        <div className="bg-white xl:col-span-3 sm:col-span-4 col-span-full p-7 rounded-2xl">
+          <div className="flex justify-between items-start pb-[50px]">
+            <p className="text-subheadline-l font-bold text-[#0D1922]">
+              Agility
+            </p>
+            <p className="text-caption-m font-semibold text-[#73787C]">(3)</p>
+          </div>
+          <div className="flex flex-col gap-3 text-[#73787C] text-caption-m font-semibold">
+            <p>
+              In a rapidly evolving landscape, adaptability is paramount. IRTH
+              embraces agility as a guiding principle, allowing us to swiftly
+              respond to changing dynamics and emerging trends.
+            </p>
+            <p>
+              Our flexible mindset empowers us to navigate complexities, explore
+              new avenues, and innovate with confidence, ensuring that we remain
+              at the forefront of progress.
+            </p>
+          </div>
+        </div>
+        <div className="text-subheadline-m font-semibold text-[#00BED7] xl:col-start-3 xl:col-span-6 col-span-full 2xl:pb-[140px] xl:pb-[120px] sm:pb-[100px] pb-20">
+          These core values not only shape our identity but also drive our
+          actions, decisions, and aspirations as we shape the future of real
+          estate with dedication and purpose.
+        </div>
+        <div className="col-span-full grid xl:grid-cols-12 grid-cols-8 border-y gap-4 sm:py-5 xl:py-6 xl:mb-[120px] 2xl:mb-[140px] mb-[100px]">
+          <div className="2xl:col-start-3 2xl:col-span-5 xl:col-span-6 xl:col-start-3 sm:col-start-4 sm:col-span-5 col-span-full order-2 xl:order-1 ">
+            <img
+              src="./images/company/9.png"
+              alt="9"
+              className="object-cover rounded-2xl w-full"
+            />
+          </div>
+          <div className="flex flex-col 2xl:col-start-8 xl:col-start-9 sm:col-start-1 sm:col-span-3 col-span-full order-1 xl:order-2 ">
+            <h2 className="text-subheadline-l font-bold xl:pb-2 pb-1">
+              Osman Celiker
+            </h2>
+            <div className="flex gap-1 items-center xl:pb-8 pb-6">
+              <div className="bg-[#00BED7] w-3 h-3 rounded-full"></div>
+              <div className="text-m">Managing Director, IRTH</div>
+            </div>
+            <div className="text-[#73787C] text-s pb-4">
+              Osman Celiker, the Managing Director of IRTH, possesses a robust
+              history in real estate development, both on a local and
+              international scale.
+            </div>
+            <div className="text-[#73787C] text-s">
+              Osman oversees a skilled and seasoned development team responsible
+              for crafting remarkable projects. This team has brought to life
+              many local and international projects.
+            </div>
+          </div>
+        </div>
+        <div className="xl:h-full uppercase text-[#73787C] font-semibold xl:col-span-1 col-span-full text-caption-m">
+          our values
+        </div>
+        <div className="grid xl:grid-cols-10 grid-cols-8 xl:col-span-10 col-span-full xl:col-start-3 gap-6">
+          <div className="2xl:col-span-4 xl:col-span-5 col-span-6 text-[#00BED7] font-bold text-subheadline-m ">
+            Nestled at the pulsating core of Dubai, IRTH’s headquarters finds
+            its strategic abode within the iconic masterpiece, The Opus,
+            envisioned by the architectural virtuoso Zaha Hadid.
+          </div>
+          <div className="2xl:col-span-4 2xl:col-start-1 xl:col-start-1 xl:col-span-5 col-span-6 text-[#73787C] text-s">
+            This exceptional location mirrors our commitment to being at the
+            forefront of innovation and design, reflecting the very essence of
+            our brand. Just as The Opus stands as a testament to architectural
+            brilliance, IRTH’s presence within it signifies our dedication to
+            crafting exceptional legacies within the world of real estate.
+          </div>
+        </div>
+      </div>
+      <Slider />
+    </div>
+  );
+};
+
+export default OurValues;
diff --git a/src/components/companyPage/OurValues/Slider.tsx b/src/components/companyPage/OurValues/Slider.tsx
new file mode 100644
index 0000000..e05a2e0
--- /dev/null
+++ b/src/components/companyPage/OurValues/Slider.tsx
@@ -0,0 +1,73 @@
+import { useSwipeable } from "react-swipeable";
+import { Image } from "../../../types/image";
+import { useLayoutEffect, useRef, useState } from "react";
+import Button from "../../Button";
+import RightArrowIcon from "../../icons/RightArrowIcon";
+import LeftArrowSliderIcon from "../../icons/LeftArrowSliderIcon";
+
+const images: Image[] = [
+  { id: "1", src: "./images/company/slider/1.png" },
+  { id: "2", src: "./images/company/slider/2.png" },
+  { id: "3", src: "./images/company/slider/3.png" },
+];
+
+const Slider = () => {
+  const [selectedImageIndex, setSelectedImageIndex] = useState(-1);
+  const [imageWidth, setImageWidth] = useState(0);
+  const imageRef = useRef<HTMLImageElement>(null);
+
+  useLayoutEffect(() => {
+    if (!imageRef.current?.src) return;
+    const width = imageRef.current.clientWidth;
+    setImageWidth(width);
+  }, [imageRef]);
+
+  const handlers = useSwipeable({
+    onSwipedLeft: next,
+    onSwipedRight: prev,
+    trackMouse: true,
+  });
+
+  function next() {
+    if (selectedImageIndex === images.length - 2) return;
+    setSelectedImageIndex((prev) => prev + 1);
+  }
+
+  function prev() {
+    if (selectedImageIndex === -1) return;
+    setSelectedImageIndex((prev) => prev - 1);
+  }
+
+  return (
+    <div
+      className="relative col-span-full overflow-x-hidden"
+      style={{ height: "clamp(30rem, 12.6318rem + 21.6933vw, 75rem)" }}
+    >
+      <div
+        className="flex gap-4 w-full absolute h-full transition-all duration-300 ease-in-out"
+        style={{
+          right: `calc(clamp(315px, 6.5317rem + 16.4319vw, 420px) + ${
+            selectedImageIndex * imageWidth
+          }px)`,
+        }}
+        {...handlers}
+      >
+        {images.map((image) => (
+          <img
+            ref={imageRef}
+            src={image.src}
+            alt=""
+            key={image.id}
+            className="rounded-2xl aspect-[6/5] object-cover 2xl:w-[calc(100vw*1/2)] xl:w-[calc(100vw*5/12)]"
+          />
+        ))}
+      </div>
+      {/* <Button
+        icon={<LeftArrowSliderIcon />}
+        className="top-0 slider-offset absolute text-[#73787C]"
+      /> */}
+    </div>
+  );
+};
+
+export default Slider;
diff --git a/src/components/icons/LeftArrowSliderIcon.tsx b/src/components/icons/LeftArrowSliderIcon.tsx
new file mode 100644
index 0000000..1e88d3e
--- /dev/null
+++ b/src/components/icons/LeftArrowSliderIcon.tsx
@@ -0,0 +1,21 @@
+const LeftArrowSliderIcon = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6 12L18 12M6 12L12.3636 6M6 12L12.3636 18"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default LeftArrowSliderIcon;
diff --git a/src/components/icons/RightArrowSliderIcon.tsx b/src/components/icons/RightArrowSliderIcon.tsx
new file mode 100644
index 0000000..69eeb6b
--- /dev/null
+++ b/src/components/icons/RightArrowSliderIcon.tsx
@@ -0,0 +1,21 @@
+const RightArrowSliderIcon = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M18 12L6 12M18 12L11.6364 18M18 12L11.6364 6"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default RightArrowSliderIcon;
diff --git a/src/index.css b/src/index.css
index 7f281fc..6be675e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -66,4 +66,9 @@ body {
   .rubber-headline-indent {
     text-indent: clamp(209px, -0.4197rem + 16.8396vw, 842px);
   }
+
+  .slider-offset {
+    /* left: clamp(315px, 6.5317rem + 16.4319vw, 281px); */
+    left: clamp(315px, 6.5317rem + 16.4319vw, 420px);
+  }
 }
diff --git a/src/pages/Company.tsx b/src/pages/Company.tsx
index 1c321d4..16a608b 100644
--- a/src/pages/Company.tsx
+++ b/src/pages/Company.tsx
@@ -1,7 +1,7 @@
 import { isMobile } from "react-device-detect";
 import OurStory from "../components/companyPage/OurStory";
 import InvestmentPortfolio from "../components/companyPage/InvestmentPortfolio";
-import OurValues from "../components/companyPage/OurValues";
+import OurValues from "../components/companyPage/OurValues/OurValues";
 
 const Company = () => {
   return (
diff --git a/src/types/image.ts b/src/types/image.ts
new file mode 100644
index 0000000..20c937a
--- /dev/null
+++ b/src/types/image.ts
@@ -0,0 +1,6 @@
+interface Image {
+  src: string;
+  id: string;
+}
+
+export type { Image };
diff --git a/yarn.lock b/yarn.lock
index c610e60..d8977ea 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1814,6 +1814,11 @@ react-router@6.22.3:
   dependencies:
     "@remix-run/router" "1.15.3"
 
+react-swipeable@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/react-swipeable/-/react-swipeable-7.0.1.tgz#cd299f5986c5e4a7ee979839658c228f660e1e0c"
+  integrity sha512-RKB17JdQzvECfnVj9yDZsiYn3vH0eyva/ZbrCZXZR0qp66PBRhtg4F9yJcJTWYT5Adadi+x4NoG53BxKHwIYLQ==
+
 react-zoom-pan-pinch@^3.4.4:
   version "3.4.4"
   resolved "https://registry.yarnpkg.com/react-zoom-pan-pinch/-/react-zoom-pan-pinch-3.4.4.tgz#5450b027dbf9f161773cde71b061423ff1109328"