diff --git a/src/app/ethics/page.tsx b/src/app/ethics/page.tsx
index 78e8e9a..1993919 100644
--- a/src/app/ethics/page.tsx
+++ b/src/app/ethics/page.tsx
@@ -4,45 +4,51 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
+import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
 import { Gavel, Scale, AlertTriangle } from "lucide-react";
 
 export default function EthicsPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="icon-arrow" defaultTextAnimation="reveal-blur" borderRadius="rounded" contentWidth="mediumLarge" sizing="large" background="none" cardStyle="gradient-mesh" primaryButtonStyle="shadow" secondaryButtonStyle="solid" headingFontWeight="light">
       <ReactLenis root>
-        <NavbarStyleFullscreen
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "Inclusive Relationships", id: "/inclusive" },
-            { name: "Power & Consent", id: "/power" },
-            { name: "Ethical Manner & Discrimination", id: "/ethics" },
-            { name: "Protective Strategies", id: "/protective" },
-          ]}
-          brandName="RELATE"
-        />
-        <FeatureCardTen
-          animationType="slide-up"
-          textboxLayout="split"
-          title="Ethical Manner and Addressing Discrimination"
-          description="Cultivating inclusive environments by understanding systemic bias and upholding personal dignity through ethical behavior."
-          features={[
-            {
-              title: "Understanding Bias",              description: "Recognizing implicit biases that lead to unfair treatment or discrimination in social settings.",              media: { imageSrc: "http://img.b2bpic.net/free-photo/diverse-people-having-meeting_23-2148766735.jpg" },
-              items: [{ icon: Gavel, text: "Identify exclusionary practices" }, { icon: Scale, text: "Promote equitable treatment" }],
-              reverse: false
-            },
-            {
-              title: "Active Advocacy",              description: "Standing up against discriminatory behavior and creating safe spaces for everyone.",              media: { imageSrc: "http://img.b2bpic.net/free-photo/group-diverse-people-joining-hands_23-2148766723.jpg" },
-              items: [{ icon: AlertTriangle, text: "Challenge harmful stereotypes" }, { icon: Scale, text: "Support inclusivity initiatives" }],
-              reverse: true
-            }
-          ]}
-        />
-        <FooterBaseCard
-          logoText="RELATE"
-          columns={[{ title: "Resources", items: [{ label: "Home", href: "/" }, { label: "Protective Strategies", href: "/protective" }] }]}
-        />
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Inclusive Relationships", id: "/inclusive" },
+              { name: "Power & Consent", id: "/power" },
+              { name: "Ethical Manner & Discrimination", id: "/ethics" },
+              { name: "Protective Strategies", id: "/protective" },
+            ]}
+            brandName="RELATE"
+          />
+        </div>
+        <div id="features-1" data-section="features-1">
+          <FeatureCardTwentyNine
+            animationType="slide-up"
+            textboxLayout="split"
+            title="Ethical Manner and Addressing Discrimination"
+            description="Cultivating inclusive environments by understanding systemic bias and upholding personal dignity through ethical behavior."
+            useInvertedBackground={false}
+            gridVariant="bento-grid"
+            features={[
+              {
+                id: "bias",                title: "Understanding Bias",                descriptions: ["Recognizing implicit biases that lead to unfair treatment or discrimination in social settings."],
+                imageSrc: "http://img.b2bpic.net/free-photo/diverse-people-having-meeting_23-2148766735.jpg",                titleImageSrc: "http://img.b2bpic.net/free-photo/diverse-people-having-meeting_23-2148766735.jpg",                buttonText: "Learn More"
+              },
+              {
+                id: "advocacy",                title: "Active Advocacy",                descriptions: ["Standing up against discriminatory behavior and creating safe spaces for everyone."],
+                imageSrc: "http://img.b2bpic.net/free-photo/group-diverse-people-joining-hands_23-2148766723.jpg",                titleImageSrc: "http://img.b2bpic.net/free-photo/group-diverse-people-joining-hands_23-2148766723.jpg",                buttonText: "Get Involved"
+              }
+            ]}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="RELATE"
+            columns={[{ title: "Resources", items: [{ label: "Home", href: "/" }, { label: "Protective Strategies", href: "/protective" }] }]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/inclusive/page.tsx b/src/app/inclusive/page.tsx
index 555027e..a8d657c 100644
--- a/src/app/inclusive/page.tsx
+++ b/src/app/inclusive/page.tsx
@@ -5,8 +5,7 @@ import ReactLenis from "lenis/react";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
-import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
-import { Users } from "lucide-react";
+import HeroCentered from '@/components/sections/hero/HeroCentered';
 
 export default function InclusiveRelationshipsPage() {
   return (
@@ -23,40 +22,47 @@ export default function InclusiveRelationshipsPage() {
         headingFontWeight="light"
     >
       <ReactLenis root>
-        <NavbarStyleFullscreen
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "Inclusive Relationships", id: "/inclusive" },
-            { name: "Power & Consent", id: "/power" },
-            { name: "Ethics & Discrimination", id: "/ethics" },
-            { name: "Protective Strategies", id: "/protective" },
-          ]}
-          brandName="RELATE"
-        />
-        <HeroSplitDualMedia
-          title="Inclusive Relationships"
-          description="Fostering belonging and understanding across diverse interpersonal connections through empathy and active engagement."
-          tag="Cultivating Connection"
-          rating={5}
-          ratingText="Expert Endorsed"
-          mediaItems={[
-            { imageSrc: "http://img.b2bpic.net/free-photo/diverse-people-working-together_23-2148427081.jpg", imageAlt: "Diversity" },
-            { imageSrc: "http://img.b2bpic.net/free-photo/group-people-diverse-backgrounds_23-2148812671.jpg", imageAlt: "Inclusive group" }
-          ]}
-        />
-        <TextSplitAbout
-          title="Building Interpersonal Skills"
-          description={[
-            "Inclusive relationships begin with active listening, where we validate others' experiences without judgment.",            "Developing empathy allows us to bridge gaps between different cultural, social, and personal perspectives.",            "Effective communication strategies ensure that all parties feel valued and heard in any given interaction."
-          ]}
-        />
-        <FooterBaseCard
-          logoText="RELATE"
-          columns={[
-            { title: "Resources", items: [{ label: "Home", href: "/" }, { label: "Power & Consent", href: "/power" }] },
-            { title: "Legal", items: [{ label: "Terms", href: "#" }, { label: "Privacy", href: "#" }] },
-          ]}
-        />
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Inclusive Relationships", id: "/inclusive" },
+              { name: "Power & Consent", id: "/power" },
+              { name: "Ethics & Discrimination", id: "/ethics" },
+              { name: "Protective Strategies", id: "/protective" },
+            ]}
+            brandName="RELATE"
+          />
+        </div>
+        <div id="hero" data-section="hero">
+          <HeroCentered
+            title="Inclusive Relationships"
+            description="Fostering belonging and understanding across diverse interpersonal connections through empathy and active engagement."
+            avatars={[
+                { src: "http://img.b2bpic.net/free-photo/diverse-people-working-together_23-2148427081.jpg", alt: "Diversity" },
+                { src: "http://img.b2bpic.net/free-photo/group-people-diverse-backgrounds_23-2148812671.jpg", alt: "Inclusive group" }
+            ]}
+            background={{ variant: "plain" }}
+          />
+        </div>
+        <div id="about-1" data-section="about-1">
+          <TextSplitAbout
+            title="Building Interpersonal Skills"
+            description={[
+              "Inclusive relationships begin with active listening, where we validate others' experiences without judgment.",              "Developing empathy allows us to bridge gaps between different cultural, social, and personal perspectives.",              "Effective communication strategies ensure that all parties feel valued and heard in any given interaction."
+            ]}
+            useInvertedBackground={false}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="RELATE"
+            columns={[
+              { title: "Resources", items: [{ label: "Home", href: "/" }, { label: "Power & Consent", href: "/power" }] },
+              { title: "Legal", items: [{ label: "Terms", href: "#" }, { label: "Privacy", href: "#" }] },
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/power/page.tsx b/src/app/power/page.tsx
index 8cdc9ce..9097f02 100644
--- a/src/app/power/page.tsx
+++ b/src/app/power/page.tsx
@@ -5,7 +5,7 @@ import ReactLenis from "lenis/react";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
-import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
+import HeroCentered from '@/components/sections/hero/HeroCentered';
 
 export default function PowerAndConsentPage() {
   return (
@@ -22,40 +22,47 @@ export default function PowerAndConsentPage() {
         headingFontWeight="light"
     >
       <ReactLenis root>
-        <NavbarStyleFullscreen
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "Inclusive Relationships", id: "/inclusive" },
-            { name: "Power & Consent", id: "/power" },
-            { name: "Ethics & Discrimination", id: "/ethics" },
-            { name: "Protective Strategies", id: "/protective" },
-          ]}
-          brandName="RELATE"
-        />
-        <HeroSplitDualMedia
-          title="Power in Relationships & Consent"
-          description="Understanding power dynamics is essential to establishing clear, enthusiastic, and ongoing consent in all relationships."
-          tag="Understanding Boundaries"
-          rating={5}
-          ratingText="Essential Education"
-          mediaItems={[
-            { imageSrc: "http://img.b2bpic.net/free-photo/hand-gesture-expressing-different-feelings_23-2150061940.jpg", imageAlt: "Communication" },
-            { imageSrc: "http://img.b2bpic.net/free-photo/happy-satisfied-business-woman-using-tablet-outside_74855-2926.jpg", imageAlt: "Autonomy" }
-          ]}
-        />
-        <TextSplitAbout
-          title="The Essence of Consent"
-          description={[
-            "Consent is an affirmative, voluntary, and reversible agreement between participants to engage in a specific action.",            "Recognizing power imbalances helps in creating safe environments where boundaries are respected by everyone involved.",            "Prioritizing mutual understanding ensures that every interaction remains grounded in trust and respect."
-          ]}
-        />
-        <FooterBaseCard
-          logoText="RELATE"
-          columns={[
-            { title: "Resources", items: [{ label: "Home", href: "/" }, { label: "Inclusive", href: "/inclusive" }] },
-            { title: "Legal", items: [{ label: "Terms", href: "#" }, { label: "Privacy", href: "#" }] },
-          ]}
-        />
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Inclusive Relationships", id: "/inclusive" },
+              { name: "Power & Consent", id: "/power" },
+              { name: "Ethics & Discrimination", id: "/ethics" },
+              { name: "Protective Strategies", id: "/protective" },
+            ]}
+            brandName="RELATE"
+          />
+        </div>
+        <div id="hero" data-section="hero">
+          <HeroCentered
+            title="Power in Relationships & Consent"
+            description="Understanding power dynamics is essential to establishing clear, enthusiastic, and ongoing consent in all relationships."
+            avatars={[
+                { src: "http://img.b2bpic.net/free-photo/hand-gesture-expressing-different-feelings_23-2150061940.jpg", alt: "Communication" },
+                { src: "http://img.b2bpic.net/free-photo/happy-satisfied-business-woman-using-tablet-outside_74855-2926.jpg", alt: "Autonomy" }
+            ]}
+            background={{ variant: "plain" }}
+          />
+        </div>
+        <div id="about-1" data-section="about-1">
+          <TextSplitAbout
+            title="The Essence of Consent"
+            description={[
+              "Consent is an affirmative, voluntary, and reversible agreement between participants to engage in a specific action.",              "Recognizing power imbalances helps in creating safe environments where boundaries are respected by everyone involved.",              "Prioritizing mutual understanding ensures that every interaction remains grounded in trust and respect."
+            ]}
+            useInvertedBackground={false}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="RELATE"
+            columns={[
+              { title: "Resources", items: [{ label: "Home", href: "/" }, { label: "Inclusive", href: "/inclusive" }] },
+              { title: "Legal", items: [{ label: "Terms", href: "#" }, { label: "Privacy", href: "#" }] },
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/protective/page.tsx b/src/app/protective/page.tsx
index c896ba7..021a011 100644
--- a/src/app/protective/page.tsx
+++ b/src/app/protective/page.tsx
@@ -4,45 +4,51 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
+import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
 import { ShieldCheck, Lock, Eye } from "lucide-react";
 
 export default function ProtectivePage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="icon-arrow" defaultTextAnimation="reveal-blur" borderRadius="rounded" contentWidth="mediumLarge" sizing="large" background="none" cardStyle="gradient-mesh" primaryButtonStyle="shadow" secondaryButtonStyle="solid" headingFontWeight="light">
       <ReactLenis root>
-        <NavbarStyleFullscreen
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "Inclusive Relationships", id: "/inclusive" },
-            { name: "Power & Consent", id: "/power" },
-            { name: "Ethical Manner & Discrimination", id: "/ethics" },
-            { name: "Protective Strategies", id: "/protective" },
-          ]}
-          brandName="RELATE"
-        />
-        <FeatureCardTen
-          animationType="slide-up"
-          textboxLayout="split"
-          title="Protective Strategies"
-          description="Equipping yourself with actionable steps and boundaries to ensure emotional and physical safety in all connections."
-          features={[
-            {
-              title: "Establishing Boundaries",              description: "Defining clear personal limits to foster respect and maintain healthy interactions.",              media: { imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-protective-gesture_23-2148812671.jpg" },
-              items: [{ icon: ShieldCheck, text: "Communicate limits clearly" }, { icon: Lock, text: "Maintain autonomy" }],
-              reverse: false
-            },
-            {
-              title: "Safety Awareness",              description: "Developing heightened awareness of environments and situations to proactively mitigate risk.",              media: { imageSrc: "http://img.b2bpic.net/free-photo/security-concept-with-person_23-2148516303.jpg" },
-              items: [{ icon: Eye, text: "Assess situational safety" }, { icon: ShieldCheck, text: "Trust your intuition" }],
-              reverse: true
-            }
-          ]}
-        />
-        <FooterBaseCard
-          logoText="RELATE"
-          columns={[{ title: "Resources", items: [{ label: "Home", href: "/" }, { label: "Ethics", href: "/ethics" }] }]}
-        />
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Inclusive Relationships", id: "/inclusive" },
+              { name: "Power & Consent", id: "/power" },
+              { name: "Ethical Manner & Discrimination", id: "/ethics" },
+              { name: "Protective Strategies", id: "/protective" },
+            ]}
+            brandName="RELATE"
+          />
+        </div>
+        <div id="features-1" data-section="features-1">
+          <FeatureCardTwentyNine
+            animationType="slide-up"
+            textboxLayout="split"
+            title="Protective Strategies"
+            description="Equipping yourself with actionable steps and boundaries to ensure emotional and physical safety in all connections."
+            useInvertedBackground={false}
+            gridVariant="bento-grid"
+            features={[
+              {
+                id: "boundaries",                title: "Establishing Boundaries",                descriptions: ["Defining clear personal limits to foster respect and maintain healthy interactions."],
+                imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-protective-gesture_23-2148812671.jpg",                titleImageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-protective-gesture_23-2148812671.jpg",                buttonText: "Learn More"
+              },
+              {
+                id: "safety",                title: "Safety Awareness",                descriptions: ["Developing heightened awareness of environments and situations to proactively mitigate risk."],
+                imageSrc: "http://img.b2bpic.net/free-photo/security-concept-with-person_23-2148516303.jpg",                titleImageSrc: "http://img.b2bpic.net/free-photo/security-concept-with-person_23-2148516303.jpg",                buttonText: "Get Involved"
+              }
+            ]}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="RELATE"
+            columns={[{ title: "Resources", items: [{ label: "Home", href: "/" }, { label: "Ethics", href: "/ethics" }] }]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );