diff --git a/src/app/amenities/page.tsx b/src/app/amenities/page.tsx
index 6e3eb66..94cce11 100644
--- a/src/app/amenities/page.tsx
+++ b/src/app/amenities/page.tsx
@@ -8,18 +8,23 @@ import ProductCardThree from '@/components/sections/product/ProductCardThree';
 
 export default function AmenitiesPage() {
   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>
         <ProductCardThree 
           title="Hotel Amenities"
           description="Enjoy premium facilities during your stay at Marina Bay Sands."
           gridVariant="three-columns-all-equal-width"
           animationType="slide-up"
           textboxLayout="default"
+          useInvertedBackground={false}
           products={[{ id: "a1", name: "Infinity Pool", price: "Access", imageSrc: "" }, { id: "a2", name: "Fitness Center", price: "24/7", imageSrc: "" }]}
         />
-        <FooterBase logoText="RISE" columns={[]} />
+        <div id="footer" data-section="footer">
+           <FooterBase logoText="RISE" columns={[]} />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );