diff --git a/package.json b/package.json
index 12a79713425..231526c7c0b 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-github-btn": "^1.4.0",
+    "react-mailchimp-subscribe": "^2.1.3",
     "sass": "^1.63.6"
   },
   "browserslist": {
diff --git a/src/components/Newsletter.js b/src/components/Newsletter.js
new file mode 100644
index 00000000000..2f090df4181
--- /dev/null
+++ b/src/components/Newsletter.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import MailchimpSubscribe from 'react-mailchimp-subscribe';
+
+const Newsletter = () => {
+  return (
+    <div style={{ padding: '20px' }}>
+      <MailchimpSubscribe url="https://kubevela.us17.list-manage.com/subscribe/post?u=27213eba6a4772c86d2332aeb&amp;id=f0873592ac&amp;f_id=002857e0f0" />
+    </div>
+  );
+};
+
+export default Newsletter;
diff --git a/src/pages/index.js b/src/pages/index.js
index 956316410bf..53d16e4dfd0 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -9,6 +9,7 @@ import FeatureList from '../components/FeatureList';
 import Button from '../components/button';
 import WhatIs from '../components/WhatIs';
 import Integration from '../components/Integration';
+import Newsletter from '../components/Newsletter';
 
 export default function Home() {
   const context = useDocusaurusContext();
@@ -70,6 +71,7 @@ export default function Home() {
           <div className="cncf-Logo" />
         </div>
       </div>
+      <Newsletter />
     </Layout>
   );
 }