diff --git a/src/app/drivers/page.tsx b/src/app/drivers/page.tsx
index 63d2f52..2f4caa0 100644
--- a/src/app/drivers/page.tsx
+++ b/src/app/drivers/page.tsx
@@ -6,8 +6,10 @@ import FooterBase from '@/components/sections/footer/FooterBase';
 
 export default function DriversPage() {
   return (
-    <ThemeProvider>
-      <NavbarStyleCentered navItems={[{ name: "Home", id: "/" }, { name: "Races", id: "/races" }, { name: "Drivers", id: "/drivers" }, { name: "Standings", id: "/standings" }, { name: "News", id: "/news" }]} brandName="F1 Universe" />
+    <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">
+        <NavbarStyleCentered navItems={[{ name: "Home", id: "/" }, { name: "Races", id: "/races" }, { name: "Drivers", id: "/drivers" }, { name: "Standings", id: "/standings" }, { name: "News", id: "/news" }]} brandName="F1 Universe" />
+      </div>
       <main className="pt-32 pb-20 px-6 max-w-7xl mx-auto min-h-screen">
         <h1 className="text-4xl font-bold mb-8">Driver Profiles</h1>
         <p>Detailed driver statistics and profiles grid content goes here.</p>
diff --git a/src/app/news/page.tsx b/src/app/news/page.tsx
index 69ca78a..e2491c0 100644
--- a/src/app/news/page.tsx
+++ b/src/app/news/page.tsx
@@ -6,8 +6,10 @@ import FooterBase from '@/components/sections/footer/FooterBase';
 
 export default function NewsPage() {
   return (
-    <ThemeProvider>
-      <NavbarStyleCentered navItems={[{ name: "Home", id: "/" }, { name: "Races", id: "/races" }, { name: "Drivers", id: "/drivers" }, { name: "Standings", id: "/standings" }, { name: "News", id: "/news" }]} brandName="F1 Universe" />
+    <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">
+        <NavbarStyleCentered navItems={[{ name: "Home", id: "/" }, { name: "Races", id: "/races" }, { name: "Drivers", id: "/drivers" }, { name: "Standings", id: "/standings" }, { name: "News", id: "/news" }]} brandName="F1 Universe" />
+      </div>
       <main className="pt-32 pb-20 px-6 max-w-7xl mx-auto min-h-screen">
         <h1 className="text-4xl font-bold mb-8">Latest F1 News</h1>
         <p>Dynamic blog feed content goes here.</p>
diff --git a/src/app/races/page.tsx b/src/app/races/page.tsx
index 18bc9e5..2bfc96f 100644
--- a/src/app/races/page.tsx
+++ b/src/app/races/page.tsx
@@ -6,8 +6,10 @@ import FooterBase from '@/components/sections/footer/FooterBase';
 
 export default function RacesPage() {
   return (
-    <ThemeProvider>
-      <NavbarStyleCentered navItems={[{ name: "Home", id: "/" }, { name: "Races", id: "/races" }, { name: "Drivers", id: "/drivers" }, { name: "Standings", id: "/standings" }, { name: "News", id: "/news" }]} brandName="F1 Universe" />
+    <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">
+        <NavbarStyleCentered navItems={[{ name: "Home", id: "/" }, { name: "Races", id: "/races" }, { name: "Drivers", id: "/drivers" }, { name: "Standings", id: "/standings" }, { name: "News", id: "/news" }]} brandName="F1 Universe" />
+      </div>
       <main className="pt-32 pb-20 px-6 max-w-7xl mx-auto min-h-screen">
         <h1 className="text-4xl font-bold mb-8">Race Schedule & Results</h1>
         <p>Interactive calendar and race results grid content goes here.</p>
diff --git a/src/app/standings/page.tsx b/src/app/standings/page.tsx
index c5334f6..130e6a4 100644
--- a/src/app/standings/page.tsx
+++ b/src/app/standings/page.tsx
@@ -6,8 +6,10 @@ import FooterBase from '@/components/sections/footer/FooterBase';
 
 export default function StandingsPage() {
   return (
-    <ThemeProvider>
-      <NavbarStyleCentered navItems={[{ name: "Home", id: "/" }, { name: "Races", id: "/races" }, { name: "Drivers", id: "/drivers" }, { name: "Standings", id: "/standings" }, { name: "News", id: "/news" }]} brandName="F1 Universe" />
+    <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">
+        <NavbarStyleCentered navItems={[{ name: "Home", id: "/" }, { name: "Races", id: "/races" }, { name: "Drivers", id: "/drivers" }, { name: "Standings", id: "/standings" }, { name: "News", id: "/news" }]} brandName="F1 Universe" />
+      </div>
       <main className="pt-32 pb-20 px-6 max-w-7xl mx-auto min-h-screen">
         <h1 className="text-4xl font-bold mb-8">Championship Standings</h1>
         <p>Live standings tables for constructors and drivers go here.</p>