diff --git a/web/src/components/ui/carousel.tsx b/web/src/components/ui/carousel.tsx
index 8cd4ae4a..9544c4bf 100644
--- a/web/src/components/ui/carousel.tsx
+++ b/web/src/components/ui/carousel.tsx
@@ -177,6 +177,7 @@ function CarouselPrevious({
   className,
   variant = "outline",
   size = "icon-sm",
+  onClick,
   ...props
 }: React.ComponentProps<typeof Button>) {
   const { orientation, scrollPrev, canScrollPrev } = useCarousel()
@@ -187,14 +188,18 @@ function CarouselPrevious({
       variant={variant}
       size={size}
       className={cn(
-        "absolute touch-manipulation rounded-full",
+        "absolute touch-manipulation rounded-full z-10",
         orientation === "horizontal"
           ? "top-1/2 -left-12 -translate-y-1/2"
           : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
         className
       )}
       disabled={!canScrollPrev}
-      onClick={scrollPrev}
+      type="button"
+      onClick={(e) => {
+        scrollPrev()
+        onClick?.(e)
+      }}
       {...props}
     >
       <HugeiconsIcon icon={ArrowLeft01Icon} strokeWidth={2} />
@@ -207,6 +212,7 @@ function CarouselNext({
   className,
   variant = "outline",
   size = "icon-sm",
+  onClick,
   ...props
 }: React.ComponentProps<typeof Button>) {
   const { orientation, scrollNext, canScrollNext } = useCarousel()
@@ -217,14 +223,18 @@ function CarouselNext({
       variant={variant}
       size={size}
       className={cn(
-        "absolute touch-manipulation rounded-full",
+        "absolute touch-manipulation rounded-full z-10",
         orientation === "horizontal"
           ? "top-1/2 -right-12 -translate-y-1/2"
           : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
         className
       )}
       disabled={!canScrollNext}
-      onClick={scrollNext}
+      type="button"
+      onClick={(e) => {
+        scrollNext()
+        onClick?.(e)
+      }}
       {...props}
     >
       <HugeiconsIcon icon={ArrowRight01Icon} strokeWidth={2} />