diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 7066363..f735979 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -9,18 +9,20 @@ import { Award, Users, TrendingUp } from "lucide-react";
 
 export default function AboutPage() {
   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="Webild"
-          navItems={[
-            { name: "Work", id: "/portfolio" },
-            { name: "Services", id: "/services" },
-            { name: "About", id: "/about" },
-            { name: "Contact", id: "#contact" },
-          ]}
-        />
-        <div className="pt-32 pb-20">
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            brandName="Webild"
+            navItems={[
+              { name: "Work", id: "/portfolio" },
+              { name: "Services", id: "/services" },
+              { name: "About", id: "/about" },
+              { name: "Contact", id: "#contact" },
+            ]}
+          />
+        </div>
+        <div id="about-metric" data-section="about-metric" className="pt-32 pb-20">
           <AboutMetric
             title="Our Story"
             metrics={[
@@ -32,14 +34,16 @@ export default function AboutPage() {
             useInvertedBackground={false}
           />
         </div>
-        <FooterBase
-          logoText="Webild"
-          copyrightText="© 2026 | Webild"
-          columns={[
-            { title: "Company", items: [{ label: "About", href: "/about" }, { label: "Services", href: "/services" }, { label: "Work", href: "/portfolio" }, { label: "Contact", href: "#contact" }] },
-            { title: "Services", items: [{ label: "Web Development", href: "/services" }, { label: "SEO", href: "/services" }, { label: "Branding", href: "/services" }, { label: "UI/UX Design", href: "/services" }] },
-          ]}
-        />
+        <div id="footer" data-section="footer">
+          <FooterBase
+            logoText="Webild"
+            copyrightText="© 2026 | Webild"
+            columns={[
+              { title: "Company", items: [{ label: "About", href: "/about" }, { label: "Services", href: "/services" }, { label: "Work", href: "/portfolio" }, { label: "Contact", href: "#contact" }] },
+              { title: "Services", items: [{ label: "Web Development", href: "/services" }, { label: "SEO", href: "/services" }, { label: "Branding", href: "/services" }, { label: "UI/UX Design", href: "/services" }] },
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/portfolio/page.tsx b/src/app/portfolio/page.tsx
index 3f12f1c..cbd0a78 100644
--- a/src/app/portfolio/page.tsx
+++ b/src/app/portfolio/page.tsx
@@ -5,41 +5,46 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
 import FeatureCardTwentySix from "@/components/sections/feature/FeatureCardTwentySix";
 import FooterBase from "@/components/sections/footer/FooterBase";
+import { ArrowRight } from "lucide-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>
-        <NavbarLayoutFloatingOverlay
-          brandName="Webild"
-          navItems={[
-            { name: "Work", id: "/portfolio" },
-            { name: "Services", id: "/services" },
-            { name: "About", id: "/about" },
-            { name: "Contact", id: "#contact" },
-          ]}
-        />
-        <div className="pt-32 pb-20">
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            brandName="Webild"
+            navItems={[
+              { name: "Work", id: "/portfolio" },
+              { name: "Services", id: "/services" },
+              { name: "About", id: "/about" },
+              { name: "Contact", id: "#contact" },
+            ]}
+          />
+        </div>
+        <div id="portfolio" data-section="portfolio" className="pt-32 pb-20">
           <FeatureCardTwentySix
             title="Selected Projects"
             description="Showcasing our commitment to quality, creativity, and results."
             features={[
-              { title: "Umbra Skincare", description: "Luxury fragrance e-commerce", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-1.webp" },
-              { title: "Luxuria Travel", description: "Bespoke luxury travel experiences", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-2.webp" },
-              { title: "Dental Care", description: "Premier dental practice", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-3.webp" },
+              { title: "Umbra Skincare", description: "Luxury fragrance e-commerce", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-1.webp", buttonIcon: ArrowRight },
+              { title: "Luxuria Travel", description: "Bespoke luxury travel experiences", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-2.webp", buttonIcon: ArrowRight },
+              { title: "Dental Care", description: "Premier dental practice", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-3.webp", buttonIcon: ArrowRight },
             ]}
             textboxLayout="default"
             useInvertedBackground={false}
           />
         </div>
-        <FooterBase
-          logoText="Webild"
-          copyrightText="© 2026 | Webild"
-          columns={[
-            { title: "Company", items: [{ label: "About", href: "/about" }, { label: "Services", href: "/services" }, { label: "Work", href: "/portfolio" }, { label: "Contact", href: "#contact" }] },
-            { title: "Services", items: [{ label: "Web Development", href: "/services" }, { label: "SEO", href: "/services" }, { label: "Branding", href: "/services" }, { label: "UI/UX Design", href: "/services" }] },
-          ]}
-        />
+        <div id="footer" data-section="footer">
+          <FooterBase
+            logoText="Webild"
+            copyrightText="© 2026 | Webild"
+            columns={[
+              { title: "Company", items: [{ label: "About", href: "/about" }, { label: "Services", href: "/services" }, { label: "Work", href: "/portfolio" }, { label: "Contact", href: "#contact" }] },
+              { title: "Services", items: [{ label: "Web Development", href: "/services" }, { label: "SEO", href: "/services" }, { label: "Branding", href: "/services" }, { label: "UI/UX Design", href: "/services" }] },
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/services/page.tsx b/src/app/services/page.tsx
index 78e4816..32235e7 100644
--- a/src/app/services/page.tsx
+++ b/src/app/services/page.tsx
@@ -5,22 +5,23 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
 import FeatureCardEight from "@/components/sections/feature/FeatureCardEight";
 import FooterBase from "@/components/sections/footer/FooterBase";
-import { Zap, Search, Layout, Palette } from "lucide-react";
 
 export default function ServicesPage() {
   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="Webild"
-          navItems={[
-            { name: "Work", id: "/portfolio" },
-            { name: "Services", id: "/services" },
-            { name: "About", id: "/about" },
-            { name: "Contact", id: "#contact" },
-          ]}
-        />
-        <div className="pt-32 pb-20">
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            brandName="Webild"
+            navItems={[
+              { name: "Work", id: "/portfolio" },
+              { name: "Services", id: "/services" },
+              { name: "About", id: "/about" },
+              { name: "Contact", id: "#contact" },
+            ]}
+          />
+        </div>
+        <div id="services" data-section="services" className="pt-32 pb-20">
           <FeatureCardEight
             title="Our Specialized Services"
             description="Comprehensive digital solutions designed to elevate your business presence."
@@ -34,14 +35,16 @@ export default function ServicesPage() {
             ]}
           />
         </div>
-        <FooterBase
-          logoText="Webild"
-          copyrightText="© 2026 | Webild"
-          columns={[
-            { title: "Company", items: [{ label: "About", href: "/about" }, { label: "Services", href: "/services" }, { label: "Work", href: "/portfolio" }, { label: "Contact", href: "#contact" }] },
-            { title: "Services", items: [{ label: "Web Development", href: "/services" }, { label: "SEO", href: "/services" }, { label: "Branding", href: "/services" }, { label: "UI/UX Design", href: "/services" }] },
-          ]}
-        />
+        <div id="footer" data-section="footer">
+          <FooterBase
+            logoText="Webild"
+            copyrightText="© 2026 | Webild"
+            columns={[
+              { title: "Company", items: [{ label: "About", href: "/about" }, { label: "Services", href: "/services" }, { label: "Work", href: "/portfolio" }, { label: "Contact", href: "#contact" }] },
+              { title: "Services", items: [{ label: "Web Development", href: "/services" }, { label: "SEO", href: "/services" }, { label: "Branding", href: "/services" }, { label: "UI/UX Design", href: "/services" }] },
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );