diff --git a/src/app/services/electrical/page.tsx b/src/app/services/electrical/page.tsx
index 9f58e06..415b32a 100644
--- a/src/app/services/electrical/page.tsx
+++ b/src/app/services/electrical/page.tsx
@@ -6,14 +6,20 @@ import FooterCard from '@/components/sections/footer/FooterCard';
 
 export default function ElectricalPage() {
   return (
-    <ThemeProvider>
-      <NavbarStyleApple navItems={[{name: "Home", id: "/"}, {name: "Services", id: "/services"}, {name: "Plumbing", id: "/services/plumbing"}, {name: "Electrical", id: "/services/electrical"}, {name: "Emergency", id: "/services/emergency"}, {name: "About", id: "/about"}, {name: "Contact", id: "/contact"}]} brandName="LocalPro" />
+    <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">
+        <NavbarStyleApple navItems={[{name: "Home", id: "/"}, {name: "Services", id: "/services"}, {name: "Plumbing", id: "/services/plumbing"}, {name: "Electrical", id: "/services/electrical"}, {name: "Emergency", id: "/services/emergency"}, {name: "About", id: "/about"}, {name: "Contact", id: "/contact"}]} />
+      </div>
       <div className="pt-32 pb-20 px-6 max-w-5xl mx-auto">
         <h1 className="text-5xl font-bold mb-6">Electrical Work</h1>
         <p className="text-xl text-gray-600">Certified electrical services including light installations, panel upgrades, and safety inspections.</p>
       </div>
-      <ContactCTA tag="Get Help" title="Electrical Issues?" description="Contact us today to schedule your service." buttons={[{text: "Call Now", href: "tel:5551234567"}]} />
-      <FooterCard logoText="LocalPro" />
+      <div id="contact" data-section="contact">
+        <ContactCTA tag="Get Help" title="Electrical Issues?" description="Contact us today to schedule your service." buttons={[{text: "Call Now", href: "tel:5551234567"}]} background={{ variant: "plain" }} useInvertedBackground={false} />
+      </div>
+      <div id="footer" data-section="footer">
+        <FooterCard logoText="LocalPro" />
+      </div>
     </ThemeProvider>
   );
 }
\ No newline at end of file
diff --git a/src/app/services/emergency/page.tsx b/src/app/services/emergency/page.tsx
index e5aa583..9aa17c0 100644
--- a/src/app/services/emergency/page.tsx
+++ b/src/app/services/emergency/page.tsx
@@ -6,14 +6,20 @@ import FooterCard from '@/components/sections/footer/FooterCard';
 
 export default function EmergencyPage() {
   return (
-    <ThemeProvider>
-      <NavbarStyleApple navItems={[{name: "Home", id: "/"}, {name: "Services", id: "/services"}, {name: "Plumbing", id: "/services/plumbing"}, {name: "Electrical", id: "/services/electrical"}, {name: "Emergency", id: "/services/emergency"}, {name: "About", id: "/about"}, {name: "Contact", id: "/contact"}]} brandName="LocalPro" />
+    <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">
+        <NavbarStyleApple navItems={[{name: "Home", id: "/"}, {name: "Services", id: "/services"}, {name: "Plumbing", id: "/services/plumbing"}, {name: "Electrical", id: "/services/electrical"}, {name: "Emergency", id: "/services/emergency"}, {name: "About", id: "/about"}, {name: "Contact", id: "/contact"}]} />
+      </div>
       <div className="pt-32 pb-20 px-6 max-w-5xl mx-auto">
         <h1 className="text-5xl font-bold mb-6">Emergency Repairs</h1>
         <p className="text-xl text-gray-600">24/7 emergency response for critical home service issues when you need us most.</p>
       </div>
-      <ContactCTA tag="Get Help" title="Urgent Situation?" description="Call us immediately for emergency assistance." buttons={[{text: "Call Now", href: "tel:5551234567"}]} />
-      <FooterCard logoText="LocalPro" />
+      <div id="contact" data-section="contact">
+        <ContactCTA tag="Get Help" title="Urgent Situation?" description="Call us immediately for emergency assistance." buttons={[{text: "Call Now", href: "tel:5551234567"}]} background={{ variant: "plain" }} useInvertedBackground={false} />
+      </div>
+      <div id="footer" data-section="footer">
+        <FooterCard logoText="LocalPro" />
+      </div>
     </ThemeProvider>
   );
 }
\ No newline at end of file
diff --git a/src/app/services/plumbing/page.tsx b/src/app/services/plumbing/page.tsx
index 972d2a5..a900dc8 100644
--- a/src/app/services/plumbing/page.tsx
+++ b/src/app/services/plumbing/page.tsx
@@ -6,14 +6,20 @@ import FooterCard from '@/components/sections/footer/FooterCard';
 
 export default function PlumbingPage() {
   return (
-    <ThemeProvider>
-      <NavbarStyleApple navItems={[{name: "Home", id: "/"}, {name: "Services", id: "/services"}, {name: "Plumbing", id: "/services/plumbing"}, {name: "Electrical", id: "/services/electrical"}, {name: "Emergency", id: "/services/emergency"}, {name: "About", id: "/about"}, {name: "Contact", id: "/contact"}]} brandName="LocalPro" />
+    <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">
+        <NavbarStyleApple navItems={[{name: "Home", id: "/"}, {name: "Services", id: "/services"}, {name: "Plumbing", id: "/services/plumbing"}, {name: "Electrical", id: "/services/electrical"}, {name: "Emergency", id: "/services/emergency"}, {name: "About", id: "/about"}, {name: "Contact", id: "/contact"}]} />
+      </div>
       <div className="pt-32 pb-20 px-6 max-w-5xl mx-auto">
         <h1 className="text-5xl font-bold mb-6">Plumbing Services</h1>
         <p className="text-xl text-gray-600">Professional plumbing solutions for your residential needs, including leak repairs, pipe installation, and drain clearing.</p>
       </div>
-      <ContactCTA tag="Get Help" title="Need a Plumber?" description="Contact us today to schedule your service." buttons={[{text: "Call Now", href: "tel:5551234567"}]} />
-      <FooterCard logoText="LocalPro" />
+      <div id="contact" data-section="contact">
+        <ContactCTA tag="Get Help" title="Need a Plumber?" description="Contact us today to schedule your service." buttons={[{text: "Call Now", href: "tel:5551234567"}]} background={{ variant: "plain" }} useInvertedBackground={false} />
+      </div>
+      <div id="footer" data-section="footer">
+        <FooterCard logoText="LocalPro" />
+      </div>
     </ThemeProvider>
   );
 }
\ No newline at end of file