diff --git a/src/components/AboutDubaiMarina.tsx b/src/components/AboutDubaiMarina.tsx
index f09e936..1a0fdd4 100644
--- a/src/components/AboutDubaiMarina.tsx
+++ b/src/components/AboutDubaiMarina.tsx
@@ -93,7 +93,7 @@ function AboutDubaiMarina() {
               {`Own the last slice of 
                       Dubai Marina, ROVE Style`}
             </h4>
-            <p className="text-s text-[#0D1922B2] max-md:whitespace-pre-line min-2xl:whitespace-pre-line max-2xl:w-[34vw]">
+            <p className="text-s text-[#0D1922B2] max-md:whitespace-pre-line 2xl:whitespace-pre-line max-2xl:w-[34vw]">
               {`With an extended playlist of life-enhancing
                   amenities, Rove Home is a complete ecosystem
                   that has everything you'll ever need.`}
@@ -108,7 +108,7 @@ function AboutDubaiMarina() {
           zIndex: 1,
         }}
       >
-        <div className="w-full min-md:overflow-x-hidden">
+        <div className="w-full md:overflow-x-hidden">
           <div className="flex flex-col items-center gap-[2.222vw] w-full max-md:py-[8.889vw] max-md:px-[4.444vw] max-2xl:p-6">
             <div className="space-y-8 md:hidden self-start">
               <h4 className="text-h4 text-[#00BED7] font-[500] whitespace-pre-line">
diff --git a/src/components/AboutMarasiDrive.tsx b/src/components/AboutMarasiDrive.tsx
index 1de4679..46326b0 100644
--- a/src/components/AboutMarasiDrive.tsx
+++ b/src/components/AboutMarasiDrive.tsx
@@ -29,10 +29,13 @@ function AboutMarasiDrive() {
     <div className="relative">
       <div className="2xl:sticky relative 2xl:top-[4.444vw]">
         <section className="w-full 2xl:h-[calc(100dvh-4.444vw)] relative md:h-[calc(100dvh-4rem)] h-[calc(100dvh-3.15rem)] flex flex-col justify-between bg-white 2xl:p-[2.222vw] 2xl:pt-[5vw] md:max-2xl:p-6 md:max-2xl:pt-10 p-4 pt-8 overflow-hidden">
-          
-          <div className="2xl:size-[140vw] md:size-[130vw] size-[120vw] rounded-full absolute 2xl:top-1/2 2xl:left-[104vw] md:top-[100%] left-1/2 top-[100%] md:left-1/2 -translate-x-1/2 -translate-y-1/2 bg-[#F3F3F2]"/>
-          <img src="/images/about-complex/marasi-drive/main_bg.png" alt="" className="absolute 2xl:top-[-23vw] 2xl:w-[80vw] 2xl:right-0 md:top-[-7vw] md:right-[-10vw] max-md:bottom-[0] right-[-10vw]" />
-          
+          <div className="2xl:size-[140vw] md:size-[130vw] size-[120vw] rounded-full absolute 2xl:top-1/2 2xl:left-[104vw] md:top-[100%] left-1/2 top-[100%] md:left-1/2 -translate-x-1/2 -translate-y-1/2 bg-[#F3F3F2]" />
+          <img
+            src="/images/about-complex/marasi-drive/main_bg.png"
+            alt=""
+            className="absolute 2xl:top-[-23vw] 2xl:w-[80vw] 2xl:right-0 md:top-[-7vw] md:right-[-10vw] max-md:bottom-[0] right-[-10vw]"
+          />
+
           <div className="2xl:space-y-[1.667vw] md:max-2xl:space-y-6 space-y-4 relative">
             <h1 className="2xl:text-[5vw] md:max-2xl:text-7xl text-[32px] leading-none tracking-[-0.07em] font-mixcase-unmixed font-medium whitespace-pre-line">
               {`Rove Home 
@@ -71,7 +74,6 @@ function AboutMarasiDrive() {
             </p>
           </div>
         </section>
-        
       </div>
       
       <div className="2xl:sticky relative 2xl:top-[-134vw]">
@@ -87,19 +89,32 @@ function AboutMarasiDrive() {
               destination for artful inspiration and cleverly activated spaces.`}
             </p>
           </div>
-          <div ref={homeSliderRef} className="flex max-2xl:flex-wrap max-2xl:justify-center 2xl:gap-[0.556vw] gap-2 md:max-2xl:w-[93.75vw] max-md:flex-row max-md:flex-nowrap max-md:overflow-x-scroll max-md:overflow-y-hidden max-md:justify-start max-md:snap-x max-md:snap-mandatory [&::-webkit-scrollbar]:h-[1.111vw] [&::-webkit-scrollbar]:w-[none] [&::-webkit-scrollbar-thumb]:bg-transparent [&::-webkit-scrollbar-thumb]:w-4 [&::-webkit-scrollbar-thumb]:rounded-full max-md:-mx-4 max-md:px-4">
+          <div
+            ref={homeSliderRef}
+            className="flex max-2xl:flex-wrap max-2xl:justify-center 2xl:gap-[0.556vw] gap-2 md:max-2xl:w-[93.75vw] max-md:flex-row max-md:flex-nowrap max-md:overflow-x-scroll max-md:overflow-y-hidden max-md:justify-start max-md:snap-x max-md:snap-mandatory [&::-webkit-scrollbar]:h-[1.111vw] [&::-webkit-scrollbar]:w-[none] [&::-webkit-scrollbar-thumb]:bg-transparent [&::-webkit-scrollbar-thumb]:w-4 [&::-webkit-scrollbar-thumb]:rounded-full max-md:-mx-4 max-md:px-4"
+          >
             {marasiDriveFeatures.map(({ image, name }) => (
-              <div key={name} className="relative 2xl:w-full md:w-[30.208vw] max-md:w-full max-md:max-w-[530px] max-md:flex-shrink-0 max-md:snap-center">
+              <div
+                key={name}
+                className="relative 2xl:w-full md:w-[30.208vw] max-md:w-full max-md:max-w-[530px] max-md:flex-shrink-0 max-md:snap-center"
+              >
                 <img
                   src={image}
                   alt={name}
                   className="object-cover object-center 2xl:rounded-[1.667vw] md:aspect-[232/316] max-md:!aspect-[328/287] max-md:rounded-2xl md:max-2xl:rounded-[3.125vw]"
                 />
-                <span className="md:hidden absolute bottom-[16px] text-white text-h5 left-1/2 -translate-x-1/2 text-center text-nowrap">{name}</span>
+                <span className="md:hidden absolute bottom-[16px] text-white text-h5 left-1/2 -translate-x-1/2 text-center text-nowrap">
+                  {name}
+                </span>
               </div>
             ))}
           </div>
-          <CustomScrollBar containerRef={homeSliderRef} inlinePadding={16} trackStyle="min-md:hidden" thumbStyle="min-md:hidden" />
+          <CustomScrollBar
+            containerRef={homeSliderRef}
+            inlinePadding={16}
+            trackStyle="md:hidden"
+            thumbStyle="md:hidden"
+          />
         </section>
         <section className="bg-white w-full overflow-clip flex flex-col 2xl:gap-[4.444vw] gap-12 2xl:pt-[9.444vw] 2xl:px-[2.222vw] 2xl:pb-[2.222vw] md:max-2xl:pt-[104px] md:max-2xl:px-6 md:max-2xl:pb-8 pt-16 px-4 pb-8">
           <div className="flex flex-col 2xl:gap-[2.222vw] md:max-2xl:gap-8 gap-6 items-center">
@@ -154,7 +169,7 @@ function AboutMarasiDrive() {
             </p>
           </div>
           <MarasiDriveInteriorsSlider />
-          <MarasiDriveInteriorsSliderMobile/>
+          <MarasiDriveInteriorsSliderMobile />
         </section>
       </div>
       
@@ -222,10 +237,10 @@ function AboutMarasiDrive() {
               />
             </div>
           </div>
-          <MarasiDriveMapMobile/>
+          <MarasiDriveMapMobile />
         </section>
         <section className="bg-white w-full overflow-clip flex items-stretch justify-center gap-[1.111vw] 2xl:px-[10.278vw] 2xl:pt-[9.444vw] 2xl:pb-[15vw] md:max-2xl:py-[104px] md:mx-2xl:px-6 max-md:pt-20 max-md:pb-12 px-4 max-2xl:flex-col-reverse md:max-2xl:gap-[6.25vw] md:max-2xl:px-6">
-          <div >
+          <div>
             <img
               src="/images/about-complex/marasi-drive/podium.png"
               className="object-cover size-full rounded-[1.667vw] max-md:mt-[48px] max-md:aspect-[328/400] max-md:rounded-[6.667vw] md:max-2xl:rounded-[3.125vw] md:max-2xl:aspect-[720/400]"
@@ -244,7 +259,9 @@ function AboutMarasiDrive() {
               </p>
             </div>
             <div className="space-y-[1.111vw]">
-              <h5 className="text-h5 font-medium max-md:mb-[16px] md:max-2xl:mb-[2.083vw]">Download our brochures</h5>
+              <h5 className="text-h5 font-medium max-md:mb-[16px] md:max-2xl:mb-[2.083vw]">
+                Download our brochures
+              </h5>
               <div className="space-y-[0.833vw] max-md:space-y-[3.333vw] md:max-2xl:space-y-[1.563vw]">
                 <BrochureButton
                   title={"Main Brochure"}
diff --git a/src/components/MarasiDriveInteriorsSliderMobile.tsx b/src/components/MarasiDriveInteriorsSliderMobile.tsx
index 7bdfd17..cb45c3d 100644
--- a/src/components/MarasiDriveInteriorsSliderMobile.tsx
+++ b/src/components/MarasiDriveInteriorsSliderMobile.tsx
@@ -2,28 +2,41 @@ import { marasiDriveInspiredInteriors } from "../data/aboutMarasiDrive";
 import CustomScrollBar from "./ui/ScrollBar";
 import { useRef } from "react";
 
-function MarasiDriveInteriorsSliderMobile(){
-    const interiorsRef = useRef<HTMLDivElement>(null)
+function MarasiDriveInteriorsSliderMobile() {
+  const interiorsRef = useRef<HTMLDivElement>(null);
 
-
-    return(
-        <>
-            <div ref={interiorsRef} className="max-md:flex hidden max-md:flex-nowrap max-md:overflow-x-scroll max-md:gap-x-[8px] max-md:overflow-y-hidden max-md:justify-start max-md:snap-x max-md:snap-mandatory [&::-webkit-scrollbar]:h-[1.111vw] [&::-webkit-scrollbar]:w-[none] [&::-webkit-scrollbar-thumb]:bg-transparent [&::-webkit-scrollbar-thumb]:w-4 [&::-webkit-scrollbar-thumb]:rounded-full max-md:-mx-4 max-md:px-4">
-                {marasiDriveInspiredInteriors.map(({ image, name }) => (
-                    <div key={name} className="relative md:max-2xl:w-[30.208vw] max-md:w-full max-md:max-w-[520px] max-md:flex-shrink-0 max-md:snap-center">
-                    <img
-                        src={image}
-                        alt={name}
-                        className="object-cover object-center 2xl:rounded-[1.667vw] max-md:!aspect-[328/430] max-md:rounded-2xl max-md:max-h-[690px]"
-                    />
-                    <div className="md:hidden text-black text-h5 mx-auto text-center text-nowrap mt-4 mb-6 font-medium">{name}</div>
-                    </div>
-                ))}
+  return (
+    <>
+      <div
+        ref={interiorsRef}
+        className="max-md:flex hidden max-md:flex-nowrap max-md:overflow-x-scroll max-md:gap-x-[8px] max-md:overflow-y-hidden max-md:justify-start max-md:snap-x max-md:snap-mandatory [&::-webkit-scrollbar]:h-[1.111vw] [&::-webkit-scrollbar]:w-[none] [&::-webkit-scrollbar-thumb]:bg-transparent [&::-webkit-scrollbar-thumb]:w-4 [&::-webkit-scrollbar-thumb]:rounded-full max-md:-mx-4 max-md:px-4"
+      >
+        {marasiDriveInspiredInteriors.map(({ image, name }) => (
+          <div
+            key={name}
+            className="relative md:max-2xl:w-[30.208vw] max-md:w-full max-md:max-w-[520px] max-md:flex-shrink-0 max-md:snap-center"
+          >
+            <img
+              src={image}
+              alt={name}
+              className="object-cover object-center 2xl:rounded-[1.667vw] max-md:!aspect-[328/430] max-md:rounded-2xl max-md:max-h-[690px]"
+            />
+            <div className="md:hidden text-black text-h5 mx-auto text-center text-nowrap mt-4 mb-6 font-medium">
+              {name}
             </div>
-            <CustomScrollBar containerRef={interiorsRef} inlinePadding={16} trackStyle="min-md:hidden" thumbStyle="min-md:hidden"/>
-        </>
-
-    )
+          </div>
+        ))}
+      </div>
+      {/* ))} */}
+      {/* </div> */}
+      <CustomScrollBar
+        containerRef={interiorsRef}
+        inlinePadding={16}
+        trackStyle="md:hidden"
+        thumbStyle="md:hidden"
+      />
+    </>
+  );
 }
 
-export default MarasiDriveInteriorsSliderMobile;
\ No newline at end of file
+export default MarasiDriveInteriorsSliderMobile;
diff --git a/src/components/MarasiDriveMapMobile.tsx b/src/components/MarasiDriveMapMobile.tsx
index cba7aec..2a18618 100644
--- a/src/components/MarasiDriveMapMobile.tsx
+++ b/src/components/MarasiDriveMapMobile.tsx
@@ -36,7 +36,12 @@ function MarasiDriveMapMobile() {
           </div>
         ))}
       </div>
-      <CustomScrollBar containerRef={containerRef} inlinePadding={16} trackStyle="min-2xl:hidden max-2xl:translate-y-5" thumbStyle="min-2xl:hidden"/>
+      <CustomScrollBar
+        containerRef={containerRef}
+        inlinePadding={16}
+        trackStyle="2xl:hidden max-2xl:translate-y-5"
+        thumbStyle="2xl:hidden"
+      />
     </div>
   );
 }
diff --git a/src/components/MarasiDriveNeighboursSliderMobile.tsx b/src/components/MarasiDriveNeighboursSliderMobile.tsx
index 4a918ad..0644373 100644
--- a/src/components/MarasiDriveNeighboursSliderMobile.tsx
+++ b/src/components/MarasiDriveNeighboursSliderMobile.tsx
@@ -2,27 +2,39 @@ import { marasiDriveNeighbours } from "../data/aboutMarasiDrive";
 import { useRef } from "react";
 import CustomScrollBar from "./ui/ScrollBar";
 
-function MarasiDriveNeighboursSliderMobile(){
-    const neighboursRef = useRef<HTMLDivElement>(null);
+function MarasiDriveNeighboursSliderMobile() {
+  const neighboursRef = useRef<HTMLDivElement>(null);
 
-
-    return(
-        <>
-            <div ref={neighboursRef} className="max-md:flex hidden max-md:flex-nowrap max-md:overflow-x-scroll max-md:gap-x-[8px] max-md:overflow-y-hidden max-md:justify-start max-md:snap-x max-md:snap-mandatory [&::-webkit-scrollbar]:h-[1.111vw] [&::-webkit-scrollbar]:w-[none] [&::-webkit-scrollbar-thumb]:bg-transparent [&::-webkit-scrollbar-thumb]:w-4 [&::-webkit-scrollbar-thumb]:rounded-full max-md:-mx-4 max-md:px-4">
-                {marasiDriveNeighbours.map(({ image, name }) => (
-                    <div key={name} className="relative md:max-2xl:w-[30.208vw] max-md:w-full max-md:max-w-[520px] max-md:flex-shrink-0 max-md:snap-center">
-                        <img
-                            src={image}
-                            alt={name}
-                            className="object-cover object-center 2xl:rounded-[1.667vw] max-md:!aspect-[328/430] max-md:rounded-2xl max-md:max-h-[690px]"
-                        />
-                        <div className="md:hidden text-black text-h5 mx-auto text-center text-nowrap mt-4 mb-6 font-medium">{name}</div>
-                    </div>
-                ))}
+  return (
+    <>
+      <div
+        ref={neighboursRef}
+        className="max-md:flex hidden max-md:flex-nowrap max-md:overflow-x-scroll max-md:gap-x-[8px] max-md:overflow-y-hidden max-md:justify-start max-md:snap-x max-md:snap-mandatory [&::-webkit-scrollbar]:h-[1.111vw] [&::-webkit-scrollbar]:w-[none] [&::-webkit-scrollbar-thumb]:bg-transparent [&::-webkit-scrollbar-thumb]:w-4 [&::-webkit-scrollbar-thumb]:rounded-full max-md:-mx-4 max-md:px-4"
+      >
+        {marasiDriveNeighbours.map(({ image, name }) => (
+          <div
+            key={name}
+            className="relative md:max-2xl:w-[30.208vw] max-md:w-full max-md:max-w-[520px] max-md:flex-shrink-0 max-md:snap-center"
+          >
+            <img
+              src={image}
+              alt={name}
+              className="object-cover object-center 2xl:rounded-[1.667vw] max-md:!aspect-[328/430] max-md:rounded-2xl max-md:max-h-[690px]"
+            />
+            <div className="md:hidden text-black text-h5 mx-auto text-center text-nowrap mt-4 mb-6 font-medium">
+              {name}
             </div>
-            <CustomScrollBar containerRef={neighboursRef} inlinePadding={16} trackStyle="min-md:hidden" thumbStyle="min-md:hidden"/>
-        </>
-    )
+          </div>
+        ))}
+      </div>
+      <CustomScrollBar
+        containerRef={neighboursRef}
+        inlinePadding={16}
+        trackStyle="md:hidden"
+        thumbStyle="md:hidden"
+      />
+    </>
+  );
 }
 
-export default MarasiDriveNeighboursSliderMobile
\ No newline at end of file
+export default MarasiDriveNeighboursSliderMobile;
diff --git a/src/components/Slider.tsx b/src/components/Slider.tsx
index 2de476c..afcb45b 100644
--- a/src/components/Slider.tsx
+++ b/src/components/Slider.tsx
@@ -96,7 +96,7 @@ function Slider({
             onlyIcon
             onClick={handlePreviousSlide}
             disabled={currentSlide === 0}
-            className="disabled:!text-opacity-40 disabled:!bg-[#fff] disabled:!bg-opacity-80 disabled:!cursor-default hover:bg-[#F3F3F2] transition-all duration-200"
+            className="disabled:!bg-[#fff] disabled:!bg-opacity-80 disabled:!cursor-default hover:bg-[#F3F3F2] transition-all duration-200"
           >
             <span className="size-5">
               <ArrowLeftIcon />
@@ -112,7 +112,7 @@ function Slider({
             disabled={
               currentSlide === dubaiMarinaSlider[categoryName].length - 1
             }
-            className="disabled:!text-opacity-40 disabled:!bg-[#fff] disabled:!bg-opacity-80 disabled:!cursor-default hover:bg-[#F3F3F2] transition-all duration-200"
+            className="disabled:!bg-[#fff] disabled:!bg-opacity-80 disabled:!cursor-default hover:bg-[#F3F3F2] transition-all duration-200"
           >
             <span className="size-5">
               <ArrowRightIcon />
diff --git a/src/components/SliderMobile.tsx b/src/components/SliderMobile.tsx
index 00662c7..0803fe8 100644
--- a/src/components/SliderMobile.tsx
+++ b/src/components/SliderMobile.tsx
@@ -1,11 +1,11 @@
-import { motion, useScroll, useTransform } from 'framer-motion';
-import Slider from './Slider';
-import { useRef } from 'react';
+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'],
+    offset: ["start start", "end end"],
   });
 
   const opacityFirstSlide = useTransform(
@@ -27,78 +27,78 @@ function SliderMobile() {
 
   return (
     <div
-      className='min-md:hidden flex flex-col gap-[6.667vw]'
+      className="md:hidden flex flex-col gap-[6.667vw]"
       ref={sliderMobileRef}
     >
       <motion.div
-        className='sticky top-[18vw] h-full flex flex-col gap-[6.667vw]'
+        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>
+        <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'
+            "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]'>
+        <p className="text-m text-center text-[#0D1922]/70 mt-[-2.222vw]">
           Unlock your inner zen in our wellness playground
         </p>
-        <Slider categoryName='Wellness' />
+        <Slider categoryName="Wellness" />
       </motion.div>
       <motion.div
-        className='sticky h-full top-[18vw] flex flex-col gap-[6.667vw] bg-white'
+        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>
+        <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'
+            "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]'>
+        <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' />
+        <Slider categoryName="Fitness" />
       </motion.div>
       <motion.div
-        className='sticky h-full top-[18vw] flex flex-col gap-[6.667vw] bg-white'
+        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>
+        <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'
+            "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'>
+        <p className="text-m text-center text-[#0D1922]/70 mt-[-2.222vw] h-10">
           Connect. Engage. Thrive.
         </p>
-        <Slider categoryName='Community' />
+        <Slider categoryName="Community" />
       </motion.div>
       <motion.div
-        className='sticky h-full top-[18vw] flex flex-col gap-[6.667vw] z-1 bg-white'
+        className="sticky h-full top-[18vw] flex flex-col gap-[6.667vw] z-1 bg-white"
         style={{ opacity: opacityFourthSlide }}
       >
-        <div className='h-[2px] bg-gray-300 w-full'></div>
+        <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'
+            "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'>
+        <p className="text-m text-center text-[#0D1922]/70 mt-[-2.222vw] h-10">
           Your smart living hub
         </p>
-        <Slider categoryName='Convenience' />
+        <Slider categoryName="Convenience" />
       </motion.div>
-      <div className='h-[40vw]'></div>
+      <div className="h-[40vw]"></div>
     </div>
   );
 }
diff --git a/src/components/UnitTypesSelect.tsx b/src/components/UnitTypesSelect.tsx
index 40d2af7..28a85df 100644
--- a/src/components/UnitTypesSelect.tsx
+++ b/src/components/UnitTypesSelect.tsx
@@ -35,7 +35,7 @@ function UnitTypesSelect({
             "2xl:px-[1.389vw] 2xl:py-[0.833vw] px-5 py-3 2xl:rounded-[2.778vw] rounded-[40px] 2xl:ring-[0.069vw] ring-1 transition-[box-shadow] cursor-pointer text-s",
             selectedUnitTypes.includes(unitType)
               ? "ring-[#00BED7]"
-              : "ring-[#E2E2DC] text-opacity-70"
+              : "ring-[#E2E2DC] text-[#0D1922]/70"
           )}
         >
           {formattedUnitTypes.get(unitType)}
diff --git a/src/components/ui/Badge.tsx b/src/components/ui/Badge.tsx
index 2540a19..b45db42 100644
--- a/src/components/ui/Badge.tsx
+++ b/src/components/ui/Badge.tsx
@@ -12,7 +12,7 @@ function Badge({ variant, text, className }: BadgeProps) {
       className={clsx(
         "2xl:rounded-[0.278vw] rounded-lg 2xl:px-[0.556vw] 2xl:py-[0.139vw] px-2 py-1 w-fit",
         variant === "primary" && "bg-[#00BED7] text-white",
-        variant === "secondary" && "bg-[#F3F3F2] text-opacity-70",
+        variant === "secondary" && "bg-[#F3F3F2] text-[#0D1922]/70",
         className
       )}
     >
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
index c9daaef..99e9e59 100644
--- a/src/components/ui/Button.tsx
+++ b/src/components/ui/Button.tsx
@@ -26,7 +26,7 @@ function Button({
       ref={ref}
       {...props}
       className={clsx(
-        "transition-all flex items-center justify-center disabled:text-opacity-40 disabled:bg-[#0D1922] disabled:bg-opacity-[8%] disabled:!cursor-default select-none text-btn-s",
+        "transition-all flex items-center justify-center disabled:text-[#0D1922]/40 disabled:bg-[#0D1922] disabled:bg-opacity-[8%] disabled:!cursor-default select-none text-btn-s",
         variant !== "link" && [
           size === "large" &&
             (onlyIcon
@@ -34,8 +34,8 @@ function Button({
               : "2xl:px-[1.111vw] 2xl:py-[0.833vw] 2xl:gap-[0.556vw] px-4 py-3 gap-2"),
           size === "medium" &&
             (onlyIcon
-              ? "2xl:p-[0.694vw] p-2.5"
-              : "2xl:px-[0.972vw] 2xl:py-[0.694vw] 2xl:gap-[0.278vw] px-3 py-2.5 gap-1"),
+              ? "2xl:p-[0.694vw] p-[10px]"
+              : "2xl:px-[0.972vw] 2xl:py-[0.694vw] 2xl:gap-[0.278vw] px-3 py-[10px] gap-1"),
           size === "small" &&
             (onlyIcon
               ? "2xl:p-[0.556vw] p-2"
@@ -43,13 +43,13 @@ function Button({
         ],
         variant === "link" && "text-sm text-black/50 w-fit",
         variant === "cta" &&
-          "bg-[#00BED7] hover:!bg-[#0AB3C9] text-white disabled:!bg-[#0D1922] disabled:!bg-opacity-[8%] disabled:text-opacity-40",
+          "bg-[#00BED7] hover:!bg-[#0AB3C9] text-white disabled:!bg-[#0D1922] disabled:!bg-opacity-[8%] disabled:text-[#0D1922]/40",
         variant === "primary" &&
           "bg-[#F3F3F2] active:!bg-[#00BED7] active:!text-[#FFFFFF] hover:!bg-[#E2E2DC] disabled:!bg-[#0D1922] disabled:!bg-opacity-[8%] disabled:!text-[#0D1922]/40",
         variant === "secondary" &&
-          "bg-white hover:!bg-white hover:bg-opacity-80 text-opacity-70 disabled:!bg-[#0D1922] disabled:!bg-opacity-[8%] disabled:text-[#0D1922]/40",
+          "bg-white hover:!bg-white hover:bg-opacity-80 text-[#0D1922]/70 disabled:!bg-[#0D1922] disabled:!bg-opacity-[8%] disabled:text-[#0D1922]/40",
         variant === "tertiary" &&
-          "text-xs leading-[135%] text-opacity-70 !px-0 hover:!text-opacity-100 disabled:!bg-transparent",
+          "text-xs leading-[135%] text-[#0D1922]/70 !px-0 hover:!text-[#0D1922] disabled:!bg-transparent",
         roundedFull ? "rounded-full" : "2xl:rounded-[0.833vw] rounded-xl",
         className
       )}
diff --git a/src/components/ui/MultiRangeSlider.tsx b/src/components/ui/MultiRangeSlider.tsx
index 6bfcbb1..e38888f 100644
--- a/src/components/ui/MultiRangeSlider.tsx
+++ b/src/components/ui/MultiRangeSlider.tsx
@@ -99,10 +99,10 @@ function MultiRangeSlider({
     <div className="2xl:space-y-[0.556vw] space-y-2">
       <p className="text-s text-[#0D1922]/70">{label}</p>
       <div className="bg-white/80 2xl:rounded-[0.833vw] rounded-xl relative 2xl:px-[1.111vw] 2xl:py-[0.972vw] px-4 py-3.5 flex justify-between 2xl:ring-[0.069vw] ring-1 ring-[#E2E2DC]">
-        <p className={clsx("text-s", disabled && "text-opacity-40")}>
+        <p className={clsx("text-s", disabled && "text-[#0D1922]/40")}>
           {Intl.NumberFormat("en").format(Math.ceil(value[0]))}
         </p>
-        <p className={clsx("text-s", disabled && "text-opacity-40")}>
+        <p className={clsx("text-s", disabled && "text-[#0D1922]/40")}>
           {Intl.NumberFormat("en").format(Math.ceil(value[1]))}
         </p>
         <div className="absolute bottom-0 left-0 w-full 2xl:px-[1.111vw] px-4 translate-y-1/2">
diff --git a/src/pages/SearchPage.tsx b/src/pages/SearchPage.tsx
index 680aba0..6206774 100644
--- a/src/pages/SearchPage.tsx
+++ b/src/pages/SearchPage.tsx
@@ -323,7 +323,7 @@ function SearchPage() {
                 window.location.href = "/search";
               }}
             >
-              <span className="2xl:size-[1.111vw] size-4 text-opacity-70">
+              <span className="2xl:size-[1.111vw] size-4 text-[#0D1922]/70">
                 <RestartIcon />
               </span>
               <span className="text-caption-m">Reset</span>