diff --git a/docs/src/components/LandingPage/GithubInfo.jsx b/docs/src/components/LandingPage/GithubInfo.jsx
index d3299119..98bcea4b 100644
--- a/docs/src/components/LandingPage/GithubInfo.jsx
+++ b/docs/src/components/LandingPage/GithubInfo.jsx
@@ -1,51 +1,70 @@
-import React from "react";
-import useGithubInfo from "./useGithubInfo";
+import React from 'react';
+import useGithubInfo from './useGithubInfo';
 
 const GithubInfo = ({ owner, repo }) => {
   const { favorites, language, forks, license } = useGithubInfo(owner, repo);
 
   return (
-    <div className="github-info-container w-full md:justify-normal mb-4 justify-center gap-2 flex flex-wrap  items-center">
-      <div className="flex items-center">
-        <div className="dark:bg-gray-600 bg-gray-100 px-6 py-1">
-          <span className="text-sm">star</span>
-        </div>
-        <div className="dark:bg-blue-600 bg-gray-200 font-medium px-6 py-1">
-          <span id="repo-stars-count">{favorites || 4621}</span>
-        </div>
+    <p className="">
+      <div className="widget">
+        <a
+          className="btn hover:no-underline hover:text-[#24292f] outline-none"
+          href="https://github.com/opengoofy/hippo4j"
+          rel="noopener"
+          target="_blank"
+          aria-label="Star buttons/github-buttons on GitHub"
+        >
+          <svg
+            viewBox="0 0 16 16"
+            width="14"
+            height="14"
+            className="octicon octicon-mark-github"
+            aria-hidden="true"
+          >
+            <path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path>
+          </svg>
+          &nbsp;<span>Star</span>
+        </a>
+        <a
+          className="social-count hover:no-underline outline-none w-10"
+          href="https://github.com/opengoofy/hippo4j"
+          rel="noopener"
+          target="_blank"
+          aria-label="1029 stargazers on GitHub"
+        >
+          {favorites || 0}
+        </a>
       </div>
-
-      {/* <div className="flex items-center">
-        <div className="px-2 bg-gray-100 dark:bg-gray-600">
-          <span className="text-sm">language</span>
-        </div>
-        <div className="px-2 dark:bg-blue-600 bg-gray-200 font-medium">
-          <span id="repo-languages-count font-medium">
-            {language || "java"}
-          </span>
-        </div>
-      </div> */}
-
-      <div className="flex items-center">
-        <div className="dark:bg-gray-600 bg-gray-100 px-6 py-1">
-          <span className="text-sm">forks</span>
-        </div>
-        <div className="dark:bg-blue-600 bg-gray-200 px-6 py-1 font-medium">
-          <span id="repo-forks-count">{forks || 1020}</span>
-        </div>
+      <div class="widget ml-4">
+        <a
+          class="btn hover:no-underline hover:text-[#24292f] outline-none"
+          href="https://github.com/opengoofy/hippo4j"
+          rel="noopener"
+          target="_blank"
+          aria-label="Fork opengoofy/hippo4j on GitHub"
+        >
+          <svg
+            viewBox="0 0 16 16"
+            width="14"
+            height="14"
+            class="octicon octicon-repo-forked"
+            aria-hidden="true"
+          >
+            <path d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z"></path>
+          </svg>
+          &nbsp;<span>Fork</span>
+        </a>
+        <a
+          className="social-count hover:no-underline outline-none w-10"
+          href="https://github.com/opengoofy/hippo4j"
+          rel="noopener"
+          target="_blank"
+          aria-label="1029 stargazers on GitHub"
+        >
+          {forks || 0}
+        </a>
       </div>
-
-      {/* <div className="flex items-center">
-        <div className="px-2 bg-gray-100 dark:bg-gray-600">
-          <span className="text-sm">license</span>
-        </div>
-        <div className="px-2 dark:bg-blue-600 bg-gray-200">
-          <span className="text-sm font-medium" id="repo-license-name">
-            Apache 2
-          </span>
-        </div>
-      </div> */}
-    </div>
+    </p>
   );
 };
 
diff --git a/docs/src/components/LandingPage/Hero.jsx b/docs/src/components/LandingPage/Hero.jsx
index 6502162c..5d6decd8 100644
--- a/docs/src/components/LandingPage/Hero.jsx
+++ b/docs/src/components/LandingPage/Hero.jsx
@@ -1,13 +1,11 @@
 import React from 'react';
+import { useEffect } from 'react';
 import { Icon } from '@iconify/react';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import GithubInfo from './GithubInfo';
 import Translate, { translate } from '@docusaurus/Translate';
 import Link from '@docusaurus/Link';
-
 const Hero = () => {
-  const bgUrl = useBaseUrl('/img/bg.jpg');
-
   return (
     <header className="hero hero--primary heroBanner_UJJx dark:bg-[#1B1B1D]">
       <div className="my-container dark:text-white">
@@ -25,47 +23,31 @@ const Hero = () => {
                 Systems Online.
               </Translate>
             </p>
-            <div class="social_VnSH">
-              <a
-                class="github-button"
-                href="https://github.com/opengoofy/hippo4j"
-                data-show-count="true"
-                aria-label="Star opengoofy/hippo4j on GitHub"
-              >
-                Star
-              </a>
-              <a
-                class="github-button ml-4"
-                href="https://github.com/opengoofy/hippo4j/fork"
-                data-icon="octicon-repo-forked"
-                data-show-count="true"
-                aria-label="Fork opengoofy/hippo4j on GitHub"
-              >
-                Fork
-              </a>
+            <div className="social_VnSH">
+              <GithubInfo owner="opengoofy" repo="hippo4j" />
             </div>
             <div className="buttons_pzbO">
               {/* button group */}
-              <div className="flex mt-6  w-full justify-center">
+              <div className="flex  w-full justify-center">
                 <Link
                   to="/docs/user_docs/intro"
                   className="relative mr-4 w-32 text-center lg:w-48 hover:no-underline inline-flex items-center justify-start py-4  overflow-hidden font-semibold text-white transition-all duration-150 ease-in-out rounded  bg-blue-500 group"
                 >
-                  <span class="absolute bottom-0 left-0 w-full h-1 transition-all duration-150 ease-in-out bg-blue-600 group-hover:h-full"></span>
+                  <span className="absolute bottom-0 left-0 w-full h-1 transition-all duration-150 ease-in-out bg-blue-600 group-hover:h-full"></span>
 
-                  <span class="relative w-full text-center transition-colors duration-200 ease-in-out group-hover:text-white">
+                  <span className="relative w-full text-center transition-colors duration-200 ease-in-out group-hover:text-white">
                     Start Learning
                   </span>
                 </Link>
 
                 <a
                   href="https://github.com/opengoofy/hippo4j"
-                  class="relative w-32 hover:no-underline lg:w-48 inline-block text-lg group"
+                  className="relative w-32 hover:no-underline lg:w-48 inline-block text-lg group"
                 >
-                  <span class="relative z-10 block px-5 py-4 overflow-hidden font-medium leading-tight text-gray-800 transition-colors duration-300 ease-out border-2 border-gray-900 rounded-lg group-hover:text-white">
-                    <span class="absolute inset-0 w-full h-full px-5 py-4 rounded-lg bg-gray-100"></span>
-                    <span class="absolute left-0 w-52 h-48 -ml-2 transition-all duration-300 origin-top-right -rotate-90 -translate-x-full translate-y-12 bg-gray-900 group-hover:-rotate-180 ease"></span>
-                    <span class="relative flex items-center justify-center">
+                  <span className="relative z-10 block px-5 py-4 overflow-hidden font-medium leading-tight text-gray-800 transition-colors duration-300 ease-out border-2 border-gray-900 rounded-lg group-hover:text-white">
+                    <span className="absolute inset-0 w-full h-full px-5 py-4 rounded-lg bg-gray-100"></span>
+                    <span className="absolute left-0 w-52 h-48 -ml-2 transition-all duration-300 origin-top-right -rotate-90 -translate-x-full translate-y-12 bg-gray-900 group-hover:-rotate-180 ease"></span>
+                    <span className="relative flex items-center justify-center">
                       {' '}
                       <Icon
                         className="w-6 h-6 mr-2 rounded-full flex-shrink-0 bg-white text-white"
@@ -75,7 +57,7 @@ const Hero = () => {
                     </span>
                   </span>
                   <span
-                    class="absolute bottom-0 right-0 w-full h-12 -mb-1 -mr-1 transition-all duration-200 ease-linear bg-gray-900 rounded-lg group-hover:mb-0 group-hover:mr-0"
+                    className="absolute bottom-0 right-0 w-full h-12 -mb-1 -mr-1 transition-all duration-200 ease-linear bg-gray-900 rounded-lg group-hover:mb-0 group-hover:mr-0"
                     data-rounded="rounded-lg"
                   ></span>
                 </a>
diff --git a/docs/src/components/LandingPage/index.js b/docs/src/components/LandingPage/index.js
index c5438a58..11c9f6af 100644
--- a/docs/src/components/LandingPage/index.js
+++ b/docs/src/components/LandingPage/index.js
@@ -1,7 +1,6 @@
-import React from "react";
-import { useEffect } from "react";
-import Hero from "./Hero";
-import Introduction from "./Introduction";
+import React from 'react';
+import Hero from './Hero';
+import Introduction from './Introduction';
 function LandingLayout(props) {
   return (
     <div className="leading-normal tracking-normal text-white">
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index 8e74d91f..b41481ec 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -450,9 +450,6 @@ h3 {
 .social_VnSH {
   margin-top: 30px;
 }
-.social_VnSH span:nth-child(2) {
-  margin-left: 8px;
-}
 
 .buttons_pzbO {
   align-items: center;
@@ -506,6 +503,100 @@ h3 {
   flex-direction: row-reverse;
   float: right;
 }
+/* github button */
+.widget {
+  display: inline-block;
+  overflow: hidden;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
+    sans-serif;
+  font-size: 0;
+  line-height: 0;
+  white-space: nowrap;
+}
+.btn,
+.social-count {
+  position: relative;
+  display: inline-block;
+  display: inline-flex;
+  justify-content: center;
+  /* height: 14px; */
+  padding: 2px 5px;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 14px;
+  vertical-align: bottom;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-repeat: repeat-x;
+  background-position: -1px -1px;
+  background-size: 110% 110%;
+  border: 1px solid;
+}
+.btn {
+  border-radius: 0.25em;
+}
+.btn:not(:last-child) {
+  border-radius: 0.25em 0 0 0.25em;
+}
+.social-count {
+  border-left: 0;
+  border-radius: 0 0.25em 0.25em 0;
+}
+
+.octicon {
+  display: inline-block;
+  vertical-align: text-top;
+  fill: currentColor;
+  overflow: visible;
+}
+.btn:focus-visible,
+.social-count:focus-visible {
+  outline: 2px solid #0969da;
+  outline-offset: -2px;
+}
+.btn {
+  color: #24292f;
+  background-color: #ebf0f4;
+  border-color: #ccd1d5;
+  border-color: rgba(31, 35, 40, 0.15);
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3clinearGradient id='o' x2='0' y2='1'%3e%3cstop stop-color='%23f6f8fa'/%3e%3cstop offset='90%25' stop-color='%23ebf0f4'/%3e%3c/linearGradient%3e%3crect width='100%25' height='100%25' fill='url(%23o)'/%3e%3c/svg%3e");
+  background-image: -moz-linear-gradient(top, #f6f8fa, #ebf0f4 90%);
+  background-image: linear-gradient(180deg, #f6f8fa, #ebf0f4 90%);
+  filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#FFF6F8FA', endColorstr='#FFEAEFF3');
+}
+
+.btn:hover,
+.btn:focus {
+  background-color: #e9ebef;
+  background-position: 0 -0.5em;
+  border-color: #cbcdd1;
+  border-color: rgba(31, 35, 40, 0.15);
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3clinearGradient id='o' x2='0' y2='1'%3e%3cstop stop-color='%23f3f4f6'/%3e%3cstop offset='90%25' stop-color='%23e9ebef'/%3e%3c/linearGradient%3e%3crect width='100%25' height='100%25' fill='url(%23o)'/%3e%3c/svg%3e");
+  background-image: -moz-linear-gradient(top, #f3f4f6, #e9ebef 90%);
+  background-image: linear-gradient(180deg, #f3f4f6, #e9ebef 90%);
+  filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#FFF3F4F6', endColorstr='#FFE8EAEE');
+}
+
+.btn:active {
+  background-color: #e5e9ed;
+  border-color: #c7cbcf;
+  border-color: rgba(31, 35, 40, 0.15);
+  background-image: none;
+  filter: none;
+}
+.social-count {
+  color: #24292f;
+  background-color: #fff;
+  border-color: #dddedf;
+  border-color: rgba(31, 35, 40, 0.15);
+}
+.social-count:hover,
+.social-count:focus {
+  color: #0969da;
+}
 
 @media screen and (max-width: 966px) {
   .heroBanner_UJJx {
diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js
index 9721eec8..131a8de2 100644
--- a/docs/src/pages/index.js
+++ b/docs/src/pages/index.js
@@ -50,9 +50,6 @@ export default function Home() {
       title={`${siteConfig.title}`}
       description="Description will go into a meta tag in <head />"
     >
-      <Head>
-        <script async defer src="https://buttons.github.io/buttons.js"></script>
-      </Head>
       {/* <HomepageHeader /> */}
       <main>
         {/* <HomepageFeatures /> */}