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 d44700d657f7..8740383a12ad 100644
--- a/src/components/Learn-Components/Card-Component/learn-card.style.js
+++ b/src/components/Learn-Components/Card-Component/learn-card.style.js
@@ -5,12 +5,14 @@ const CardWrapper = styled.div`
     min-height: 16rem;
     margin: auto;
     border-radius: 1rem;
-    cursor: pointer;
-    box-shadow: rgba(0, 179, 158, 0.4) 0px 0px 15px 8px;
-    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-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{