diff --git a/src/app/dashboard/tracker/page.tsx b/src/app/dashboard/tracker/page.tsx
index cc6057a..1658bac 100644
--- a/src/app/dashboard/tracker/page.tsx
+++ b/src/app/dashboard/tracker/page.tsx
@@ -1,11 +1,29 @@
 "use client";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
-import HeroBillboardDashboard from "@/components/sections/hero/HeroBillboardDashboard";
-import FeatureBento from "@/components/sections/feature/FeatureBento";
-import { Briefcase, Folder, Mail, ClipboardList, Users, Settings, GraduationCap, CheckCircle } from "lucide-react"; // Added CheckCircle for general status icon
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+import { useEffect, useState } from "react";
+import { Search, Calendar, CheckCircle } from 'lucide-react';
+
+const navbarLinks = [
+  { name: "Home", id: "/" },
+  { name: "Features", id: "/features" },
+  { name: "About", id: "/about" },
+  { name: "Contact", id: "/contact" },
+  { name: "Dashboard", id: "/dashboard/tracker" }
+];
 
 export default function DashboardTrackerPage() {
+  const [isClient, setIsClient] = useState(false);
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  if (!isClient) {
+    return null;
+  }
+
   return (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
@@ -19,68 +37,49 @@ export default function DashboardTrackerPage() {
       secondaryButtonStyle="glass"
       headingFontWeight="bold"
     >
-      <NavbarStyleFullscreen
-        navItems={[
-          { name: "Home", id: "/" },
-          { name: "Dashboard", id: "/dashboard/tracker" }
-        ]}
-        brandName="TrackerApp"
-        logoSrc="https://picsum.photos/40/40?_wi=1"
-        logoAlt="TrackerApp Logo"
-        button={{ text: "Sign Out", href: "#" }}
-      />
-
-      <div id="application-status" data-section="application-status">
-        <HeroBillboardDashboard
-          title="Your Application Dashboard"
-          description="Track your job applications and stay on top of your interview process."
-          background={{ variant: "plain" }}
-          dashboard={{
-            title: "Overview",            stats: [
-              { title: "Applications Sent", values: [25, 30, 28], description: "Total applications submitted" },
-              { title: "Interviews Scheduled", values: [5, 8, 6], description: "Upcoming and past interviews" },
-              { title: "Offers Received", values: [1, 2, 1], description: "Job offers received" }
-            ],
-            logoIcon: Briefcase,
-            sidebarItems: [
-              { icon: Folder },
-              { icon: Mail },
-              { icon: ClipboardList },
-              { icon: Users },
-              { icon: Settings }
-            ],
-            listItems: [
-              { icon: Briefcase, title: "Software Engineer at Google", status: "Interviewing" },
-              { icon: GraduationCap, title: "Data Scientist at Amazon", status: "Applied" },
-              { icon: Folder, title: "Product Manager at Meta", status: "Rejected" },
-              { icon: CheckCircle, title: "Frontend Dev at StartupX", status: "Offer Accepted" }
-            ],
-            imageSrc: "https://picsum.photos/1200/800?_wi=1",            imageAlt: "Dashboard overview image",            buttons: [{ text: "Add New Application", href: "#" }]
-          }}
-          className="py-12 md:py-20 lg:py-28"
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          navItems={navbarLinks}
+          brandName="Webild"
+          logoSrc="/logo.svg"
+          logoAlt="Webild Logo"
+          button={{ text: "Get Started", href: "https://webild.com" }}
         />
       </div>
-
-      <div id="interview-timeline" data-section="interview-timeline">
-        <FeatureBento
-          tag="Your Journey"
-          title="Interview Timeline"
-          description="Visualize your progress through different interview stages."
+      <div id="tracker-features" data-section="tracker-features">
+        <FeatureHoverPattern
+          tag="Track Progress"
+          title="Your Hiring Journey"
+          description="Manage all stages of your recruitment process with ease."
           animationType="slide-up"
           useInvertedBackground={false}
           features={[
-            {
-              title: "Upcoming Interviews",              description: "A detailed view of your interview schedule.",              bentoComponent: "timeline",              heading: "Interview Stages",              subheading: "Next Steps in Your Application Process",              items: [
-                { label: "Application Submitted", detail: "March 1, 2024" },
-                { label: "Screening Call", detail: "March 5, 2024 - Completed" },
-                { label: "Technical Interview", detail: "March 12, 2024 - Scheduled" }
-              ],
-              completedLabel: "Completed"
-            }
+            { title: "Candidate Sourcing", description: "Find the best talent.", icon: Search },
+            { title: "Interview Scheduling", description: "Organize interviews effortlessly.", icon: Calendar },
+            { title: "Offer Management", description: "Extend offers swiftly.", icon: CheckCircle }
           ]}
-          className="py-12 md:py-20 lg:py-28"
+          className="my-12"
+          textboxLayout="default"
         />
       </div>
+      <FooterSimple
+        columns={[
+          {
+            title: "Product", items: [
+              { label: "Features", href: "/features" },
+              { label: "Pricing", href: "/pricing" }
+            ]
+          },
+          {
+            title: "Company", items: [
+              { label: "About Us", href: "/about" },
+              { label: "Careers", href: "#careers" }
+            ]
+          }
+        ]}
+        bottomLeftText="Webild"
+        bottomRightText="© 2024 Webild. All rights reserved."
+      />
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/features/page.tsx b/src/app/features/page.tsx
index 1f9b704..5be6670 100644
--- a/src/app/features/page.tsx
+++ b/src/app/features/page.tsx
@@ -1,15 +1,17 @@
 "use client";
-import { ThemeProvider } from "next-themes";
-import { NavbarStyleCentered } from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
-import { FeatureCardTwentyFour } from "@/components/sections/feature/FeatureCardTwentyFour";
-import { FooterBase } from "@/components/sections/footer/FooterBase";
-import { Sparkles, Briefcase, Users } from "lucide-react";
+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 { useEffect, useState } from "react";
+import { Sparkles, BarChart, Settings } from "lucide-react";
 
 const navbarLinks = [
   { name: "Home", id: "/" },
   { name: "Features", id: "/features" },
-  { name: "About", id: "/about" }
+  { name: "About", id: "/about" },
+  { name: "Contact", id: "/contact" },
+  { name: "Dashboard", id: "/dashboard/tracker" }
 ];
 
 export default function FeaturesPage() {
@@ -24,10 +26,6 @@ export default function FeaturesPage() {
 
   return (
     <ThemeProvider
-      attribute="class"
-      defaultTheme="light"
-      enableSystem
-      disableTransitionOnChange
       defaultButtonVariant="hover-magnetic"
       defaultTextAnimation="entrance-slide"
       borderRadius="rounded"
@@ -39,59 +37,46 @@ export default function FeaturesPage() {
       secondaryButtonStyle="glass"
       headingFontWeight="bold"
     >
-      <NavbarStyleCentered
-        navItems={navbarLinks}
-        brandName="Webild"
-        logoSrc="/logo.svg"
-        logoAlt="Webild Logo"
-        button={{ text: "Get Started", href: "https://webild.com" }}
-      />
-      <div id="features" data-section="features">
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          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
-          title="Streamline Your Hiring with Powerful Features"
-          description="Optimize every step of your recruitment process from application to offer."
-          tag="Our Solutions"
-          features={[
-            {
-              id: "1",              title: "Interview Tracking & Scheduling",              author: "Efficiency",              description: "Easily schedule, track, and manage all candidate interviews in one place. Gather feedback, rate candidates, and move them through stages with intuitive tools.",              tags: ["Interview", "Scheduling", "Tracking"],
-              imageSrc: "https://picsum.photos/id/243/800/600",              imageAlt: "Interview scheduling calendar"
-            },
-            {
-              id: "2",              title: "Comprehensive Application Management",              author: "Organization",              description: "Handle high volumes of applications with ease. Filter, sort, and review candidates, ensuring no great talent gets overlooked. Automate communication and save time.",              tags: ["Applications", "Management", "Filtering"],
-              imageSrc: "https://picsum.photos/id/244/800/600",              imageAlt: "Applicant tracking system dashboard"
-            },
-            {
-              id: "3",              title: "Customizable Workflows",              author: "Flexibility",              description: "Adapt the platform to your unique hiring process. Create custom stages, forms, and email templates to match your brand and needs.",              tags: ["Workflows", "Customization", "Automation"],
-              imageSrc: "https://picsum.photos/id/245/800/600",              imageAlt: "Workflow customization interface"
-            },
-            {
-              id: "4",              title: "Collaborative Team Tools",              author: "Teamwork",              description: "Foster seamless collaboration among hiring managers and recruiters. Share notes, ratings, and communicate effectively to make informed decisions.",              tags: ["Collaboration", "Team", "Communication"],
-              imageSrc: "https://picsum.photos/id/246/800/600",              imageAlt: "Team collaboration tools"
-            }
-          ]}
+          title="Powerful Features"
+          description="Discover how Webild can streamline your operations and boost efficiency."
           animationType="slide-up"
-          textboxLayout="default"
           useInvertedBackground={false}
+          textboxLayout="default"
+          features={[
+            { icon: Sparkles, title: "Automated Workflows", description: "Automate repetitive tasks and focus on what matters." },
+            { icon: BarChart, title: "Advanced Analytics", description: "Gain insights with comprehensive data reporting." },
+            { icon: Settings, title: "Customizable Settings", description: "Tailor the platform to fit your unique needs." }
+          ]}
         />
       </div>
       <FooterBase
         columns={[
           {
-            title: "Product",            items: [
-              { label: "Home", href: "/" },
+            title: "Product", items: [
               { label: "Features", href: "/features" },
               { label: "Pricing", href: "/pricing" }
             ]
           },
           {
-            title: "Company",            items: [
+            title: "Company", items: [
               { label: "About Us", href: "/about" },
               { label: "Careers", href: "#careers" }
             ]
           }
         ]}
-        logoText="Webild"
-        copyrightText="© 2024 Webild. All rights reserved."
+        bottomLeftText="Webild"
+        bottomRightText="© 2024 Webild. All rights reserved."
       />
     </ThemeProvider>
   );