diff --git a/src/pages/discover/components/CarouselNavButtons.tsx b/src/pages/discover/components/CarouselNavButtons.tsx
index 1170fcaf..bd9d3261 100644
--- a/src/pages/discover/components/CarouselNavButtons.tsx
+++ b/src/pages/discover/components/CarouselNavButtons.tsx
@@ -8,6 +8,37 @@ interface CarouselNavButtonsProps {
   }>;
 }
 
+interface NavButtonProps {
+  direction: "left" | "right";
+  onClick: () => void;
+}
+
+function NavButton({ direction, onClick }: NavButtonProps) {
+  return (
+    <button
+      type="button"
+      className={`absolute ${direction === "left" ? "left-12" : "right-12"} top-1/2 transform -translate-y-3/4 z-10`}
+      onClick={onClick}
+    >
+      <Flare.Base className="group -m-[0.705em] rounded-full bg-search-hoverBackground transition-transform duration-300 focus:relative focus:z-10 hover:bg-mediaCard-hoverBackground tabbable hover:scale-110">
+        <Flare.Light
+          flareSize={90}
+          cssColorVar="--colors-mediaCard-hoverAccent"
+          backgroundClass="bg-mediaCard-hoverBackground duration-100"
+          className="rounded-full group-hover:opacity-100 z-20"
+        />
+        <Flare.Child className="cursor-pointer text-white flex justify-center items-center h-10 w-10 rounded-full active:scale-110 transition-[transform,background-color] duration-200 z-30">
+          <Icon
+            icon={
+              direction === "left" ? Icons.CHEVRON_LEFT : Icons.CHEVRON_RIGHT
+            }
+          />
+        </Flare.Child>
+      </Flare.Base>
+    </button>
+  );
+}
+
 export function CarouselNavButtons({
   categorySlug,
   carouselRefs,
@@ -19,52 +50,34 @@ export function CarouselNavButtons({
     const movieElements = carousel.getElementsByTagName("a");
     if (movieElements.length === 0) return;
 
-    const movieWidth = movieElements[0].offsetWidth;
-    const visibleMovies = Math.floor(carousel.offsetWidth / movieWidth);
-    const scrollAmount = movieWidth * (visibleMovies > 5 ? 4 : 2);
+    // Wait for next frame to ensure measurements are available
+    requestAnimationFrame(() => {
+      const movieWidth = movieElements[0].getBoundingClientRect().width;
 
-    carousel.scrollBy({
-      left: direction === "left" ? -scrollAmount : scrollAmount,
-      behavior: "smooth",
+      const carouselWidth = carousel.getBoundingClientRect().width;
+
+      if (movieWidth === 0 || carouselWidth === 0) {
+        return;
+      }
+
+      const visibleMovies = Math.floor(carouselWidth / movieWidth);
+      const scrollAmount = movieWidth * (visibleMovies > 5 ? 4 : 2);
+
+      const newScrollPosition =
+        carousel.scrollLeft +
+        (direction === "left" ? -scrollAmount : scrollAmount);
+
+      carousel.scrollTo({
+        left: newScrollPosition,
+        behavior: "smooth",
+      });
     });
   };
 
   return (
     <>
-      <button
-        type="button"
-        className="absolute left-12 top-1/2 transform -translate-y-3/4 z-10"
-        onClick={() => handleScroll("left")}
-      >
-        <Flare.Base className="group -m-[0.705em] rounded-full bg-search-hoverBackground transition-transform duration-300 focus:relative focus:z-10 hover:bg-mediaCard-hoverBackground tabbable hover:scale-110">
-          <Flare.Light
-            flareSize={90}
-            cssColorVar="--colors-mediaCard-hoverAccent"
-            backgroundClass="bg-mediaCard-hoverBackground duration-100"
-            className="rounded-full group-hover:opacity-100 z-20"
-          />
-          <Flare.Child className="cursor-pointer text-white flex justify-center items-center h-10 w-10 rounded-full active:scale-110 transition-[transform,background-color] duration-200 z-30">
-            <Icon icon={Icons.CHEVRON_LEFT} />
-          </Flare.Child>
-        </Flare.Base>
-      </button>
-      <button
-        type="button"
-        className="absolute right-12 top-1/2 transform -translate-y-3/4 z-10"
-        onClick={() => handleScroll("right")}
-      >
-        <Flare.Base className="group -m-[0.705em] rounded-full bg-search-hoverBackground transition-transform duration-300 focus:relative focus:z-10 hover:bg-mediaCard-hoverBackground tabbable hover:scale-110">
-          <Flare.Light
-            flareSize={90}
-            cssColorVar="--colors-mediaCard-hoverAccent"
-            backgroundClass="bg-mediaCard-hoverBackground duration-100"
-            className="rounded-full group-hover:opacity-100 z-20"
-          />
-          <Flare.Child className="cursor-pointer text-white flex justify-center items-center h-10 w-10 rounded-full active:scale-110 transition-[transform,background-color] duration-200 z-30">
-            <Icon icon={Icons.CHEVRON_RIGHT} />
-          </Flare.Child>
-        </Flare.Base>
-      </button>
+      <NavButton direction="left" onClick={() => handleScroll("left")} />
+      <NavButton direction="right" onClick={() => handleScroll("right")} />
     </>
   );
 }
diff --git a/src/pages/discover/components/MediaCarousel.tsx b/src/pages/discover/components/MediaCarousel.tsx
index 6c160145..319863fd 100644
--- a/src/pages/discover/components/MediaCarousel.tsx
+++ b/src/pages/discover/components/MediaCarousel.tsx
@@ -78,7 +78,7 @@ export function MediaCarousel({
       <div className="relative overflow-hidden carousel-container">
         <div
           id={`carousel-${categorySlug}`}
-          className="grid grid-flow-col auto-cols-max gap-4 pt-0 pb-4 overflow-auto scrollbar rounded-xl overflow-y-hidden md:pl-8 md:pr-8"
+          className="grid grid-flow-col auto-cols-max gap-4 pt-0 pb-4 overflow-x-scroll scrollbar rounded-xl overflow-y-hidden md:pl-8 md:pr-8"
           ref={(el) => {
             carouselRefs.current[categorySlug] = el;
           }}