diff --git a/src/app/careers/page.tsx b/src/app/careers/page.tsx
index 12df351..ef2b578 100644
--- a/src/app/careers/page.tsx
+++ b/src/app/careers/page.tsx
@@ -7,19 +7,21 @@ import FooterBase from "@/components/sections/footer/FooterBase";
 
 export default function CareersPage() {
   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>
-        <NavbarLayoutFloatingOverlay
-          brandName="Epicure Buffet"
-          navItems={[
-            { name: "Menu", id: "/ #menu" },
-            { name: "Pricing", id: "/ #pricing" },
-            { name: "Our Story", id: "/our-story" },
-            { name: "Careers", id: "/careers" },
-            { name: "Contact Us", id: "/contact-us" },
-          ]}
-          button={{ text: "Book Now", href: "/ #contact" }}
-        />
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            brandName="Epicure Buffet"
+            navItems={[
+              { name: "Menu", id: "/ #menu" },
+              { name: "Pricing", id: "/ #pricing" },
+              { name: "Our Story", id: "/our-story" },
+              { name: "Careers", id: "/careers" },
+              { name: "Contact Us", id: "/contact-us" },
+            ]}
+            button={{ text: "Book Now", href: "/ #contact" }}
+          />
+        </div>
         <div className="pt-32 pb-20 px-6 max-w-4xl mx-auto min-h-screen">
           <h1 className="text-5xl font-bold mb-8">Careers</h1>
           <p className="text-lg mb-6">Join our team of passionate culinary enthusiasts. We're always looking for talented individuals who value fresh, quality ingredients and exceptional customer service.</p>