diff --git a/public/home.css b/public/home.css
index 63be7c60..5d4a7054 100644
--- a/public/home.css
+++ b/public/home.css
@@ -476,18 +476,22 @@
 
 /* Coursel CSS */
 .carousel-container {
-  width: 90%;
+  width: 80%;
+  margin: 0 auto;
   padding: 10px;
 }
 
 .carousel-wrapper {
+
   border-radius: 10px;
   padding: 2px;
-  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
 }
 
 .carousel-wrapper .carousel .slide {
   border-radius: 10px;
+  display: flex;
+  justify-content: center; 
 }
 
 .carousel-wrapper .carousel .slide img {
@@ -495,6 +499,16 @@
   object-fit: cover;
 }
 
+.carousel-image-container {
+  display: flex;
+
+}
+
+.carousel-image {
+  max-width: 70%;
+  max-height: 100%;
+}
+
 .carousel .control-dots {
   display: none;
 }
diff --git a/src/components/homePageComponents/carousel.jsx b/src/components/homePageComponents/carousel.jsx
index 27eb6aa4..f9aa489a 100644
--- a/src/components/homePageComponents/carousel.jsx
+++ b/src/components/homePageComponents/carousel.jsx
@@ -21,28 +21,28 @@ const ImageCarousel = () => {
     technexImage3,
   ];
 
-  
-    return (
-      <div className="carousel-container">
-        <div className="carousel-wrapper">
-          <Carousel
-            showArrows={false}
-            showThumbs={false}
-            showStatus={false}
-            autoPlay={true}
-            interval={3000}
-            infiniteLoop={true}
-          >
-            {carouselImages.map((image, index) => (
-              <div key={index}>
-                <img src={image} alt={`img ${index + 1}`} />
-              </div>
-            ))}
-          </Carousel>
-        </div>
+  return (
+    <div className="carousel-container">
+      <div className="carousel-wrapper">
+        <Carousel
+          showArrows={false}
+          showThumbs={false}
+          showStatus={false}
+          autoPlay={true}
+          interval={3000}
+          infiniteLoop={true}
+          centerMode={false}
+          selectedItem={0}
+        >
+          {carouselImages.map((image, index) => (
+            <div key={index} className="carousel-image-container">
+              <img src={image} alt={`img ${index + 1}`} className="carousel-image" />
+            </div>
+          ))}
+        </Carousel>
       </div>
-    );
-  };
-  
-  export default ImageCarousel;
-  
\ No newline at end of file
+    </div>
+  );
+};
+
+export default ImageCarousel;