diff --git a/src/components/sections/blog/BlogCardTwo.tsx b/src/components/sections/blog/BlogCardTwo.tsx
index b5e4142..c0b3f30 100644
--- a/src/components/sections/blog/BlogCardTwo.tsx
+++ b/src/components/sections/blog/BlogCardTwo.tsx
@@ -1,216 +1,241 @@
 "use client";
 
-import React, { useEffect, useRef } from 'react';
-import gsap from 'gsap';
-import { ScrollTrigger } from 'gsap/ScrollTrigger';
-import TimelineHorizontalCardStack from '@/components/cardStack/layouts/timelines/TimelineHorizontalCardStack';
+import { memo } from "react";
+import Image from "next/image";
+import CardStack from "@/components/cardStack/CardStack";
+import Badge from "@/components/shared/Badge";
+import OverlayArrowButton from "@/components/shared/OverlayArrowButton";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { BlogPost } from "@/lib/api/blog";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
 
-gsap.registerPlugin(ScrollTrigger);
-
-interface BlogCardTwoProps {
-  blogs: Array<{
-    id: string;
-    category: string;
-    title: string;
-    excerpt: string;
-    imageSrc: string;
-    imageAlt?: string;
-    authorName: string;
-    authorAvatar: string;
-    date: string;
-    onBlogClick?: () => void;
-  }>;
-  carouselMode?: 'auto' | 'buttons';
-  uniformGridCustomHeightClasses?: string;
-  animationType: 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
-  title: string;
-  titleSegments?: Array<{ type: 'text'; content: string } | { type: 'image'; src: string; alt?: string }>;
-  description: string;
-  tag?: string;
-  tagIcon?: React.ComponentType<any>;
-  tagAnimation?: 'none' | 'opacity' | 'slide-up' | 'blur-reveal';
-  buttons?: Array<{ text: string; onClick?: () => void; href?: string }>;
-  buttonAnimation?: 'none' | 'opacity' | 'slide-up' | 'blur-reveal';
-  textboxLayout: 'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image';
-  useInvertedBackground: boolean;
-  ariaLabel?: string;
-  className?: string;
-  containerClassName?: string;
-  cardClassName?: string;
-  imageWrapperClassName?: string;
-  imageClassName?: string;
-  categoryClassName?: string;
-  cardTitleClassName?: string;
-  excerptClassName?: string;
-  authorContainerClassName?: string;
-  authorAvatarClassName?: string;
-  authorNameClassName?: string;
-  dateClassName?: string;
-  textBoxTitleImageClassName?: string;
-  textBoxDescriptionClassName?: string;
-  gridClassName?: string;
-  carouselClassName?: string;
-  controlsClassName?: string;
-  textBoxClassName?: string;
-  textBoxTagClassName?: string;
-  textBoxButtonContainerClassName?: string;
-  textBoxButtonClassName?: string;
-  textBoxButtonTextClassName?: string;
-}
-
-const BlogCardTwo: React.FC<BlogCardTwoProps> = ({
-  blogs,
-  carouselMode = 'buttons',
-  uniformGridCustomHeightClasses = 'min-h-95 2xl:min-h-105',
-  animationType,
-  title,
-  titleSegments,
-  description,
-  tag,
-  tagIcon: TagIcon,
-  tagAnimation,
-  buttons,
-  buttonAnimation,
-  textboxLayout,
-  useInvertedBackground,
-  ariaLabel = 'Blog section',
-  className = '',
-  containerClassName = '',
-  cardClassName = '',
-  imageWrapperClassName = '',
-  imageClassName = '',
-  categoryClassName = '',
-  cardTitleClassName = '',
-  excerptClassName = '',
-  authorContainerClassName = '',
-  authorAvatarClassName = '',
-  authorNameClassName = '',
-  dateClassName = '',
-  textBoxTitleImageClassName = '',
-  textBoxDescriptionClassName = '',
-  gridClassName = '',
-  carouselClassName = '',
-  controlsClassName = '',
-  textBoxClassName = '',
-  textBoxTagClassName = '',
-  textBoxButtonContainerClassName = '',
-  textBoxButtonClassName = '',
-  textBoxButtonTextClassName = '',
-}) => {
-  const sectionRef = useRef<HTMLDivElement>(null);
-  const cardsRef = useRef<(HTMLDivElement | null)[]>([]);
-
-  useEffect(() => {
-    if (animationType === 'none' || !sectionRef.current) return;
-
-    const cards = cardsRef.current.filter((card): card is HTMLDivElement => card !== null);
-    if (cards.length === 0) return;
-
-    cards.forEach((card, index) => {
-      gsap.set(card, { opacity: 0, y: 20 });
-
-      ScrollTrigger.create({
-        trigger: card,
-        onEnter: () => {
-          gsap.to(card, {
-            opacity: 1,
-            y: 0,
-            duration: 0.6,
-            delay: index * 0.1,
-            ease: 'power2.out',
-          });
-        },
-      });
-    });
-
-    return () => {
-      cards.forEach(() => ScrollTrigger.getAll().forEach(trigger => trigger.kill()));
-    };
-  }, [animationType]);
-
-  const gridVariant = blogs.length <= 4 ? 'uniform-all-items-equal' : 'uniform-all-items-equal';
-  const mode = blogs.length >= 5 ? 'auto' : carouselMode;
-
-  const blogChildren = blogs.map((blog, index) => (
-    <div
-      key={blog.id}
-      ref={el => {
-        cardsRef.current[index] = el;
-      }}
-      className={`cursor-pointer group ${cardClassName}`}
-      onClick={blog.onBlogClick}
-    >
-      {/* Image wrapper with overlay arrow */}
-      <div className={`relative overflow-hidden rounded-lg ${imageWrapperClassName}`}>
-        <img
-          src={blog.imageSrc}
-          alt={blog.imageAlt || blog.title}
-          className={`w-full h-full object-cover transition-transform duration-300 group-hover:scale-110 ${imageClassName}`}
-        />
-        <div className="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
-          <div className="text-white text-3xl">→</div>
-        </div>
-      </div>
-
-      {/* Category badge */}
-      <div className={`mt-4 inline-block px-3 py-1 rounded-full bg-blue-500/20 text-blue-400 text-sm font-semibold ${categoryClassName}`}>
-        {blog.category}
-      </div>
-
-      {/* Title */}
-      <h3 className={`mt-3 text-xl font-bold text-gray-900 dark:text-white line-clamp-2 ${cardTitleClassName}`}>
-        {blog.title}
-      </h3>
-
-      {/* Excerpt */}
-      <p className={`mt-2 text-gray-600 dark:text-gray-300 text-sm line-clamp-2 ${excerptClassName}`}>
-        {blog.excerpt}
-      </p>
-
-      {/* Author info */}
-      <div className={`mt-4 flex items-center gap-3 ${authorContainerClassName}`}>
-        <img
-          src={blog.authorAvatar}
-          alt={blog.authorName}
-          className={`w-8 h-8 rounded-full object-cover ${authorAvatarClassName}`}
-        />
-        <div className="flex-1 min-w-0">
-          <p className={`text-sm font-semibold text-gray-900 dark:text-white truncate ${authorNameClassName}`}>
-            {blog.authorName}
-          </p>
-          <p className={`text-xs text-gray-500 dark:text-gray-400 ${dateClassName}`}>{blog.date}</p>
-        </div>
-      </div>
-    </div>
-  ));
-
-  return (
-    <section ref={sectionRef} className={`py-12 md:py-20 ${className}`} aria-label={ariaLabel}>
-      <TimelineHorizontalCardStack
-        children={blogChildren}
-        title={title}
-        titleSegments={titleSegments}
-        description={description}
-        tag={tag}
-        tagIcon={TagIcon}
-        tagAnimation={tagAnimation}
-        buttons={buttons}
-        buttonAnimation={buttonAnimation}
-        textboxLayout={textboxLayout}
-        useInvertedBackground={useInvertedBackground}
-        ariaLabel={ariaLabel}
-        className={className}
-        containerClassName={containerClassName}
-        textBoxClassName={textBoxClassName}
-        titleClassName={textBoxTitleImageClassName}
-        descriptionClassName={textBoxDescriptionClassName}
-        tagClassName={textBoxTagClassName}
-        buttonContainerClassName={textBoxButtonContainerClassName}
-        buttonClassName={textBoxButtonClassName}
-        buttonTextClassName={textBoxButtonTextClassName}
-      />
-    </section>
-  );
+type BlogCard = Omit<BlogPost, 'category'> & {
+    category: string | string[];
 };
 
-export default BlogCardTwo;
\ No newline at end of file
+interface BlogCardTwoProps {
+    blogs: BlogCard[];
+    carouselMode?: "auto" | "buttons";
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    imageWrapperClassName?: string;
+    imageClassName?: string;
+    authorAvatarClassName?: string;
+    authorDateClassName?: string;
+    cardTitleClassName?: string;
+    excerptClassName?: string;
+    categoryClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    gridClassName?: string;
+    carouselClassName?: string;
+    controlsClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+}
+
+interface BlogCardItemProps {
+    blog: BlogCard;
+    shouldUseLightText: boolean;
+    cardClassName?: string;
+    imageWrapperClassName?: string;
+    imageClassName?: string;
+    authorAvatarClassName?: string;
+    authorDateClassName?: string;
+    cardTitleClassName?: string;
+    excerptClassName?: string;
+    categoryClassName?: string;
+}
+
+const BlogCardItem = memo(({
+    blog,
+    shouldUseLightText,
+    cardClassName = "",
+    imageWrapperClassName = "",
+    imageClassName = "",
+    authorAvatarClassName = "",
+    authorDateClassName = "",
+    cardTitleClassName = "",
+    excerptClassName = "",
+    categoryClassName = "",
+}: BlogCardItemProps) => {
+    return (
+        <article
+            className={cls("relative h-full card group flex flex-col gap-4 cursor-pointer p-4 rounded-theme-capped", cardClassName)}
+            onClick={blog.onBlogClick}
+            role="article"
+            aria-label={`${blog.title} by ${blog.authorName}`}
+        >
+            <div className={cls("relative z-1 w-full aspect-[4/3] overflow-hidden rounded-theme-capped", imageWrapperClassName)}>
+                <Image
+                    src={blog.imageSrc}
+                    alt={blog.imageAlt || blog.title}
+                    fill
+                    className={cls("w-full h-full object-cover transition-transform duration-500 ease-in-out group-hover:scale-105", imageClassName)}
+                    unoptimized={blog.imageSrc.startsWith('http') || blog.imageSrc.startsWith('//')}
+                />
+                <OverlayArrowButton ariaLabel={`Read ${blog.title}`} />
+            </div>
+
+            <div className="relative z-1 flex flex-col justify-between gap-6 flex-1">
+                <div className="flex flex-col gap-2">
+                    <div className="flex items-center gap-2">
+                        {blog.authorAvatar && (
+                            <Image
+                                src={blog.authorAvatar}
+                                alt={blog.authorName}
+                                width={24}
+                                height={24}
+                                className={cls("h-[var(--text-xs)] w-auto aspect-square rounded-theme object-cover bg-background-accent", authorAvatarClassName)}
+                                unoptimized={blog.authorAvatar.startsWith('http') || blog.authorAvatar.startsWith('//')}
+                            />
+                        )}
+                        <p className={cls("text-xs", shouldUseLightText ? "text-background" : "text-foreground", authorDateClassName)}>
+                            {blog.authorName} • {blog.date}
+                        </p>
+                    </div>
+
+                    <h3 className={cls("text-2xl font-medium leading-[1.25]", shouldUseLightText ? "text-background" : "text-foreground", cardTitleClassName)}>
+                        {blog.title}
+                    </h3>
+
+                    <p className={cls("text-base leading-[1.25]", shouldUseLightText ? "text-background" : "text-foreground", excerptClassName)}>
+                        {blog.excerpt}
+                    </p>
+                </div>
+
+                <div className="flex flex-wrap gap-2">
+                    {Array.isArray(blog.category) ? (
+                        blog.category.map((cat, index) => (
+                            <Badge key={`${cat}-${index}`} text={cat} variant="primary" className={categoryClassName} />
+                        ))
+                    ) : (
+                        <Badge text={blog.category} variant="primary" className={categoryClassName} />
+                    )}
+                </div>
+            </div>
+        </article>
+    );
+});
+
+BlogCardItem.displayName = "BlogCardItem";
+
+const BlogCardTwo = ({
+    blogs = [],
+    carouselMode = "buttons",
+    uniformGridCustomHeightClasses,
+    animationType,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation,
+    buttons,
+    buttonAnimation,
+    textboxLayout,
+    useInvertedBackground,
+    ariaLabel = "Blog section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    imageWrapperClassName = "",
+    imageClassName = "",
+    authorAvatarClassName = "",
+    authorDateClassName = "",
+    cardTitleClassName = "",
+    excerptClassName = "",
+    categoryClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: BlogCardTwoProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <CardStack
+            mode={carouselMode}
+            gridVariant="uniform-all-items-equal"
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+            
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            useInvertedBackground={useInvertedBackground}
+            ariaLabel={ariaLabel}
+            className={className}
+            containerClassName={containerClassName}
+            gridClassName={gridClassName}
+            carouselClassName={carouselClassName}
+            controlsClassName={controlsClassName}
+            textBoxClassName={textBoxClassName}
+            titleClassName={textBoxTitleClassName}
+            titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+            titleImageClassName={textBoxTitleImageClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+        >
+            {blogs.map((blog) => (
+                <BlogCardItem
+                    key={blog.id}
+                    blog={blog}
+                    shouldUseLightText={shouldUseLightText}
+                    cardClassName={cardClassName}
+                    imageWrapperClassName={imageWrapperClassName}
+                    imageClassName={imageClassName}
+                    authorAvatarClassName={authorAvatarClassName}
+                    authorDateClassName={authorDateClassName}
+                    cardTitleClassName={cardTitleClassName}
+                    excerptClassName={excerptClassName}
+                    categoryClassName={categoryClassName}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+BlogCardTwo.displayName = "BlogCardTwo";
+
+export default BlogCardTwo;