diff --git a/src/components/sections/services-section.tsx b/src/components/sections/services-section.tsx
index b29d6f3..b7fb1f8 100644
--- a/src/components/sections/services-section.tsx
+++ b/src/components/sections/services-section.tsx
@@ -2,11 +2,12 @@
 
 import { motion } from 'framer-motion';
 import { useInView } from 'framer-motion';
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 import { Code, Cloud, BarChart3, Shield, ArrowRight } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { SERVICES } from '@/lib/constants';
+import { ServiceDetailModal } from '@/components/services/service-detail-modal';
 
 const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
   Code,
@@ -18,6 +19,13 @@ const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
 export function ServicesSection() {
   const ref = useRef(null);
   const isInView = useInView(ref, { once: true, margin: '-100px' });
+  const [selectedServiceId, setSelectedServiceId] = useState<string | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleServiceClick = (serviceId: string) => {
+    setSelectedServiceId(serviceId);
+    setIsModalOpen(true);
+  };
 
   return (
     <section id="services" aria-labelledby="services-heading" className="py-24 bg-white relative overflow-hidden" ref={ref}>
@@ -49,6 +57,7 @@ export function ServicesSection() {
                 whileInView={{ opacity: 1, y: 0 }}
                 viewport={{ once: true }}
                 transition={{ duration: 0.5, delay: index * 0.1 }}
+                onClick={() => handleServiceClick(service.id)}
               >
                 <Card className="p-6 h-full group cursor-pointer border-[#E5E5E5] hover:border-[#1C1C1C]">
                   <CardContent className="p-0">
@@ -76,6 +85,14 @@ export function ServicesSection() {
           </Button>
         </motion.div>
       </div>
+
+      {selectedServiceId && (
+        <ServiceDetailModal
+          serviceId={selectedServiceId}
+          open={isModalOpen}
+          onOpenChange={setIsModalOpen}
+        />
+      )}
     </section>
   );
 }