diff --git a/components/services.tsx b/components/services.tsx
index dac7a7a..03a2a8e 100644
--- a/components/services.tsx
+++ b/components/services.tsx
@@ -1,50 +1,65 @@
+"use client";
 import { Container } from "@/components/container";
 import { Heading } from "@/components/heading";
 import { Subheading } from "@/components/subheading";
 import { Sparkles, Droplets, Shield, Clock } from "lucide-react";
+import { CardBody, CardContainer, CardItem } from "@/components/ui/3d-card";
 
 const services = [
   {
     title: "Full Interior Deep Clean",
     description: "Vacuuming, floor mats, dashboard wipe-down, and window cleaning. We get into all the cracks and crevices.",
-    icon: Droplets
+    icon: Droplets,
+    price: "$80"
   },
   {
     title: "Exterior Hand Wash",
     description: "Safe hand wash and dry. No scratchy automatic brushes—just soft microfiber and premium soap.",
-    icon: Sparkles
+    icon: Sparkles,
+    price: "$40"
   },
   {
     title: "Wheel & Tire Shine",
     description: "We scrub the brake dust off your rims and apply a long-lasting tire shine for that showroom look.",
-    icon: Shield
+    icon: Shield,
+    price: "$25"
   },
   {
-    title: "Quick Turnaround",
-    description: "We work efficiently right in your driveway or ours. Most jobs done in 2-3 hours.",
-    icon: Clock
+    title: "Full Detail Package",
+    description: "The ultimate treatment. Interior deep clean plus exterior wash and tire shine for a complete refresh.",
+    icon: Clock,
+    price: "$110"
   }
 ];
 
 export function Services() {
   return (
-    <section id="services" className="py-24 bg-neutral-50 dark:bg-neutral-900/50">
+    <section id="services" className="py-24 bg-neutral-50 dark:bg-neutral-900/50 overflow-hidden">
       <Container>
         <div className="text-center max-w-3xl mx-auto mb-16">
-          <Heading>What We Do</Heading>
+          <Heading>What I Do</Heading>
           <Subheading className="mt-4">
-            Real human service. We use professional-grade tools and a lot of patience to get your car spotless.
+            Professional results. I use top-tier pressure washers, steam cleaners, and premium chemicals to get your car spotless.
           </Subheading>
         </div>
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
           {services.map((service, i) => (
-            <div key={i} className="p-8 rounded-2xl bg-white dark:bg-neutral-950 border border-neutral-200 dark:border-neutral-800 shadow-sm">
-              <div className="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center mb-6">
-                <service.icon className="w-6 h-6 text-blue-600" />
-              </div>
-              <h3 className="text-xl font-bold mb-3">{service.title}</h3>
-              <p className="text-neutral-600 dark:text-neutral-400 text-sm leading-relaxed">{service.description}</p>
-            </div>
+            <CardContainer key={i} className="py-0">
+              <CardBody className="bg-white dark:bg-neutral-950 border border-neutral-200 dark:border-neutral-800 shadow-sm rounded-2xl p-8 h-full">
+                <CardItem translateZ="50" className="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center mb-6">
+                  <service.icon className="w-6 h-6 text-blue-600" />
+                </CardItem>
+                <CardItem translateZ="60" className="text-xl font-bold mb-3">
+                  {service.title}
+                </CardItem>
+                <CardItem translateZ="40" className="text-neutral-600 dark:text-neutral-400 text-sm leading-relaxed mb-6">
+                  {service.description}
+                </CardItem>
+                <CardItem translateZ="80" className="text-2xl font-black text-blue-600">
+                  {service.price}
+                </CardItem>
+              </CardBody>
+            </CardContainer>
           ))}
         </div>
       </Container>