diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 3149a29..a30dc20 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -4,7 +4,7 @@ import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
 import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
-import FooterBase from "@/components/sections/footer/FooterBase";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
 
 export default function AboutPage() {
   return (
@@ -24,12 +24,11 @@ export default function AboutPage() {
         <NavbarLayoutFloatingOverlay
           brandName="Webild"
           navItems={[
-            { name: "Work", id: "work" },
-            { name: "Services", id: "services" },
+            { name: "Work", id: "/portfolio" },
+            { name: "Services", id: "/services" },
             { name: "About", id: "/about" },
             { name: "Contact", id: "/contact" },
           ]}
-          button={{ text: "Get Started", href: "/contact" }}
         />
         <InlineImageSplitTextAbout
           heading={[
@@ -38,16 +37,17 @@ export default function AboutPage() {
             { type: "text", content: "through innovation and passion." }
           ]}
           buttons={[{ text: "Let's Talk", href: "/contact" }]}
+          useInvertedBackground={false}
         />
-        <FooterBase
+        <FooterBaseReveal
           logoText="Webild"
           copyrightText="© 2026 | Webild"
           columns={[
             {
               title: "Company",              items: [
                 { label: "About", href: "/about" },
-                { label: "Services", href: "#services" },
-                { label: "Work", href: "#work" },
+                { label: "Services", href: "/services" },
+                { label: "Work", href: "/portfolio" },
                 { label: "Contact", href: "/contact" },
               ],
             },
@@ -56,4 +56,4 @@ export default function AboutPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 58db802..7e7310e 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -3,8 +3,8 @@
 import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import ContactCenter from "@/components/sections/contact/ContactCenter";
-import FooterBase from "@/components/sections/footer/FooterBase";
+import ContactSplit from "@/components/sections/contact/ContactSplit";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
 
 export default function ContactPage() {
   return (
@@ -24,29 +24,30 @@ export default function ContactPage() {
         <NavbarLayoutFloatingOverlay
           brandName="Webild"
           navItems={[
-            { name: "Work", id: "work" },
-            { name: "Services", id: "services" },
+            { name: "Work", id: "/portfolio" },
+            { name: "Services", id: "/services" },
             { name: "About", id: "/about" },
             { name: "Contact", id: "/contact" },
           ]}
-          button={{ text: "Get Started", href: "/contact" }}
         />
-        <ContactCenter
+        <ContactSplit
           tag="Get in Touch"
           title="Collaborate with Us"
           description="Have a project in mind? We'd love to hear from you. Fill out the form and our team will get back to you shortly."
           background={{ variant: "rotated-rays-animated" }}
           onSubmit={(email) => console.log("Submit:", email)}
+          useInvertedBackground={false}
+          mediaAnimation="slide-up"
         />
-        <FooterBase
+        <FooterBaseReveal
           logoText="Webild"
           copyrightText="© 2026 | Webild"
           columns={[
             {
               title: "Company",              items: [
                 { label: "About", href: "/about" },
-                { label: "Services", href: "#services" },
-                { label: "Work", href: "#work" },
+                { label: "Services", href: "/services" },
+                { label: "Work", href: "/portfolio" },
                 { label: "Contact", href: "/contact" },
               ],
             },
@@ -55,4 +56,4 @@ export default function ContactPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/portfolio/page.tsx b/src/app/portfolio/page.tsx
index 91003f6..8792ed2 100644
--- a/src/app/portfolio/page.tsx
+++ b/src/app/portfolio/page.tsx
@@ -3,11 +3,10 @@
 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 FeatureBento from "@/components/sections/feature/FeatureBento";
-import ContactCTA from "@/components/sections/contact/ContactCTA";
-import FooterBase from "@/components/sections/footer/FooterBase";
-import { ArrowUpRight, Zap, Target, Layers } from "lucide-react";
+import FeatureCardMedia from "@/components/sections/feature/FeatureCardMedia";
+import ContactSplit from "@/components/sections/contact/ContactSplit";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
+import { ArrowUpRight } from "lucide-react";
 
 export default function PortfolioPage() {
   return (
@@ -28,13 +27,12 @@ export default function PortfolioPage() {
           brandName="Webild"
           navItems={[
             { name: "Work", id: "/portfolio" },
-            { name: "Services", id: "#services" },
-            { name: "About", id: "#about" },
-            { name: "Contact", id: "#contact" },
+            { name: "Services", id: "/services" },
+            { name: "About", id: "/about" },
+            { name: "Contact", id: "/contact" },
           ]}
-          button={{ text: "Get Started", href: "#contact" }}
         />
-        <FeatureCardTwentySix
+        <FeatureCardMedia
           title="Our Portfolio"
           description="A deep dive into our recent work and creative problem solving for industry leaders."
           textboxLayout="default"
@@ -42,46 +40,36 @@ export default function PortfolioPage() {
           animationType="slide-up"
           features={[
             {
-              title: "Marketplace Redesign",              description: "Comprehensive UX/UI transformation for a global marketplace, increasing engagement by 40%.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CkGaGcTHeRmAu4oiq071cNDcIj/uploaded-1776922464087-xf8jlov6.jpg",              imageAlt: "Case study project",              buttonIcon: ArrowUpRight,
-              buttonHref: "#"
+              id: "1",              title: "Marketplace Redesign",              description: "Comprehensive UX/UI transformation for a global marketplace, increasing engagement by 40%.",              tag: "Case Study",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CkGaGcTHeRmAu4oiq071cNDcIj/uploaded-1776922464087-xf8jlov6.jpg",              buttons: [{ text: "View Case", href: "#" }]
             },
             {
-              title: "FinTech Dashboard",              description: "Developing a high-performance analytics dashboard with real-time data visualization.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CkGaGcTHeRmAu4oiq071cNDcIj/uploaded-1776922464087-qj6ou10i.jpg",              imageAlt: "Case study project",              buttonIcon: ArrowUpRight,
-              buttonHref: "#"
+              id: "2",              title: "FinTech Dashboard",              description: "Developing a high-performance analytics dashboard with real-time data visualization.",              tag: "Case Study",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CkGaGcTHeRmAu4oiq071cNDcIj/uploaded-1776922464087-qj6ou10i.jpg",              buttons: [{ text: "View Case", href: "#" }]
             }
           ]}
         />
-        <FeatureBento
-          title="Case Study Methodology"
-          description="Our approach combines research, design, and technical precision."
-          textboxLayout="default"
-          useInvertedBackground={true}
-          animationType="slide-up"
-          features={[
-            {
-              title: "Discovery & Research",              description: "We analyze your industry and user behavior to set the foundation.",              bentoComponent: "reveal-icon",              icon: Target,
-            },
-            {
-              title: "Design Iteration",              description: "Continuous feedback loops to ensure every pixel aligns with your brand.",              bentoComponent: "reveal-icon",              icon: Layers,
-            },
-            {
-              title: "Technical Execution",              description: "Clean code and optimized performance for a robust digital product.",              bentoComponent: "reveal-icon",              icon: Zap,
-            }
-          ]}
-        />
-        <ContactCTA
+        <ContactSplit
           tag="Ready to start?"
           title="Let's build your story next"
           description="We're currently accepting new projects. Let's discuss your goals."
           background={{ variant: "rotated-rays-animated" }}
-          buttons={[{ text: "Contact Us", href: "#contact" }]}
+          useInvertedBackground={false}
+          mediaAnimation="slide-up"
         />
-        <FooterBase
+        <FooterBaseReveal
           logoText="Webild"
           copyrightText="© 2026 | Webild"
-          columns={[]}
+          columns={[
+            {
+              title: "Company",              items: [
+                { label: "About", href: "/about" },
+                { label: "Services", href: "/services" },
+                { label: "Work", href: "/portfolio" },
+                { label: "Contact", href: "/contact" },
+              ],
+            },
+          ]}
         />
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file