diff --git a/src/app/features/page.tsx b/src/app/features/page.tsx
index 5be6670..40999a7 100644
--- a/src/app/features/page.tsx
+++ b/src/app/features/page.tsx
@@ -1,8 +1,8 @@
 "use client";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
-import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
-import FooterBase from "@/components/sections/footer/FooterBase";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
 import { useEffect, useState } from "react";
 import { Sparkles, BarChart, Settings } from "lucide-react";
 
@@ -38,16 +38,13 @@ export default function FeaturesPage() {
       headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
-        <NavbarStyleCentered
+        <NavbarStyleApple
           navItems={navbarLinks}
           brandName="Webild"
-          logoSrc="/logo.svg"
-          logoAlt="Webild Logo"
-          button={{ text: "Get Started", href: "https://webild.com" }}
         />
       </div>
       <div id="features-section" data-section="features-section">
-        <FeatureCardTwentyFour
+        <FeatureHoverPattern
           title="Powerful Features"
           description="Discover how Webild can streamline your operations and boost efficiency."
           animationType="slide-up"
@@ -60,7 +57,7 @@ export default function FeaturesPage() {
           ]}
         />
       </div>
-      <FooterBase
+      <FooterSimple
         columns={[
           {
             title: "Product", items: [