diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 4bb032b..8048304 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -9,22 +9,30 @@ import FooterBase from '@/components/sections/footer/FooterBase';
 
 export default function AboutPage() {
   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>
         <SplitAbout 
           title="Our Story"
           description="Welcome to RISE, where culinary passion meets the iconic backdrop of Marina Bay Sands. We believe in crafting unforgettable memories through exceptional food and service."
           textboxLayout="split"
           imageSrc="http://img.b2bpic.net/free-photo/side-view-table-with-cheese-plate-pate-it_140725-12866.jpg"
+          bulletPoints={[]}
+          useInvertedBackground={false}
         />
         <TeamCardTen 
           title="Meet Our Culinary Masters"
           tag="The Team"
           memberVariant="card"
           members={[{ id: "1", name: "Head Chef" }, { id: "2", name: "Sous Chef" }, { id: "3", name: "Pastry Chef" }]}
+          membersAnimation="slide-up"
+          useInvertedBackground={false}
         />
-        <FooterBase logoText="RISE" columns={[]} />
+        <div id="footer" data-section="footer">
+           <FooterBase logoText="RISE" columns={[]} />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index fd29f16..0d92613 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -4,7 +4,7 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 import FooterBase from '@/components/sections/footer/FooterBase';
-import { LayoutDashboard, Hotel, CalendarDays, Users, BarChart3 } from "lucide-react";
+import { Hotel, CalendarDays, Users, BarChart3 } from "lucide-react";
 
 export default function AdminDashboardPage() {
   return (
@@ -31,6 +31,7 @@ export default function AdminDashboardPage() {
               { name: "Analytics", id: "analytics" },
             ]}
             brandName="RISE Admin"
+            button={{ text: "Logout", href: "/" }}
           />
         </div>
 
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>
   );
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>
   );
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>
   );
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>
   );