diff --git a/src/components/cardStack/layouts/carousels/ButtonCarousel.tsx b/src/components/cardStack/layouts/carousels/ButtonCarousel.tsx
index 450905c..d82d917 100644
--- a/src/components/cardStack/layouts/carousels/ButtonCarousel.tsx
+++ b/src/components/cardStack/layouts/carousels/ButtonCarousel.tsx
@@ -6,10 +6,10 @@ import { useCardAnimation } from '@/components/cardStack/hooks/useCardAnimation'
 
 const ButtonCarousel: React.FC<ButtonCarouselProps> = ({ items, className = '' }) => {
   const animation = useCardAnimation();
-  const itemRefs = React.useRef<(HTMLElement | null)[]>([]);
+  const itemRefs = React.useRef<(HTMLDivElement | null)[]>([]);
 
   return (
-    <div ref={animation.bottomContentRef} className={`button-carousel ${className}`}>
+    <div ref={animation.bottomContentRef as React.Ref<HTMLDivElement>} className={`button-carousel ${className}`}>
       {items.map((item, index) => (
         <div key={item.id || index} ref={(el) => { if (el) itemRefs.current[index] = el; }} className="carousel-item">
           {item.title}