diff --git a/packages/mermaid/src/docs/.vitepress/components/ProductHuntBadge.vue b/packages/mermaid/src/docs/.vitepress/components/ProductHuntBadge.vue
new file mode 100644
index 000000000..b283c644c
--- /dev/null
+++ b/packages/mermaid/src/docs/.vitepress/components/ProductHuntBadge.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="-mt-6 mb-8">
+    <a
+      href="https://www.producthunt.com/products/mermaid-chart?utm_source=badge-follow&utm_medium=badge&utm_souce=badge-mermaid&#0045;chart"
+      target="_blank"
+      ><img
+        src="https://api.producthunt.com/widgets/embed-image/v1/follow.svg?product_id=552855&theme=light"
+        alt="Mermaid&#0032;Chart - A&#0032;smarter&#0032;way&#0032;to&#0032;create&#0032;diagrams | Product Hunt"
+        style="width: 250px; height: 54px"
+        width="250"
+        height="54"
+    /></a>
+  </div>
+</template>
diff --git a/packages/mermaid/src/docs/.vitepress/theme/index.ts b/packages/mermaid/src/docs/.vitepress/theme/index.ts
index 3ebb7614a..4fd4d7b66 100644
--- a/packages/mermaid/src/docs/.vitepress/theme/index.ts
+++ b/packages/mermaid/src/docs/.vitepress/theme/index.ts
@@ -8,6 +8,8 @@ import Contributors from '../components/Contributors.vue';
 import HomePage from '../components/HomePage.vue';
 // @ts-ignore
 import TopBar from '../components/TopBar.vue';
+// @ts-ignore
+import ProductHuntBadge from '../components/ProductHuntBadge.vue';
 import { getRedirect } from './redirect.js';
 import { h } from 'vue';
 import Theme from 'vitepress/theme';
@@ -21,6 +23,7 @@ export default {
     return h(Theme.Layout, null, {
       // Keeping this as comment as it took a lot of time to figure out how to add a component to the top bar.
       'home-hero-before': () => h(TopBar),
+      'home-hero-info-before': () => h(ProductHuntBadge),
       'home-features-after': () => h(HomePage),
     });
   },