diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
index 105bd70d..db669315 100644
--- a/docs/docusaurus.config.js
+++ b/docs/docusaurus.config.js
@@ -93,10 +93,6 @@ const config = {
       autoCollapseCategories: true,
       announcementBar: {
         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: `<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",
diff --git a/docs/src/components/LandingPage/GithubInfo.jsx b/docs/src/components/LandingPage/GithubInfo.jsx
index 0a0fa074..d3299119 100644
--- a/docs/src/components/LandingPage/GithubInfo.jsx
+++ b/docs/src/components/LandingPage/GithubInfo.jsx
@@ -8,7 +8,7 @@ const GithubInfo = ({ owner, repo }) => {
     <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">stars</span>
+          <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>
diff --git a/docs/src/components/LandingPage/Hero.jsx b/docs/src/components/LandingPage/Hero.jsx
index 24ac6676..c83adf73 100644
--- a/docs/src/components/LandingPage/Hero.jsx
+++ b/docs/src/components/LandingPage/Hero.jsx
@@ -9,30 +9,19 @@ const Hero = () => {
   const bgUrl = useBaseUrl("/img/bg.jpg");
 
   return (
-    <div className=" h-[100vh] lg:h-[65vh]  relative text-black dark:text-white">
-      <div
-        // style={{ backgroundImage: `url(${bgUrl})` }}
-        className=" absolute inset-0 overflow-hidden bg-repeat"
-      >
+    <div className=" h-[100vh] lg:h-[58vh]  relative text-black dark:text-white">
+      <div className=" absolute inset-0 overflow-hidden bg-repeat">
         {/* <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">
+        <div className=" container px-20 py-12 lg:py-8  md:py-8 lg:px-20 md:px-10  mx-auto flex flex-wrap flex-col lg:flex-row items-center">
           {/* <!--Left Col--> */}
           <div className="flex flex-col w-full lg:w-1/2 md:w-2/3 justify-center items-start text-center md:text-left">
             {/* title and desc */}
             <div>
-              <h1 className="my-4 font-jakarta lg:my-4 md:my-4 text-5xl font-bold leading-tight ">
-                Hippo4j ThreadPool
+              <h1 className="my-4 font-jakarta lg:my-8 md:my-4 text-5xl font-bold leading-tight ">
+                Hippo4j Thread Pool
               </h1>
 
-              {/* <p className="leading-normal dark:text-white font-bold text-gray-800 hero-image-url text-3xl md:text-3xl">
-                <Translate
-                  id="homepage.titleDescription1"
-                  description="The homepage title description"
-                >
-                  Thread Pool Framework For Java
-                </Translate>
-              </p> */}
               <p className="leading-normal hero-image-url text-gray-600 dark:text-gray-100 text-xl mb-0">
                 <Translate
                   id="homepage.titleDescription2"
@@ -46,65 +35,12 @@ const Hero = () => {
 
             {/* button group */}
             <div className="flex my-4 lg:my-8 md:my-6  w-full justify-center md:justify-start">
-              {/* <Link to="/docs/user_docs/intro" className="">
-                <button className="mr-2 lg:mr-4 text-base lg:text-lg w-32 lg:w-40 hover:bg-blue-500 bg-blue-400 font-medium  py-2 px-4 rounded-md focus:outline-none shadow-none border-none cursor-pointer transition-all duration-300 ease-in-out">
-                  <Translate
-                    className="cursor-pointer"
-                    id="homepage.startButton"
-                    description="The homepage start button text"
-                  >
-                    Quick Start
-                  </Translate>
-                </button>
-              </Link>
-              <a href="https://github.com/opengoofy/hippo4j">
-                <button className="ml-2 lg:mx-0 w-32 lg:w-40 border-1 border-solid dark:border-gray-500 border-gray-400 bg-transparent hover:bg-gray-400 hover:bg-opacity-50 font-medium py-2 px-4 rounded-md focus:outline-none shadow-none cursor-pointer transition-all duration-300 ease-in-out">
-                  <div className="flex cursor-pointer items-center justify-center">
-                    <Icon
-                      className="w-6 h-6 mr-2 rounded-full flex-shrink-0 dark:bg-white"
-                      icon="devicon:github"
-                    />
-                    <span className="text-base lg:text-lg">GitHub</span>
-                  </div>
-                </button>
-              </a> */}
               <Link
                 to="/docs/user_docs/intro"
                 class="relative mr-4 w-32 text-center lg:w-48 hover:no-underline inline-flex items-center justify-start py-3  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 class="absolute right-0 pr-4 duration-200 ease-out group-hover:translate-x-12">
-                  <svg
-                    class="w-5 h-5 text-white"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M14 5l7 7m0 0l-7 7m7-7H3"
-                    ></path>
-                  </svg>
-                </span> */}
-                {/* <span class="absolute left-0 pl-2.5 -translate-x-12 group-hover:translate-x-0 ease-out duration-200">
-                  <svg
-                    class="w-5 h-5 text-gray-200"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M14 5l7 7m0 0l-7 7m7-7H3"
-                    ></path>
-                  </svg>
-                </span> */}
+
                 <span class="relative w-full text-center transition-colors duration-200 ease-in-out group-hover:text-white">
                   Start Learning
                 </span>
@@ -125,13 +61,6 @@ const Hero = () => {
                     />
                     Github
                   </span>
-                  {/* <div className="flex cursor-pointer items-center justify-center">
-                    <Icon
-                      className="w-6 h-6 mr-2 rounded-full flex-shrink-0 dark:bg-white"
-                      icon="devicon:github"
-                    />
-                    <span className="text-base lg:text-lg">GitHub</span>
-                  </div> */}
                 </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"
diff --git a/docs/src/components/LandingPage/Introduction.jsx b/docs/src/components/LandingPage/Introduction.jsx
index eeb78368..d1f59a1d 100644
--- a/docs/src/components/LandingPage/Introduction.jsx
+++ b/docs/src/components/LandingPage/Introduction.jsx
@@ -3,19 +3,19 @@ import useBaseUrl from "@docusaurus/useBaseUrl";
 import Translate from "@docusaurus/Translate";
 const Introduction = () => {
   return (
-    <section className=" border-b  mb-28 dark:text-white">
-      <div className=" ">
-        <div className="title-container w-full bg-gray-50 p-4 mb-4 flex flex-wrap dark:bg-[#242526]">
+    <section className="mb-28 dark:text-white">
+      <div className="introduction-container ">
+        <div className="title-container w-full bg-[#EFEFEF] p-4 mb-12 flex flex-wrap dark:bg-[#242526]">
           <div className="left-image-container px-24  w-full md:w-1/2 sm:w-1/3">
             <img
-              className="w-full -mt-8 h-64 object-cover  lg:h-80 md:h-96 dark:rounded-lg "
+              className="w-full -mt-8 h-64 object-contain  lg:h-64 md:h-96 dark:rounded-lg "
               alt="Hippo4j System"
               src={useBaseUrl("/img/introduction/t2.svg")}
             />
             {/* <div className="introduction-title-image h-64 w-full img-div"></div> */}
           </div>
           <div className="right-title-container py-4 px-16 md:px-4 md:pt-8 w-full md:w-1/2 sm:w-2/3 sm:px-8">
-            <h2 className="w-full my-2 text-3xl font-medium leading-tight text-gray-800 dark:text-white ">
+            <h2 className="w-full my-2 text-3xl font-medium leading-tight  dark:text-white ">
               <Translate
                 id="homepage.secondTitle"
                 description="The title for the introduction part"
@@ -23,15 +23,8 @@ 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 ">
-              <Translate
-                id="homepage.secondTitleDesc1"
-                description="The p1 for the secondTitle part"
-              >
-                Hippo4j is a Java thread pool framework.
-              </Translate>
-            </p> */}
-            <p className="leading-normal mt-8 max-w-xl  md:pr-10 text-gray-600 dark:text-gray-100  mb-2">
+
+            <p className="leading-normal mt-8 max-w-xl  md:pr-10  dark:text-white  mb-2">
               <Translate
                 id="homepage.secondTitleDesc2"
                 description="The p2 for the secondTitle part"
@@ -44,10 +37,17 @@ const Introduction = () => {
           </div>
         </div>
 
-        <div class="container px-20 lg:px-36 md:px-10 three-part-container">
+        <div class="container px-20 lg:px-20 md:px-10 three-part-container">
           <div class="flex flex-wrap pt-6">
-            <div class="w-full pr-4 sm:w-2/3 md:w-1/2   ">
-              <h3 class="text-2xl md:pb-6 text-gray-800 dark:text-white font-medium leading-none mb-3">
+            <div class="w-full sm:w-1/3 md:w-1/4 ">
+              <img
+                className="w-full -mt-4 h-auto sm:h-64 object-contain  lg:h-52 md:h-72 dark:rounded-lg "
+                src={useBaseUrl("/img/introduction/p11.svg")}
+                alt="Hippo4j System"
+              />
+            </div>
+            <div class="w-full pr-4 sm:w-2/3 md:w-1/2  flex-grow  ">
+              <h3 class="text-2xl   dark:text-white font-normal leading-none ">
                 <Translate
                   id="homepage.introduction.fristPartTitle"
                   description="the title for the first introduction part"
@@ -55,10 +55,10 @@ const Introduction = () => {
                   Dynamic Change
                 </Translate>
               </h3>
-              <div class="dark:text-white text-gray-600 mb-8">
+              <div class="dark:text-white  mb-8 ">
                 <p>
                   <Translate
-                    className="cursor-pointer"
+                    className="cursor-pointer "
                     id="homepage.introduction.fristPartDesc1"
                     description="The first desc for fristPart "
                   >
@@ -66,48 +66,13 @@ const Introduction = () => {
                     parameters.
                   </Translate>{" "}
                 </p>
-                <p>
-                  <Translate
-                    className="cursor-pointer"
-                    id="homepage.introduction.fristPartDesc2"
-                    description="The second desc for fristPart "
-                  >
-                    Including but not limited to core size, maximum threads,
-                    blocking queue size, and rejection policy.
-                  </Translate>
-                </p>
-                <p>
-                  <Translate
-                    className="cursor-pointer"
-                    id="homepage.introduction.fristPartDesc3"
-                    description="The third desc for fristPart "
-                  >
-                    It supports differentiated thread pool configurations for
-                    different nodes in the application cluster.
-                  </Translate>
-                </p>
               </div>
             </div>
-            <div class="w-full sm:w-1/3 md:w-1/2 ">
-              {/* <img class="mx-auto w-4/5 z-50" src="f1.png" /> */}
-              <img
-                className="w-full -mt-4 h-auto sm:h-64 object-contain  lg:h-80 md:h-72 dark:rounded-lg "
-                src={useBaseUrl("/img/introduction/p11.svg")}
-                alt="Hippo4j System"
-              />
-            </div>
           </div>
-          <div class="flex flex-wrap pt-6 flex-col-reverse sm:flex-row">
-            <div class="w-full pr-16  sm:w-1/3 md:w-1/2  mt-6">
-              <img
-                className="w-full h-auto sm:h-64 object-contain  lg:h-80 md:h-96 dark:rounded-lg "
-                src={useBaseUrl("/img/introduction/p22.svg")}
-                alt="Hippo4j System"
-              />
-            </div>
-            <div class="w-full sm:w-2/3 md:w-1/2 md:pl-16 sm:pl-8 mt-6 lg:pt-8">
-              <div class="align-middle">
-                <h3 class="text-2xl md:pb-6 text-gray-800 dark:text-white font-medium leading-none mb-3">
+          <div class="flex flex-wrap md:-mt16  flex-col-reverse sm:flex-row">
+            <div class="w-full flex-grow sm:w-2/3 md:w-2/3 md:pl-[28rem] sm:pl-8 mt-6 lg:pt-8">
+              <div class="align-middle ">
+                <h3 class="text-2xl   dark:text-white font-normal leading-none mb-3">
                   <Translate
                     id="homepage.introduction.secondPartTitle"
                     description="the title for the second introduction part"
@@ -115,7 +80,7 @@ const Introduction = () => {
                     Custom Alarm
                   </Translate>
                 </h3>
-                <div class="dark:text-white text-gray-600 mb-8">
+                <div class="dark:text-white  mb-8">
                   <p>
                     <Translate
                       className="cursor-pointer"
@@ -126,33 +91,28 @@ const Introduction = () => {
                       alarm dimensions.
                     </Translate>
                   </p>
-                  <p>
-                    <Translate
-                      className="cursor-pointer"
-                      id="homepage.introduction.secondPartDesc2"
-                      description="The second desc for secondPart "
-                    >
-                      Thread pool overload, blocking queue capacity, running for
-                      too long, and rejection strategy alarm.
-                    </Translate>{" "}
-                  </p>
-                  <p>
-                    <Translate
-                      className="cursor-pointer"
-                      id="homepage.introduction.secondPartDesc3"
-                      description="The third desc for secondPart "
-                    >
-                      It also supports non-repetitive alarms within a custom
-                      time period.
-                    </Translate>
-                  </p>
                 </div>
               </div>
             </div>
+            <div class="w-full   sm:w-1/3 md:w-1/4  mt-6">
+              <img
+                className="w-full h-auto sm:h-64 object-contain  lg:h-52 md:h-96 dark:rounded-lg "
+                src={useBaseUrl("/img/introduction/p22.svg")}
+                alt="Hippo4j System"
+              />
+            </div>
           </div>
-          <div class="flex flex-wrap pt-6">
-            <div class="w-5/6 sm:w-2/3 md:w-1/2 sm:pr-8 md:pr-4">
-              <h3 class="text-2xl md:py-6 text-gray-800 dark:text-white font-medium leading-none mb-3">
+
+          <div class="flex mt-2 flex-wrap">
+            <div class="w-full sm:w-1/3 md:w-1/4 ">
+              <img
+                className="w-full -mt-4 h-auto sm:h-64 object-contain  lg:h-60 md:h-72 dark:rounded-lg "
+                src={useBaseUrl("/img/introduction/p33.svg")}
+                alt="Hippo4j System"
+              />
+            </div>
+            <div class="w-full pr-4 sm:w-2/3 md:w-1/2 md:mt-8 flex-grow  ">
+              <h3 class="text-2xl   dark:text-white font-normal  leading-none ">
                 <Translate
                   id="homepage.introduction.thirdPartTitle"
                   description="the title for the third introduction part"
@@ -160,8 +120,8 @@ const Introduction = () => {
                   Operation Monitoring
                 </Translate>
               </h3>
-              <div class="dark:text-white text-gray-600 mb-8 md:pr-6">
-                <p>
+              <div class="dark:text-white  mb-8">
+                <p className="m-0">
                   <Translate
                     className="cursor-pointer"
                     id="homepage.introduction.thirdPartDesc1"
@@ -171,36 +131,8 @@ const Introduction = () => {
                     storage.
                   </Translate>
                 </p>
-                <p>
-                  <Translate
-                    className="cursor-pointer"
-                    id="homepage.introduction.thirdPartDesc2"
-                    description="The second desc for thirdPart "
-                  >
-                    while also supporting Prometheus, InfluxDB, and other
-                    monitoring systems.
-                  </Translate>
-                </p>
-                <p>
-                  <Translate
-                    className="cursor-pointer"
-                    id="homepage.introduction.thirdPartDesc3"
-                    description="The third desc for thirdPart "
-                  >
-                    Provides visualized dashboard monitoring metrics through
-                    Grafana or built-in monitoring pages.
-                  </Translate>
-                </p>
               </div>
             </div>
-            <div class="w-full sm:w-1/3 md:w-1/2 ">
-              {/* <img class="mx-auto w-4/5 z-50" src="f3_r.png" /> */}
-              <img
-                className="w-full -mt-16 -ml-16 h-auto sm:h-64 object-contain  lg:h-80 md:h-96 dark:rounded-lg  "
-                src={useBaseUrl("/img/introduction/p33.svg")}
-                alt="Hippo4j System"
-              />
-            </div>
           </div>
         </div>
       </div>
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index ffb86746..6d1f8874 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -39,7 +39,6 @@ html[data-theme="dark"] {
 }
 
 [data-theme="light"] {
-  /* --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%);
@@ -55,7 +54,6 @@ html[data-theme="dark"] {
 }
 
 [data-theme="dark"] {
-  /* --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%);
@@ -68,6 +66,8 @@ html[data-theme="dark"] {
   --ifm-color-primary-lightest: hsl(
     var(--site-primary-hue-saturation-light) 73%
   );
+  --ifm-breadcrumb-item-background-active: #222222;
+  --ifm-breadcrumb-color-active: #1a90ff;
 }
 
 .docusaurus-highlight-code-line {
@@ -124,8 +124,6 @@ html[data-theme="dark"] {
 }
 
 [data-theme="light"] .DocSearch {
-  /* --docsearch-primary-color: var(--ifm-color-primary); */
-  /* --docsearch-text-color: var(--ifm-font-color-base); */
   --docsearch-muted-color: var(--ifm-color-emphasis-700);
   --docsearch-container-background: rgb(94 100 112 / 70%);
   /* Modal */
@@ -233,8 +231,6 @@ 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: #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");
 }
@@ -277,6 +273,7 @@ nav.menu {
   --ifm-menu-color-background-active: var(--docs-color-primary-tint);
 }
 
+/* other style */
 ::selection {
   --tw-text-opacity: 1;
   background-color: rgb(var(--docs-color-primary-200, 33 96 253) / 0.8);
@@ -296,3 +293,11 @@ div[class^="announcementBar_"] a {
   text-decoration: underline;
   color: #091e42;
 }
+
+.introduction-container {
+  color: #1c1e21;
+}
+.three-part-container p {
+  margin: 0;
+  line-height: 2;
+}
diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js
index 0ed6df93..12c66c3f 100644
--- a/docs/src/pages/index.js
+++ b/docs/src/pages/index.js
@@ -44,14 +44,7 @@ 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}`}
diff --git a/docs/src/pages/users.js b/docs/src/pages/users.js
index a782dc7f..e625c267 100644
--- a/docs/src/pages/users.js
+++ b/docs/src/pages/users.js
@@ -5,7 +5,7 @@ import useBaseUrl from "@docusaurus/useBaseUrl";
 import Translate from "@docusaurus/Translate";
 function CompanyCards({ companies }) {
   return (
-    <div className="grid sm:grid-cols-2 grid-cols-1 md:px-16 md:grid-cols-3 lg:grid-cols-5 gap-4 mb-16 lg:px-2 px-10">
+    <div className="grid sm:grid-cols-2 grid-cols-1 md:px-16 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-16 lg:px-2 px-10">
       {/* Filter out those without a logo. */}
       {companies
         .filter((comapny) => comapny.logo.length > 0)
@@ -19,13 +19,13 @@ function CompanyCards({ companies }) {
           >
             <div className="flex dark:text-black items-center justify-center h-28">
               <div
-                className="h-24 w-24 object-contain"
+                className="h-22 w-24 object-contain"
                 style={{ position: "relative" }}
               >
                 <img
                   src={useBaseUrl(company.logo)}
                   alt={`${company.name}`}
-                  className="h-24 w-24 object-contain"
+                  className="h-22 w-24 object-contain"
                 />
               </div>
             </div>
@@ -39,9 +39,9 @@ export default function OurUsers() {
     <Layout title="OurUsers" description="companies using our product">
       <div className="max-w-screen-lg mx-auto dark:text-white">
         {/* text description*/}
-        <div className="max-w-screen-sm sm:mx-auto mx-10 text-center my-8 ">
+        <div className="max-w-screen-sm sm:mx-auto mx-10 text-center my-8 mt-16 ">
           <div className="text-center mt-8">
-            <h2 className="text-3xl font-bold mb-4">
+            <h2 className="text-3xl font-bold my-4">
               <Translate
                 id="companyPage.title"
                 description="the title for the company page"
@@ -50,12 +50,12 @@ export default function OurUsers() {
               </Translate>
             </h2>
             <div
-              className="mx-auto h-1 bg-gradient-to-r from-green-400 to-blue-500 mb-4"
+              className="mx-auto h-1 bg-gradient-to-r from-green-400 to-blue-500 my-6"
               style={{ width: "30%" }}
             ></div>
           </div>
           <div className="flex flex-col items-center mx-auto">
-            <p className="text-lg mb-2 max-w-1/2" style={{ lineHeight: "1.5" }}>
+            <p className="text-lg leading-loose mb-2 max-w-1/2">
               <Translate
                 id="companyPage.descriptionText"
                 description="the description for the company page"
@@ -64,7 +64,7 @@ export default function OurUsers() {
                 This is our greatest motivation to move forward.
               </Translate>{" "}
             </p>
-            <p className="text-lg mb-4 max-w-1/2" style={{ lineHeight: "1.5" }}>
+            <p className="text-lg mb-4 max-w-1/2 leading-loose">
               <Translate
                 id="companyPage.questionText"
                 description="the text for the company question"