diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
index 8f30476e..105bd70d 100644
--- a/docs/docusaurus.config.js
+++ b/docs/docusaurus.config.js
@@ -46,7 +46,8 @@ const config = {
           sidebarPath: require.resolve("./sidebars.js"),
           // Please change this to your repo.
           // Remove this to remove the "edit this page" links.
-          sidebarCollapsed: false,
+          // Do not automatically expand the menu
+          sidebarCollapsed: true,
           /*editUrl: 'https://github.com/longtai-cn',*/
         },
         blog: {
@@ -94,8 +95,13 @@ const config = {
         id: "announcementBar-1", // Increment on change
         // content: `⭐️ If you like hippo4j, give it a star on <a target="_blank" rel="noopener noreferrer" href="https://gitee.com/mabaiwancn/hippo4j">Gitee</a>, thanks.`,
         // content: `⭐️ 如果您喜欢 hippo4j，请在 <a target="_blank" rel="noopener noreferrer" href="https://gitee.com/mabaiwancn/hippo4j">Gitee</a> 和 <a target="_blank" rel="noopener noreferrer" href="https://github.com/opengoofy/hippo4j">GitHub</a> 上给它一个 star，谢谢！`,
-        content: `⭐️ 开源不易，如果 Hippo4j 对您有帮助，请在 <a target="_blank" rel="noopener noreferrer" href="https://github.com/opengoofy/hippo4j">GitHub</a> 上给它一个 Star 🌟`,
+        // content: `⭐️ 开源不易，如果 Hippo4j 对您有帮助，请在 <a target="_blank" rel="noopener noreferrer" href="https://github.com/opengoofy/hippo4j">GitHub</a> 上给它一个 Star 🌟`,
         // content: `<a target="_blank" rel="noopener noreferrer" href="https://xiaomage.info/knowledge-planet/">👉 《小马哥的代码实战课》官方知识星球来啦！！！</a>`,
+        content:
+          '⭐️ If you like hippo4j, give it a star on <a target="_blank" rel="noopener noreferrer" href="https://github.com/opengoofy/hippo4j">GitHub</a> ⭐️',
+        backgroundColor: "#fafbfc",
+        textColor: "#091E42",
+        isCloseable: false,
       },
       navbar: {
         title: "",
diff --git a/docs/src/components/LandingPage/Hero.jsx b/docs/src/components/LandingPage/Hero.jsx
index ec730c3b..b3cdedca 100644
--- a/docs/src/components/LandingPage/Hero.jsx
+++ b/docs/src/components/LandingPage/Hero.jsx
@@ -12,9 +12,9 @@ const Hero = () => {
     <div className=" h-[100vh] lg:h-[65vh]  relative text-black dark:text-white">
       <div
         // style={{ backgroundImage: `url(${bgUrl})` }}
-        className="bg-svg absolute inset-0 overflow-hidden bg-repeat"
+        className=" absolute inset-0 overflow-hidden bg-repeat"
       >
-        <div className="absolute inset-0 bg-gray-400 opacity-5 dark:opacity-0"></div>
+        {/* <div className="absolute inset-0 bg-gray-400 opacity-5 dark:opacity-0"></div> */}
 
         <div className=" container px-20 py-12 lg:py-16  md:py-8 lg:px-20 md:px-10  mx-auto flex flex-wrap flex-col lg:flex-row items-center">
           {/* <!--Left Col--> */}
diff --git a/docs/src/components/LandingPage/Introduction.jsx b/docs/src/components/LandingPage/Introduction.jsx
index 5ff03882..eeb78368 100644
--- a/docs/src/components/LandingPage/Introduction.jsx
+++ b/docs/src/components/LandingPage/Introduction.jsx
@@ -23,15 +23,15 @@ const Introduction = () => {
                 What can Hippo4j do?
               </Translate>
             </h2>
-            <p className=" my-4 leading-relaxed dark:text-white text-xl font-medium text-gray-800 md:pr-20 ">
+            {/* <p className=" my-4 leading-relaxed dark:text-white text-xl font-medium text-gray-800 md:pr-20 ">
               <Translate
                 id="homepage.secondTitleDesc1"
                 description="The p1 for the secondTitle part"
               >
                 Hippo4j is a Java thread pool framework.
               </Translate>
-            </p>
-            <p className="leading-normal max-w-xl  md:pr-10 text-gray-600 dark:text-gray-100  mb-2">
+            </p> */}
+            <p className="leading-normal mt-8 max-w-xl  md:pr-10 text-gray-600 dark:text-gray-100  mb-2">
               <Translate
                 id="homepage.secondTitleDesc2"
                 description="The p2 for the secondTitle part"
diff --git a/docs/src/components/LandingPage/index.js b/docs/src/components/LandingPage/index.js
index 2c71c128..c5438a58 100644
--- a/docs/src/components/LandingPage/index.js
+++ b/docs/src/components/LandingPage/index.js
@@ -1,4 +1,5 @@
 import React from "react";
+import { useEffect } from "react";
 import Hero from "./Hero";
 import Introduction from "./Introduction";
 function LandingLayout(props) {
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index 92a830cb..ffb86746 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -26,6 +26,10 @@
   --site-color-checkbox-checked-bg: hsl(167deg 56% 73% / 25%);
   --site-color-feedback-background: #fff;
   --ifm-font-family-base: "Poppins";
+  /* custom */
+  --docs-color-primary-tint: #2160fd29;
+  --ifm-breadcrumb-item-background-active: #0000000d;
+  --ifm-breadcrumb-color-active: #2160fd;
 }
 
 html[data-theme="dark"] {
@@ -35,7 +39,8 @@ html[data-theme="dark"] {
 }
 
 [data-theme="light"] {
-  --ifm-color-primary: hsl(var(--site-primary-hue-saturation) 30%);
+  /* --ifm-color-primary: hsl(var(--site-primary-hue-saturation) 30%); */
+  --ifm-color-primary: #2160fd;
   --ifm-color-primary-dark: hsl(var(--site-primary-hue-saturation) 26%);
   --ifm-color-primary-darker: hsl(var(--site-primary-hue-saturation) 23%);
   --ifm-color-primary-darkest: hsl(var(--site-primary-hue-saturation) 17%);
@@ -47,13 +52,11 @@ html[data-theme="dark"] {
   --ifm-color-primary-lightest: hsl(
     var(--site-primary-hue-saturation-light) 58%
   );
-
-  --ifm-breadcrumb-item-background-active: #0000000d;
-  --ifm-breadcrumb-color-active: #2160fd;
 }
 
 [data-theme="dark"] {
-  --ifm-color-primary: hsl(var(--site-primary-hue-saturation) 45%);
+  /* --ifm-color-primary: hsl(var(--site-primary-hue-saturation) 45%); */
+  --ifm-color-primary: #1a90ff;
   --ifm-color-primary-dark: hsl(var(--site-primary-hue-saturation) 41%);
   --ifm-color-primary-darker: hsl(var(--site-primary-hue-saturation) 38%);
   --ifm-color-primary-darkest: hsl(var(--site-primary-hue-saturation) 32%);
@@ -65,9 +68,6 @@ html[data-theme="dark"] {
   --ifm-color-primary-lightest: hsl(
     var(--site-primary-hue-saturation-light) 73%
   );
-
-  /* --ifm-breadcrumb-item-background-active: #333333; */
-  --ifm-breadcrumb-color-active: #ffffff;
 }
 
 .docusaurus-highlight-code-line {
@@ -233,8 +233,10 @@ div[class^="announcementBar_"] {
 
 :root[data-theme="light"] {
   --hero-image-url: url("../../static/img/hero/hero-removebg.png");
-  --bg-background-color: #f9fafb;
-  --bg-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='%23bfbfbf' fill-opacity='0.4'%3E%3Cpath fill-rule='evenodd' d='M5 3.59L1.46.05.05 1.46 3.59 5 .05 8.54l1.41 1.41L5 6.41l3.54 3.54 1.41-1.41L6.41 5l3.54-3.54L8.54.05 5 3.59zM17 2h24v2H17V2zm0 4h24v2H17V6zM2 17h2v24H2V17zm4 0h2v24H6V17z'/%3E%3C/g%3E%3C/svg%3E");
+  /* --bg-background-color: #f9fafb; */
+  /* --bg-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='%23bfbfbf' fill-opacity='0.4'%3E%3Cpath fill-rule='evenodd' d='M5 3.59L1.46.05.05 1.46 3.59 5 .05 8.54l1.41 1.41L5 6.41l3.54 3.54 1.41-1.41L6.41 5l3.54-3.54L8.54.05 5 3.59zM17 2h24v2H17V2zm0 4h24v2H17V6zM2 17h2v24H2V17zm4 0h2v24H6V17z'/%3E%3C/g%3E%3C/svg%3E"); */
+  --bg-background-color: #ffffff;
+  --bg-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='199' viewBox='0 0 100 199'%3E%3Cg fill='%23dddddd' fill-opacity='0.4'%3E%3Cpath d='M0 199V0h1v1.99L100 199h-1.12L1 4.22V199H0zM100 2h-.12l-1-2H100v2z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
 }
 
 :root[data-theme="dark"] {
@@ -259,3 +261,38 @@ div[class^="announcementBar_"] {
 .font-jakarta {
   font-family: "Plus Jakarta Sans", sans-serif;
 }
+
+/* sidebar style */
+ul.menu__list > li > a.menu__link--active {
+  border-right: 1px solid var(--ifm-color-primary);
+}
+
+nav.menu {
+  padding-right: 0px;
+  scrollbar-gutter: auto;
+}
+
+.menu__link {
+  border-radius: 4px 0 0 4px;
+  --ifm-menu-color-background-active: var(--docs-color-primary-tint);
+}
+
+::selection {
+  --tw-text-opacity: 1;
+  background-color: rgb(var(--docs-color-primary-200, 33 96 253) / 0.8);
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+div[class^="announcementBar_"] {
+  font-size: 14px;
+  background: none;
+  background-color: #fafbfc;
+  padding: 8px 0;
+  display: flex;
+  justify-content: center;
+  font-weight: inherit;
+}
+div[class^="announcementBar_"] a {
+  text-decoration: underline;
+  color: #091e42;
+}
diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js
index 39dd3f3a..0ed6df93 100644
--- a/docs/src/pages/index.js
+++ b/docs/src/pages/index.js
@@ -1,4 +1,5 @@
 import React from "react";
+import { useEffect } from "react";
 import clsx from "clsx";
 import Link from "@docusaurus/Link";
 // import Translate from "@docusaurus/Translate";
@@ -43,6 +44,14 @@ function HomepageHeader() {
 
 export default function Home() {
   const { siteConfig } = useDocusaurusContext();
+  // useEffect(() => {
+  //   // Set the content of the banner based on the  URL.
+  //   let inner = location.href.includes("3000")
+  //     ? '⭐️ If you like hippo4j, give it a star on  &nbsp; <a target="_blank" rel="noopener noreferrer" href="https://github.com/opengoofy/hippo4j">GitHub</a> &nbsp;⭐️ '
+  //     : '⭐️ 源不易，如果 Hippo4j 对您有帮助，请在 <a target="_blank" rel="noopener noreferrer" href="https://github.com/opengoofy/hippo4j">GitHub</a> 上给它一个 Star 🌟';
+  //   let el = document.querySelector('[class^="announcementBar_"]');
+  //   el.innerHTML = inner;
+  // }, []);
   return (
     <Layout
       title={`${siteConfig.title}`}