diff --git a/src/components/sections/team/TeamCardFiveFlip.tsx b/src/components/sections/team/TeamCardFiveFlip.tsx
index 538c414..382a663 100644
--- a/src/components/sections/team/TeamCardFiveFlip.tsx
+++ b/src/components/sections/team/TeamCardFiveFlip.tsx
@@ -4,6 +4,10 @@ import React, { useState } from "react";
 import { CardStackTextBox } from "@/components/CardStackTextBox";
 import { LucideIcon } from "lucide-react";
 
+interface TitleSegment {
+  text: string;
+}
+
 interface SocialLink {
   icon: LucideIcon;
   url: string;
@@ -20,18 +24,24 @@ interface TeamMember {
   socialLinks?: SocialLink[];
 }
 
+interface Button {
+  label: string;
+  onClick?: () => void;
+  href?: string;
+}
+
 interface TeamCardFiveFlipProps {
   team: TeamMember[];
   animationType: "none" | "opacity" | "slide-up" | "scale-rotate" | "blur-reveal";
   title: string;
-  titleSegments?: Array<{ type: "text"; content: string } | { type: "image"; src: string; alt?: string }>;
+  titleSegments?: TitleSegment[];
   description: string;
-  textboxLayout: "default" | "split" | "split-actions" | "split-description" | "inline-image";
+  textboxLayout: "default" | "centered" | "compact";
   useInvertedBackground: boolean;
   tag?: string;
-  tagIcon?: LucideIcon;
+  tagIcon?: React.ReactNode;
   tagAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
-  buttons?: Array<{ text: string; onClick?: () => void; href?: string }>;
+  buttons?: Button[];
   buttonAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
   ariaLabel?: string;
   className?: string;
@@ -66,7 +76,8 @@ const TeamCardFiveFlip: React.FC<TeamCardFiveFlipProps> = ({
   tagAnimation,
   buttons,
   buttonAnimation,
-  ariaLabel = "Team section",  className = "",  containerClassName = "",  textBoxClassName = "",  textBoxTitleClassName = "",  textBoxTitleImageWrapperClassName = "",  textBoxTitleImageClassName = "",  textBoxDescriptionClassName = "",  textBoxTagClassName = "",  textBoxButtonContainerClassName = "",  textBoxButtonClassName = "",  textBoxButtonTextClassName = "",  gridClassName = "",  cardClassName = "",  mediaWrapperClassName = "",  mediaClassName = "",  nameClassName = "",  roleClassName = ""}) => {
+  ariaLabel = "Team section",  className = "",  containerClassName = "",  textBoxClassName = "",  textBoxTitleClassName = "",  textBoxTitleImageWrapperClassName = "",  textBoxTitleImageClassName = "",  textBoxDescriptionClassName = "",  textBoxTagClassName = "",  textBoxButtonContainerClassName = "",  textBoxButtonClassName = "",  textBoxButtonTextClassName = "",  gridClassName = "",  cardClassName = "",  mediaWrapperClassName = "",  mediaClassName = "",  nameClassName = "",  roleClassName = ""
+}) => {
   const [flipped, setFlipped] = useState<{ [key: string]: boolean }>({});
 
   const toggleFlip = (id: string) => {
@@ -117,7 +128,8 @@ const TeamCardFiveFlip: React.FC<TeamCardFiveFlipProps> = ({
                 className="relative w-full h-full transition-transform duration-500 transform-gpu"
                 style={{
                   transformStyle: "preserve-3d" as any,
-                  transform: flipped[member.id] ? "rotateY(180deg)" : "rotateY(0deg)"}}
+                  transform: flipped[member.id] ? "rotateY(180deg)" : "rotateY(0deg)"
+                }}
               >
                 {/* Front of card - Photo and name */}
                 <div
@@ -154,7 +166,8 @@ const TeamCardFiveFlip: React.FC<TeamCardFiveFlipProps> = ({
                   className="absolute w-full h-full bg-gradient-to-br from-blue-600 to-blue-700 rounded-lg overflow-hidden shadow-lg flex items-center justify-center"
                   style={{
                     backfaceVisibility: "hidden" as any,
-                    transform: "rotateY(180deg)"}}
+                    transform: "rotateY(180deg)"
+                  }}
                 >
                   <div className="flex flex-col items-center justify-center gap-6">
                     <p className="text-white text-center font-semibold px-4">{member.name}</p>