diff --git a/src/components/ScenarioCard/ScenarioCard.style.js b/src/components/ScenarioCard/ScenarioCard.style.js
index 971a6e7802e2..0314f6d04cd5 100644
--- a/src/components/ScenarioCard/ScenarioCard.style.js
+++ b/src/components/ScenarioCard/ScenarioCard.style.js
@@ -74,11 +74,19 @@ export const ScenarioCardWrapper = styled.div`
 	}
 
     .sub-content {
-        display:flex; 
+        display:flex;
+        color: white;
+        .ak {
+            color: ${props => props.theme.linkColor};
+            &:hover {
+                color: white;
+            }
+        } 
         justify-content:center; 
         margin-top:4rem;
         width:100%;
     }
+    
 
 	.active {
 		display: blwock;
diff --git a/src/components/ScenarioCard/index.js b/src/components/ScenarioCard/index.js
index 65f2fd8484bf..f41fab59f943 100644
--- a/src/components/ScenarioCard/index.js
+++ b/src/components/ScenarioCard/index.js
@@ -59,7 +59,7 @@ const Card = ({ title, info, courseLink, link, cover, content, embed, subId, ID,
 
             <div className={content && subId === ID ? "active" : "text-contents"}>
               <div className="sub-content">
-              Sign into the&nbsp;<a href="https://playground.meshery.io">Meshery Playground</a>&nbsp;(free account) to continue your lab.
+              Sign into the&nbsp;<a className="ak" href="https://playground.meshery.io">Meshery Playground</a>&nbsp;(free account) to continue your lab.
                 {/*
                 <div id="katacoda-scenario"
                   data-katacoda-id={`${courseLink}/${embed}`}