diff --git a/src/app/services/page.tsx b/src/app/services/page.tsx
index 3a1680a..24d560b 100644
--- a/src/app/services/page.tsx
+++ b/src/app/services/page.tsx
@@ -3,9 +3,8 @@
 import ReactLenis from "lenis/react";
 import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
-import FeatureBento from "@/components/sections/feature/FeatureBento";
-import { Zap, Shield, Rocket, Target, Sparkles } from "lucide-react";
+import FooterBase from "@/components/sections/footer/FooterBase";
+import FeatureCardEight from "@/components/sections/feature/FeatureCardEight";
 
 export default function ServicesPage() {
     const navItems = [
@@ -18,25 +17,28 @@ export default function ServicesPage() {
 
     const services = [
         {
-            title: "Custom Software Development",            description: "Tailored solutions designed to solve your specific business challenges with scalable architecture.",            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/saas/image1.avif"},
+            title: "Custom Software Development",            description: "Tailored solutions designed to solve your specific business challenges with scalable architecture.",            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/saas/image1.avif",            imageAlt: "Custom Software Development"
+        },
         {
-            title: "Cloud Infrastructure",            description: "Expertise in managing and optimizing cloud resources for maximum uptime and security.",            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/saas/image2.avif"},
+            title: "Cloud Infrastructure",            description: "Expertise in managing and optimizing cloud resources for maximum uptime and security.",            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/saas/image2.avif",            imageAlt: "Cloud Infrastructure"
+        },
         {
-            title: "AI/ML Integration",            description: "Incorporate cutting-edge machine learning models into your existing workflows for intelligent insights.",            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/saas/image3.avif"}
+            title: "AI/ML Integration",            description: "Incorporate cutting-edge machine learning models into your existing workflows for intelligent insights.",            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/saas/image3.avif",            imageAlt: "AI/ML Integration"
+        }
     ];
 
     return (
         <ThemeProvider defaultButtonVariant="hover-bubble" defaultTextAnimation="entrance-slide" borderRadius="pill" contentWidth="medium" sizing="medium" background="none" cardStyle="gradient-bordered" primaryButtonStyle="primary-glow" secondaryButtonStyle="layered" headingFontWeight="medium">
             <ReactLenis root>
-                <NavbarLayoutFloatingInline
-                    navItems={navItems}
-                    brandName="SaasApp"
-                    button={{ text: "Get Started", href: "#" }}
-                />
+                <div id="nav" data-section="nav">
+                    <NavbarLayoutFloatingInline
+                        navItems={navItems}
+                        brandName="SaasApp"
+                    />
+                </div>
                 <div className="pt-24">
-                    <FeatureBento
+                    <FeatureCardEight
                         features={services}
-                        animationType="slide-up"
                         tag="Our Expertise"
                         title="Services we offer"
                         description="Comprehensive solutions to help you scale effectively."
@@ -44,11 +46,13 @@ export default function ServicesPage() {
                         useInvertedBackground={false}
                     />
                 </div>
-                <FooterBaseReveal
-                    logoText="SaaSify"
-                    columns={[]}
-                    copyrightText="2024 SaasApp. All rights reserved."
-                />
+                <div id="footer" data-section="footer">
+                    <FooterBase
+                        logoText="SaaSify"
+                        columns={[]}
+                        copyrightText="2024 SaasApp. All rights reserved."
+                    />
+                </div>
             </ReactLenis>
         </ThemeProvider>
     );