diff --git a/src/pages/home/hero.jsx b/src/pages/home/hero.jsx
index 7a616a9fc..c31bd2f5a 100644
--- a/src/pages/home/hero.jsx
+++ b/src/pages/home/hero.jsx
@@ -20,81 +20,59 @@ export default function () {
       <div className="overflow-hidden">
         <Top1 className="top1" />
       </div>
-      <div className="section hero-main pb-6 overflow-hidden main-page">
+      <div className="section hero-main pt-4 pb-2 overflow-hidden main-page">
         {/* background overlay */}
         <div className="overlay opacity-90 z-index-n1"></div>
         <div className="container-fluid pb-2 cover-container container-hero hero-px">
           <div className="row justify-content-center">
             <div
-              className="col-10 col-sm-10 col-md-10 col-lg-6 align-self-center pe-0"
-              data-aos="fade-right"
+                className="col-10 col-sm-10 col-md-10 col-lg-6 align-self-center pe-0"
+                data-aos="fade-right"
             >
               <div className="text-start mt-0">
                 <div className="mb-5 system_info pt-0">
                   <div className="fw-bold mb-3">
                     <div
-                      className="d-flex flex-column align-items-start"
-                      style={{ width: "max-content" }}
+                        className="d-flex flex-column align-items-start"
+                        style={{width: "max-content"}}
                     >
-                      <div className="text-right" style={{ width: "100%" }}>
+                      <div className="text-right" style={{width: "100%"}}>
                         <span className="badge incubating fs-6 tag">
                           Incubating
                         </span>
                       </div>
-                      <span className="project_title">Apache StreamPark</span>
+                      <span className="project_title">Apache StreamPark™</span>
                     </div>
                   </div>
                   <p className="desc lead">
                     {dataSource.slogan.description}
                   </p>
                 </div>
-                <div>
-                  <Button
-                    theme="github"
-                    icon="lni-github-original"
-                    href="https://github.com/apache/incubator-streampark"
-                    target="_blank"
-                  >
-                    Github
-                  </Button>
-                  <Button
-                    theme="primary"
-                    icon="lni-play"
-                    href="/docs/user-guide/quick-start"
-                    style={{ marginLeft: "10px" }}
-                  >
-                    Get started
-                  </Button>
+                <a className="btn streampark-btn btn mt-30 ztop" href="https://github.com/apache/incubator-streampark"
+                   target="_blank">
+                  <i className="lni-github-original"></i>&nbsp;GitHub
+                </a>
+                <a className="btn streampark-btn btn-green mt-30 ml-3 ztop" href="/docs/user-guide/quick-start"
+                   style={{marginLeft: '10px'}}>
+                  <i className="lni-play"></i>&nbsp;Get started
+                </a>
+                <div style={{marginTop: '20px'}} className="shields ztop">
+                  <img src="https://img.shields.io/github/stars/apache/incubator-streampark.svg"
+                       className="wow fadeInUp"></img>
+                  <img src="https://img.shields.io/github/forks/apache/incubator-streampark.svg"
+                       className="wow fadeInUp"></img>
+                  <img src="https://img.shields.io/github/downloads/apache/streampark/total.svg"
+                       className="wow fadeInUp"></img>
                 </div>
               </div>
             </div>
             {/* hero image */}
             {HeroImage()}
           </div>
-          <AchievementBanner />
-
         </div>
-        {/* <section className="achievement-banner-wrapper">
-          <div className="achievement-banner">
-            <div className="achievement-banner-item">
-              <div className="achievement-banner-item__highlight">3.7k+</div>
-              <div>Github stars</div>
-            </div>
-            <div className="achievement-banner-item">
-              <div className="achievement-banner-item__highlight">964</div>
-              <div>Github forks</div>
-            </div>
-            <div className="achievement-banner-item">
-              <div className="achievement-banner-item__highlight">9.9k+</div>
-              <div>Total downloads</div>
-            </div>
-          </div>
-        </section> */}
-
-        {/* <div className="pt-6 cover-top">
-          <Top2 className="top2" />
-        </div> */}
-        {/* <StreamWave /> */}
+        <div className='pt-6 pt-6 cover-top'>
+          <Top2 className="top2"/>
+        </div>
       </div>
     </>
   );
@@ -114,7 +92,6 @@ function HeroImage() {
       >
         <Dashboard
           className="img-fluid"
-          style={{ transform: "translateY(4rem)" }}
         />
       </div>
     </div>
@@ -248,4 +225,4 @@ function AchievementBanner() {
       </div>
     </section>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/home/index.less b/src/pages/home/index.less
index 3e4ec7a35..a63fb5db5 100644
--- a/src/pages/home/index.less
+++ b/src/pages/home/index.less
@@ -19,7 +19,7 @@
   }
 
   .top2 {
-    margin-top: -50px;
+    margin-top: -70px;
   }
 
   .hero-main {
@@ -30,8 +30,8 @@
     }
 
     .hero-px {
-      padding-left: 6rem;
-      padding-right: 6rem;
+      padding-left: 4rem;
+      padding-right: 4rem;
     }
 
     .cover-top {
@@ -39,20 +39,17 @@
       flex-direction: column;
       border-bottom: 2px solid var(--primary-color);
       vertical-align: bottom;
-      height: 180px;
+      height: 200px;
       transform: scaleX(3) rotate(-3deg);
     }
 
     .system_info {
       .project_title {
         font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif !important;
-        font-size: 4rem;
-        font-weight: 500;
+        font-weight: 200;
         line-height: 1;
         padding-bottom: 8px;
-        color: var(--primary-color);
-        position: relative;
-        white-space: nowrap;
+        color: #2e7fed;
       }
 
       h5 {
@@ -246,6 +243,7 @@
 
     .shields img {
       margin-right: 5px;
+      border-radius: 5px;
     }
   }
 
@@ -626,8 +624,10 @@
   }
 
   .incubating {
-    background-color: rgba(66, 144, 245, .15);
-
+    background-color: rgba(66, 144, 245, 0.15);
+    padding: 0.25em 0.7em;
+    color: #084696;
+    font-weight: 400;
     &:hover {
       background-color: rgba(66, 144, 245, .25);
     }
@@ -724,13 +724,13 @@
 
 @media (min-width: 1200px) {
   .system_info .project_title {
-    font-size: 3rem !important;
+    font-size: 3.5rem !important;
   }
 }
 
 @media (min-width: 1400px) {
   .system_info .project_title {
-    font-size: 3.5rem !important;
+    font-size: 4.0rem !important;
   }
 }
 
@@ -755,4 +755,4 @@
     }
   }
 
-}
\ No newline at end of file
+}
diff --git a/src/pages/home/languages.json b/src/pages/home/languages.json
index a4fa1479c..64bbe8759 100644
--- a/src/pages/home/languages.json
+++ b/src/pages/home/languages.json
@@ -19,7 +19,7 @@
     },
     "slogan": {
       "key": "让流处理更简单!",
-      "description": "流处理极速开发框架，流批一体 & 湖仓一体的云原生平台，一站式流处理计算平台"
+      "description": "流处理开发框架 & 一站式实时计算平台，同时支持 Apache Flink 和 Apache Spark。"
     },
     "feature": [
       {