diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
index 7259654..29827da 100644
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -25,12 +25,13 @@ export default function BlogPage() {
           <NavbarStyleFullscreen
             navItems={[
               { name: "Home", id: "/" },
-              { name: "About", id: "#about" },
-              { name: "Services", id: "#features" },
-              { name: "Results", id: "#metrics" },
-              { name: "Testimonials", id: "#testimonials" },
+              { name: "About", id: "/#about" },
+              { name: "Services", id: "/services" },
+              { name: "Portfolio", id: "/portfolio" },
+              { name: "Results", id: "/#metrics" },
+              { name: "Testimonials", id: "/#testimonials" },
               { name: "Blog", id: "/blog" },
-              { name: "Contact", id: "#contact" },
+              { name: "Contact", id: "/#contact" },
             ]}
             brandName="ELEVATE"
           />
@@ -42,6 +43,7 @@ export default function BlogPage() {
             description="Expert social media strategies for modern brands."
             animationType="slide-up"
             textboxLayout="split"
+            useInvertedBackground={false}
             blogs={[
               {
                 id: "1",                category: "Strategy",                title: "Mastering Short-Form Video",                excerpt: "How to capture attention in the first 3 seconds.",                imageSrc: "http://img.b2bpic.net/free-photo/dynamic-blue-light-streaks-abstract-background_84443-73897.jpg",                authorName: "Alex Rivers",                authorAvatar: "http://img.b2bpic.net/free-photo/handsome-young-male-walking-street_158595-4694.jpg",                date: "Oct 24, 2023"
diff --git a/src/app/portfolio/page.tsx b/src/app/portfolio/page.tsx
index e27bb31..1f5d3c1 100644
--- a/src/app/portfolio/page.tsx
+++ b/src/app/portfolio/page.tsx
@@ -8,25 +8,28 @@ import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
 
 export default function PortfolioPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="shift-hover" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
-        <NavbarStyleFullscreen
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "About", id: "/#about" },
-            { name: "Services", id: "/services" },
-            { name: "Portfolio", id: "/portfolio" },
-            { name: "Results", id: "/#metrics" },
-            { name: "Testimonials", id: "/#testimonials" },
-            { name: "Contact", id: "/#contact" },
-          ]}
-          brandName="ELEVATE"
-        />
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/#about" },
+              { name: "Services", id: "/services" },
+              { name: "Portfolio", id: "/portfolio" },
+              { name: "Results", id: "/#metrics" },
+              { name: "Testimonials", id: "/#testimonials" },
+              { name: "Contact", id: "/#contact" },
+            ]}
+            brandName="ELEVATE"
+          />
+        </div>
         <main className="pt-32 pb-20">
             <FeatureCardSix
                 title="Client Portfolio"
                 description="Showcasing successful brand transformations and campaigns."
                 textboxLayout="split"
+                useInvertedBackground={false}
                 features={[
                     { id: 1, title: "Global Tech Launch", description: "Managed end-to-end launch campaign resulting in 1M+ reach." },
                     { id: 2, title: "Fashion Brand Refresh", description: "Complete visual overhaul and community strategy for a top tier label." },
@@ -34,11 +37,13 @@ export default function PortfolioPage() {
                 ]}
             />
         </main>
-        <FooterLogoReveal
+        <div id="footer" data-section="footer">
+          <FooterLogoReveal
             logoText="ELEVATE"
             leftLink={{ text: "Terms of Service", href: "#" }}
             rightLink={{ text: "Privacy Policy", href: "#" }}
-        />
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/pricing/page.tsx b/src/app/pricing/page.tsx
index 5261046..62c2561 100644
--- a/src/app/pricing/page.tsx
+++ b/src/app/pricing/page.tsx
@@ -8,18 +8,20 @@ import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 
 export default function PricingPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="shift-hover" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
-        <NavbarStyleFullscreen
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "About", id: "/about" },
-            { name: "Services", id: "/pricing" },
-            { name: "Team", id: "/team" },
-            { name: "Contact", id: "/contact" },
-          ]}
-          brandName="ELEVATE"
-        />
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Services", id: "/pricing" },
+              { name: "Team", id: "/team" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            brandName="ELEVATE"
+          />
+        </div>
         <PricingCardFive
           animationType="slide-up"
           title="Simple Pricing"
@@ -30,11 +32,13 @@ export default function PricingPage() {
             { id: "p1", tag: "Starter", price: "$1,999", period: "/mo", description: "Essential growth toolkit.", button: { text: "Get Started", href: "/contact" }, featuresTitle: "Core Features", features: ["Content Strategy", "Weekly Analytics"] }
           ]}
         />
-        <FooterLogoReveal
-          logoText="ELEVATE"
-          leftLink={{ text: "Terms of Service", href: "#" }}
-          rightLink={{ text: "Privacy Policy", href: "#" }}
-        />
+        <div id="footer" data-section="footer">
+          <FooterLogoReveal
+            logoText="ELEVATE"
+            leftLink={{ text: "Terms of Service", href: "#" }}
+            rightLink={{ text: "Privacy Policy", href: "#" }}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/services/page.tsx b/src/app/services/page.tsx
index 02696a8..eaeaf34 100644
--- a/src/app/services/page.tsx
+++ b/src/app/services/page.tsx
@@ -8,25 +8,28 @@ import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 
 export default function ServicesPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="shift-hover" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
-        <NavbarStyleFullscreen
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "About", id: "/#about" },
-            { name: "Services", id: "/services" },
-            { name: "Portfolio", id: "/portfolio" },
-            { name: "Results", id: "/#metrics" },
-            { name: "Testimonials", id: "/#testimonials" },
-            { name: "Contact", id: "/#contact" },
-          ]}
-          brandName="ELEVATE"
-        />
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/#about" },
+              { name: "Services", id: "/services" },
+              { name: "Portfolio", id: "/portfolio" },
+              { name: "Results", id: "/#metrics" },
+              { name: "Testimonials", id: "/#testimonials" },
+              { name: "Contact", id: "/#contact" },
+            ]}
+            brandName="ELEVATE"
+          />
+        </div>
         <main className="pt-32 pb-20">
             <FeatureCardSix
                 title="Our Core Services"
                 description="Expert-led social media strategies and execution."
                 textboxLayout="split"
+                useInvertedBackground={false}
                 features={[
                     { id: 1, title: "Strategy Development", description: "Brand identity, market research, and growth planning." },
                     { id: 2, title: "Content Creation", description: "High-quality photo, video, and design assets." },
@@ -35,11 +38,13 @@ export default function ServicesPage() {
                 ]}
             />
         </main>
-        <FooterLogoReveal
+        <div id="footer" data-section="footer">
+          <FooterLogoReveal
             logoText="ELEVATE"
             leftLink={{ text: "Terms of Service", href: "#" }}
             rightLink={{ text: "Privacy Policy", href: "#" }}
-        />
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/team/page.tsx b/src/app/team/page.tsx
index 99c828b..c36246c 100644
--- a/src/app/team/page.tsx
+++ b/src/app/team/page.tsx
@@ -8,18 +8,20 @@ import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 
 export default function TeamPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="shift-hover" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
-        <NavbarStyleFullscreen
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "About", id: "/about" },
-            { name: "Services", id: "/pricing" },
-            { name: "Team", id: "/team" },
-            { name: "Contact", id: "/contact" },
-          ]}
-          brandName="ELEVATE"
-        />
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Services", id: "/pricing" },
+              { name: "Team", id: "/team" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            brandName="ELEVATE"
+          />
+        </div>
         <TeamCardEleven
           animationType="slide-up"
           title="Our Experts"
@@ -34,11 +36,13 @@ export default function TeamPage() {
             }
           ]}
         />
-        <FooterLogoReveal
-          logoText="ELEVATE"
-          leftLink={{ text: "Terms of Service", href: "#" }}
-          rightLink={{ text: "Privacy Policy", href: "#" }}
-        />
+        <div id="footer" data-section="footer">
+          <FooterLogoReveal
+            logoText="ELEVATE"
+            leftLink={{ text: "Terms of Service", href: "#" }}
+            rightLink={{ text: "Privacy Policy", href: "#" }}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );