diff --git a/src/components/cardStack/layouts/timelines/TimelineProcessFlow.tsx b/src/components/cardStack/layouts/timelines/TimelineProcessFlow.tsx
index 58ae469..50818b2 100644
--- a/src/components/cardStack/layouts/timelines/TimelineProcessFlow.tsx
+++ b/src/components/cardStack/layouts/timelines/TimelineProcessFlow.tsx
@@ -1,12 +1,37 @@
 import React, { useRef } from 'react';
 import { useCardAnimation, UseCardAnimationOptions } from '@/hooks/useCardAnimation';
 
-interface TimelineProcessFlowProps {
+export interface TimelineProcessFlowProps {
   children: React.ReactNode;
+  title?: string;
+  titleSegments?: Array<{ type: 'text'; content: string } | { type: 'image'; src: string; alt?: string }>;
+  description?: string;
+  tag?: string;
+  tagIcon?: any;
+  tagAnimation?: string;
+  buttons?: Array<{ text: string; onClick?: () => void; href?: string }>;
+  buttonAnimation?: string;
+  textboxLayout?: string;
+  animationType?: string;
+  useInvertedBackground?: boolean;
+  ariaLabel?: string;
+  className?: string;
   containerClassName?: string;
+  textBoxClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  tagClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+  gapClassName?: string;
 }
 
-export const TimelineProcessFlow: React.FC<TimelineProcessFlowProps> = ({ children, containerClassName = '' }) => {
+export const TimelineProcessFlow: React.FC<TimelineProcessFlowProps> = ({
+  children,
+  containerClassName = '',
+  ...props
+}) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const itemRefs = useRef<(HTMLDivElement | null)[]>([]);