diff --git a/assets/scss/_videos_project.scss b/assets/scss/_videos_project.scss
index 17e03f91e41..ea7d6036a5c 100644
--- a/assets/scss/_videos_project.scss
+++ b/assets/scss/_videos_project.scss
@@ -48,35 +48,46 @@
   }
   .related-videos {
     margin: 2rem 0;
-}
-.carousel-item {
-    padding: 1rem;
-}
 
-.carousel-control-prev,
-.carousel-control-next {
-    width: 5%;
-    opacity: 0.7;
-}
+    .carousel-item {
+        padding: 1rem;
+    }
 
-.carousel-control-prev:hover,
-.carousel-control-next:hover {
-    opacity: 1;
-}
+    .carousel-control-prev,
+    .carousel-control-next {
+        width: 8%;
+        opacity: 1;
+    }
 
-.carousel-indicators {
-    bottom: -40px;
-}
+    .carousel-control-prev-icon,
+    .carousel-control-next-icon {
+        filter: invert(100%) contrast(200%);
+        transition: filter 0.3s ease;
+    }
 
-.carousel-indicators button {
-    background-color: #666;
-    height: 3px;
-    opacity: 0.5;
-}
+    .carousel-control-prev:hover .carousel-control-prev-icon,
+    .carousel-control-next:hover .carousel-control-next-icon {
+        /* Optional: add a slight hover effect, but no scale */
+        filter: invert(100%) contrast(200%) drop-shadow(0 0 2px rgba(0,0,0,0.5));
+    }
+
+    .carousel-indicators {
+        bottom: -50px;
+    }
 
-.carousel-indicators button.active {
-    background-color: #fff;
-    opacity: 1;
+    .carousel-indicators button {
+        background-color: $casper;
+        height: 4px;
+        border-radius: 2px;
+        opacity: 0.5;
+        transition: background-color 0.3s ease, width 0.3s ease;
+    }
+
+    .carousel-indicators button.active {
+        background-color: #00b39f;
+        opacity: 1;
+        width: 35px;
+    }
 }
 
 .yt-embed-container {