diff --git a/src/app/rooms/page.tsx b/src/app/rooms/page.tsx
index 89d1685..c8cafa6 100644
--- a/src/app/rooms/page.tsx
+++ b/src/app/rooms/page.tsx
@@ -8,24 +8,19 @@ import FooterBase from '@/components/sections/footer/FooterBase';
 
 export default function RoomsPage() {
   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: "Accommodations", id: "/rooms" },
-            { name: "Contact", id: "/#contact" },
-          ]}
-          brandName="RISE"
-          button={{ text: "Book Now", href: "/#contact" }}
-        />
-        <div className="pt-32 pb-20">
+        <div id="nav" data-section="nav">
+           <NavbarLayoutFloatingInline navItems={[{name: "Home", id: "/"}, {name: "Accommodations", id: "/rooms"}, {name: "Contact", id: "/#contact"}]} brandName="RISE" button={{text: "Book Now", href: "/#contact"}} />
+        </div>
+        <div className="pt-32 pb-20" id="rooms" data-section="rooms">
             <ProductCardThree
                 title="Our Accommodations"
                 description="Experience world-class luxury and comfort in our signature rooms and suites."
                 gridVariant="three-columns-all-equal-width"
                 animationType="slide-up"
                 textboxLayout="default"
+                useInvertedBackground={false}
                 products={[
                     { id: "r1", name: "Deluxe Suite", price: "$450/night", imageSrc: "https://images.unsplash.com/photo-1590490360182-c33d57733027?q=80&w=800" },
                     { id: "r2", name: "Marina View Room", price: "$600/night", imageSrc: "https://images.unsplash.com/photo-1582719478250-c89cae4dc85b?q=80&w=800" },
@@ -33,10 +28,12 @@ export default function RoomsPage() {
                 ]}
             />
         </div>
-        <FooterBase
-          columns={[{ title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "Contact", href: "/#contact" }] }]}
-          logoText="RISE"
-        />
+        <div id="footer" data-section="footer">
+           <FooterBase
+             columns={[{ title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "Contact", href: "/#contact" }] }]}
+             logoText="RISE"
+           />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );