diff --git a/src/components/blogPost/index.js b/src/components/blogPost/index.js
index 7a5586a3d1..dc4f61a222 100644
--- a/src/components/blogPost/index.js
+++ b/src/components/blogPost/index.js
@@ -1,7 +1,7 @@
 import React from "react";
 import { usePluginData } from "@docusaurus/useGlobalData";
+import Link from "@docusaurus/Link";
 import SectionContainer from "../sectionContainer";
-import { useHistory } from "@docusaurus/router";
 import Translate from "@docusaurus/Translate";
 import "./index.scss";
 
@@ -10,8 +10,6 @@ export default function BlogPost() {
     blogGlobalData: { blogPosts },
   } = usePluginData("blog-global-dataPlugin");
 
-  const history = useHistory();
-
   return (
     <SectionContainer className="blogPostContainer">
       <div className="row">
@@ -19,15 +17,17 @@ export default function BlogPost() {
           <h1>
             <Translate>Recent News</Translate>
           </h1>
-          <a onClick={() => history.push("blog")}>
+          <Link to="/blog">
             <Translate>View All</Translate>
-          </a>
+          </Link>
         </div>
         <div className="right">
-          {blogPosts.slice(0, 3).map((item, index) => (
-            <div key={index} className="viewBlogContainer">
-              <h3 onClick={() => history.push(item.metadata.permalink)}>
-                {item.metadata.title}
+          {blogPosts.slice(0, 3).map((item) => (
+            <div key={item.metadata.permalink} className="viewBlogContainer">
+              <h3>
+                <Link className="post-link" to={item.metadata.permalink}>
+                  {item.metadata.title}
+                </Link>
               </h3>
               {item.metadata?.frontMatter?.summary && (
                 <p>{item.metadata?.frontMatter.summary}</p>
diff --git a/src/components/blogPost/index.scss b/src/components/blogPost/index.scss
index ae9ebcd48f..22ef4971af 100644
--- a/src/components/blogPost/index.scss
+++ b/src/components/blogPost/index.scss
@@ -36,6 +36,11 @@
 
       a {
         cursor: pointer;
+
+        &:focus-visible {
+          outline: 2px solid #3578e5;
+          outline-offset: 2px;
+        }
       }
     }
 
@@ -50,10 +55,22 @@
       .viewBlogContainer {
         h3 {
           text-align: left;
-          cursor: pointer;
 
-          &:hover {
-            color: #3578e5;
+          .post-link {
+            display: inline-block;
+            color: inherit;
+            text-decoration: none;
+
+            &:hover {
+              color: #3578e5;
+              text-decoration: none;
+            }
+
+            &:focus-visible {
+              outline: 2px solid #3578e5;
+              outline-offset: 2px;
+              border-radius: 2px;
+            }
           }
         }