diff --git a/src/app/booking/page.tsx b/src/app/booking/page.tsx
index dac27c8..401ba21 100644
--- a/src/app/booking/page.tsx
+++ b/src/app/booking/page.tsx
@@ -7,17 +7,23 @@ import React from 'react';
 
 export default function BookingPage() {
   return (
-    <ThemeProvider>
-        <NavbarStyleFullscreen
-            navItems={[{ name: "Home", id: "/" }, { name: "Experience", id: "/experience" }, { name: "Menu", id: "/#menu" }, { name: "Book Now", id: "/booking" }]}
-            brandName="Kyalami Shisanyama"
-        />
-        <main style={{ paddingTop: '100px' }}>
-            <ContactCenter
-                tag="Reserve"
-                title="Book Your Table"
-                description="Secure your spot at the most vibrant shisanyama experience in Joburg."
+    <ThemeProvider defaultButtonVariant="hover-magnetic" 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">
+            <NavbarStyleFullscreen
+                navItems={[{ name: "Home", id: "/" }, { name: "Experience", id: "/experience" }, { name: "Menu", id: "/#menu" }, { name: "Book Now", id: "/booking" }]}
+                brandName="Kyalami Shisanyama"
             />
+        </div>
+        <main style={{ paddingTop: '100px' }}>
+            <div id="contact" data-section="contact">
+                <ContactCenter
+                    tag="Reserve"
+                    title="Book Your Table"
+                    description="Secure your spot at the most vibrant shisanyama experience in Joburg."
+                    background={{ variant: "plain" }}
+                    useInvertedBackground={false}
+                />
+            </div>
         </main>
     </ThemeProvider>
   );
diff --git a/src/app/experience/page.tsx b/src/app/experience/page.tsx
index 8e529f9..dcadd29 100644
--- a/src/app/experience/page.tsx
+++ b/src/app/experience/page.tsx
@@ -7,17 +7,22 @@ import React from 'react';
 
 export default function ExperiencePage() {
   return (
-    <ThemeProvider>
-        <NavbarStyleFullscreen
-            navItems={[{ name: "Home", id: "/" }, { name: "Experience", id: "/experience" }, { name: "Menu", id: "/#menu" }, { name: "Book Now", id: "/booking" }]}
-            brandName="Kyalami Shisanyama"
-        />
-        <main style={{ paddingTop: '100px' }}>
-            <TextAbout
-                tag="The Experience"
-                title="A Lifestyle Beyond Dining"
-                buttons={[{ text: "Book Now", href: "/booking" }]}
+    <ThemeProvider defaultButtonVariant="hover-magnetic" 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">
+            <NavbarStyleFullscreen
+                navItems={[{ name: "Home", id: "/" }, { name: "Experience", id: "/experience" }, { name: "Menu", id: "/#menu" }, { name: "Book Now", id: "/booking" }]}
+                brandName="Kyalami Shisanyama"
             />
+        </div>
+        <main style={{ paddingTop: '100px' }}>
+            <div id="experience" data-section="experience">
+                <TextAbout
+                    tag="The Experience"
+                    title="A Lifestyle Beyond Dining"
+                    buttons={[{ text: "Book Now", href: "/booking" }]}
+                    useInvertedBackground={false}
+                />
+            </div>
         </main>
     </ThemeProvider>
   );