diff --git a/src/app/work/page.tsx b/src/app/work/page.tsx
index 2d563f8..ff948b4 100644
--- a/src/app/work/page.tsx
+++ b/src/app/work/page.tsx
@@ -3,50 +3,59 @@
 import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import FeatureCardTwentySix from "@/components/sections/feature/FeatureCardTwentySix";
-import ContactCTA from "@/components/sections/contact/ContactCTA";
-import FooterBase from "@/components/sections/footer/FooterBase";
-import { ArrowUpRight } from "lucide-react";
+import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
+import ContactText from "@/components/sections/contact/ContactText";
+import { ArrowRight } from "lucide-react";
 
 export default function WorkPage() {
   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", href: "/work" },
-            { name: "Pricing", href: "/pricing" },
-            { name: "About", href: "/about" },
-            { name: "Contact", href: "/contact" },
-          ]}
-          button={{ text: "Get Started", href: "/contact" }}
-        />
-        <FeatureCardTwentySix
-          title="Our Portfolio"
-          description="A showcase of our best work across various industries."
-          textboxLayout="default"
-          useInvertedBackground={false}
-          animationType="slide-up"
-          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", buttonIcon: ArrowUpRight },
-            { 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: ArrowUpRight },
-            { 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: ArrowUpRight },
-            { title: "Summit Roofing", description: "Professional roofing services", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-4.webp", buttonIcon: ArrowUpRight },
-          ]}
-        />
-        <ContactCTA
-          tag="Let's Work"
-          title="Have a project in mind?"
-          description="Let's discuss how we can bring your vision to life."
-          buttons={[{ text: "Get Started", href: "/contact" }]}
-        />
-        <FooterBase
-          logoText="Webild"
-          columns={[
-            { title: "Company", items: [{ label: "About", href: "/about" }, { label: "Pricing", href: "/pricing" }, { label: "Work", href: "/work" }, { label: "Contact", href: "/contact" }] },
-          ]}
-        />
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            brandName="Webild"
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Work", id: "/work" },
+              { name: "Pricing", id: "/pricing" },
+              { name: "Services", id: "/services" },
+              { name: "About", id: "/about" },
+              { name: "Contact", id: "/contact" }
+            ]}
+            button={{ text: "Get Started", href: "/contact" }}
+          />
+        </div>
+        <div id="work-features" data-section="work-features">
+          <FeatureCardTwentyFour
+            title="Our Work"
+            description="Showcasing our best projects and creative solutions."
+            textboxLayout="default"
+            useInvertedBackground={false}
+            animationType="slide-up"
+            features={[
+              { id: "1", title: "Project Alpha", author: "Design Team", description: "High-end web application.", tags: ["UI/UX"], imageSrc: "https://images.unsplash.com/photo-1551650975-87de11494a6b?auto=format&fit=crop&q=80&w=800" }
+            ]}
+          />
+        </div>
+        <div id="contact" data-section="contact">
+          <ContactText 
+            text="Ready to start your project?"
+            background={{ variant: "plain" }}
+            useInvertedBackground={false}
+            buttons={[{ text: "Contact Us", href: "/contact" }]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );