diff --git a/src/components/Link.js b/src/components/Link.js
index 4d3b587..4a2d8fe 100644
--- a/src/components/Link.js
+++ b/src/components/Link.js
@@ -24,6 +24,9 @@ export default function L(props) {
             style={props.style}
         >{props.children}</HashLink>;
     }
+    if (toA.startsWith("http")) {
+        return <a href={toA} style={props.style} className={props.className}>{props.children}</a>
+    }
     // If it's a regular link return the regular router linker
-    return <Link to={toA} style={props.style}>{props.children}</Link>;
+    return <Link to={toA} style={props.style} className={props.className}>{props.children}</Link>;
 }; 
\ No newline at end of file
diff --git a/src/pages/LandingPage.tsx b/src/pages/LandingPage.tsx
index 3ad7d90..0fba0f4 100644
--- a/src/pages/LandingPage.tsx
+++ b/src/pages/LandingPage.tsx
@@ -1,4 +1,4 @@
-import { Link } from "react-router-dom";
+import Link from "../components/Link";
 import Footer from "../components/Footer";
 
 const content: {
@@ -56,7 +56,7 @@ const LandingPage = () => {
         <p className="lead">Explore the wonderful language of Pashto</p>
         {content.map((block) => (
             <Link to={block.link} className="plain-link">
-                <div className="card clickable my-2" style={{ maxWidth: "600px"}}>
+                <div className="card clickable my-2 plain-link" style={{ maxWidth: "600px"}}>
                     <div className="card-body">
                         <h2 className="card-title">{block.title}</h2>
                         <h5 className="card-subtitle mb-2 text-muted">{block.subTitle}</h5>