diff --git a/src/components/AdventuresVol/index.js b/src/components/AdventuresVol/index.js
index 468ccd6c6b682f..3c8cbfeb6cfa66 100644
--- a/src/components/AdventuresVol/index.js
+++ b/src/components/AdventuresVol/index.js
@@ -1,27 +1,52 @@
 import React from "react";
+import { Link } from "gatsby";
 import { HiOutlineChevronRight } from "@react-icons/all-files/hi/HiOutlineChevronRight";
 import { AdventuresVolWrapper } from "./adventures-vol.style";
 
 const AdventuresVol = ({ title, description, to, image }) => {
+  const isExternalOrStatic =
+    to &&
+    (to.startsWith("http://") ||
+      to.startsWith("https://") ||
+      to.split("?")[0].split("#")[0].toLowerCase().endsWith(".pdf") ||
+      to.startsWith("mailto:"));
+
+  const isMailTo = to && to.startsWith("mailto:");
+
+  const cardContent = (
+    <div className="handbook__card">
+      <h1 className="handbook__card--head">{title}</h1>
+      <div className="handbook__card--line"></div>
+      <img src={image} />
+      <p className="handbook__card--para">{description}</p>
+      {to && (
+        <div className="handbook__card--lm__container">
+          <span className="handbook__card--lm">
+            Read More <HiOutlineChevronRight />
+          </span>
+        </div>
+      )}
+    </div>
+  );
+
   return (
     <AdventuresVolWrapper>
-      <a href={to} className="handbook__card--main">
-        <div className="handbook__card">
-          <h1 className="handbook__card--head">{title}</h1>
-          <div className="handbook__card--line"></div>
-          <img src={image} />
-          <p className="handbook__card--para">
-            {description}
-          </p>
-          {to && (
-            <div className="handbook__card--lm__container">
-              <a href={to} className="handbook__card--lm">
-                Read More <HiOutlineChevronRight />
-              </a>
-            </div>
-          )}
-        </div>
-      </a>
+      {!to ? (
+        <div className="handbook__card--main">{cardContent}</div>
+      ) : isExternalOrStatic ? (
+        <a
+          href={to}
+          className="handbook__card--main"
+          target={isMailTo ? undefined : "_blank"}
+          rel={isMailTo ? undefined : "noreferrer"}
+        >
+          {cardContent}
+        </a>
+      ) : (
+        <Link to={to} className="handbook__card--main">
+          {cardContent}
+        </Link>
+      )}
     </AdventuresVolWrapper>
   );
 };
diff --git a/src/components/HandbookCard/index.js b/src/components/HandbookCard/index.js
index cc6cb8c3c64bc2..ce2754e1da3157 100644
--- a/src/components/HandbookCard/index.js
+++ b/src/components/HandbookCard/index.js
@@ -6,18 +6,16 @@ import { HandbookCardWrapper } from "./HandbookCard.style";
 const HandbookCard = ({ title, description, to }) => {
   return (
     <HandbookCardWrapper>
-      <Link to={to} class="handbook__card--main">
+      <Link to={to} className="handbook__card--main">
         <div className="handbook__card">
           <h1 className="handbook__card--head">{title}</h1>
           <div className="handbook__card--line"></div>
-          <p className="handbook__card--para">
-            {description}
-          </p>
+          <p className="handbook__card--para">{description}</p>
           {to && (
             <div className="handbook__card--lm__container">
-              <a href={to} className="handbook__card--lm">
+              <span className="handbook__card--lm">
                 Read More <HiOutlineChevronRight />
-              </a>
+              </span>
             </div>
           )}
         </div>