diff --git a/src/components/Blogs/index.js b/src/components/Blogs/index.js
index 0ec81ff32..dd6e54d08 100644
--- a/src/components/Blogs/index.js
+++ b/src/components/Blogs/index.js
@@ -1,7 +1,7 @@
 import React from "react";
 import { usePluginData } from "@docusaurus/useGlobalData";
 import SectionContainer from "../sectionContainer";
-import { useHistory } from "@docusaurus/router";
+import Link from "@docusaurus/Link";
 import Translate from "@docusaurus/Translate";
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import "./styles.scss";
@@ -10,11 +10,8 @@ export default function Blogs() {
 
     const { i18n: { currentLocale } } = useDocusaurusContext();
 
-    const {
-        blogGlobalData: { blogPosts },
-    } = usePluginData("blog-global-dataPlugin");
-
-    const history = useHistory();
+    const pluginData = usePluginData("blog-global-dataPlugin");
+    const blogPosts = pluginData?.blogGlobalData?.blogPosts || [];
 
     return (
         <SectionContainer className="blogPostContainer">
@@ -23,19 +20,17 @@ export default function Blogs() {
                     <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 to={item.metadata.permalink}>
+                                    {item.metadata.title}
+                                </Link>
                             </h3>
                             {item.metadata?.frontMatter?.summary && (
                                 <p>{item.metadata?.frontMatter.summary}</p>
@@ -43,9 +38,9 @@ export default function Blogs() {
                             <div className="info">
                                 <div className="author">
                                     {(item.metadata?.authors || []).map(
-                                        (item) => (
-                                            <a href={item.url} target="_blank">
-                                                {item.name}
+                                        (author) => (
+                                            <a key={author.url || author.name} href={author.url} target="_blank" rel="noopener noreferrer">
+                                                {author.name}
                                             </a>
                                         )
                                     )}
@@ -68,3 +63,4 @@ export default function Blogs() {
         </SectionContainer>
     );
 }
+
diff --git a/src/components/slider/index.js b/src/components/slider/index.js
index e07c6e380..390cac864 100644
--- a/src/components/slider/index.js
+++ b/src/components/slider/index.js
@@ -2,7 +2,7 @@ import React from "react";
 import clsx from "clsx";
 import Slider from "react-slick";
 import Translate from "@docusaurus/Translate";
-import { useHistory } from "@docusaurus/router";
+import Link from "@docusaurus/Link";
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
 import "./index.scss";
@@ -47,8 +47,6 @@ const SlideItem = (props) => {
     opacity = 0.5,
   } = props;
 
-  const history = useHistory();
-
   return (
     <div
       className={clsx("slick-item", align)}
@@ -67,12 +65,16 @@ const SlideItem = (props) => {
             width={160}
             height={30}
             title="GitHub Stars"
+            loading="lazy"
+            sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox"
           />
         </span>
       )}
       {button && (
         <div className={clsx("button")}>
-          <a onClick={() => history.push(button.url)}>{button.text}</a>
+          <Link to={button.url} className="slider-btn">
+            {button.text}
+          </Link>
         </div>
       )}
     </div>
@@ -91,10 +93,11 @@ export const HomeSlider = () => {
   return (
     <div className={"slider-container"}>
       <Slider {...settings}>
-        {sliderItems.map((i, index) => (
-          <SlideItem key={index} {...i} />
+        {sliderItems.map((item) => (
+          <SlideItem key={item.backgroundImage} {...item} />
         ))}
       </Slider>
     </div>
   );
 };
+