diff --git a/src/app/admissions/page.tsx b/src/app/admissions/page.tsx
index 5ebc8b3..fd3a956 100644
--- a/src/app/admissions/page.tsx
+++ b/src/app/admissions/page.tsx
@@ -4,40 +4,48 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
-import FooterMedia from '@/components/sections/footer/FooterMedia';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 
 export default function AdmissionsPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
-        <NavbarStyleCentered
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "Programs", id: "/programs" },
-            { name: "Admissions", id: "/admissions" },
-            { name: "Testimonials", id: "/#testimonials" },
-            { name: "FAQ", id: "/#faq" },
-          ]}
-          brandName="Bright Horizons Academy"
-        />
-        <ContactSplitForm
-          title="Admissions Inquiry"
-          description="Ready to join our community? Send us an inquiry and our admissions team will get back to you."
-          inputs={[
-            { name: "parentName", type: "text", placeholder: "Parent Name", required: true },
-            { name: "studentName", type: "text", placeholder: "Student Name", required: true },
-            { name: "email", type: "email", placeholder: "Email Address", required: true },
-          ]}
-          textarea={{ name: "message", placeholder: "Tell us about your student's goals.", rows: 4 }}
-          imageSrc="http://img.b2bpic.net/free-photo/multiracial-men-woman-with-documents_23-2147657210.jpg"
-        />
-        <FooterMedia
-          imageSrc="http://img.b2bpic.net/free-photo/couple-going-down-stone-stairs_23-2148208794.jpg"
-          logoText="Bright Horizons Academy"
-          columns={[
-            { title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "Programs", href: "/programs" }] },
-          ]}
-        />
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Programs", id: "/programs" },
+              { name: "Admissions", id: "/admissions" },
+              { name: "Staff", id: "/staff" },
+              { name: "News", id: "/news" },
+              { name: "Events", id: "/events" },
+              { name: "Contact", id: "/contact" }
+            ]}
+            brandName="Bright Horizons Academy"
+          />
+        </div>
+        <div id="contact" data-section="contact">
+          <ContactSplitForm
+            title="Admissions Inquiry"
+            description="Ready to join our community? Send us an inquiry and our admissions team will get back to you."
+            inputs={[
+              { name: "parentName", type: "text", placeholder: "Parent Name", required: true },
+              { name: "studentName", type: "text", placeholder: "Student Name", required: true },
+              { name: "email", type: "email", placeholder: "Email Address", required: true },
+            ]}
+            textarea={{ name: "message", placeholder: "Tell us about your student's goals.", rows: 4 }}
+            imageSrc="http://img.b2bpic.net/free-photo/multiracial-men-woman-with-documents_23-2147657210.jpg"
+            useInvertedBackground={false}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterLogoEmphasis
+            logoText="Bright Horizons Academy"
+            columns={[
+              { items: [{ label: "Home", href: "/" }, { label: "Programs", href: "/programs" }] },
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/events/page.tsx b/src/app/events/page.tsx
index d679887..7d3f1cf 100644
--- a/src/app/events/page.tsx
+++ b/src/app/events/page.tsx
@@ -3,22 +3,33 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import TimelineCardStack from '@/components/cardStack/layouts/timelines/TimelineCardStack';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 
 export default function EventsPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
-        <NavbarStyleCentered navItems={[{name: "Home", id: "/"}, {name: "Staff", id: "/staff"}, {name: "News", id: "/news"}, {name: "Events", id: "/events"}]} brandName="BHA" />
-        <div className="pt-32">
-            <TimelineCardStack 
-                title="Upcoming Events"
-                description="Mark your calendars for our key events."
-                textboxLayout="default"
-            >
-                <div>Sports Day - May 10th</div>
-                <div>Science Fair - May 25th</div>
-            </TimelineCardStack>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Programs", id: "/programs" },
+              { name: "Admissions", id: "/admissions" },
+              { name: "Staff", id: "/staff" },
+              { name: "News", id: "/news" },
+              { name: "Events", id: "/events" },
+              { name: "Contact", id: "/contact" }
+            ]}
+            brandName="Bright Horizons Academy"
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterLogoEmphasis
+            logoText="Bright Horizons Academy"
+            columns={[
+              { items: [{ label: "Home", href: "/" }, { label: "Events", href: "/events" }] },
+            ]}
+          />
         </div>
       </ReactLenis>
     </ThemeProvider>
diff --git a/src/app/news/page.tsx b/src/app/news/page.tsx
index 515ceaa..afd3857 100644
--- a/src/app/news/page.tsx
+++ b/src/app/news/page.tsx
@@ -4,20 +4,43 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import BlogCardThree from '@/components/sections/blog/BlogCardThree';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 
 export default function NewsPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
-        <NavbarStyleCentered navItems={[{name: "Home", id: "/"}, {name: "Staff", id: "/staff"}, {name: "News", id: "/news"}, {name: "Events", id: "/events"}]} brandName="BHA" />
-        <div className="pt-32">
-            <BlogCardThree 
-                title="Latest News"
-                description="Stay updated with academy highlights."
-                textboxLayout="default"
-                animationType="slide-up"
-                blogs={[{ id: "1", category: "Update", title: "New Semester", excerpt: "Starts soon.", imageSrc: "", authorName: "Admin", authorAvatar: "", date: "2025-01-01" }]}
-            />
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Programs", id: "/programs" },
+              { name: "Admissions", id: "/admissions" },
+              { name: "Staff", id: "/staff" },
+              { name: "News", id: "/news" },
+              { name: "Events", id: "/events" },
+              { name: "Contact", id: "/contact" }
+            ]}
+            brandName="Bright Horizons Academy"
+          />
+        </div>
+        <div id="blog" data-section="blog">
+          <BlogCardThree 
+              title="Latest News"
+              description="Stay updated with academy highlights."
+              textboxLayout="default"
+              animationType="slide-up"
+              useInvertedBackground={false}
+              blogs={[{ id: "1", category: "Update", title: "New Semester", excerpt: "Starts soon.", imageSrc: "", authorName: "Admin", authorAvatar: "", date: "2025-01-01" }]}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterLogoEmphasis
+            logoText="Bright Horizons Academy"
+            columns={[
+              { items: [{ label: "Home", href: "/" }, { label: "News", href: "/news" }] },
+            ]}
+          />
         </div>
       </ReactLenis>
     </ThemeProvider>
diff --git a/src/app/programs/page.tsx b/src/app/programs/page.tsx
index 2945ab0..f2d9c0b 100644
--- a/src/app/programs/page.tsx
+++ b/src/app/programs/page.tsx
@@ -3,43 +3,34 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
-import FooterMedia from '@/components/sections/footer/FooterMedia';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 
 export default function ProgramsPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
-        <NavbarStyleCentered
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "Programs", id: "/programs" },
-            { name: "Admissions", id: "/admissions" },
-            { name: "Testimonials", id: "/#testimonials" },
-            { name: "FAQ", id: "/#faq" },
-          ]}
-          brandName="Bright Horizons Academy"
-        />
-        <FeatureCardOne
-          animationType="slide-up"
-          textboxLayout="split"
-          gridVariant="uniform-all-items-equal"
-          useInvertedBackground={false}
-          features={[
-            { title: "STEM Excellence", description: "Advanced science and technology labs for hands-on exploration.", imageSrc: "http://img.b2bpic.net/free-photo/elevated-view-digital-tablet-surrounded-by-various-stationeries-colorful-background_23-2147879834.jpg" },
-            { title: "Arts & Creativity", description: "Creative expression through music, art, and performance.", imageSrc: "http://img.b2bpic.net/free-photo/modern-art-studio-composition_23-2147868318.jpg" },
-            { title: "Athletics", description: "Physical education promoting health, teamwork, and wellness.", imageSrc: "http://img.b2bpic.net/free-photo/lifestyle-people-jumping-around_23-2149868524.jpg" },
-          ]}
-          title="Our Academic Programs"
-          description="We provide a comprehensive curriculum designed to prepare students for a changing world."
-        />
-        <FooterMedia
-          imageSrc="http://img.b2bpic.net/free-photo/couple-going-down-stone-stairs_23-2148208794.jpg"
-          logoText="Bright Horizons Academy"
-          columns={[
-            { title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "Admissions", href: "/admissions" }] },
-          ]}
-        />
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Programs", id: "/programs" },
+              { name: "Admissions", id: "/admissions" },
+              { name: "Staff", id: "/staff" },
+              { name: "News", id: "/news" },
+              { name: "Events", id: "/events" },
+              { name: "Contact", id: "/contact" }
+            ]}
+            brandName="Bright Horizons Academy"
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterLogoEmphasis
+            logoText="Bright Horizons Academy"
+            columns={[
+              { items: [{ label: "Home", href: "/" }, { label: "Programs", href: "/programs" }] },
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/staff/page.tsx b/src/app/staff/page.tsx
index 8b9d2ab..b9d9d07 100644
--- a/src/app/staff/page.tsx
+++ b/src/app/staff/page.tsx
@@ -3,21 +3,44 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
+import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 
 export default function StaffPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
-        <NavbarStyleCentered navItems={[{name: "Home", id: "/"}, {name: "Staff", id: "/staff"}, {name: "News", id: "/news"}, {name: "Events", id: "/events"}]} brandName="BHA" />
-        <div className="pt-32">
-           <TeamCardTwo 
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Programs", id: "/programs" },
+              { name: "Admissions", id: "/admissions" },
+              { name: "Staff", id: "/staff" },
+              { name: "News", id: "/news" },
+              { name: "Events", id: "/events" },
+              { name: "Contact", id: "/contact" }
+            ]}
+            brandName="Bright Horizons Academy"
+          />
+        </div>
+        <div id="team" data-section="team">
+          <TeamCardEleven 
             title="Our Faculty & Staff"
             description="Meet the team dedicated to student success."
-            gridVariant="uniform-all-items-equal"
+            textboxLayout="default"
             animationType="slide-up"
-            members={[{ id: "1", name: "Jane Doe", role: "Principal", description: "Dedicated leader." }]} 
-           />
+            useInvertedBackground={false}
+            groups={[{ id: "1", groupTitle: "Leadership", members: [{ id: "1", title: "Jane Doe", subtitle: "Principal", detail: "Dedicated leader." }] }]}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterLogoEmphasis
+            logoText="Bright Horizons Academy"
+            columns={[
+              { items: [{ label: "Home", href: "/" }, { label: "Staff", href: "/staff" }] },
+            ]}
+          />
         </div>
       </ReactLenis>
     </ThemeProvider>