diff --git a/src/components/cardStack/CardStack.tsx b/src/components/cardStack/CardStack.tsx
index 10562a0..6ac66da 100644
--- a/src/components/cardStack/CardStack.tsx
+++ b/src/components/cardStack/CardStack.tsx
@@ -1,23 +1,24 @@
-"use client";
+import { ReactNode } from 'react';
+import { CardStackProvider, CardStackContextType } from './CardStackContext';
 
-import React from 'react';
-import { TimelineBase } from '@/components/cardStack/layouts/timelines/TimelineBase';
-
-interface CardStackProps {
-  items?: Array<{ id: string; title: string; description: string }>;
+export interface CardStackProps {
+  children: ReactNode;
   className?: string;
+  ariaLabel?: string;
 }
 
-const CardStack: React.FC<CardStackProps> = ({ items = [], className = '' }) => {
-  if (!items || items.length === 0) {
-    return <div className={className}>No items to display</div>;
-  }
+export default function CardStack({ children, className = '', ariaLabel = 'Card stack' }: CardStackProps) {
+  const contextValue: CardStackContextType = {
+    isVisible: true,
+    getAnimationProps: () => ({ isVisible: true }),
+    itemRefs: {}
+  };
 
   return (
-    <div className={`card-stack ${className}`}>
-      <TimelineBase items={items} />
-    </div>
+    <CardStackProvider value={contextValue}>
+      <div className={className} aria-label={ariaLabel}>
+        {children}
+      </div>
+    </CardStackProvider>
   );
-};
-
-export default CardStack;
+}