diff --git a/surfsense_web/components/ui/hero-carousel.tsx b/surfsense_web/components/ui/hero-carousel.tsx
index fea11c705..c93fe5979 100644
--- a/surfsense_web/components/ui/hero-carousel.tsx
+++ b/surfsense_web/components/ui/hero-carousel.tsx
@@ -157,21 +157,26 @@ function HeroCarousel() {
 	const [isGifExpanded, setIsGifExpanded] = useState(false);
 	const directionRef = useRef<"forward" | "backward">("forward");
 
-	const goTo = useCallback(
-		(newIndex: number) => {
-			directionRef.current = newIndex >= activeIndex ? "forward" : "backward";
-			setActiveIndex(newIndex);
-		},
-		[activeIndex]
-	);
+	const goTo = useCallback((newIndex: number) => {
+		setActiveIndex((prev) => {
+			directionRef.current = newIndex >= prev ? "forward" : "backward";
+			return newIndex;
+		});
+	}, []);
 
 	const goToPrev = useCallback(() => {
-		goTo(activeIndex <= 0 ? carouselItems.length - 1 : activeIndex - 1);
-	}, [activeIndex, goTo]);
+		setActiveIndex((prev) => {
+			directionRef.current = "backward";
+			return prev <= 0 ? carouselItems.length - 1 : prev - 1;
+		});
+	}, []);
 
 	const goToNext = useCallback(() => {
-		goTo(activeIndex >= carouselItems.length - 1 ? 0 : activeIndex + 1);
-	}, [activeIndex, goTo]);
+		setActiveIndex((prev) => {
+			directionRef.current = "forward";
+			return prev >= carouselItems.length - 1 ? 0 : prev + 1;
+		});
+	}, []);
 
 	const item = carouselItems[activeIndex];
 	const isForward = directionRef.current === "forward";