diff --git a/src/components/Site/Site.jsx b/src/components/Site/Site.jsx
index 6a224b3037b0..8ce2e66fb277 100644
--- a/src/components/Site/Site.jsx
+++ b/src/components/Site/Site.jsx
@@ -29,6 +29,7 @@ import PageNotFound from '../PageNotFound/PageNotFound';
 import Vote from '../Vote/Vote';
 import Organization from '../Organization/Organization';
 import Badge from '../Badge/Badge.js';
+import {default as LinkComponent} from '../mdxComponents/Link';
 
 // Load Styling
 import '../../styles/index';
@@ -152,9 +153,8 @@ function Site(props) {
   return (
     <MDXProvider
       components={{
-        Badge: function Comp(props) {
-          return <Badge {...props} />;
-        },
+        Badge: Badge,
+        a: LinkComponent
       }}
     >
       <div className="site">
diff --git a/src/components/mdxComponents/Link.js b/src/components/mdxComponents/Link.js
new file mode 100644
index 000000000000..b8130c63d800
--- /dev/null
+++ b/src/components/mdxComponents/Link.js
@@ -0,0 +1,13 @@
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+LinkComponent.propTypes = {
+  href: PropTypes.string.isRequired,
+};
+export default function LinkComponent(props) {
+  // if it's internal link
+  // use Link instead
+  if (props.href.startsWith('/')) {
+    return <Link {...props} to={props.href} />;
+  }
+  return <a {...props}></a>;
+}