diff --git a/src/components/TutorialCard/index.js b/src/components/TutorialCard/index.js
index 1b132d011..ce0fd48af 100644
--- a/src/components/TutorialCard/index.js
+++ b/src/components/TutorialCard/index.js
@@ -1,18 +1,19 @@
 import React from 'react';
 import clsx from 'clsx';
 import styles from './styles.module.css';
+import Link from '@docusaurus/Link';
 
 export default function TutorialCard({ title, href, description, link, emoji }) {
   return (
     <div className={clsx(styles.tutorialcard)}>
-      <div>
+      <Link href={href} target="_self" className={clsx(styles.tutorialcardlinkcontainer)}>
         <p className={clsx(styles.emoji)}>{emoji}</p>
         <h3 className={clsx(styles.title)}>{title}</h3>
         <p className={clsx(styles.description)}>{description}</p>
         <a href={href} className={clsx(styles.link)}>
           <p style={{ margin: 0 }}>{link}</p>
         </a>
-      </div>
+      </Link>
     </div>
   );
 }
diff --git a/src/components/TutorialCard/styles.module.css b/src/components/TutorialCard/styles.module.css
index 426605ded..a4d3a46c1 100644
--- a/src/components/TutorialCard/styles.module.css
+++ b/src/components/TutorialCard/styles.module.css
@@ -13,11 +13,14 @@
 .tutorialcard:hover {
   border: 1px solid #787D82;
 }
+.tutorialcardlinkcontainer:hover {
+  text-decoration: none;
+}
 
 @media (max-width: 767px) {
   .tutorialcard {
-    width: calc(100% - 20px); 
-    margin: 10px 0; 
+    width: calc(100% - 20px);
+    margin: 10px 0;
   }
 }