diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 4ead83d..2be3683 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -9,28 +9,28 @@ import { Award, Shield, Zap } from "lucide-react";
 
 export default function AboutPage() {
   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>
         <NavbarLayoutFloatingInline
           navItems={[
             { name: "Home", id: "/" },
             { name: "About", id: "/about" },
             { name: "Features", id: "/features" },
-            { name: "Services", id: "/services" },
-            { name: "Testimonials", id: "#testimonials" },
-            { name: "Contact", id: "#contact" }
+            { name: "Services", id: "/services" }
           ]}
           brandName="ELITE PRINTING"
+          button={{ text: "Contact" }}
         />
         <div className="pt-32">
           <AboutMetric
             title="Our Mission"
-            description="Dedicated to providing the best printing solutions."
             metrics={[
               { icon: Award, label: "Projects Completed", value: "5000+" },
               { icon: Zap, label: "Turnaround", value: "Rapid" },
               { icon: Shield, label: "Quality", value: "Guaranteed" }
             ]}
+            metricsAnimation="slide-up"
+            useInvertedBackground={false}
           />
         </div>
         <FooterLogoEmphasis
diff --git a/src/app/features/page.tsx b/src/app/features/page.tsx
index fef65ab..27a8fbe 100644
--- a/src/app/features/page.tsx
+++ b/src/app/features/page.tsx
@@ -5,22 +5,21 @@ import ReactLenis from "lenis/react";
 import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import { ArrowRight } from "lucide-react";
+import { ArrowRight, Zap, Shield, Target } from "lucide-react";
 
 export default function FeaturesPage() {
   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>
         <NavbarLayoutFloatingInline
           navItems={[
             { name: "Home", id: "/" },
             { name: "About", id: "/about" },
             { name: "Features", id: "/features" },
-            { name: "Services", id: "/services" },
-            { name: "Testimonials", id: "#testimonials" },
-            { name: "Contact", id: "#contact" }
+            { name: "Services", id: "/services" }
           ]}
           brandName="ELITE PRINTING"
+          button={{ text: "Contact" }}
         />
         <div className="pt-32">
           <FeatureCardTwentySix
@@ -30,9 +29,9 @@ export default function FeaturesPage() {
             description="High performance printing technology and custom designs."
             features={[
               { title: "High Speed", description: "Fast delivery every time.", buttonIcon: ArrowRight },
-              { title: "Premium Quality", description: "Highest standards of ink and paper.", buttonIcon: ArrowRight },
-              { title: "Custom Design", description: "Tailored to your exact specs.", buttonIcon: ArrowRight },
-              { title: "Scaleable", description: "From 1 to 1,000,000 units.", buttonIcon: ArrowRight }
+              { title: "Premium Quality", description: "Highest standards of ink and paper.", buttonIcon: Shield },
+              { title: "Custom Design", description: "Tailored to your exact specs.", buttonIcon: Target },
+              { title: "Scaleable", description: "From 1 to 1,000,000 units.", buttonIcon: Zap }
             ]}
           />
         </div>
diff --git a/src/app/services/page.tsx b/src/app/services/page.tsx
index 136250e..939d5f5 100644
--- a/src/app/services/page.tsx
+++ b/src/app/services/page.tsx
@@ -2,35 +2,36 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ProductCardOne from '@/components/sections/product/ProductCardOne';
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 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>
         <NavbarLayoutFloatingInline
           navItems={[
             { name: "Home", id: "/" },
             { name: "About", id: "/about" },
             { name: "Features", id: "/features" },
-            { name: "Services", id: "/services" },
-            { name: "Testimonials", id: "#testimonials" },
-            { name: "Contact", id: "#contact" }
+            { name: "Services", id: "/services" }
           ]}
           brandName="ELITE PRINTING"
+          button={{ text: "Contact" }}
         />
         <div className="pt-32">
-          <ProductCardOne
+          <ProductCardTwo
             animationType="slide-up"
             textboxLayout="split-description"
             gridVariant="four-items-2x2-equal-grid"
             title="Our Services"
             description="Comprehensive printing and design services for all needs."
+            useInvertedBackground={false}
             products={[
-              { id: "1", name: "Design Service", price: "From £50", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=pacdli" },
-              { id: "2", name: "Printing Service", price: "From £20", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=pacdli" }
+              { id: "1", name: "Design Service", price: "From £50", brand: "Elite", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=pacdli" },
+              { id: "2", name: "Printing Service", price: "From £20", brand: "Elite", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=pacdli" },
+              { id: "3", name: "Binding Service", price: "From £10", brand: "Elite", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=pacdli" }
             ]}
           />
         </div>