diff --git a/src/components/Services.jsx b/src/components/Services.jsx
index 0f3b739..76eb3c1 100644
--- a/src/components/Services.jsx
+++ b/src/components/Services.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useNavigate } from 'react-router-dom';
 import { Icons } from './landing/constants';
 
 const services = [
@@ -20,6 +21,8 @@ const services = [
 ];
 
 const Services = () => {
+    const navigate = useNavigate();
+
     // Simple Tilt Logic
     const handleMouseMove = (e) => {
         const card = e.currentTarget;
@@ -77,7 +80,10 @@ const Services = () => {
                                     {service.desc}
                                 </p>
 
-                                <div className="pt-6 border-t border-gray-100 dark:border-white/10 flex items-center justify-between mt-auto group-hover:border-cyan/20 transition-colors">
+                                <div
+                                    onClick={(e) => { e.stopPropagation(); navigate('/login'); }}
+                                    className="pt-6 border-t border-gray-100 dark:border-white/10 flex items-center justify-between mt-auto group-hover:border-cyan/20 transition-colors cursor-pointer"
+                                >
                                     <span className="text-xs font-bold text-gray-400 uppercase tracking-wider group-hover:text-cyan transition-colors">Explore Solution</span>
                                     <div className="w-8 h-8 rounded-full border border-gray-200 dark:border-white/20 text-gray-400 flex items-center justify-center transform group-hover:rotate-45 group-hover:border-cyan group-hover:text-cyan transition-all duration-300">
                                         ↗