diff --git a/src/app/gallery/page.tsx b/src/app/gallery/page.tsx
index 76ec97d..212f77b 100644
--- a/src/app/gallery/page.tsx
+++ b/src/app/gallery/page.tsx
@@ -8,16 +8,22 @@ import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGaller
 
 export default function GalleryPage() {
   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" />
-        <HeroBillboardGallery 
-          title="Visual Elegance"
-          description="Take a look into our world."
-          background={{ variant: "plain" }}
-          mediaItems={[{ imageSrc: "" }, { imageSrc: "" }, { imageSrc: "" }]} 
-        />
-        <FooterBase logoText="RISE" columns={[]} />
+        <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>
+        <div id="hero" data-section="hero">
+          <HeroBillboardGallery 
+            title="Visual Elegance"
+            description="Take a look into our world."
+            background={{ variant: "plain" }}
+            mediaItems={[{ imageSrc: "" }, { imageSrc: "" }, { imageSrc: "" }]} 
+          />
+        </div>
+        <div id="footer" data-section="footer">
+           <FooterBase logoText="RISE" columns={[]} />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );