diff --git a/src/app/services/page.tsx b/src/app/services/page.tsx
index 0d3a198..34c64a8 100644
--- a/src/app/services/page.tsx
+++ b/src/app/services/page.tsx
@@ -1,112 +1,107 @@
 "use client";
 
-import { ThemeProvider, ThemeProviderProps } from "@/providers/themeProvider/ThemeProvider";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import FeatureCardTwentySix, { FeatureCardTwentySixProps } from '@/components/sections/feature/FeatureCardTwentySix';
-import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
+import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-
-// Import all necessary LucideIcons
-import { Globe, Zap, Palette, BarChart, Layers, TrendingUp, Rocket, Award } from "lucide-react";
+import { BarChart, Briefcase, Globe, Megaphone, Palette, Users } from 'lucide-react';
 
 export default function ServicesPage() {
-  const navItems = [
-    { name: "Home", id: "/" },
-    { name: "Services", id: "/services" },
-    { name: "Packages", id: "/packages" },
-    { name: "Contact", id: "/contact" },
-    { name: "Client Login", id: "/login" },
-  ];
-
-  const themeProps: ThemeProviderProps = {
-    defaultButtonVariant: "elastic-effect",    defaultTextAnimation: "reveal-blur",    borderRadius: "pill",    contentWidth: "mediumLarge",    sizing: "largeSmallSizeMediumTitles",    background: "circleGradient",    cardStyle: "glass-elevated",    primaryButtonStyle: "diagonal-gradient",    secondaryButtonStyle: "radial-glow",    headingFontWeight: "extrabold"
-  };
-
-  const pageSections = [
-    {
-      id: "detailed-services",      Component: FeatureCardTwentySix,
-      props: {
-        textboxLayout: "default",        useInvertedBackground: true,
-        features: [
-          {
-            title: "Social Media Management",            description: "From content creation and scheduling to community engagement and analytics, we manage your social platforms for maximum impact. Includes platform-specific strategies for Facebook, Instagram, LinkedIn, and more.",            imageSrc: "http://img.b2bpic.net/free-photo/social-media-communication-networking-online-concept_53876-133812.jpg",            imageAlt: "Data flow and insights for social media analytics",            buttonIcon: Globe,
-          },
-          {
-            title: "Influencer Marketing Campaigns",            description: "Connect with your target audience through authentic voices. We identify, vet, and manage collaborations with influencers who resonate with your brand values. Includes campaign strategy, execution, and ROI reporting.",            imageSrc: "http://img.b2bpic.net/free-photo/webinar-innovation-web-design-technology-concept_53876-133851.jpg",            imageAlt: "Diverse micro-influencers collaborating",            buttonIcon: Zap,
-          },
-          {
-            title: "Brand Design & Development",            description: "Build a distinctive and memorable brand identity. Our services cover logo design, visual guidelines, typography, and color palettes to ensure a cohesive brand image across all touchpoints.",            imageSrc: "http://img.b2bpic.net/free-photo/stationery-ice-cream-concept_23-2147803277.jpg",            imageAlt: "Brand visual identity showcasing logo and color palette",            buttonIcon: Palette,
-          },
-          {
-            title: "SEO & Content Strategy",            description: "Improve your visibility on search engines and attract organic traffic with keyword-rich content and technical SEO optimizations. Our strategies ensure your brand is found by the right audience.",            imageSrc: "http://img.b2bpic.net/free-photo/close-up-business-woman-analysis-process_23-2148411851.jpg",            imageAlt: "SEO analytics and content strategy",            buttonIcon: BarChart,
-          },
-        ],
-        title: "Comprehensive Digital Marketing Solutions",        description: "eXpand AD provides a full spectrum of services designed to enhance your online presence and achieve your business objectives.",        tag: "Our Expertise",        tagIcon: Layers,
-      } as FeatureCardTwentySixProps,
-    },
-    {
-      id: "performance-insights",      Component: MetricCardThree,
-      props: {
-        animationType: "slide-up",        textboxLayout: "default",        useInvertedBackground: false,
-        metrics: [
-          { id: "m1", icon: BarChart, title: "Engagement Growth", value: "+35%" },
-          { id: "m2", icon: TrendingUp, title: "Lead Generation", value: "+25%" },
-          { id: "m3", icon: Rocket, title: "Brand Reach", value: "+60%" },
-        ],
-        title: "Proven Performance, Guaranteed Results",        description: "Our commitment to excellence translates into measurable success for every client, every campaign.",        tag: "Impact",        tagIcon: Award,
-      },
-    },
-    {
-      id: "footer",      Component: FooterBaseCard,
-      props: {
-        logoText: "eXpand AD",        columns: [
-          {
-            title: "Company",            items: [
-              { label: "About Us", href: "/#about" },
-              { label: "Services", href: "/services" },
-              { label: "Packages", href: "/packages" },
-              { label: "Contact", href: "/contact" },
-            ],
-          },
-          {
-            title: "Resources",            items: [
-              { label: "Client Login", href: "/login" },
-              { label: "FAQ", href: "/contact#faq" },
-              { label: "Blog", href: "/blog" },
-            ],
-          },
-          {
-            title: "Legal",            items: [
-              { label: "Privacy Policy", href: "#" },
-              { label: "Terms of Service", href: "#" },
-            ],
-          },
-        ],
-        copyrightText: "© 2024 eXpand AD. All rights reserved."
-      },
-    },
-  ];
-
   return (
-    <ThemeProvider {...themeProps}>
+    <ThemeProvider
+        defaultButtonVariant="elastic-effect"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="pill"
+        contentWidth="mediumLarge"
+        sizing="largeSmallSizeMediumTitles"
+        background="circleGradient"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="diagonal-gradient"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="extrabold"
+    >
       <ReactLenis root>
         <div id="nav" data-section="nav">
           <NavbarLayoutFloatingOverlay
-            navItems={navItems}
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Services", id: "/services" },
+              { name: "Packages", id: "/packages" },
+              { name: "Contact", id: "/contact" },
+              { name: "Client Login", id: "/login" }
+            ]}
             brandName="eXpand AD"
-            button={{
-              text: "Get a Quote",              href: "/contact"
-            }}
+            button={{ text: "Get a Quote", href: "/contact" }}
           />
         </div>
 
-        {pageSections.map((section) => (
-          <div id={section.id} key={section.id} data-section={section.id}>
-            <section.Component {...section.props} />
-          </div>
-        ))}
+        <div id="services-list" data-section="services-list">
+          <FeatureHoverPattern
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={true}
+            title="Our Comprehensive Services"
+            description="From initial strategy to ongoing optimization, we provide end-to-end digital solutions."
+            tag="What We Offer"
+            features={[
+              {
+                icon: Globe,
+                title: "Social Media Strategy",                description: "Develop a robust social media roadmap tailored to your brand's goals.",                button: { text: "Learn More", href: "/contact" }
+              },
+              {
+                icon: Megaphone,
+                title: "Content Creation & Curation",                description: "Craft engaging posts, visuals, and videos to captivate your audience.",                button: { text: "Learn More", href: "/contact" }
+              },
+              {
+                icon: Users,
+                title: "Community Management",                description: "Actively engage with your followers, respond to inquiries, and build loyalty.",                button: { text: "Learn More", href: "/contact" }
+              },
+              {
+                icon: Briefcase,
+                title: "Influencer Campaign Management",                description: "Connect with key influencers to amplify your brand message and reach new audiences.",                button: { text: "Learn More", href: "/contact" }
+              },
+              {
+                icon: Palette,
+                title: "Brand Identity & Design",                description: "Create a cohesive and memorable brand aesthetic across all digital touchpoints.",                button: { text: "Learn More", href: "/contact" }
+              },
+              {
+                icon: BarChart,
+                title: "Performance Analytics & Reporting",                description: "Gain actionable insights with detailed reports and continuous optimization.",                button: { text: "Learn More", href: "/contact" }
+              }
+            ]}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="eXpand AD"
+            columns={[
+              {
+                title: "Company",                items: [
+                  { label: "About Us", href: "/#about" },
+                  { label: "Services", href: "/services" },
+                  { label: "Packages", href: "/packages" },
+                  { label: "Contact", href: "/contact" }
+                ]
+              },
+              {
+                title: "Resources",                items: [
+                  { label: "Client Login", href: "/login" },
+                  { label: "FAQ", href: "/contact#faq" }
+                ]
+              },
+              {
+                title: "Legal",                items: [
+                  { label: "Privacy Policy", href: "#" },
+                  { label: "Terms of Service", href: "#" }
+                ]
+              }
+            ]}
+            copyrightText="© 2024 eXpand AD. All rights reserved."
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file