diff --git a/src/components/home/ServiceGrid.tsx b/src/components/home/ServiceGrid.tsx
index 79029ec..db71814 100644
--- a/src/components/home/ServiceGrid.tsx
+++ b/src/components/home/ServiceGrid.tsx
@@ -59,12 +59,26 @@ export default function ServiceGrid() {
         </h2>
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 lg:gap-8 w-full">
           {services.map((service) => (
-            <div
+            <Link
               key={service.title}
-              className="w-full h-full opacity-100" // Added opacity-100 to ensure visibility
+              href={service.path}
+              className="group block w-full h-full"
             >
-              {/* Rest of your card content */}
-            </div>
+              <div className="bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 h-full flex flex-col group-hover:scale-105">
+                <div className={`bg-gradient-to-r ${service.color} text-white p-4 rounded-full w-16 h-16 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300`}>
+                  {service.icon}
+                </div>
+                <h3 className="text-xl font-bold mb-3 text-gray-800 group-hover:text-blue-600 transition-colors duration-300">
+                  {service.title}
+                </h3>
+                <p className="text-gray-600 flex-grow leading-relaxed">
+                  {service.description}
+                </p>
+                <div className="mt-4 text-blue-600 font-medium group-hover:text-blue-800 transition-colors duration-300">
+                  Learn More →
+                </div>
+              </div>
+            </Link>
           ))}
         </div>
       </div>