diff --git a/components/Newsletter.tsx b/components/Newsletter.tsx
new file mode 100644
index 000000000..f306f0d39
--- /dev/null
+++ b/components/Newsletter.tsx
@@ -0,0 +1,90 @@
+import React, { useState } from 'react';
+import classnames from 'classnames';
+
+interface NewsletterFormProps {
+  wrapperClassName?: string;
+  className?: string;
+  background?: 'white' | 'black';
+}
+
+const NewsletterForm: React.FC<NewsletterFormProps> = ({
+  wrapperClassName = '',
+  className = '',
+  background = 'white',
+}) => {
+  const [email, setEmail] = useState('');
+  const [username, setUsername] = useState('');
+  const formAction =
+    'https://json-schema.us8.list-manage.com/subscribe/post?u=ef8789d5789a6aff8113a701d&amp;id=11103c248b&amp;f_id=00822be0f0';
+
+  return (
+    <section
+      className={classnames(
+        'w-[100vw]  mx-auto flex items-center justify-center ',
+        background === 'white'
+          ? 'bg-white text-black'
+          : 'bg-transparent text-white',
+        wrapperClassName,
+      )}
+    >
+      <div
+        className={classnames(
+          'w-full max-w-[900px] text-center px-5 py-9 relative',
+          background === 'white' ? 'bg-white' : 'bg-transparent',
+          className,
+        )}
+      >
+        <h3 className=' font-bold tracking-heading mb-4 text-h4 md:text-h3  px-5'>
+          Subscribe to our newsletter to receive news about Json Schema.
+        </h3>
+        <p className='text-lg  mb-8'>
+          We respect your inbox. No spam, promise ✌️
+        </p>
+        <form
+          action={formAction}
+          method='post'
+          className='flex flex-col md:flex-row gap-4'
+        >
+          <input
+            type='text'
+            name='FNAME'
+            placeholder='Your Name'
+            className={classnames(
+              'form-input block w-full py-3 text-lg h-[38px] sm:h-[45px]  sm:text-lg sm:leading-5 border-2  md:flex-1 rounded px-5 bg-gray-200 text-black',
+              background == 'black' ? 'bg-white' : '',
+            )}
+            value={username}
+            onChange={(e: any) => setUsername(e.target.value)}
+          />
+          <input
+            type='email'
+            name='EMAIL'
+            placeholder='Your Email'
+            className={classnames(
+              'form-input block w-full py-3 text-lg sm:text-lg border-2 sm:leading-5   h-[38px]  sm:h-[45px]  md:flex-1 rounded px-5 bg-gray-200 text-black',
+              background == 'black' ? 'bg-white' : '',
+            )}
+            value={email}
+            onChange={(e: any) => setEmail(e.target.value)}
+          />
+          <button
+            type='submit'
+            className=' h-[40px] sm:h-[45px] mx-auto rounded border-2 bg-primary w-full font-semibold md:mt-0 md:flex-1 text-white'
+            // className='bg-primary-500 hover:bg-primary-400 text-white bg-[#445cf4] transition-all duration-500 ease-in-out rounded-md px-4 py-3 text-md font-semibold tracking-heading w-full md:mt-0 md:flex-1'
+          >
+            <span className='inline-block'>Subscribe</span>
+          </button>
+          <div className='display: hidden'>
+            <input
+              type='text'
+              name='b_ef8789d5789a6aff8113a701d_11103c248b'
+              value=''
+            />
+          </div>
+        </form>
+      </div>
+    </section>
+  );
+};
+
+export default NewsletterForm;
diff --git a/pages/index.page.tsx b/pages/index.page.tsx
index 7cc29673b..4dcc5991c 100644
--- a/pages/index.page.tsx
+++ b/pages/index.page.tsx
@@ -10,7 +10,6 @@ import TextTruncate from 'react-text-truncate';
 
 import { Headline4 } from '~/components/Headlines';
 import { GetStaticProps } from 'next';
-
 /* eslint-disable */
 import axios from 'axios';
 import ical from 'node-ical';
@@ -484,9 +483,8 @@ const Home = (props: any) => {
         </section>
 
         {/* News & Blogs */}
-
-        <section className='w-full h-[300px] lg:h-[367px] bg-gradient-to-r from-primary from-1.95% to-endBlue clip-both grid items-center'>
-          <div className='lg:w-full mx-auto text-center'>
+        <section className='w-full h-[300px] lg:h-[367px] bg-gradient-to-r from-primary from-1.95% to-endBlue clip-both'>
+          <div className='lg:w-full mx-auto text-center mt-28 '>
             <h2 className='text-h3mobile lg:text-h3 text-white mb-6'>
               Start contributing to JSON Schema
             </h2>
diff --git a/pages/newsletter/index.page.tsx b/pages/newsletter/index.page.tsx
new file mode 100644
index 000000000..a5b8ca6e8
--- /dev/null
+++ b/pages/newsletter/index.page.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import NewsletterForm from '~/components/Newsletter';
+import Layout from '~/components/Layout';
+
+const index = () => {
+  return (
+    <>
+      <Layout>
+        <NewsletterForm
+          className='pt-[100px] bg-white text-black'
+          wrapperClassName='h-full sm:h-[calc(100vh-100px)]  bg-white py-[50px] sm:py-0  px-5 sm:px-10 lg:w-full'
+        />
+      </Layout>
+    </>
+  );
+};
+
+export default index;