diff --git a/src/components/cardStack/layouts/timelines/TimelineHorizontalCardStack.tsx b/src/components/cardStack/layouts/timelines/TimelineHorizontalCardStack.tsx
index 73d18db..9088c41 100644
--- a/src/components/cardStack/layouts/timelines/TimelineHorizontalCardStack.tsx
+++ b/src/components/cardStack/layouts/timelines/TimelineHorizontalCardStack.tsx
@@ -1,25 +1,32 @@
-import React, { useRef } from 'react';
-import { useCardAnimation, UseCardAnimationOptions } from '@/hooks/useCardAnimation';
+"use client";
 
-export interface TimelineHorizontalCardStackProps {
+import React, { Children, useCallback } from "react";
+import { cls } from "@/lib/utils";
+import CardStackTextBox from "../../CardStackTextBox";
+import { useTimelineHorizontal, type MediaItem } from "../../hooks/useTimelineHorizontal";
+import MediaContent from "@/components/shared/MediaContent";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType, TitleSegment, TextboxLayout, InvertedBackground } from "../../types";
+
+interface TimelineHorizontalCardStackProps {
   children: React.ReactNode;
-  title?: string;
-  description?: string;
+  title: string;
+  titleSegments?: TitleSegment[];
+  description: string;
   tag?: string;
-  textboxLayout?: string;
-  animationType?: string;
-  containerClassName?: string;
-  mediaItems?: Array<{ imageSrc?: string; videoSrc?: string; imageAlt?: string; videoAriaLabel?: string }>;
-  titleSegments?: Array<{ type: 'text'; content: string } | { type: 'image'; src: string; alt?: string }>;
-  buttons?: Array<{ text: string; onClick?: () => void; href?: string }>;
-  buttonAnimation?: string;
-  tagIcon?: any;
-  tagAnimation?: string;
-  useInvertedBackground?: boolean;
-  ariaLabel?: string;
+  tagIcon?: LucideIcon;
+  tagAnimation?: ButtonAnimationType;
+  buttons?: ButtonConfig[];
+  buttonAnimation?: ButtonAnimationType;
+  textboxLayout: TextboxLayout;
+  useInvertedBackground?: InvertedBackground;
+  mediaItems?: MediaItem[];
   className?: string;
+  containerClassName?: string;
   textBoxClassName?: string;
   titleClassName?: string;
+  titleImageWrapperClassName?: string;
+  titleImageClassName?: string;
   descriptionClassName?: string;
   tagClassName?: string;
   buttonContainerClassName?: string;
@@ -29,28 +36,140 @@ export interface TimelineHorizontalCardStackProps {
   progressBarClassName?: string;
   mediaContainerClassName?: string;
   mediaClassName?: string;
+  ariaLabel?: string;
 }
 
-export const TimelineHorizontalCardStack: React.FC<TimelineHorizontalCardStackProps> = ({
+const TimelineHorizontalCardStack = ({
   children,
-  containerClassName = '',
-  ...props
-}) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
+  title,
+  titleSegments,
+  description,
+  tag,
+  tagIcon,
+  tagAnimation,
+  buttons,
+  buttonAnimation,
+  textboxLayout,
+  useInvertedBackground,
+  mediaItems,
+  className = "",
+  containerClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  titleImageWrapperClassName = "",
+  titleImageClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  cardClassName = "",
+  progressBarClassName = "",
+  mediaContainerClassName = "",
+  mediaClassName = "",
+  ariaLabel = "Timeline section",
+}: TimelineHorizontalCardStackProps) => {
+  const childrenArray = Children.toArray(children);
+  const itemCount = childrenArray.length;
 
-  const animationOptions: UseCardAnimationOptions = {
-    containerRef,
-    itemRefs,
-  };
+  const { activeIndex, progressRefs, handleItemClick, imageOpacity, currentMediaSrc } = useTimelineHorizontal({
+    itemCount,
+    mediaItems,
+  });
 
-  const { } = useCardAnimation(animationOptions);
+  const getGridColumns = useCallback(() => {
+    if (itemCount === 2) return "md:grid-cols-2";
+    if (itemCount === 3) return "md:grid-cols-3";
+    return "md:grid-cols-4";
+  }, [itemCount]);
+
+  const getItemOpacity = useCallback(
+    (index: number) => {
+      return index <= activeIndex ? "opacity-100" : "opacity-50";
+    },
+    [activeIndex]
+  );
 
   return (
-    <div ref={containerRef} className={containerClassName}>
-      {children}
-    </div>
+    <section
+      className={cls(
+        "relative py-20 w-full",
+        useInvertedBackground && "bg-foreground",
+        className
+      )}
+      aria-label={ariaLabel}
+    >
+      <div className={cls("w-content-width mx-auto flex flex-col gap-6", containerClassName)}>
+        <CardStackTextBox
+          title={title}
+          titleSegments={titleSegments}
+          description={description}
+          tag={tag}
+          tagIcon={tagIcon}
+          tagAnimation={tagAnimation}
+          buttons={buttons}
+          buttonAnimation={buttonAnimation}
+          textboxLayout={textboxLayout}
+          useInvertedBackground={useInvertedBackground}
+          textBoxClassName={textBoxClassName}
+          titleClassName={titleClassName}
+          titleImageWrapperClassName={titleImageWrapperClassName}
+          titleImageClassName={titleImageClassName}
+          descriptionClassName={descriptionClassName}
+          tagClassName={tagClassName}
+          buttonContainerClassName={buttonContainerClassName}
+          buttonClassName={buttonClassName}
+          buttonTextClassName={buttonTextClassName}
+        />
+        {mediaItems && mediaItems.length > 0 && (
+          <div className={cls("relative card rounded-theme-capped overflow-hidden aspect-square md:aspect-[17/9]", mediaContainerClassName)}>
+            <div
+              className="absolute inset-6 z-1 transition-opacity duration-300 overflow-hidden"
+              style={{ opacity: imageOpacity }}
+            >
+              <MediaContent
+                imageSrc={currentMediaSrc.imageSrc}
+                videoSrc={currentMediaSrc.videoSrc}
+                imageAlt={mediaItems[activeIndex]?.imageAlt}
+                videoAriaLabel={mediaItems[activeIndex]?.videoAriaLabel}
+                imageClassName={cls("w-full h-full object-cover", mediaClassName)}
+              />
+            </div>
+          </div>
+        )}
+        <div className={cls("relative grid grid-cols-1 gap-6 md:gap-6", getGridColumns())}>
+          {Children.map(childrenArray, (child, index) => (
+            <div
+              key={index}
+              className={cls(
+                "card rounded-theme-capped p-6 flex flex-col justify-between gap-6 transition-all duration-300",
+                index === activeIndex ? "cursor-default" : "cursor-pointer hover:shadow-lg",
+                getItemOpacity(index),
+                cardClassName
+              )}
+              onClick={() => handleItemClick(index)}
+            >
+              {child}
+              <div className="relative w-full h-px overflow-hidden">
+                <div className="absolute z-0 w-full h-full bg-foreground/20" />
+                <div
+                  ref={(el) => {
+                    if (el !== null) {
+                      progressRefs.current[index] = el;
+                    }
+                  }}
+                  className={cls("absolute z-10 h-full w-full bg-foreground origin-left", progressBarClassName)}
+                  style={{ transform: "scaleX(0)" }}
+                />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
   );
 };
 
-export default TimelineHorizontalCardStack;
+TimelineHorizontalCardStack.displayName = "TimelineHorizontalCardStack";
+
+export default React.memo(TimelineHorizontalCardStack);