diff --git a/src/app/grade-1/page.tsx b/src/app/grade-1/page.tsx
index a4ec005..00c41c0 100644
--- a/src/app/grade-1/page.tsx
+++ b/src/app/grade-1/page.tsx
@@ -3,10 +3,11 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 
 export default function Grade1Page() {
+  const navItems = [{name: "Home", id: "/"}, {name: "Grade 1", id: "/grade-1"}, {name: "Grade 2", id: "/grade-2"}, {name: "Grade 3", id: "/grade-3"}, {name: "Grade 4", id: "/grade-4"}, {name: "Grade 9", id: "/grade-9"}, {name: "Grade 10", id: "/grade-10"}, {name: "Grade 11", id: "/grade-11"}, {name: "Grade 12", id: "/grade-12"}];
   return (
     <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" />
+        <NavbarLayoutFloatingOverlay navItems={navItems} 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>
diff --git a/src/app/grade-10/page.tsx b/src/app/grade-10/page.tsx
index dfeac83..293556b 100644
--- a/src/app/grade-10/page.tsx
+++ b/src/app/grade-10/page.tsx
@@ -4,10 +4,11 @@ import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 
 export default function Grade10Page() {
+  const navItems = [{name: "Home", id: "/"}, {name: "Grade 1", id: "/grade-1"}, {name: "Grade 2", id: "/grade-2"}, {name: "Grade 3", id: "/grade-3"}, {name: "Grade 4", id: "/grade-4"}, {name: "Grade 9", id: "/grade-9"}, {name: "Grade 10", id: "/grade-10"}, {name: "Grade 11", id: "/grade-11"}, {name: "Grade 12", id: "/grade-12"}];
   return (
     <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" />
+        <NavbarLayoutFloatingOverlay navItems={navItems} brandName="Crispy Cluck" />
       </div>
       <div className="pt-32 pb-20 px-8">
         <FeatureCardSix 
diff --git a/src/app/grade-11/page.tsx b/src/app/grade-11/page.tsx
index 4afdca2..fdca911 100644
--- a/src/app/grade-11/page.tsx
+++ b/src/app/grade-11/page.tsx
@@ -4,10 +4,11 @@ import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 
 export default function Grade11Page() {
+  const navItems = [{name: "Home", id: "/"}, {name: "Grade 1", id: "/grade-1"}, {name: "Grade 2", id: "/grade-2"}, {name: "Grade 3", id: "/grade-3"}, {name: "Grade 4", id: "/grade-4"}, {name: "Grade 9", id: "/grade-9"}, {name: "Grade 10", id: "/grade-10"}, {name: "Grade 11", id: "/grade-11"}, {name: "Grade 12", id: "/grade-12"}];
   return (
     <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" />
+        <NavbarLayoutFloatingOverlay navItems={navItems} brandName="Crispy Cluck" />
       </div>
       <div className="pt-32 pb-20 px-8">
         <FeatureCardSix 
diff --git a/src/app/grade-12/page.tsx b/src/app/grade-12/page.tsx
index ff5b793..0e6c396 100644
--- a/src/app/grade-12/page.tsx
+++ b/src/app/grade-12/page.tsx
@@ -4,10 +4,11 @@ import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 
 export default function Grade12Page() {
+  const navItems = [{name: "Home", id: "/"}, {name: "Grade 1", id: "/grade-1"}, {name: "Grade 2", id: "/grade-2"}, {name: "Grade 3", id: "/grade-3"}, {name: "Grade 4", id: "/grade-4"}, {name: "Grade 9", id: "/grade-9"}, {name: "Grade 10", id: "/grade-10"}, {name: "Grade 11", id: "/grade-11"}, {name: "Grade 12", id: "/grade-12"}];
   return (
     <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" />
+        <NavbarLayoutFloatingOverlay navItems={navItems} brandName="Crispy Cluck" />
       </div>
       <div className="pt-32 pb-20 px-8">
         <FeatureCardSix 
diff --git a/src/app/grade-2/page.tsx b/src/app/grade-2/page.tsx
index f5e81ea..e34cb5d 100644
--- a/src/app/grade-2/page.tsx
+++ b/src/app/grade-2/page.tsx
@@ -3,10 +3,11 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 
 export default function Grade2Page() {
+  const navItems = [{name: "Home", id: "/"}, {name: "Grade 1", id: "/grade-1"}, {name: "Grade 2", id: "/grade-2"}, {name: "Grade 3", id: "/grade-3"}, {name: "Grade 4", id: "/grade-4"}, {name: "Grade 9", id: "/grade-9"}, {name: "Grade 10", id: "/grade-10"}, {name: "Grade 11", id: "/grade-11"}, {name: "Grade 12", id: "/grade-12"}];
   return (
     <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" />
+        <NavbarLayoutFloatingOverlay navItems={navItems} 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>
diff --git a/src/app/grade-3/page.tsx b/src/app/grade-3/page.tsx
index 06a833c..e3a4c9f 100644
--- a/src/app/grade-3/page.tsx
+++ b/src/app/grade-3/page.tsx
@@ -3,10 +3,11 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 
 export default function Grade3Page() {
+  const navItems = [{name: "Home", id: "/"}, {name: "Grade 1", id: "/grade-1"}, {name: "Grade 2", id: "/grade-2"}, {name: "Grade 3", id: "/grade-3"}, {name: "Grade 4", id: "/grade-4"}, {name: "Grade 9", id: "/grade-9"}, {name: "Grade 10", id: "/grade-10"}, {name: "Grade 11", id: "/grade-11"}, {name: "Grade 12", id: "/grade-12"}];
   return (
     <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" />
+        <NavbarLayoutFloatingOverlay navItems={navItems} 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>
diff --git a/src/app/grade-4/page.tsx b/src/app/grade-4/page.tsx
index 2e62335..3286880 100644
--- a/src/app/grade-4/page.tsx
+++ b/src/app/grade-4/page.tsx
@@ -3,10 +3,11 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 
 export default function Grade4Page() {
+  const navItems = [{name: "Home", id: "/"}, {name: "Grade 1", id: "/grade-1"}, {name: "Grade 2", id: "/grade-2"}, {name: "Grade 3", id: "/grade-3"}, {name: "Grade 4", id: "/grade-4"}, {name: "Grade 9", id: "/grade-9"}, {name: "Grade 10", id: "/grade-10"}, {name: "Grade 11", id: "/grade-11"}, {name: "Grade 12", id: "/grade-12"}];
   return (
     <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" />
+        <NavbarLayoutFloatingOverlay navItems={navItems} 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>
diff --git a/src/app/grade-9/page.tsx b/src/app/grade-9/page.tsx
index ccf6731..33ca9c9 100644
--- a/src/app/grade-9/page.tsx
+++ b/src/app/grade-9/page.tsx
@@ -4,10 +4,11 @@ import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 
 export default function Grade9Page() {
+  const navItems = [{name: "Home", id: "/"}, {name: "Grade 1", id: "/grade-1"}, {name: "Grade 2", id: "/grade-2"}, {name: "Grade 3", id: "/grade-3"}, {name: "Grade 4", id: "/grade-4"}, {name: "Grade 9", id: "/grade-9"}, {name: "Grade 10", id: "/grade-10"}, {name: "Grade 11", id: "/grade-11"}, {name: "Grade 12", id: "/grade-12"}];
   return (
     <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" />
+        <NavbarLayoutFloatingOverlay navItems={navItems} brandName="Crispy Cluck" />
       </div>
       <div className="pt-32 pb-20 px-8">
         <FeatureCardSix 
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 5e66de2..5a5895d 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -33,6 +33,10 @@ export default function LandingPage() {
       <NavbarLayoutFloatingOverlay
       navItems={[
         { name: "Home", id: "hero" },
+        { name: "Grade 1", id: "/grade-1" },
+        { name: "Grade 2", id: "/grade-2" },
+        { name: "Grade 3", id: "/grade-3" },
+        { name: "Grade 4", id: "/grade-4" },
         { name: "Grade 9", id: "/grade-9" },
         { name: "Grade 10", id: "/grade-10" },
         { name: "Grade 11", id: "/grade-11" },
@@ -178,4 +182,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file