diff --git a/src/app/grade-1/page.tsx b/src/app/grade-1/page.tsx
index 1402112..a4ec005 100644
--- a/src/app/grade-1/page.tsx
+++ b/src/app/grade-1/page.tsx
@@ -4,8 +4,10 @@ import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatin
 
 export default function Grade1Page() {
   return (
-    <ThemeProvider contentWidth="medium">
-      <NavbarLayoutFloatingOverlay navItems={[{name: "Home", id: "/"}]} brandName="Tuition Pro" />
+    <ThemeProvider defaultButtonVariant="text-stagger" 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: "/"}]} brandName="Tuition Pro" />
+      </div>
       <div className="pt-32 p-8 max-w-4xl mx-auto">
         <h1 className="text-4xl font-bold mb-6">Grade 1 Curriculum</h1>
         <p>Our Grade 1 program focuses on fundamental literacy, basic mathematics, and early scientific concepts in a supportive environment.</p>
diff --git a/src/app/grade-10/page.tsx b/src/app/grade-10/page.tsx
index d3f7be9..dfeac83 100644
--- a/src/app/grade-10/page.tsx
+++ b/src/app/grade-10/page.tsx
@@ -1,17 +1,20 @@
 "use client";
-
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 
 export default function Grade10Page() {
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingOverlay navItems={[{name: "Home", id: "/"}, {name: "Grade 9", id: "/grade-9"}, {name: "Grade 10", id: "/grade-10"}, {name: "Grade 11", id: "/grade-11"}, {name: "Grade 12", id: "/grade-12"}]} brandName="Crispy Cluck" />
+    <ThemeProvider defaultButtonVariant="text-stagger" 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: "Grade 9", id: "/grade-9"}, {name: "Grade 10", id: "/grade-10"}, {name: "Grade 11", id: "/grade-11"}, {name: "Grade 12", id: "/grade-12"}]} brandName="Crispy Cluck" />
+      </div>
       <div className="pt-32 pb-20 px-8">
         <FeatureCardSix 
           title="Grade 10 Curriculum"
+          description="Intermediate studies with focus on advanced applications."
           textboxLayout="split"
+          useInvertedBackground={false}
           features={[
             { title: "Advanced Algebra", description: "Deep dive into complex equations and functional relationships." },
             { title: "Global History", description: "Analyzing pivotal historical events and their impact on modern society." }
diff --git a/src/app/grade-11/page.tsx b/src/app/grade-11/page.tsx
index 0e54772..4afdca2 100644
--- a/src/app/grade-11/page.tsx
+++ b/src/app/grade-11/page.tsx
@@ -1,17 +1,20 @@
 "use client";
-
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 
 export default function Grade11Page() {
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingOverlay navItems={[{name: "Home", id: "/"}, {name: "Grade 9", id: "/grade-9"}, {name: "Grade 10", id: "/grade-10"}, {name: "Grade 11", id: "/grade-11"}, {name: "Grade 12", id: "/grade-12"}]} brandName="Crispy Cluck" />
+    <ThemeProvider defaultButtonVariant="text-stagger" 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: "Grade 9", id: "/grade-9"}, {name: "Grade 10", id: "/grade-10"}, {name: "Grade 11", id: "/grade-11"}, {name: "Grade 12", id: "/grade-12"}]} brandName="Crispy Cluck" />
+      </div>
       <div className="pt-32 pb-20 px-8">
         <FeatureCardSix 
           title="Grade 11 Curriculum"
+          description="Rigorous preparation for senior year and university admissions."
           textboxLayout="split"
+          useInvertedBackground={false}
           features={[
             { title: "Calculus Prep", description: "Mastering limits, derivatives, and preparation for college-level math." },
             { title: "Scientific Research", description: "Conducting independent lab research and environmental science case studies." }
diff --git a/src/app/grade-12/page.tsx b/src/app/grade-12/page.tsx
index af001f3..ff5b793 100644
--- a/src/app/grade-12/page.tsx
+++ b/src/app/grade-12/page.tsx
@@ -1,17 +1,20 @@
 "use client";
-
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 
 export default function Grade12Page() {
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingOverlay navItems={[{name: "Home", id: "/"}, {name: "Grade 9", id: "/grade-9"}, {name: "Grade 10", id: "/grade-10"}, {name: "Grade 11", id: "/grade-11"}, {name: "Grade 12", id: "/grade-12"}]} brandName="Crispy Cluck" />
+    <ThemeProvider defaultButtonVariant="text-stagger" 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: "Grade 9", id: "/grade-9"}, {name: "Grade 10", id: "/grade-10"}, {name: "Grade 11", id: "/grade-11"}, {name: "Grade 12", id: "/grade-12"}]} brandName="Crispy Cluck" />
+      </div>
       <div className="pt-32 pb-20 px-8">
         <FeatureCardSix 
           title="Grade 12 Curriculum"
+          description="Finalizing mastery across subjects with capstone projects."
           textboxLayout="split"
+          useInvertedBackground={false}
           features={[
             { title: "Senior Capstone", description: "Integrating cross-disciplinary knowledge into a final research project." },
             { title: "Advanced Seminar", description: "Preparation for university-level literature, philosophy, and critical theory." }
diff --git a/src/app/grade-2/page.tsx b/src/app/grade-2/page.tsx
index 8e9fea9..f5e81ea 100644
--- a/src/app/grade-2/page.tsx
+++ b/src/app/grade-2/page.tsx
@@ -4,8 +4,10 @@ import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatin
 
 export default function Grade2Page() {
   return (
-    <ThemeProvider contentWidth="medium">
-      <NavbarLayoutFloatingOverlay navItems={[{name: "Home", id: "/"}]} brandName="Tuition Pro" />
+    <ThemeProvider defaultButtonVariant="text-stagger" 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: "/"}]} brandName="Tuition Pro" />
+      </div>
       <div className="pt-32 p-8 max-w-4xl mx-auto">
         <h1 className="text-4xl font-bold mb-6">Grade 2 Curriculum</h1>
         <p>The Grade 2 program builds on foundational skills with increased emphasis on reading comprehension and complex problem-solving.</p>
diff --git a/src/app/grade-3/page.tsx b/src/app/grade-3/page.tsx
index 9b11d7e..06a833c 100644
--- a/src/app/grade-3/page.tsx
+++ b/src/app/grade-3/page.tsx
@@ -4,8 +4,10 @@ import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatin
 
 export default function Grade3Page() {
   return (
-    <ThemeProvider contentWidth="medium">
-      <NavbarLayoutFloatingOverlay navItems={[{name: "Home", id: "/"}]} brandName="Tuition Pro" />
+    <ThemeProvider defaultButtonVariant="text-stagger" 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: "/"}]} brandName="Tuition Pro" />
+      </div>
       <div className="pt-32 p-8 max-w-4xl mx-auto">
         <h1 className="text-4xl font-bold mb-6">Grade 3 Curriculum</h1>
         <p>Grade 3 introduces critical thinking, advanced writing techniques, and multiplication/division fundamentals.</p>
diff --git a/src/app/grade-4/page.tsx b/src/app/grade-4/page.tsx
index 7bb8df8..2e62335 100644
--- a/src/app/grade-4/page.tsx
+++ b/src/app/grade-4/page.tsx
@@ -4,8 +4,10 @@ import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatin
 
 export default function Grade4Page() {
   return (
-    <ThemeProvider contentWidth="medium">
-      <NavbarLayoutFloatingOverlay navItems={[{name: "Home", id: "/"}]} brandName="Tuition Pro" />
+    <ThemeProvider defaultButtonVariant="text-stagger" 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: "/"}]} brandName="Tuition Pro" />
+      </div>
       <div className="pt-32 p-8 max-w-4xl mx-auto">
         <h1 className="text-4xl font-bold mb-6">Grade 4 Curriculum</h1>
         <p>The Grade 4 curriculum prepares students for intermediate schooling with structured project work and refined study techniques.</p>
diff --git a/src/app/grade-9/page.tsx b/src/app/grade-9/page.tsx
index 2a95710..ccf6731 100644
--- a/src/app/grade-9/page.tsx
+++ b/src/app/grade-9/page.tsx
@@ -1,17 +1,20 @@
 "use client";
-
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 
 export default function Grade9Page() {
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingOverlay navItems={[{name: "Home", id: "/"}, {name: "Grade 9", id: "/grade-9"}, {name: "Grade 10", id: "/grade-10"}, {name: "Grade 11", id: "/grade-11"}, {name: "Grade 12", id: "/grade-12"}]} brandName="Crispy Cluck" />
+    <ThemeProvider defaultButtonVariant="text-stagger" 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: "Grade 9", id: "/grade-9"}, {name: "Grade 10", id: "/grade-10"}, {name: "Grade 11", id: "/grade-11"}, {name: "Grade 12", id: "/grade-12"}]} brandName="Crispy Cluck" />
+      </div>
       <div className="pt-32 pb-20 px-8">
         <FeatureCardSix 
           title="Grade 9 Curriculum"
+          description="Core foundations for the start of secondary education."
           textboxLayout="split"
+          useInvertedBackground={false}
           features={[
             { title: "Introduction to Concepts", description: "Build a solid foundation with core mathematical principles and critical thinking." },
             { title: "Science Foundations", description: "Exploration of life sciences and fundamental physics concepts." }