diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 8d7148e..fcef1c0 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -8,15 +8,20 @@ import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 
 export default function ContactPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
-        <NavbarLayoutFloatingInline navItems={[{name: "Home", id: "/"}, {name: "About", id: "/about"}, {name: "Amenities", id: "/amenities"}, {name: "Gallery", id: "/gallery"}, {name: "Contact", id: "/contact"}]} brandName="RISE" />
+        <div id="nav" data-section="nav">
+           <NavbarLayoutFloatingInline navItems={[{name: "Home", id: "/"}, {name: "About", id: "/about"}, {name: "Amenities", id: "/amenities"}, {name: "Gallery", id: "/gallery"}, {name: "Contact", id: "/contact"}]} brandName="RISE" button={{text: "Book Now", href: "/contact"}} />
+        </div>
         <ContactSplitForm 
           title="Get in Touch"
           description="Fill out the form below for any reservations or inquiries."
           inputs={[{ name: "name", type: "text", placeholder: "Name" }, { name: "email", type: "email", placeholder: "Email" }]} 
+          useInvertedBackground={false}
         />
-        <FooterBase logoText="RISE" columns={[]} />
+        <div id="footer" data-section="footer">
+           <FooterBase logoText="RISE" columns={[]} />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );