diff --git a/src/components/overlays/detailsModal/components/carousels/EpisodeCarousel.tsx b/src/components/overlays/detailsModal/components/carousels/EpisodeCarousel.tsx
index b6eeacb6..9fec2494 100644
--- a/src/components/overlays/detailsModal/components/carousels/EpisodeCarousel.tsx
+++ b/src/components/overlays/detailsModal/components/carousels/EpisodeCarousel.tsx
@@ -45,6 +45,39 @@ export function EpisodeCarousel({
   const updateItem = useProgressStore((s) => s.updateItem);
   const confirmModal = useModal("season-watch-confirm");
 
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+
+  const updateScrollState = () => {
+    if (!carouselRef.current) {
+      setCanScrollLeft(false);
+      setCanScrollRight(false);
+      return;
+    }
+
+    const { scrollLeft, scrollWidth, clientWidth } = carouselRef.current;
+    const isAtStart = scrollLeft <= 1;
+    const isAtEnd = scrollLeft + clientWidth >= scrollWidth - 1;
+
+    setCanScrollLeft(!isAtStart);
+    setCanScrollRight(!isAtEnd);
+  };
+
+  useEffect(() => {
+    const carousel = carouselRef.current;
+    if (!carousel) return;
+
+    updateScrollState();
+
+    carousel.addEventListener("scroll", updateScrollState);
+    window.addEventListener("resize", updateScrollState);
+
+    return () => {
+      carousel.removeEventListener("scroll", updateScrollState);
+      window.removeEventListener("resize", updateScrollState);
+    };
+  }, []);
+
   const handleScroll = (direction: "left" | "right") => {
     if (!carouselRef.current) return;
 
@@ -530,15 +563,17 @@ export function EpisodeCarousel({
       {/* Episodes Carousel */}
       <div className="relative">
         {/* Left scroll button */}
-        <div className="absolute left-0 top-1/2 transform -translate-y-1/2 z-10 px-4 hidden lg:block">
-          <button
-            type="button"
-            className="p-2 bg-black/80 hover:bg-video-context-hoverColor transition-colors rounded-full border border-video-context-border backdrop-blur-sm"
-            onClick={() => handleScroll("left")}
-          >
-            <Icon icon={Icons.CHEVRON_LEFT} className="text-white/80" />
-          </button>
-        </div>
+        {canScrollLeft && (
+          <div className="absolute left-0 top-1/2 transform -translate-y-1/2 z-10 px-4 hidden lg:block">
+            <button
+              type="button"
+              className="p-2 bg-black/80 hover:bg-video-context-hoverColor transition-colors rounded-full border border-video-context-border backdrop-blur-sm"
+              onClick={() => handleScroll("left")}
+            >
+              <Icon icon={Icons.CHEVRON_LEFT} className="text-white/80" />
+            </button>
+          </div>
+        )}
 
         <div
           ref={carouselRef}
@@ -783,15 +818,17 @@ export function EpisodeCarousel({
         </div>
 
         {/* Right scroll button */}
-        <div className="absolute right-0 top-1/2 transform -translate-y-1/2 z-10 px-4 hidden lg:block">
-          <button
-            type="button"
-            className="p-2 bg-black/80 hover:bg-video-context-hoverColor transition-colors rounded-full border border-video-context-border backdrop-blur-sm"
-            onClick={() => handleScroll("right")}
-          >
-            <Icon icon={Icons.CHEVRON_RIGHT} className="text-white/80" />
-          </button>
-        </div>
+        {canScrollRight && (
+          <div className="absolute right-0 top-1/2 transform -translate-y-1/2 z-10 px-4 hidden lg:block">
+            <button
+              type="button"
+              className="p-2 bg-black/80 hover:bg-video-context-hoverColor transition-colors rounded-full border border-video-context-border backdrop-blur-sm"
+              onClick={() => handleScroll("right")}
+            >
+              <Icon icon={Icons.CHEVRON_RIGHT} className="text-white/80" />
+            </button>
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/src/components/player/atoms/Episodes.tsx b/src/components/player/atoms/Episodes.tsx
index 2d081980..8b9bf424 100644
--- a/src/components/player/atoms/Episodes.tsx
+++ b/src/components/player/atoms/Episodes.tsx
@@ -766,6 +766,39 @@ export function EpisodesView({
     ],
   );
 
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+
+  const updateScrollState = () => {
+    if (!carouselRef.current) {
+      setCanScrollLeft(false);
+      setCanScrollRight(false);
+      return;
+    }
+
+    const { scrollLeft, scrollWidth, clientWidth } = carouselRef.current;
+    const isAtStart = scrollLeft <= 1;
+    const isAtEnd = scrollLeft + clientWidth >= scrollWidth - 1;
+
+    setCanScrollLeft(!isAtStart);
+    setCanScrollRight(!isAtEnd);
+  };
+
+  useEffect(() => {
+    const carousel = carouselRef.current;
+    if (!carousel) return;
+
+    updateScrollState();
+
+    carousel.addEventListener("scroll", updateScrollState);
+    window.addEventListener("resize", updateScrollState);
+
+    return () => {
+      carousel.removeEventListener("scroll", updateScrollState);
+      window.removeEventListener("resize", updateScrollState);
+    };
+  }, []);
+
   const handleScroll = (direction: "left" | "right") => {
     if (!carouselRef.current) return;
 
@@ -916,20 +949,22 @@ export function EpisodesView({
     content = (
       <div className="relative">
         {/* Horizontal scroll buttons */}
-        <div
-          className={classNames(
-            "absolute left-0 top-1/2 transform -translate-y-1/2 z-10 px-4",
-            forceCompactEpisodeView ? "hidden" : "hidden lg:block",
-          )}
-        >
-          <button
-            type="button"
-            className="p-2 bg-black/80 hover:bg-video-context-hoverColor transition-colors rounded-full border border-video-context-border backdrop-blur-sm"
-            onClick={() => handleScroll("left")}
+        {canScrollLeft && (
+          <div
+            className={classNames(
+              "absolute left-0 top-1/2 transform -translate-y-1/2 z-10 px-4",
+              forceCompactEpisodeView ? "hidden" : "hidden lg:block",
+            )}
           >
-            <Icon icon={Icons.CHEVRON_LEFT} className="text-white/80" />
-          </button>
-        </div>
+            <button
+              type="button"
+              className="p-2 bg-black/80 hover:bg-video-context-hoverColor transition-colors rounded-full border border-video-context-border backdrop-blur-sm"
+              onClick={() => handleScroll("left")}
+            >
+              <Icon icon={Icons.CHEVRON_LEFT} className="text-white/80" />
+            </button>
+          </div>
+        )}
 
         <div
           ref={carouselRef}
@@ -996,20 +1031,22 @@ export function EpisodesView({
         </div>
 
         {/* Right scroll button */}
-        <div
-          className={classNames(
-            "absolute right-0 top-1/2 transform -translate-y-1/2 z-10 px-4",
-            forceCompactEpisodeView ? "hidden" : "hidden lg:block",
-          )}
-        >
-          <button
-            type="button"
-            className="p-2 bg-black/80 hover:bg-video-context-hoverColor transition-colors rounded-full border border-video-context-border backdrop-blur-sm"
-            onClick={() => handleScroll("right")}
+        {canScrollRight && (
+          <div
+            className={classNames(
+              "absolute right-0 top-1/2 transform -translate-y-1/2 z-10 px-4",
+              forceCompactEpisodeView ? "hidden" : "hidden lg:block",
+            )}
           >
-            <Icon icon={Icons.CHEVRON_RIGHT} className="text-white/80" />
-          </button>
-        </div>
+            <button
+              type="button"
+              className="p-2 bg-black/80 hover:bg-video-context-hoverColor transition-colors rounded-full border border-video-context-border backdrop-blur-sm"
+              onClick={() => handleScroll("right")}
+            >
+              <Icon icon={Icons.CHEVRON_RIGHT} className="text-white/80" />
+            </button>
+          </div>
+        )}
       </div>
     );
   }
diff --git a/src/pages/discover/components/CarouselNavButtons.tsx b/src/pages/discover/components/CarouselNavButtons.tsx
index bd9d3261..24cbdae3 100644
--- a/src/pages/discover/components/CarouselNavButtons.tsx
+++ b/src/pages/discover/components/CarouselNavButtons.tsx
@@ -1,3 +1,5 @@
+import { useCallback, useEffect, useState } from "react";
+
 import { Icon, Icons } from "@/components/Icon";
 import { Flare } from "@/components/utils/Flare";
 
@@ -11,9 +13,12 @@ interface CarouselNavButtonsProps {
 interface NavButtonProps {
   direction: "left" | "right";
   onClick: () => void;
+  visible: boolean;
 }
 
-function NavButton({ direction, onClick }: NavButtonProps) {
+function NavButton({ direction, onClick, visible }: NavButtonProps) {
+  if (!visible) return null;
+
   return (
     <button
       type="button"
@@ -43,6 +48,40 @@ export function CarouselNavButtons({
   categorySlug,
   carouselRefs,
 }: CarouselNavButtonsProps) {
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+
+  const updateScrollState = useCallback(() => {
+    const carousel = carouselRefs.current[categorySlug];
+    if (!carousel) {
+      setCanScrollLeft(false);
+      setCanScrollRight(false);
+      return;
+    }
+
+    const { scrollLeft, scrollWidth, clientWidth } = carousel;
+    const isAtStart = scrollLeft <= 1;
+    const isAtEnd = scrollLeft + clientWidth >= scrollWidth - 1;
+
+    setCanScrollLeft(!isAtStart);
+    setCanScrollRight(!isAtEnd);
+  }, [categorySlug, carouselRefs]);
+
+  useEffect(() => {
+    const carousel = carouselRefs.current[categorySlug];
+    if (!carousel) return;
+
+    updateScrollState();
+
+    carousel.addEventListener("scroll", updateScrollState);
+    window.addEventListener("resize", updateScrollState);
+
+    return () => {
+      carousel.removeEventListener("scroll", updateScrollState);
+      window.removeEventListener("resize", updateScrollState);
+    };
+  }, [categorySlug, carouselRefs, updateScrollState]);
+
   const handleScroll = (direction: "left" | "right") => {
     const carousel = carouselRefs.current[categorySlug];
     if (!carousel) return;
@@ -76,8 +115,16 @@ export function CarouselNavButtons({
 
   return (
     <>
-      <NavButton direction="left" onClick={() => handleScroll("left")} />
-      <NavButton direction="right" onClick={() => handleScroll("right")} />
+      <NavButton
+        direction="left"
+        onClick={() => handleScroll("left")}
+        visible={canScrollLeft}
+      />
+      <NavButton
+        direction="right"
+        onClick={() => handleScroll("right")}
+        visible={canScrollRight}
+      />
     </>
   );
 }
diff --git a/src/pages/discover/components/CategoryButtons.tsx b/src/pages/discover/components/CategoryButtons.tsx
index 6bb6bfc8..8f7f1c0e 100644
--- a/src/pages/discover/components/CategoryButtons.tsx
+++ b/src/pages/discover/components/CategoryButtons.tsx
@@ -1,3 +1,5 @@
+import { useCallback, useEffect, useState } from "react";
+
 import { Icon, Icons } from "@/components/Icon";
 
 interface CategoryButtonsProps {
@@ -15,34 +17,84 @@ export function CategoryButtons({
   isMobile,
   showAlwaysScroll,
 }: CategoryButtonsProps) {
-  const renderScrollButton = (direction: "left" | "right") => (
-    <div>
-      <button
-        type="button"
-        className="flex items-center rounded-full px-4 text-white py-3"
-        onClick={() => {
-          const element = document.getElementById(
-            `button-carousel-${categoryType}`,
-          );
-          if (element) {
-            element.scrollBy({
-              left: direction === "left" ? -200 : 200,
-              behavior: "smooth",
-            });
-          }
-        }}
-      >
-        <Icon
-          icon={direction === "left" ? Icons.CHEVRON_LEFT : Icons.CHEVRON_RIGHT}
-          className="text-2xl rtl:-scale-x-100"
-        />
-      </button>
-    </div>
-  );
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+
+  const updateScrollState = useCallback(() => {
+    const element = document.getElementById(`button-carousel-${categoryType}`);
+    if (!element) {
+      setCanScrollLeft(false);
+      setCanScrollRight(false);
+      return;
+    }
+
+    const { scrollLeft, scrollWidth, clientWidth } = element;
+    const isAtStart = scrollLeft <= 1;
+    const isAtEnd = scrollLeft + clientWidth >= scrollWidth - 1;
+
+    setCanScrollLeft(!isAtStart);
+    setCanScrollRight(!isAtEnd);
+  }, [categoryType]);
+
+  useEffect(() => {
+    const element = document.getElementById(`button-carousel-${categoryType}`);
+    if (!element) return;
+
+    updateScrollState();
+
+    element.addEventListener("scroll", updateScrollState);
+    window.addEventListener("resize", updateScrollState);
+
+    return () => {
+      element.removeEventListener("scroll", updateScrollState);
+      window.removeEventListener("resize", updateScrollState);
+    };
+  }, [categoryType, updateScrollState]);
+
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      updateScrollState();
+    }, 0);
+    return () => clearTimeout(timeoutId);
+  }, [categories, categoryType, updateScrollState]);
+
+  const renderScrollButton = (direction: "left" | "right") => {
+    const shouldShow = direction === "left" ? canScrollLeft : canScrollRight;
+
+    if (!shouldShow && !showAlwaysScroll && !isMobile) return null;
+
+    return (
+      <div>
+        <button
+          type="button"
+          className="flex items-center rounded-full px-4 text-white py-3"
+          onClick={() => {
+            const element = document.getElementById(
+              `button-carousel-${categoryType}`,
+            );
+            if (element) {
+              element.scrollBy({
+                left: direction === "left" ? -200 : 200,
+                behavior: "smooth",
+              });
+            }
+          }}
+        >
+          <Icon
+            icon={
+              direction === "left" ? Icons.CHEVRON_LEFT : Icons.CHEVRON_RIGHT
+            }
+            className="text-2xl rtl:-scale-x-100"
+          />
+        </button>
+      </div>
+    );
+  };
 
   return (
     <div className="flex overflow-x-auto">
-      {(showAlwaysScroll || isMobile) && renderScrollButton("left")}
+      {(showAlwaysScroll || isMobile || canScrollLeft) &&
+        renderScrollButton("left")}
 
       <div
         id={`button-carousel-${categoryType}`}
@@ -62,7 +114,8 @@ export function CategoryButtons({
         </div>
       </div>
 
-      {(showAlwaysScroll || isMobile) && renderScrollButton("right")}
+      {(showAlwaysScroll || isMobile || canScrollRight) &&
+        renderScrollButton("right")}
     </div>
   );
 }
diff --git a/src/stores/__old/watched/store.ts b/src/stores/__old/watched/store.ts
index 7d5739ad..5bc2f6fe 100644
--- a/src/stores/__old/watched/store.ts
+++ b/src/stores/__old/watched/store.ts
@@ -1,10 +1,10 @@
 import { useProgressStore } from "@/stores/progress";
 
+import { createVersionedStore } from "../migrations";
 import { OldData, migrateV2Videos } from "./migrations/v2";
 import { migrateV3Videos } from "./migrations/v3";
 import { migrateV4Videos } from "./migrations/v4";
 import { WatchedStoreData } from "./types";
-import { createVersionedStore } from "../migrations";
 
 export const VideoProgressStore = createVersionedStore<WatchedStoreData>()
   .setKey("video-progress")