diff --git a/src/app/services/drain-cleaning/page.tsx b/src/app/services/drain-cleaning/page.tsx
index fe16361..89b6d47 100644
--- a/src/app/services/drain-cleaning/page.tsx
+++ b/src/app/services/drain-cleaning/page.tsx
@@ -8,33 +8,40 @@ import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
 
 export default function DrainCleaningPage() {
   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>
-        <NavbarLayoutFloatingOverlay
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
             navItems={[
-                { name: "Home", id: "/" },
-                { name: "About", id: "/about" },
-                { name: "Services", id: "/services" },
-                { name: "Drain Cleaning", id: "/services/drain-cleaning" },
-                { name: "Water Heater Repair", id: "/services/water-heater-repair" },
-                { name: "Reviews", id: "/reviews" },
-                { name: "Contact", id: "/contact" },
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Services", id: "/services" },
+              { name: "Drain Cleaning", id: "/services/drain-cleaning" },
+              { name: "Water Heater Repair", id: "/services/water-heater-repair" },
+              { name: "Reviews", id: "/reviews" },
+              { name: "Contact", id: "/contact" },
             ]}
-            brandName="The Plumbing Company"
-        />
-        <HeroSplitKpi
+          />
+        </div>
+        <div id="hero" data-section="hero">
+          <HeroSplitKpi
             title="Expert Drain Cleaning Services"
             description="Clogged drains can disrupt your daily routine. Our professional team provides fast, efficient cleaning for kitchen, bathroom, and main sewer lines."
             kpis={[{ value: "Fast", label: "Response" }, { value: "Advanced", label: "Equipment" }, { value: "100%", label: "Satisfaction" }]}
             buttons={[{ text: "Schedule Service", href: "/contact" }]}
-        />
-        <FooterBase
+            background={{ variant: "plain" }}
+            enableKpiAnimation={true}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBase
             columns={[
-                { title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "About", href: "/about" }, { label: "Services", href: "/services" }] },
-                { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms", href: "#" }] },
+              { title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "About", href: "/about" }, { label: "Services", href: "/services" }] },
+              { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms", href: "#" }] },
             ]}
             logoText="The Plumbing Company (517) 899-5499"
-        />
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/services/water-heater-repair/page.tsx b/src/app/services/water-heater-repair/page.tsx
index 25e89e6..9932cf6 100644
--- a/src/app/services/water-heater-repair/page.tsx
+++ b/src/app/services/water-heater-repair/page.tsx
@@ -8,33 +8,40 @@ import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
 
 export default function WaterHeaterRepairPage() {
   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>
-        <NavbarLayoutFloatingOverlay
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
             navItems={[
-                { name: "Home", id: "/" },
-                { name: "About", id: "/about" },
-                { name: "Services", id: "/services" },
-                { name: "Drain Cleaning", id: "/services/drain-cleaning" },
-                { name: "Water Heater Repair", id: "/services/water-heater-repair" },
-                { name: "Reviews", id: "/reviews" },
-                { name: "Contact", id: "/contact" },
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Services", id: "/services" },
+              { name: "Drain Cleaning", id: "/services/drain-cleaning" },
+              { name: "Water Heater Repair", id: "/services/water-heater-repair" },
+              { name: "Reviews", id: "/reviews" },
+              { name: "Contact", id: "/contact" },
             ]}
-            brandName="The Plumbing Company"
-        />
-        <HeroSplitKpi
+          />
+        </div>
+        <div id="hero" data-section="hero">
+          <HeroSplitKpi
             title="Reliable Water Heater Repair & Installation"
             description="No hot water? Our certified technicians specialize in diagnosing and fixing all types of water heater issues quickly. From routine maintenance to full system replacements."
             kpis={[{ value: "Same Day", label: "Repair" }, { value: "Full", label: "Installation" }, { value: "Expert", label: "Service" }]}
             buttons={[{ text: "Call for Service", href: "tel:5178995499" }]}
-        />
-        <FooterBase
+            background={{ variant: "plain" }}
+            enableKpiAnimation={true}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBase
             columns={[
-                { title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "About", href: "/about" }, { label: "Services", href: "/services" }] },
-                { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms", href: "#" }] },
+              { title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "About", href: "/about" }, { label: "Services", href: "/services" }] },
+              { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms", href: "#" }] },
             ]}
             logoText="The Plumbing Company (517) 899-5499"
-        />
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );