diff --git a/src/modules/photo-carousel/index.styles.tsx b/src/modules/photo-carousel/index.styles.tsx
index f700242..03a8250 100644
--- a/src/modules/photo-carousel/index.styles.tsx
+++ b/src/modules/photo-carousel/index.styles.tsx
@@ -6,7 +6,6 @@ import nextArrowIcon from "public/assets/photo-carousel/nextArrow.png";
 import prevArrowIcon from "public/assets/photo-carousel/prevArrow.png";
 import {CSSProperties, MouseEventHandler} from "react";
 
-
 export const CarouselContainer = styled.div`
   .slick-slide {
     padding: 10px;
@@ -33,9 +32,12 @@ export const CarouselContainer = styled.div`
   .slick-next::before {
     display: none;
   }
+  .slick-slide > div {
+    pointer-events: none;
+  }
+  }
 `;
 
-
 export const StyledImage = styled(Image)`
   width: 100%;
   max-width: 800px;
@@ -64,7 +66,6 @@ export const ColourText = styled.span`
   color: #F0C800;
 `;
 
-
 export const Arrow = styled.div`
   display: flex;
   align-items: center;
diff --git a/src/modules/photo-carousel/index.tsx b/src/modules/photo-carousel/index.tsx
index d861593..69c4fd3 100644
--- a/src/modules/photo-carousel/index.tsx
+++ b/src/modules/photo-carousel/index.tsx
@@ -4,7 +4,6 @@ import { CarouselContainer, StyledImage, StyledSubjectivity, ColourText,  NextAr
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
 
-
 import pic1 from "public/assets/photo-carousel/pic1.png";
 import pic2 from "public/assets/photo-carousel/pic2.png";
 import pic3 from "public/assets/photo-carousel/pic3.png";
@@ -16,20 +15,13 @@ const PhotoCarousel = () => {
     speed: 500,
     slidesToShow: 1,
     slidesToScroll: 1,
+    centerMode: true,
+    centerPadding: "15%",  
     nextArrow: <NextArrow />,
     prevArrow: <PrevArrow />,
-    responsive: [
-      {
-        breakpoint: 768,
-        settings: {
-          slidesToShow: 1,
-          slidesToScroll: 1,
-        },
-      },
-    ],
+
   };
 
-  
   return (
     <CarouselContainer>
         <StyledSubjectivity>