diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index c59d2ca..191d930 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -21,28 +21,36 @@ export default function AboutPage() {
         headingFontWeight="normal"
     >
       <ReactLenis root>
-        <NavbarStyleApple
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "About", id: "/about" },
-            { name: "Service Areas", id: "/service-areas" },
-            { name: "Contact", id: "#contact" }
-          ]}
-          brandName="GreenLeaf Landscapes"
-        />
-        <SplitAbout
-          textboxLayout="split"
-          title="The Memphis Homeowners' Trust"
-          description="For over 15 years, we have served Memphis families by transforming ordinary yards into extraordinary sanctuaries. We understand that your home is your greatest investment, and our commitment is to provide the reliable, professional, and high-quality care that Memphis homeowners trust."
-          imageSrc="http://img.b2bpic.net/free-photo/medium-shot-people-watering-plants_23-2149098323.jpg"
-        />
-        <FooterBaseReveal
-          logoText="GreenLeaf"
-          columns={[
-            { title: "Services", items: [{ label: "Lawn Care", href: "#" }, { label: "Hardscaping", href: "#" }] },
-            { title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Service Areas", href: "/service-areas" }] }
-          ]}
-        />
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Service Areas", id: "/service-areas" },
+              { name: "Contact", id: "/contact" }
+            ]}
+            brandName="GreenLeaf Landscapes"
+          />
+        </div>
+        <div id="about" data-section="about">
+          <SplitAbout
+            textboxLayout="split"
+            title="The Memphis Homeowners' Trust"
+            description="For over 15 years, we have served Memphis families by transforming ordinary yards into extraordinary sanctuaries. We understand that your home is your greatest investment, and our commitment is to provide the reliable, professional, and high-quality care that Memphis homeowners trust."
+            imageSrc="http://img.b2bpic.net/free-photo/medium-shot-people-watering-plants_23-2149098323.jpg"
+            bulletPoints={[]}
+            useInvertedBackground={false}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
+            logoText="GreenLeaf"
+            columns={[
+              { title: "Services", items: [{ label: "Lawn Care", href: "#" }, { label: "Hardscaping", href: "#" }] },
+              { title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Service Areas", href: "/service-areas" }] }
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/portfolio/page.tsx b/src/app/portfolio/page.tsx
index dbbf875..bb7abe9 100644
--- a/src/app/portfolio/page.tsx
+++ b/src/app/portfolio/page.tsx
@@ -8,35 +8,54 @@ import ReactLenis from "lenis/react";
 
 export default function PortfolioPage() {
   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: "Services", id: "/services" },
-            { name: "Portfolio", id: "/portfolio" },
-            { name: "Contact", id: "/contact" }
-          ]}
-          brandName="GreenLeaf Landscapes"
-        />
-        <ProductCardThree
-          title="Our Portfolio"
-          description="A curated selection of our work across diverse landscape categories."
-          animationType="slide-up"
-          gridVariant="three-columns-all-equal-width"
-          products={[
-            { id: "1", name: "Residential Patio", price: "Hardscape", imageSrc: "http://img.b2bpic.net/free-photo/stone-path-way-garden_74190-3631.jpg" },
-            { id: "2", name: "Commercial Garden", price: "Design", imageSrc: "http://img.b2bpic.net/free-photo/road-surrounded-with-green-tropical-trees-leading-hotel_181624-49537.jpg" },
-            { id: "3", name: "Lush Lawn", price: "Maintenance", imageSrc: "http://img.b2bpic.net/free-photo/worker-is-cutting-grass-with-hose_7502-9835.jpg" }
-          ]}
-        />
-        <FooterBaseReveal
-          logoText="GreenLeaf"
-          columns={[
-            { title: "Portfolio", items: [{ label: "View Gallery", href: "/portfolio" }] },
-            { title: "Company", items: [{ label: "Home", href: "/" }] }
-          ]}
-        />
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Services", id: "/services" },
+              { name: "Portfolio", id: "/portfolio" },
+              { name: "Contact", id: "/contact" }
+            ]}
+            brandName="GreenLeaf Landscapes"
+          />
+        </div>
+        <div id="products" data-section="products">
+          <ProductCardThree
+            title="Our Portfolio"
+            description="A curated selection of our work across diverse landscape categories."
+            animationType="slide-up"
+            gridVariant="three-columns-all-equal-width"
+            products={[
+              { id: "1", name: "Residential Patio", price: "Hardscape", imageSrc: "http://img.b2bpic.net/free-photo/stone-path-way-garden_74190-3631.jpg" },
+              { id: "2", name: "Commercial Garden", price: "Design", imageSrc: "http://img.b2bpic.net/free-photo/road-surrounded-with-green-tropical-trees-leading-hotel_181624-49537.jpg" },
+              { id: "3", name: "Lush Lawn", price: "Maintenance", imageSrc: "http://img.b2bpic.net/free-photo/worker-is-cutting-grass-with-hose_7502-9835.jpg" }
+            ]}
+            textboxLayout="default"
+            useInvertedBackground={false}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
+            logoText="GreenLeaf"
+            columns={[
+              { title: "Portfolio", items: [{ label: "View Gallery", href: "/portfolio" }] },
+              { title: "Company", items: [{ label: "Home", href: "/" }] }
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/service-areas/page.tsx b/src/app/service-areas/page.tsx
index e482e93..8a7b4b8 100644
--- a/src/app/service-areas/page.tsx
+++ b/src/app/service-areas/page.tsx
@@ -22,36 +22,43 @@ export default function ServiceAreasPage() {
         headingFontWeight="normal"
     >
       <ReactLenis root>
-        <NavbarStyleApple
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "About", id: "/about" },
-            { name: "Service Areas", id: "/service-areas" },
-            { name: "Contact", id: "#contact" }
-          ]}
-          brandName="GreenLeaf Landscapes"
-        />
-        <FeatureBorderGlow
-          title="Our Service Areas"
-          description="We proudly serve the Greater Memphis area and surrounding communities."
-          useInvertedBackground={false}
-          animationType="slide-up"
-          features={[
-            { icon: MapPin, title: "Memphis", description: "Serving the heart of the city." },
-            { icon: MapPin, title: "Germantown", description: "High-end landscape design." },
-            { icon: MapPin, title: "Collierville", description: "Reliable maintenance services." },
-            { icon: MapPin, title: "Cordova", description: "Full service landscaping." },
-            { icon: MapPin, title: "Bartlett", description: "Professional garden care." },
-            { icon: MapPin, title: "Arlington", description: "Tailored outdoor solutions." }
-          ]}
-        />
-        <FooterBaseReveal
-          logoText="GreenLeaf"
-          columns={[
-            { title: "Services", items: [{ label: "Lawn Care", href: "#" }, { label: "Hardscaping", href: "#" }] },
-            { title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Service Areas", href: "/service-areas" }] }
-          ]}
-        />
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Service Areas", id: "/service-areas" },
+              { name: "Contact", id: "/contact" }
+            ]}
+            brandName="GreenLeaf Landscapes"
+          />
+        </div>
+        <div id="features" data-section="features">
+          <FeatureBorderGlow
+            title="Our Service Areas"
+            description="We proudly serve the Greater Memphis area and surrounding communities."
+            useInvertedBackground={false}
+            animationType="slide-up"
+            textboxLayout="default"
+            features={[
+              { icon: MapPin, title: "Memphis", description: "Serving the heart of the city." },
+              { icon: MapPin, title: "Germantown", description: "High-end landscape design." },
+              { icon: MapPin, title: "Collierville", description: "Reliable maintenance services." },
+              { icon: MapPin, title: "Cordova", description: "Full service landscaping." },
+              { icon: MapPin, title: "Bartlett", description: "Professional garden care." },
+              { icon: MapPin, title: "Arlington", description: "Tailored outdoor solutions." }
+            ]}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
+            logoText="GreenLeaf"
+            columns={[
+              { title: "Services", items: [{ label: "Lawn Care", href: "#" }, { label: "Hardscaping", href: "#" }] },
+              { title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Service Areas", href: "/service-areas" }] }
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );