diff --git a/src/app/cosmetic-procedures/page.tsx b/src/app/cosmetic-procedures/page.tsx
index acd5ead..0448f48 100644
--- a/src/app/cosmetic-procedures/page.tsx
+++ b/src/app/cosmetic-procedures/page.tsx
@@ -6,7 +6,18 @@ import ReactLenis from "lenis/react";
 
 export default function CosmeticProceduresPage() {
     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>
                 <NavbarLayoutFloatingInline
                     navItems={[
@@ -17,6 +28,7 @@ export default function CosmeticProceduresPage() {
                         { name: "Dental Implants", id: "/dental-implants" },
                     ]}
                     brandName="Luxuria"
+                    button={{ text: "Book Now", href: "/contact" }}
                 />
                 <main className="pt-32 pb-20 px-8 container mx-auto">
                     <h1 className="text-5xl font-bold mb-6">Cosmetic Dentistry Procedures</h1>
diff --git a/src/app/dental-implants/page.tsx b/src/app/dental-implants/page.tsx
index 2389961..a95e7c7 100644
--- a/src/app/dental-implants/page.tsx
+++ b/src/app/dental-implants/page.tsx
@@ -6,7 +6,18 @@ import ReactLenis from "lenis/react";
 
 export default function DentalImplantsPage() {
     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>
                 <NavbarLayoutFloatingInline
                     navItems={[
@@ -17,6 +28,7 @@ export default function DentalImplantsPage() {
                         { name: "Dental Implants", id: "/dental-implants" },
                     ]}
                     brandName="Luxuria"
+                    button={{ text: "Book Now", href: "/contact" }}
                 />
                 <main className="pt-32 pb-20 px-8 container mx-auto">
                     <h1 className="text-5xl font-bold mb-6">Dental Implants Service</h1>
diff --git a/src/app/teeth-whitening/page.tsx b/src/app/teeth-whitening/page.tsx
index 82a5111..06ba9e9 100644
--- a/src/app/teeth-whitening/page.tsx
+++ b/src/app/teeth-whitening/page.tsx
@@ -6,7 +6,18 @@ import ReactLenis from "lenis/react";
 
 export default function TeethWhiteningPage() {
     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>
                 <NavbarLayoutFloatingInline
                     navItems={[
@@ -17,6 +28,7 @@ export default function TeethWhiteningPage() {
                         { name: "Dental Implants", id: "/dental-implants" },
                     ]}
                     brandName="Luxuria"
+                    button={{ text: "Book Now", href: "/contact" }}
                 />
                 <main className="pt-32 pb-20 px-8 container mx-auto">
                     <h1 className="text-5xl font-bold mb-6">Teeth Whitening Service</h1>