diff --git a/src/app/services/page.tsx b/src/app/services/page.tsx
index 428eaaa..2081e64 100644
--- a/src/app/services/page.tsx
+++ b/src/app/services/page.tsx
@@ -3,42 +3,39 @@
 import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import FeatureBento from "@/components/sections/feature/FeatureBento";
-import FooterBase from "@/components/sections/footer/FooterBase";
-import { Search, Monitor, Zap, Palette, Shield } from "lucide-react";
+import FeatureCardNine from "@/components/sections/feature/FeatureCardNine";
+import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
 
 export default function ServicesPage() {
   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
           brandName="Webild"
           navItems={[
             { name: "Work", id: "/portfolio" },
             { name: "Services", id: "/services" },
-            { name: "About", id: "about" },
-            { name: "Contact", id: "contact" },
+            { name: "About", id: "/about" },
+            { name: "Contact", id: "/contact" },
           ]}
         />
         <div className="pt-32 pb-20">
-          <FeatureBento
+          <FeatureCardNine
             title="Our Digital Marketing Services"
             description="Comprehensive solutions to scale your business."
+            showStepNumbers={false}
             animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
             features={[
-              { title: "SEO", description: "Rank higher.", bentoComponent: "reveal-icon", icon: Search },
-              { title: "Web Development", description: "Fast & responsive.", bentoComponent: "reveal-icon", icon: Monitor },
-              { title: "Performance", description: "High speed.", bentoComponent: "reveal-icon", icon: Zap },
-              { title: "UI/UX", description: "User-centered design.", bentoComponent: "reveal-icon", icon: Palette },
-              { title: "Security", description: "Safe hosting.", bentoComponent: "reveal-icon", icon: Shield },
+              { title: "SEO", description: "Rank higher.", phoneOne: { imageSrc: "" }, phoneTwo: { imageSrc: "" } },
+              { title: "Web Development", description: "Fast & responsive.", phoneOne: { imageSrc: "" }, phoneTwo: { imageSrc: "" } },
             ]}
           />
         </div>
-        <FooterBase
+        <FooterLogoEmphasis
           logoText="Webild"
-          columns={[
-            { title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "Portfolio", href: "/portfolio" }] },
-          ]}
+          columns={[]}
         />
       </ReactLenis>
     </ThemeProvider>