diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 083c024..3a7f3f4 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -7,17 +7,24 @@ import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 
 export default function AboutPage() {
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingInline
-        navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Services", id: "/services" }, { name: "Company", id: "/company-info" }, { name: "Contact", id: "/contact" }]}
-        brandName="AutoSource"
-      />
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Services", id: "/services" }, { name: "Company", id: "/company-info" }, { name: "Contact", id: "/contact" }]}
+          brandName="AutoSource"
+          button={{ text: "Contact", href: "#" }}
+        />
+      </div>
       <main className="pt-24">
         <h1 className="text-center text-4xl">About Autosphere Company</h1>
         <p className="text-center mt-6">We are the leader in automotive innovation.</p>
       </main>
-      <ContactCTA tag="Contact" title="Learn More" description="Get in touch with us." buttons={[{ text: "Contact" }]} />
-      <FooterLogoReveal logoText="AutoSource" leftLink={{ text: "Privacy", href: "#" }} rightLink={{ text: "Terms", href: "#" }} />
+      <div id="contact" data-section="contact">
+        <ContactCTA tag="Contact" title="Learn More" description="Get in touch with us." buttons={[{ text: "Contact" }]} background={{ variant: "plain" }} useInvertedBackground={false} />
+      </div>
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal logoText="AutoSource" leftLink={{ text: "Privacy", href: "#" }} rightLink={{ text: "Terms", href: "#" }} />
+      </div>
     </ThemeProvider>
   );
 }
\ No newline at end of file
diff --git a/src/app/company-info/page.tsx b/src/app/company-info/page.tsx
index 2c0f3b4..add2a15 100644
--- a/src/app/company-info/page.tsx
+++ b/src/app/company-info/page.tsx
@@ -7,17 +7,24 @@ import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 
 export default function CompanyInfoPage() {
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingInline
-        navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Services", id: "/services" }, { name: "Company", id: "/company-info" }, { name: "Contact", id: "/contact" }]}
-        brandName="AutoSource"
-      />
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Services", id: "/services" }, { name: "Company", id: "/company-info" }, { name: "Contact", id: "/contact" }]}
+          brandName="AutoSource"
+          button={{ text: "Contact", href: "#" }}
+        />
+      </div>
       <main className="pt-24">
         <h1 className="text-center text-4xl">Company Information</h1>
         <p className="text-center mt-6">Dedicated to excellence and innovation at Autosphere Company.</p>
       </main>
-      <ContactCTA tag="Contact" title="Connect" description="Find out more about our mission." buttons={[{ text: "Contact" }]} />
-      <FooterLogoReveal logoText="AutoSource" leftLink={{ text: "Privacy", href: "#" }} rightLink={{ text: "Terms", href: "#" }} />
+      <div id="contact" data-section="contact">
+        <ContactCTA tag="Contact" title="Connect" description="Find out more about our mission." buttons={[{ text: "Contact" }]} background={{ variant: "plain" }} useInvertedBackground={false} />
+      </div>
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal logoText="AutoSource" leftLink={{ text: "Privacy", href: "#" }} rightLink={{ text: "Terms", href: "#" }} />
+      </div>
     </ThemeProvider>
   );
 }
\ No newline at end of file
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index bac7d54..99ed3b4 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -7,15 +7,22 @@ import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 
 export default function ContactPage() {
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingInline
-        navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Services", id: "/services" }, { name: "Company", id: "/company-info" }, { name: "Contact", id: "/contact" }]}
-        brandName="AutoSource"
-      />
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Services", id: "/services" }, { name: "Company", id: "/company-info" }, { name: "Contact", id: "/contact" }]}
+          brandName="AutoSource"
+          button={{ text: "Contact", href: "#" }}
+        />
+      </div>
       <main className="pt-24">
-        <ContactCTA tag="Contact" title="Contact Us" description="We'd love to hear from you." buttons={[{ text: "Email Us" }]} />
+        <div id="contact" data-section="contact">
+          <ContactCTA tag="Contact" title="Contact Us" description="We'd love to hear from you." buttons={[{ text: "Email Us" }]} background={{ variant: "plain" }} useInvertedBackground={false} />
+        </div>
       </main>
-      <FooterLogoReveal logoText="AutoSource" leftLink={{ text: "Privacy", href: "#" }} rightLink={{ text: "Terms", href: "#" }} />
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal logoText="AutoSource" leftLink={{ text: "Privacy", href: "#" }} rightLink={{ text: "Terms", href: "#" }} />
+      </div>
     </ThemeProvider>
   );
 }
\ No newline at end of file
diff --git a/src/app/services/page.tsx b/src/app/services/page.tsx
index 407e895..bbcd3ac 100644
--- a/src/app/services/page.tsx
+++ b/src/app/services/page.tsx
@@ -7,17 +7,24 @@ import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 
 export default function ServicesPage() {
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingInline
-        navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Services", id: "/services" }, { name: "Company", id: "/company-info" }, { name: "Contact", id: "/contact" }]}
-        brandName="AutoSource"
-      />
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Services", id: "/services" }, { name: "Company", id: "/company-info" }, { name: "Contact", id: "/contact" }]}
+          brandName="AutoSource"
+          button={{ text: "Contact", href: "#" }}
+        />
+      </div>
       <main className="pt-24">
         <h1 className="text-center text-4xl">Our Services</h1>
         <p className="text-center mt-6">High-quality automotive solutions tailored for you.</p>
       </main>
-      <ContactCTA tag="Contact" title="Inquire Now" description="Let us help you." buttons={[{ text: "Contact" }]} />
-      <FooterLogoReveal logoText="AutoSource" leftLink={{ text: "Privacy", href: "#" }} rightLink={{ text: "Terms", href: "#" }} />
+      <div id="contact" data-section="contact">
+        <ContactCTA tag="Contact" title="Inquire Now" description="Let us help you." buttons={[{ text: "Contact" }]} background={{ variant: "plain" }} useInvertedBackground={false} />
+      </div>
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal logoText="AutoSource" leftLink={{ text: "Privacy", href: "#" }} rightLink={{ text: "Terms", href: "#" }} />
+      </div>
     </ThemeProvider>
   );
 }
\ No newline at end of file