diff --git a/src/app/academics/page.tsx b/src/app/academics/page.tsx
index 22b4b73..e47dd5c 100644
--- a/src/app/academics/page.tsx
+++ b/src/app/academics/page.tsx
@@ -8,44 +8,53 @@ import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 
 export default function AcademicsPage() {
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingOverlay
-        navItems={[
-          { name: "Home", id: "/" },
-          { name: "Academics", id: "/academics" },
-          { name: "Programs", id: "/programs" },
-          { name: "About", id: "/about" },
-          { name: "Contact", id: "/contact" },
-        ]}
-        brandName="SJHN"
-      />
-      <div className="pt-32">
-        <FeatureCardTwelve
-          title="Academic Programs & Courses"
-          description="Explore our comprehensive range of subjects and academic pathways."
-          textboxLayout="split"
-          animationType="slide-up"
-          features={[
-            { id: "f1", label: "Science", title: "STEM Excellence", items: ["Physics", "Chemistry", "Biology", "Computer Science"] },
-            { id: "f2", label: "Arts", title: "Humanities", items: ["History", "Geography", "Literature", "Fine Arts"] },
-          ]}
-        />
-        <TeamCardEleven
-          title="Our Distinguished Faculty"
-          description="Meet the dedicated educators guiding our students."
-          textboxLayout="split"
-          animationType="slide-up"
-          groups={[
-            {
-              id: "g1",              groupTitle: "Department of Sciences",              members: [{ id: "m1", title: "Head of Science", subtitle: "PhD in Physics", detail: "Expert in educational pedagogy and science curriculum development." }]
-            }
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Academics", id: "/academics" },
+            { name: "Programs", id: "/programs" },
+            { name: "About", id: "/about" },
+            { name: "Contact", id: "/contact" },
           ]}
         />
       </div>
-      <FooterBaseReveal
-        logoText="SJHN"
-        columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]}
-      />
+      <div className="pt-32">
+        <div id="features" data-section="features">
+          <FeatureCardTwelve
+            title="Academic Programs & Courses"
+            description="Explore our comprehensive range of subjects and academic pathways."
+            textboxLayout="split"
+            animationType="slide-up"
+            useInvertedBackground={false}
+            features={[
+              { id: "f1", label: "Science", title: "STEM Excellence", items: ["Physics", "Chemistry", "Biology", "Computer Science"] },
+              { id: "f2", label: "Arts", title: "Humanities", items: ["History", "Geography", "Literature", "Fine Arts"] },
+            ]}
+          />
+        </div>
+        <div id="team" data-section="team">
+          <TeamCardEleven
+            title="Our Distinguished Faculty"
+            description="Meet the dedicated educators guiding our students."
+            textboxLayout="split"
+            animationType="slide-up"
+            useInvertedBackground={false}
+            groups={[
+              {
+                id: "g1", groupTitle: "Department of Sciences", members: [{ id: "m1", title: "Head of Science", subtitle: "PhD in Physics", detail: "Expert in educational pedagogy and science curriculum development." }]
+              }
+            ]}
+          />
+        </div>
+      </div>
+      <div id="footer" data-section="footer">
+        <FooterBaseReveal
+          logoText="SJHN"
+          columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]}
+        />
+      </div>
     </ThemeProvider>
   );
 }
\ No newline at end of file
diff --git a/src/app/admissions/page.tsx b/src/app/admissions/page.tsx
index fee980a..1e87957 100644
--- a/src/app/admissions/page.tsx
+++ b/src/app/admissions/page.tsx
@@ -9,9 +9,10 @@ import ReactLenis from "lenis/react";
 
 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>
-        <NavbarLayoutFloatingOverlay
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
             navItems={[
                 { name: "Home", id: "/" },
                 { name: "Admissions", id: "/admissions" },
@@ -19,23 +20,33 @@ export default function AdmissionsPage() {
                 { name: "About", id: "/#about" },
                 { name: "Contact", id: "/#contact" },
             ]}
-            brandName="SJHN"
-        />
-        <TimelineHorizontalCardStack 
+          />
+        </div>
+        <div id="timeline" data-section="timeline">
+          <TimelineHorizontalCardStack 
             title="Enrollment Process"
             description="Step-by-step guide to joining our school community."
             textboxLayout="default"
             className="pt-32"
-        />
-        <ContactSplitForm
+            useInvertedBackground={false}
+          >
+            <div />
+          </TimelineHorizontalCardStack>
+        </div>
+        <div id="contact" data-section="contact">
+          <ContactSplitForm
             title="Apply Now"
             description="Submit your application inquiry today."
             inputs={[{ name: "name", type: "text", placeholder: "Student Name" }, { name: "email", type: "email", placeholder: "Parent Email" }]}
-        />
-        <FooterBaseReveal
+            useInvertedBackground={false}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
             logoText="SJHN"
             columns={[{ title: "Resources", items: [{ label: "Home", href: "/" }] }]} 
-        />
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/gallery/page.tsx b/src/app/gallery/page.tsx
index e7a5355..ca94030 100644
--- a/src/app/gallery/page.tsx
+++ b/src/app/gallery/page.tsx
@@ -8,24 +8,29 @@ import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
 
 export default function GalleryPage() {
   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>
-        <NavbarLayoutFloatingOverlay navItems={[{name: "Home", id: "/"}, {name: "Gallery", id: "#gallery"}, {name: "Staff", id: "/staff"}]} brandName="SJHN" />
-        <div id="gallery" className="py-20">
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay navItems={[{name: "Home", id: "/"}, {name: "Gallery", id: "#gallery"}, {name: "Staff", id: "/staff"}]} />
+        </div>
+        <div id="gallery" data-section="gallery" className="py-20">
           <ProductCardTwo 
             title="School Media Gallery"
             description="Capturing memorable moments from campus life, sports events, and academic milestones."
             gridVariant="four-items-2x2-equal-grid"
             animationType="slide-up"
             textboxLayout="default"
+            useInvertedBackground={false}
             products={[
-              { id: "p1", name: "Graduation 2024", brand: "Album", price: "12 photos", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-caucasian-student-girl-completing-her-class-notes-with-information_482257-114573.jpg" },
-              { id: "p2", name: "Science Fair", brand: "Album", price: "24 photos", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-lady-with-dark-curly-hair-khaki-shirt-holding-laptop-with-notepad-cup-coffee-go-hands-dreamily-looking-camera-isolated_574295-2237.jpg" },
-              { id: "p3", name: "Sports Day", brand: "Album", price: "18 photos", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/successful-guy-with-glasses_1098-1116.jpg" },
+              { id: "p1", name: "Graduation 2024", brand: "Album", price: "12 photos", rating: 5, reviewCount: "100", imageSrc: "http://img.b2bpic.net/free-photo/portrait-caucasian-student-girl-completing-her-class-notes-with-information_482257-114573.jpg" },
+              { id: "p2", name: "Science Fair", brand: "Album", price: "24 photos", rating: 5, reviewCount: "100", imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-lady-with-dark-curly-hair-khaki-shirt-holding-laptop-with-notepad-cup-coffee-go-hands-dreamily-looking-camera-isolated_574295-2237.jpg" },
+              { id: "p3", name: "Sports Day", brand: "Album", price: "18 photos", rating: 5, reviewCount: "100", imageSrc: "http://img.b2bpic.net/free-photo/successful-guy-with-glasses_1098-1116.jpg" },
             ]}
           />
         </div>
-        <FooterBaseReveal logoText="SJHN" columns={[]} />
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal logoText="SJHN" columns={[]} />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/news/page.tsx b/src/app/news/page.tsx
index 5e85cc1..7b1353b 100644
--- a/src/app/news/page.tsx
+++ b/src/app/news/page.tsx
@@ -8,9 +8,10 @@ import ReactLenis from "lenis/react";
 
 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>
-        <NavbarLayoutFloatingOverlay
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
             navItems={[
                 { name: "Home", id: "/" },
                 { name: "Admissions", id: "/admissions" },
@@ -18,20 +19,25 @@ export default function NewsPage() {
                 { name: "About", id: "/#about" },
                 { name: "Contact", id: "/#contact" },
             ]}
-            brandName="SJHN"
-        />
-        <BlogCardThree 
+          />
+        </div>
+        <div id="news" data-section="news">
+          <BlogCardThree 
             title="Latest Announcements"
             description="Stay updated with all school news."
             animationType="slide-up"
             textboxLayout="default"
             className="pt-32"
+            useInvertedBackground={false}
             blogs={[]}
-        />
-        <FooterBaseReveal
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
             logoText="SJHN"
             columns={[{ title: "Resources", items: [{ label: "Home", href: "/" }] }]} 
-        />
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/programs/page.tsx b/src/app/programs/page.tsx
index 5c38c0d..6976090 100644
--- a/src/app/programs/page.tsx
+++ b/src/app/programs/page.tsx
@@ -7,33 +7,39 @@ import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 
 export default function ProgramsPage() {
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingOverlay
-        navItems={[
-          { name: "Home", id: "/" },
-          { name: "Academics", id: "/academics" },
-          { name: "Programs", id: "/programs" },
-          { name: "About", id: "/about" },
-          { name: "Contact", id: "/contact" },
-        ]}
-        brandName="SJHN"
-      />
-      <div className="pt-32">
-        <FeatureCardTwelve
-          title="Extracurricular Activities & Clubs"
-          description="Beyond the classroom, we foster personal growth through various clubs and activities."
-          textboxLayout="split"
-          animationType="slide-up"
-          features={[
-            { id: "c1", label: "Sports", title: "Athletics", items: ["Netball", "Football", "Swimming", "Basketball"] },
-            { id: "c2", label: "Clubs", title: "Leadership & Arts", items: ["Debating Club", "Drama Society", "Science Club", "Young Farmers"] },
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Academics", id: "/academics" },
+            { name: "Programs", id: "/programs" },
+            { name: "About", id: "/about" },
+            { name: "Contact", id: "/contact" },
           ]}
         />
       </div>
-      <FooterBaseReveal
-        logoText="SJHN"
-        columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]}
-      />
+      <div className="pt-32">
+        <div id="features" data-section="features">
+          <FeatureCardTwelve
+            title="Extracurricular Activities & Clubs"
+            description="Beyond the classroom, we foster personal growth through various clubs and activities."
+            textboxLayout="split"
+            animationType="slide-up"
+            useInvertedBackground={false}
+            features={[
+              { id: "c1", label: "Sports", title: "Athletics", items: ["Netball", "Football", "Swimming", "Basketball"] },
+              { id: "c2", label: "Clubs", title: "Leadership & Arts", items: ["Debating Club", "Drama Society", "Science Club", "Young Farmers"] },
+            ]}
+          />
+        </div>
+      </div>
+      <div id="footer" data-section="footer">
+        <FooterBaseReveal
+          logoText="SJHN"
+          columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]}
+        />
+      </div>
     </ThemeProvider>
   );
 }
\ No newline at end of file
diff --git a/src/app/staff/page.tsx b/src/app/staff/page.tsx
index d532cd8..f5a103f 100644
--- a/src/app/staff/page.tsx
+++ b/src/app/staff/page.tsx
@@ -8,23 +8,28 @@ import TeamCardOne from '@/components/sections/team/TeamCardOne';
 
 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>
-        <NavbarLayoutFloatingOverlay navItems={[{name: "Home", id: "/"}, {name: "Gallery", id: "/gallery"}, {name: "Staff", id: "#staff"}]} brandName="SJHN" />
-        <div id="staff" className="py-20">
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay navItems={[{name: "Home", id: "/"}, {name: "Gallery", id: "/gallery"}, {name: "Staff", id: "#staff"}]} />
+        </div>
+        <div id="staff" data-section="staff" className="py-20">
           <TeamCardOne 
             title="Faculty & Staff Directory"
             description="Meet the dedicated team of educators and professionals guiding our students."
             gridVariant="four-items-2x2-equal-grid"
             animationType="slide-up"
             textboxLayout="default"
+            useInvertedBackground={false}
             members={[
               { id: "m1", name: "Jane Doe", role: "Principal", imageSrc: "http://img.b2bpic.net/free-photo/portrait-adult-woman-posing-with-book_23-2148464478.jpg" },
               { id: "m2", name: "John Smith", role: "Head of Sciences", imageSrc: "http://img.b2bpic.net/free-photo/successful-guy-with-glasses_1098-1116.jpg" },
             ]}
           />
         </div>
-        <FooterBaseReveal logoText="SJHN" columns={[]} />
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal logoText="SJHN" columns={[]} />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );