diff --git a/theme-costume-app/src/Charts.js b/theme-costume-app/src/Charts.js
index 7c0b8349a9206f3009b07c49fb3b6a5c759716d0..e660571db7c2386d79a83eb65391a0abe1389caa 100644
--- a/theme-costume-app/src/Charts.js
+++ b/theme-costume-app/src/Charts.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import Carousel from './components/Carousel';
-import halloweenImg from './assets/Halloween.jpg'
+import halloweenImg from './assets/halloween3Y.jpg'
 import christmasImg from './assets/christmas.jpg'
 import collegeImg from './assets/college.webp'
 import MyCarousel from './components/MyCarousel';
diff --git a/theme-costume-app/src/assets/halloween2.jpg b/theme-costume-app/src/assets/halloween2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..ae73b4a7f7b6a14874235229d088b21a349566c7
Binary files /dev/null and b/theme-costume-app/src/assets/halloween2.jpg differ
diff --git a/theme-costume-app/src/assets/halloween3.jpg b/theme-costume-app/src/assets/halloween3.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a5867a2c86076b3a159d80efc9618d6fac756a84
Binary files /dev/null and b/theme-costume-app/src/assets/halloween3.jpg differ
diff --git a/theme-costume-app/src/components/Carousel.js b/theme-costume-app/src/components/Carousel.js
index ac10de4ebd59e6e56d16fe11c961aec218200e42..fa797be8f7ce25d10099c09e2e51a44acb2485c8 100644
--- a/theme-costume-app/src/components/Carousel.js
+++ b/theme-costume-app/src/components/Carousel.js
@@ -21,21 +21,40 @@ const NavigationComponent = ({ goToNextPage, goToPreviousPage, currentPage, tota
   };
 
   return (
-    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+    <div style={{ display: 'flex', alignItems: 'center' }}>
+      <button onClick={goToPreviousPage} style={{ marginRight: 10 }}>&lt;</button>
       <div style={{ display: 'flex', alignItems: 'center', marginRight: 10 }}>{renderDots()}</div>
-      <button onClick={goToPreviousPage}>&lt;</button>
       <button onClick={goToNextPage}>&gt;</button>
     </div>
   );
 };
 
-const MoviesDisplay = ({ setOfMovies }) => {
+const MoviesDisplay = ({ setOfMovies, goToPreviousPage, goToNextPage, currentPage, totalPages }) => {
   return (
-    <div style={styles.movies}>
+<div style={styles.movies}>
       {setOfMovies.map((movie, index) => (
-      <div key={index} style={styles.movie}>
+        <div key={index} style={styles.movie}>
           <img src={movie.source} alt={movie.name} style={styles.image} />
-          {/* <p style={styles.movieText}>{movie.name}</p> */}
+          <div style={styles.navigationContainer}>
+            <div style={styles.navigationButtons}>
+              <button style={styles.buttonLeft} onClick={goToPreviousPage}>&lt;</button>
+              <button style={styles.buttonRight} onClick={goToNextPage}>&gt;</button>
+            </div>
+            <div style={styles.navigationDots}>
+              {Array.from({ length: totalPages }, (_, i) => (
+                <span
+                  key={i}
+                  style={{
+                    fontSize: 20,
+                    margin: '0 2px',
+                    color: i === currentPage - 1 ? 'black' : 'gray',
+                  }}
+                >
+                  ●
+                </span>
+              ))}
+            </div>
+          </div>
         </div>
       ))}
     </div>
@@ -85,13 +104,19 @@ const Carousel = ({ showingItems, items, autoScrollInterval = 3000 }) => {
           />
         </div>
       </div>
-      <MoviesDisplay setOfMovies={groupingMovies[currentPage - 1]}
+      <MoviesDisplay setOfMovies={groupingMovies[currentPage - 1]} 
+      goToPreviousPage={previousPage}
+      goToNextPage={nextPage}
+      currentPage={currentPage}
+      totalPages={TOTAL_PAGES}
       />
     </div>
   );
 };
 
 const styles = {
+
+  
   container: {
     backgroundColor: '#fff',
     width: '100%',
@@ -106,18 +131,16 @@ const styles = {
     alignItems: 'center',
   },
   movies: {
-    display: 'flex',
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    justifyContent: 'center',
+    position: 'relative', // Added position relative
     width: '100%',
   },
   image: {
     width: '100%',
+    height: '350px',
     borderRadius: 10,
   },
   movie: {
-    flex: '1 0 30%', // Adjust the width based on the number of items per row
+    position: 'relative', // Added position relative
     textAlign: 'center',
   },
   movieText: {
@@ -125,6 +148,37 @@ const styles = {
     overflow: 'hidden',
     textOverflow: 'ellipsis',
   },
+
+  navigationButtons: {
+    position: 'absolute',
+    top: '50%',
+    left: 0,
+    right: 0,
+    transform: 'translateY(-50%)',
+  },
+  buttonLeft: {
+    position: 'absolute',
+    left: 0,
+    top: '50%',
+    transform: 'translateY(-50%)',
+    backgroundColor: 'rgba(255, 255, 255, 0.5)',
+    border: 'none',
+    borderRadius: '50%',
+    padding: '8px',
+    cursor: 'pointer',
+  },
+  buttonRight: {
+    position: 'absolute',
+    right: 0,
+    top: '50%',
+    transform: 'translateY(-50%)',
+    backgroundColor: 'rgba(255, 255, 255, 0.5)',
+    border: 'none',
+    borderRadius: '50%',
+    padding: '8px',
+    cursor: 'pointer',
+  },
 };
 
+
 export default Carousel;