diff --git a/src/app/services/page.tsx b/src/app/services/page.tsx
index b883bbb..d6fa533 100644
--- a/src/app/services/page.tsx
+++ b/src/app/services/page.tsx
@@ -3,30 +3,37 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
+import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+import { Heart, Activity, Stethoscope } from 'lucide-react';
 
 export default function ServicesPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
         <NavbarStyleFullscreen 
             navItems={[{ name: "Home", id: "/" }, { name: "Services", id: "/services" }, { name: "Contact", id: "/contact" }]} 
             brandName="Himchan Hospital" 
         />
-        <FeatureCardNineteen
+        <div id="services" data-section="services">
+          <FeatureCardTwentyFive
             title="Our Medical Services"
             description="Comprehensive care for your wellness."
+            animationType="slide-up"
             textboxLayout="default"
+            useInvertedBackground={false}
             features={[
-                { id: 1, tag: "Primary", title: "General Medicine", subtitle: "Comprehensive checkups", description: "Routine exams and health screenings." },
-                { id: 2, tag: "Specialized", title: "Cardiology", subtitle: "Heart health experts", description: "Advanced cardiovascular diagnostic and treatment services." },
-                { id: 3, tag: "Support", title: "Physical Therapy", subtitle: "Rehabilitation", description: "Personalized care for injury recovery and pain management." }
+                { icon: Stethoscope, title: "General Medicine", description: "Routine exams and health screenings.", mediaItems: [{ imageSrc: "https://example.com/med.jpg" }, { imageSrc: "https://example.com/med2.jpg" }] },
+                { icon: Heart, title: "Cardiology", description: "Advanced cardiovascular diagnostic and treatment services.", mediaItems: [{ imageSrc: "https://example.com/cardio.jpg" }, { imageSrc: "https://example.com/cardio2.jpg" }] },
+                { icon: Activity, title: "Physical Therapy", description: "Personalized care for injury recovery and pain management.", mediaItems: [{ imageSrc: "https://example.com/physio.jpg" }, { imageSrc: "https://example.com/physio2.jpg" }] }
             ]}
-        />
-        <FooterBaseReveal
+          />
+        </div>
+        <div id="hospital-footer" data-section="hospital-footer">
+          <FooterBaseReveal
             columns={[{ title: "Quick Links", items: [{ label: "Home", href: "/" }, { label: "Contact", href: "/contact" }] }]} 
-        />
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );