diff --git a/frontend/src/components/Home/UpcomingCarousel/UpcomingCarousel.jsx b/frontend/src/components/Home/UpcomingCarousel/UpcomingCarousel.jsx
index 0aaf357..d299211 100644
--- a/frontend/src/components/Home/UpcomingCarousel/UpcomingCarousel.jsx
+++ b/frontend/src/components/Home/UpcomingCarousel/UpcomingCarousel.jsx
@@ -1,5 +1,5 @@
 import "../../../styles/UpcomingCarousel.scoped.scss";
-import { useEffect } from "react";
+import { useEffect , useRef } from "react";
 import { Link } from "react-router-dom";
 import ScrollCarousel from "scroll-carousel";
 import { anime_data } from "../../../data";
@@ -11,6 +11,9 @@ import "@splidejs/splide/dist/css/splide.min.css";
 var top10UpcomingAnime;
 
 export const UpcomingCarousel = () => {
+  
+
+  
   // Sort the anime_data array based on start_date in descending order
   // this way, we get most recent by start_date, elements. and put them in other list, which shows latest 10 by start_date
   const sortedAnimeData = anime_data.sort((a, b) => {
@@ -22,6 +25,27 @@ export const UpcomingCarousel = () => {
   // this way, we get most recent by start_date, elements. and put them in other list, which shows latest 10 by start_date
   top10UpcomingAnime = sortedAnimeData.slice(0, 10);
 
+  
+
+
+
+  // progress bar 
+  const splideRef = useRef(null);
+  const barRef = useRef(null); 
+
+  useEffect(() => {
+    const splide = splideRef.current.splide;
+    const bar = barRef.current;
+
+    splide.on(' autoplay:play mounted move dragged', () => {
+      const end = splide.Components.Controller.getEnd() + 1;
+      const rate = Math.min((splide.index + 1) / end, 1);
+      bar.style.width = `${100 * rate}%`;
+    });
+  }, []);
+  
+
+
   return (
     <>
       <div className="line"> </div>
@@ -36,6 +60,8 @@ export const UpcomingCarousel = () => {
         </div>
 
         <Splide
+        ref={splideRef}
+
           options={{
             perPage: 3,
             gap: "0.75rem",
@@ -48,17 +74,26 @@ export const UpcomingCarousel = () => {
             pagination: false,
             drag: "free",
             snap: true,
-            wheel: true,
           }}
+
           aria-labelledby="reactivity-example-heading"
-          className="mt-2"
+          className="mt-2 "
         >
           {top10UpcomingAnime.map((item, index) => (
             <SplideSlide key={index}>
               <Item item={item} index={index} />
             </SplideSlide>
           ))}
+    
+
+    
         </Splide>
+    
+      <div class="my-carousel-progress">
+          <div class="my-carousel-progress-bar" ref={barRef}></div>
+      </div>
+   
+
       </div>
     </>
   );
diff --git a/frontend/src/styles/UpcomingCarousel.scoped.scss b/frontend/src/styles/UpcomingCarousel.scoped.scss
index ee80d17..9e3a77f 100644
--- a/frontend/src/styles/UpcomingCarousel.scoped.scss
+++ b/frontend/src/styles/UpcomingCarousel.scoped.scss
@@ -1,25 +1,17 @@
 .main {
-  
   width: 100%;
   height: 22rem;
 
-  @media screen and (min-width: 768px)  {
-
-      width: 100%;
-      height: 40rem;
+  @media screen and (min-width: 768px) {
+    width: 100%;
+    height: 40rem;
   }
-  
-
-  
-    
-  @media screen and (min-width: 1280px)  {
 
-      width: 100%;
-      height: 43rem;
-
-  } 
+  @media screen and (min-width: 1280px) {
+    width: 100%;
+    height: 43rem;
+  }
 
-  
   background: linear-gradient(180deg, #111 0%, #1e1e1e 50.52%, #1e1e1e 100%);
 }
 
@@ -35,22 +27,16 @@
 .small_header > div > h3 {
   color: #fff;
   font-family: Inter;
-  
 
-  
   // font-size: 2vw;
   font-size: 10pt;
-  
-  @media screen and (min-width: 768px)  {
-    
+
+  @media screen and (min-width: 768px) {
     font-size: 13pt;
   }
-  
-  
-  @media screen and (min-width: 1280px)  {
-    
-    font-size: 16pt;
 
+  @media screen and (min-width: 1280px) {
+    font-size: 16pt;
   }
 
   font-style: normal;
@@ -65,16 +51,12 @@
   // font-size: 1.5vw;
 
   font-size: 7pt;
-  
-  
-  @media screen and (min-width: 768px)  {
-    
+
+  @media screen and (min-width: 768px) {
     font-size: 10pt;
   }
-  @media screen and (min-width: 1280px)  {
-    
+  @media screen and (min-width: 1280px) {
     font-size: 12pt;
-
   }
 
   font-style: normal;
@@ -86,40 +68,32 @@
 /* carousel */
 
 .item {
-  
-text-wrap: wrap;
-
-      // width: 26rem;
-      // height: 35em;
-      
-      
-    width: 10rem;
-    height: 15em;
-      
-
-  // normal 
-  @media screen and (min-width: 1280px)  {
-
-      width: 26rem;
-      height: 35em;
+  text-wrap: wrap;
+
+  // width: 26rem;
+  // height: 35em;
+
+  width: 10rem;
+  height: 15em;
+
+  // normal
+  @media screen and (min-width: 1280px) {
+    width: 26rem;
+    height: 35em;
   }
-  
-  
-  @media screen and (min-width: 768px)  {
-    
-      width: 20rem;
-      height: 30em;
+
+  @media screen and (min-width: 768px) {
+    width: 20rem;
+    height: 30em;
   }
-  
-  
+
   // @media screen and (max-width: 768px)  {
 
   //   width: 10rem;
   //   height: 15em;
-      
+
   // }
 
-  
   border: 3px solid #ea1179;
   border-radius: 15px;
   background: linear-gradient(180deg, #111 0%, #1e1e1e 50.52%, #1e1e1e 100%);
@@ -128,34 +102,24 @@ text-wrap: wrap;
 .item > div > img {
   border: 0;
   // object-fit: contain;
-  
-  
-  
-  @media screen and (max-width: 768px)  {
-   object-fit: cover;
-  width:100%;
-  height:14em;
-  }
 
+  @media screen and (max-width: 768px) {
+    object-fit: cover;
+    width: 100%;
+    height: 14em;
+  }
 
-  @media screen and (min-width: 768px)  {
-  object-fit: cover;
-  width:100%;
-  height:30em;
-
-    
+  @media screen and (min-width: 768px) {
+    object-fit: cover;
+    width: 100%;
+    height: 30em;
   }
-  
-  
-  
 }
 
 .item_div {
   width: 100%;
   height: 60%;
-  
-  
-  
+
   border-radius: 12px 12px 0 0;
   overflow: hidden;
 }
@@ -163,20 +127,15 @@ text-wrap: wrap;
 .inner > h1 {
   color: #fff;
   font-family: Inter;
-  
-  
+
   // font-size: 1.9vw;
-  
+
   font-size: 10pt;
-  
-  
-  @media screen and (min-width: 768px)  {
-    
-    font-size: 15pt;
 
+  @media screen and (min-width: 768px) {
+    font-size: 15pt;
   }
 
-  
   // font-style: normal;
   // font-weight: 400;
 
@@ -192,11 +151,9 @@ text-wrap: wrap;
   // font-size: 1.5vw;
 
   font-size: 7pt;
-  
-  @media screen and (min-width: 768px)  {
-    
-    font-size: 11pt;
 
+  @media screen and (min-width: 768px) {
+    font-size: 11pt;
   }
 
   font-style: normal;
@@ -208,18 +165,13 @@ text-wrap: wrap;
   color: #fff;
   font-family: Inter;
   // font-size: 1.7vw;
-  
-  
+
   font-size: 7pt;
-  
-  
-  @media screen and (min-width: 768px)  {
-    
-  font-size: 8pt;
 
+  @media screen and (min-width: 768px) {
+    font-size: 8pt;
   }
 
-
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -232,6 +184,23 @@ text-wrap: wrap;
   width: 100%;
 }
 
+.my-carousel-progress {
+  background: #1e1e1e;
+
+  margin-top: 1.5em;
 
+  @media (min-width: 768px) and (max-width: 1279px) {
+    margin-top: 3.8em;
+  }
 
+  @media (min-width: 1279px) and (max-width: 127999px) {
+    margin-top: 6.1em;
+  }
+}
 
+.my-carousel-progress-bar {
+  background: #ea1179;
+  height: 3px;
+  transition: width 400ms ease;
+  width: 0;
+}