diff --git a/src/app/messaging/page.tsx b/src/app/messaging/page.tsx
index c1dedaa..b19623a 100644
--- a/src/app/messaging/page.tsx
+++ b/src/app/messaging/page.tsx
@@ -7,17 +7,21 @@ import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 
 export default function MessagingPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
-        <NavbarStyleApple
-          navItems={[{ name: "Home", id: "/" }, { name: "Feed", id: "/feed" }, { name: "Profile", id: "/profile" }, { name: "Messages", id: "/messaging" }, { name: "Contact", id: "/contact" }]}
-          brandName="Connect"
-        />
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[{ name: "Home", id: "/" }, { name: "Feed", id: "/feed" }, { name: "Profile", id: "/profile" }, { name: "Messages", id: "/messaging" }, { name: "Search", id: "/search" }, { name: "Contact", id: "/contact" }]}
+            brandName="Connect"
+          />
+        </div>
         <main className="container mx-auto py-24 min-h-screen">
           <h1 className="text-4xl font-bold mb-8">Messaging & Chat</h1>
           <p className="text-lg">Securely connect with others through encrypted, high-speed private messaging.</p>
         </main>
-        <FooterLogoReveal logoText="Connect" leftLink={{ text: "Privacy", href: "#" }} rightLink={{ text: "Terms", href: "#" }} />
+        <div id="footer" data-section="footer">
+          <FooterLogoReveal logoText="Connect" leftLink={{ text: "Privacy", href: "#" }} rightLink={{ text: "Terms", href: "#" }} />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );