diff --git a/src/components/Slider.tsx b/src/components/Slider.tsx
index 02963c9..1c23048 100644
--- a/src/components/Slider.tsx
+++ b/src/components/Slider.tsx
@@ -3,6 +3,7 @@ import ArrowLeftIcon from './icons/ArrowLeftIcon';
 import ArrowRightIcon from './icons/ArrowRightIcon';
 import { dubaiMarinaSlider } from '../data/aboutDubaiMarina';
 import { AnimatePresence, motion } from 'motion/react';
+import Button from './ui/Button';
 
 function Slider({
   categoryName,
@@ -76,25 +77,33 @@ function Slider({
           </AnimatePresence>
         </div>
         <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'
+          <Button
+            variant='secondary'
+            onlyIcon
             onClick={handlePreviousSlide}
+            disabled={currentSlide === 0}
+            className='disabled:!text-[#0D1922]/40 disabled:!bg-[#fff]/80 disabled:!cursor-default hover:bg-[#F3F3F2] transition-all duration-200'
           >
             <span className='w-5 h-5'>
               <ArrowLeftIcon />
             </span>
-          </div>
+          </Button>
           <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'
+          <Button
+            variant='secondary'
+            onlyIcon
             onClick={handleNextSlide}
+            disabled={
+              currentSlide === dubaiMarinaSlider[categoryName].length - 1
+            }
+            className='disabled:!text-[#0D1922]/40 disabled:!bg-[#fff]/80 disabled:!cursor-default hover:bg-[#F3F3F2] transition-all duration-200'
           >
             <span className='w-5 h-5'>
               <ArrowRightIcon />
             </span>
-          </div>
+          </Button>
         </div>
       </div>
     </div>