diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 412dc08..41191d4 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -8,18 +8,20 @@ import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis'
 
 export default function AboutPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="text-stagger" 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: "About", id: "/about" },
-            { name: "Services", id: "/services" },
-            { name: "Reviews", id: "/reviews" },
-            { name: "Contact", id: "/contact" },
-          ]}
-          brandName="One Smile" 
-        />
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay 
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Services", id: "/services" },
+              { name: "Reviews", id: "/reviews" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            brandName="One Smile" 
+          />
+        </div>
         <MetricSplitMediaAbout 
           title="Our Story & Mission"
           description="Founded with a vision to revolutionize dental care in Tashkent, One Smile combines international standards with local hospitality. Our mission is to make quality dental care accessible, comfortable, and personalized for every patient."
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 9f0b5a3..24a412d 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -8,18 +8,20 @@ import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis'
 
 export default function ContactPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="text-stagger" 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: "About", id: "/about" },
-                { name: "Services", id: "/services" },
-                { name: "Reviews", id: "/reviews" },
-                { name: "Contact", id: "/contact" },
-            ]}
-            brandName="One Smile"
-        />
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+              navItems={[
+                  { name: "Home", id: "/" },
+                  { name: "About", id: "/about" },
+                  { name: "Services", id: "/services" },
+                  { name: "Reviews", id: "/reviews" },
+                  { name: "Contact", id: "/contact" },
+              ]}
+              brandName="One Smile"
+          />
+        </div>
         <div className="pt-32 pb-20 px-6">
           <div className="max-w-2xl mx-auto mb-16 p-8 bg-card rounded-xl shadow-lg">
             <h2 className="text-2xl font-bold mb-6">Our Clinic in Tashkent</h2>
@@ -32,6 +34,8 @@ export default function ContactPage() {
               title="Book Your Appointment"
               description="We look forward to providing you with the best dental care in Tashkent."
               buttons={[{ text: "Call Now", href: "tel:+998334790666" }]}
+              background={{ variant: "plain" }}
+              useInvertedBackground={false}
           />
         </div>
         <FooterLogoEmphasis
diff --git a/src/app/reviews/page.tsx b/src/app/reviews/page.tsx
index 7143b84..d1e32ab 100644
--- a/src/app/reviews/page.tsx
+++ b/src/app/reviews/page.tsx
@@ -8,18 +8,20 @@ import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis'
 
 export default function ReviewsPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="text-stagger" 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: "About", id: "/about" },
-                { name: "Services", id: "/services" },
-                { name: "Reviews", id: "/reviews" },
-                { name: "Contact", id: "/contact" },
-            ]}
-            brandName="One Smile"
-        />
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+              navItems={[
+                  { name: "Home", id: "/" },
+                  { name: "About", id: "/about" },
+                  { name: "Services", id: "/services" },
+                  { name: "Reviews", id: "/reviews" },
+                  { name: "Contact", id: "/contact" },
+              ]}
+              brandName="One Smile"
+          />
+        </div>
         <div className="pt-32 pb-20 px-6">
           <h1 className="text-4xl font-bold mb-12 text-center">Patient Reviews</h1>
           <div className="grid gap-8 max-w-4xl mx-auto">
@@ -30,6 +32,7 @@ export default function ReviewsPage() {
                 avatars={[]}
                 ratingAnimation="blur-reveal"
                 avatarsAnimation="blur-reveal"
+                useInvertedBackground={false}
             />
             <TestimonialCardFifteen
                 testimonial="Great clinic, very modern and clean. The staff made me feel very comfortable."
@@ -38,6 +41,7 @@ export default function ReviewsPage() {
                 avatars={[]}
                 ratingAnimation="blur-reveal"
                 avatarsAnimation="blur-reveal"
+                useInvertedBackground={false}
             />
           </div>
         </div>
diff --git a/src/app/services/page.tsx b/src/app/services/page.tsx
index 04297b0..ed4fc52 100644
--- a/src/app/services/page.tsx
+++ b/src/app/services/page.tsx
@@ -9,18 +9,20 @@ import { ShieldCheck, Sparkles, Stethoscope, Smile } from "lucide-react";
 
 export default function ServicesPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="text-stagger" 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: "About", id: "/about" },
-            { name: "Services", id: "/services" },
-            { name: "Reviews", id: "/reviews" },
-            { name: "Contact", id: "/contact" },
-          ]}
-          brandName="One Smile" 
-        />
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay 
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Services", id: "/services" },
+              { name: "Reviews", id: "/reviews" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            brandName="One Smile" 
+          />
+        </div>
         <FeatureCardTen 
           title="Our Dental Services"
           description="Comprehensive care for the whole family."
@@ -28,10 +30,10 @@ export default function ServicesPage() {
           textboxLayout="default"
           useInvertedBackground={false}
           features={[
-            { id: "1", title: "Dental Cleanings", description: "Routine professional cleanings for optimal oral hygiene.", media: { imageSrc: "http://img.b2bpic.net/free-photo/dental-tools_1234.jpg?_wi=1" }, items: [{ icon: ShieldCheck, text: "Plaque removal" }, { icon: ShieldCheck, text: "Deep cleaning" }], reverse: false },
-            { id: "2", title: "Teeth Whitening", description: "Brighten your smile with our professional whitening solutions.", media: { imageSrc: "http://img.b2bpic.net/free-photo/white-teeth_5678.jpg?_wi=1" }, items: [{ icon: Sparkles, text: "Fast results" }, { icon: Sparkles, text: "Safe enamel treatment" }], reverse: true },
-            { id: "3", title: "Dental Implants", description: "Permanent, natural-looking tooth replacement.", media: { imageSrc: "http://img.b2bpic.net/free-photo/implant_9012.jpg?_wi=1" }, items: [{ icon: Stethoscope, text: "Advanced technology" }, { icon: Stethoscope, text: "Expert placement" }], reverse: false },
-            { id: "4", title: "Orthodontics", description: "Correct alignment with braces or clear aligners.", media: { imageSrc: "http://img.b2bpic.net/free-photo/ortho_3456.jpg?_wi=1" }, items: [{ icon: Smile, text: "Custom plans" }, { icon: Smile, text: "Progress tracking" }], reverse: true }
+            { icon: ShieldCheck, title: "Dental Cleanings", description: "Routine professional cleanings for optimal oral hygiene." },
+            { icon: Sparkles, title: "Teeth Whitening", description: "Brighten your smile with our professional whitening solutions." },
+            { icon: Stethoscope, title: "Dental Implants", description: "Permanent, natural-looking tooth replacement." },
+            { icon: Smile, title: "Orthodontics", description: "Correct alignment with braces or clear aligners." }
           ]}
         />
         <FooterLogoEmphasis