diff --git a/src/components/Learn-Components/Card-Component/index.js b/src/components/Learn-Components/Card-Component/index.js
index 9db7eb5322b0..d9ebfff4c657 100644
--- a/src/components/Learn-Components/Card-Component/index.js
+++ b/src/components/Learn-Components/Card-Component/index.js
@@ -40,7 +40,7 @@ const CardComponent = ({ tutorial, path, courseCount }) => {
         <Link to={path} className="card-link">
           <div
             style={{ borderTop: `5px solid ${tutorial.frontmatter.themeColor}` }}
-            className="card-parent"
+            className="card-parent card-active"
           >
 
             <div>
diff --git a/src/components/Learn-Components/Card-Component/learn-card.style.js b/src/components/Learn-Components/Card-Component/learn-card.style.js
index 8aa8599199c8..8740383a12ad 100644
--- a/src/components/Learn-Components/Card-Component/learn-card.style.js
+++ b/src/components/Learn-Components/Card-Component/learn-card.style.js
@@ -6,6 +6,15 @@ const CardWrapper = styled.div`
     margin: auto;
     border-radius: 1rem;
 
+    .card-active{
+        cursor: pointer;
+        transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s;
+
+        &:hover{
+            box-shadow: rgba(0, 179, 158, 0.9) 0px 0px 19px 6px;
+        }
+    }
+
     .card-link{
         color: black;
     }