diff --git a/website/docs/en/misc/benchmark.mdx b/website/docs/en/misc/benchmark.mdx
index 9877d312d27..52fe71fa35f 100644
--- a/website/docs/en/misc/benchmark.mdx
+++ b/website/docs/en/misc/benchmark.mdx
@@ -1,6 +1,14 @@
 # Benchmark
 
-To run this benchmark yourself, clone [web-infra-dev/bundler-benchmark](https://github.com/web-infra-dev/bundler-benchmark) and then use this command from the root:
+Rspack provides two benchmark repositories that you can clone and run locally:
+
+- [rspack-contrib/performance-compare](https://github.com/rspack-contrib/performance-compare): Performance comparison of Rspack, Rsbuild, webpack, Vite, and Farm with 1000 modules.
+
+```bash
+pnpm run benchmark
+```
+
+- [web-infra-dev/bundler-benchmark](https://github.com/web-infra-dev/bundler-benchmark): Performance comparison of Rspack and webpack with 50000 modules.
 
 ```bash
 ./scripts/bench-all.sh ${platform} # `platform` is used to uniquely identify the generated benchmark data.
@@ -8,6 +16,8 @@ To run this benchmark yourself, clone [web-infra-dev/bundler-benchmark](https://
 
 ## Benchmark case
 
+Here are introductions to some test cases for the `web-infra-dev/bundler-benchmark`.
+
 ### all
 
 This project is used for comparing development mode and production mode build performance.
diff --git a/website/docs/zh/misc/benchmark.mdx b/website/docs/zh/misc/benchmark.mdx
index 75c04f30261..92caca7ead9 100644
--- a/website/docs/zh/misc/benchmark.mdx
+++ b/website/docs/zh/misc/benchmark.mdx
@@ -1,6 +1,14 @@
 # 基准测试
 
-如果你想自己运行这个基准测试，请克隆 [web-infra-dev/bundler-benchmark](https://github.com/web-infra-dev/bundler-benchmark)，然后在根目录下使用命令:
+Rspack 提供了两个 benchmark 的仓库，你可以自行克隆它们，并在本地运行：
+
+- [rspack-contrib/performance-compare](https://github.com/rspack-contrib/performance-compare)：Rspack、Rsbuild、webpack、Vite 和 Farm 的性能比较，模块数量为 1000。
+
+```bash
+pnpm run benchmark
+```
+
+- [web-infra-dev/bundler-benchmark](https://github.com/web-infra-dev/bundler-benchmark)：Rspack 和 webpack 的性能比较，模块数量为 50000。
 
 ```bash
 ./scripts/bench-all.sh ${platform} # `platform` 用于唯一地识别生成的基准数据。
@@ -8,6 +16,8 @@
 
 ## 基准测试用例
 
+下面是 `web-infra-dev/bundler-benchmark` 中的一些测试用例介绍。
+
 ### all
 
 这个项目由若干子项目 `atlaskit-editor`、`common-libs`、`common-libs-chunks`、`rome` 和 `esbuild-three` 组合而成, 共 50000 个模块。用于我们比较开发模式和生产模式的构建性能。
diff --git a/website/theme/components/Benchmark/ProgressBar.module.scss b/website/theme/components/Benchmark/ProgressBar.module.scss
new file mode 100644
index 00000000000..fbf8dfb2928
--- /dev/null
+++ b/website/theme/components/Benchmark/ProgressBar.module.scss
@@ -0,0 +1,53 @@
+.container {
+  width: 50vw;
+  height: 18px;
+  max-width: 800px;
+  border-radius: 10px;
+  box-sizing: content-box;
+}
+
+.inner-container {
+  width: 100%;
+  height: 8px;
+  background: var(--rp-c-gray-light-5);
+  border-radius: 5px;
+}
+
+:global(.dark) {
+  .inner-container {
+    background: var(--rp-c-bg-soft);
+  }
+}
+
+.bar {
+  height: 100%;
+  border-radius: 5px;
+  background: linear-gradient(
+    120deg,
+    var(--rp-c-brand),
+    hsl(32.71deg 100% 70%)
+  );
+}
+
+.desc {
+  min-width: 84px;
+  color: var(--rp-c-text-2);
+  font-size: 12px;
+  margin-left: 16px;
+  width: 100px;
+  font-family:
+    Menlo,
+    Monaco,
+    Lucida Console,
+    Liberation Mono,
+    DejaVu Sans Mono,
+    Bitstream Vera Sans Mono,
+    Courier New,
+    monospace;
+}
+
+.time {
+  display: inline-block;
+  width: 38px;
+  text-align: left;
+}
diff --git a/website/theme/components/Benchmark/ProgressBar.tsx b/website/theme/components/Benchmark/ProgressBar.tsx
index 9f89bdd76db..2452f8e30ba 100644
--- a/website/theme/components/Benchmark/ProgressBar.tsx
+++ b/website/theme/components/Benchmark/ProgressBar.tsx
@@ -1,6 +1,6 @@
 import { motion } from 'framer-motion';
 import { useState } from 'react';
-import styles from './index.module.scss';
+import styles from './ProgressBar.module.scss';
 
 export function formatTime(time: number, totalTime: number) {
   if (totalTime < 1000) {
@@ -10,46 +10,49 @@ export function formatTime(time: number, totalTime: number) {
   }
 }
 
-export function ProgressBar({ value, max }: { value: number; max: number }) {
+export function ProgressBar({
+  value,
+  max,
+  color,
+  desc,
+}: {
+  value: number;
+  max: number;
+  color: string;
+  desc: string;
+}) {
   const [elapsedTime, setElapsedTime] = useState(0);
   const TOTAL_TIME = value * 1000;
   const isMobile = window.innerWidth < 768;
-  const progressBarWidth = isMobile ? 80 : 50;
+  const progressBarWidth = isMobile ? 80 : 55;
   const variants = {
     initial: { width: 0 },
-    animate: { width: '100%' },
+    animate: { width: `${(value / max) * 100}%` },
   };
+
   const formattedTime = formatTime(elapsedTime, TOTAL_TIME);
   return (
     <div
-      className={`${styles['progress-bar-container']} flex justify-between items-center sm:pr-4`}
+      className={`${styles.container} flex items-center sm:pr-4`}
       style={{
         width: `${progressBarWidth}vw`,
       }}
     >
-      <div
-        className={`${styles['progress-bar-inner-container']} flex justify-between`}
-        style={{
-          width: `${(value / max) * 0.8 * progressBarWidth}vw`,
-        }}
-      >
+      <div className={`${styles['inner-container']} flex justify-between`}>
         <motion.div
-          className={styles['progress-bar']}
+          className={`${styles.bar} ${styles[color]}`}
           initial="initial"
           animate="animate"
           variants={variants}
           onUpdate={(latest: { width: string }) => {
             const width = parseFloat(latest.width);
-            setElapsedTime((width / 100) * TOTAL_TIME);
+            setElapsedTime(width * max * 10);
           }}
-          // 2x speed
-          transition={{ duration: value / 2, ease: 'linear' }}
+          transition={{ duration: value, ease: 'linear' }}
         />
       </div>
-      <div
-        className={`${styles['font-mono']} text-sm sm:text-base text-gray-400`}
-      >
-        {formattedTime}
+      <div className={styles.desc}>
+        <span className={styles.time}>{formattedTime}</span> {desc}
       </div>
     </div>
   );
diff --git a/website/theme/components/Benchmark/index.module.scss b/website/theme/components/Benchmark/index.module.scss
index 40645423902..63d9885623d 100644
--- a/website/theme/components/Benchmark/index.module.scss
+++ b/website/theme/components/Benchmark/index.module.scss
@@ -1,51 +1,41 @@
 .title {
-  background: linear-gradient(to right, #d3c357, #f1a76a, #cc6d2e);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
+  color: var(--rp-c-text-1);
 }
 
-.progress-bar-container {
-  width: 50vw;
-  height: 50px;
-  border-radius: 10px;
-  padding: 4px;
-  border: 1px solid var(--rp-c-gray-light-4);
-  box-sizing: content-box;
+.desc {
+  color: var(--rp-c-text-2);
 }
 
-.progress-bar-inner-container {
-  height: 50px;
-  background: var(--rp-c-gray-light-4);
-  border-radius: 5px;
-}
+.bottom-link {
+  display: block;
+  margin-top: 16px;
+  font-size: 16px;
+  color: var(--rp-c-text-2);
 
-:global(.dark) {
-  .progress-bar-inner-container {
-    background: var(--rp-c-dark-light-1);
+  &:hover {
+    color: var(--rp-c-link);
   }
 }
 
-.progress-bar {
-  height: 100%;
-  background: linear-gradient(to right, #d3c357, #f1a76a, #cc6d2e);
-  border-radius: 5px;
+.progress-name {
+  color: var(--rp-c-text-1);
+  font-weight: 600;
+  min-width: 160px;
 }
 
-.font-mono {
-  font-family:
-    Menlo,
-    Monaco,
-    Lucida Console,
-    Liberation Mono,
-    DejaVu Sans Mono,
-    Bitstream Vera Sans Mono,
-    Courier New,
-    monospace;
+@media screen and (min-width: 540px) {
+  .item {
+    flex-direction: row;
+  }
 }
 
-@media (max-width: 768px) {
-  .progress-bar-container,
-  .progress-bar-inner-container {
-    height: 30px;
+@media screen and (max-width: 541px) {
+  .item {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .progress-name {
+    margin-bottom: 8px;
   }
 }
diff --git a/website/theme/components/Benchmark/index.tsx b/website/theme/components/Benchmark/index.tsx
index 104c52fe140..1e995643427 100644
--- a/website/theme/components/Benchmark/index.tsx
+++ b/website/theme/components/Benchmark/index.tsx
@@ -1,91 +1,42 @@
 import { motion } from 'framer-motion';
-import { useState } from 'react';
 import { useInView } from 'react-intersection-observer';
-import { Tab, Tabs } from 'rspress/theme';
 import { useI18n } from '../../i18n';
 import { ProgressBar } from './ProgressBar';
 import styles from './index.module.scss';
 
-// 场景条件
-// 冷启动/热更新
+// Benchmark data for different cases
+// Unit: second
+// From: https://github.com/rspack-contrib/performance-compare
 const BENCHMARK_DATA = {
-  coldStart: [
-    {
-      name: 'Rspack',
-      // 单位为 s
-      time: 3.79,
-    },
-    {
-      name: 'Webpack (with SWC)',
-      time: 31.25,
-    },
-    {
-      name: 'Webpack (with babel)',
-      time: 42.61,
-    },
-  ],
-  hmrRoot: [
-    {
-      name: 'Rspack',
-      time: 0.57,
-    },
-    {
-      name: 'Webpack (with SWC)',
-      time: 1.67,
-    },
-    {
-      name: 'Webpack (with babel)',
-      time: 1.74,
-    },
-  ],
-  hmrLeaf: [
-    {
-      name: 'Rspack',
-      time: 0.56,
-    },
-    {
-      name: 'Webpack (with SWC)',
-      time: 1.53,
-    },
-    {
-      name: 'Webpack (with babel)',
-      time: 1.63,
-    },
-  ],
-  coldBuild: [
-    {
-      name: 'Rspack',
-      time: 22.35,
-    },
-    {
-      name: 'Webpack (with SWC)',
-      time: 75.05,
-    },
-    {
-      name: 'Webpack (with babel + terser)',
-      time: 160.06,
-    },
-  ],
-};
-
-const MODULE_COUNT_MAP = {
-  coldStart: '50,000',
-  hmrRoot: '10,000',
-  hmrLeaf: '10,000',
-  coldBuild: '50,000',
+  rspack: {
+    label: 'Rspack',
+    coldStart: 0.49,
+    coldBuild: 0.36,
+    hmr: 0.09,
+  },
+  webpackSwc: {
+    label: 'webpack + SWC',
+    coldStart: 2.4,
+    coldBuild: 2.12,
+    hmr: 0.22,
+  },
+  webpackBabel: {
+    label: 'webpack + Babel',
+    coldStart: 5.13,
+    coldBuild: 6.47,
+    hmr: 0.22,
+  },
 };
+const maxTime = 6.47;
 
 export function Benchmark() {
   const t = useI18n();
-  const SCENE = ['coldStart', 'hmrRoot', 'hmrLeaf', 'coldBuild'];
-  const [activeScene, setActiveScene] =
-    useState<keyof typeof BENCHMARK_DATA>('coldStart');
   const { ref, inView } = useInView();
   const variants = {
     initial: { y: 50, opacity: 0 },
     animate: { y: 0, opacity: 1, transition: { duration: 0.5 } },
   };
-  const performanceInfoList = BENCHMARK_DATA[activeScene];
+
   return (
     <motion.div
       ref={ref}
@@ -93,7 +44,7 @@ export function Benchmark() {
       animate={inView ? 'animate' : 'initial'}
       variants={variants}
       transition={{ duration: 1 }}
-      className="relative flex flex-col justify-center pt-20 pb-10 mt-15 h-auto"
+      className="relative flex flex-col justify-center pt-24 pb-10 mt-15 h-auto"
     >
       {inView && (
         <>
@@ -101,72 +52,54 @@ export function Benchmark() {
             <h2 className={`${styles.title} font-bold text-2xl sm:text-4xl`}>
               {t('benchmarkTitle')}
             </h2>
-            <p className="mt-6 mb-3 mx-6 text-center sm:text-lg text-gray-500 max-w-3xl">
+            <p
+              className={`${styles.desc} mt-8 mb-5 mx-6 text-center sm:text-lg max-w-3xl`}
+            >
               {t('benchmarkDesc')}
             </p>
           </div>
           <div className="flex flex-col items-center my-4 z-1">
-            <Tabs
-              values={SCENE.map(item => ({
-                label: t(item as keyof typeof BENCHMARK_DATA),
-              }))}
-              onChange={index =>
-                setActiveScene(SCENE[index] as keyof typeof BENCHMARK_DATA)
-              }
-            >
-              {SCENE.map(scene => (
-                <Tab key={scene}>
-                  {performanceInfoList.map(info => (
-                    <div
-                      key={info.name}
-                      className="flex flex-center justify-start m-4 flex-col sm:flex-row"
-                    >
-                      {inView && (
-                        <>
-                          <p
-                            className="mr-2 mb-2 w-20 text-center text-gray-400"
-                            style={{ minWidth: '180px' }}
-                          >
-                            {info.name}
-                          </p>
-                          <ProgressBar
-                            value={info.time}
-                            max={Math.max(
-                              ...performanceInfoList.map(info => info.time),
-                            )}
-                          />
-                        </>
-                      )}
+            {Object.values(BENCHMARK_DATA).map(item => (
+              <div
+                key={item.label}
+                className={`${styles.item} flex flex-center justify-start m-5`}
+              >
+                {inView && (
+                  <>
+                    <p className={styles.progressName}>{item.label}</p>
+                    <div>
+                      <ProgressBar
+                        value={item.coldStart}
+                        max={maxTime}
+                        color="cyan"
+                        desc="dev"
+                      />
+                      <ProgressBar
+                        value={item.coldBuild}
+                        max={maxTime}
+                        color="blue"
+                        desc="build"
+                      />
+                      <ProgressBar
+                        value={item.hmr}
+                        max={maxTime}
+                        color="cyan"
+                        desc="HMR"
+                      />
                     </div>
-                  ))}
-                </Tab>
-              ))}
-            </Tabs>
+                  </>
+                )}
+              </div>
+            ))}
             <div>
-              <p className="font-medium my-2 text-center text-lg text-gray-500">
-                <span className=" font-normal">{t('moduleCount')}:</span>{' '}
-                {MODULE_COUNT_MAP[activeScene]}
-              </p>
               <a
                 href="misc/benchmark.html"
-                className="hover:text-brand transition-colors duration-300 text-14px font-medium text-gray-500 p-3"
+                target="_blank"
+                className={`${styles['bottom-link']} hover:text-brand transition-colors duration-300 font-medium p-2`}
               >
                 👉 {t('benchmarkDetail')}
               </a>
             </div>
-            {/* <div className="flex flex-center">
-      <p className="mr-2 font-medium">{t('moduleCount')}</p>
-      <MenuGroup defaultLabel={activeLevel.toString()}>
-        {LEVEL.map((level) => (
-          <div
-            key={level}
-            className="text-sm py-1 px-3 cursor-pointer hover:bg-mute hover:text-brand rounded-md"
-          >
-            <span>{level}</span>
-          </div>
-        ))}
-      </MenuGroup>
-    </div> */}
           </div>
         </>
       )}
diff --git a/website/theme/components/HomeHero/index.module.scss b/website/theme/components/HomeHero/index.module.scss
index b2be241d320..bad3f20ebe8 100644
--- a/website/theme/components/HomeHero/index.module.scss
+++ b/website/theme/components/HomeHero/index.module.scss
@@ -1,5 +1,9 @@
 .clip {
-  background: -webkit-linear-gradient(120deg, var(--rp-c-brand) 30%, #f4f468);
+  background: linear-gradient(
+    120deg,
+    var(--rp-c-brand),
+    hsl(32.71deg 100% 70%)
+  );
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: var(--rp-home-hero-name-color);
diff --git a/website/theme/i18n/enUS.ts b/website/theme/i18n/enUS.ts
index 71b288145fa..55db61d8a36 100644
--- a/website/theme/i18n/enUS.ts
+++ b/website/theme/i18n/enUS.ts
@@ -1,9 +1,7 @@
 export const EN_US = {
   coldStart: 'Cold Start',
   coldBuild: 'Cold Build',
-  hmrRoot: 'HMR (Root Changed)',
-  hmrLeaf: 'HMR (Leaf Changed)',
-  moduleCount: 'Module Count',
+  hmr: 'HMR',
   guide: 'Guide',
   quickStart: 'Quick Start',
   features: 'Features',
diff --git a/website/theme/i18n/zhCN.ts b/website/theme/i18n/zhCN.ts
index 1f5efb8e710..9a69e771e2d 100644
--- a/website/theme/i18n/zhCN.ts
+++ b/website/theme/i18n/zhCN.ts
@@ -3,9 +3,7 @@ import type { EN_US } from './enUS';
 export const ZH_CN: Record<keyof typeof EN_US, string> = {
   coldStart: '冷启动（dev）',
   coldBuild: '冷构建',
-  hmrRoot: '热更新（根模块变动）',
-  hmrLeaf: '热更新（叶子模块变动）',
-  moduleCount: '模块数量',
+  hmr: '热更新',
   guide: '指南',
   quickStart: '快速开始',
   features: '核心特性',