diff --git a/components/Newsletter.tsx b/components/Newsletter.tsx
index 659de4dbb..33be68ce6 100644
--- a/components/Newsletter.tsx
+++ b/components/Newsletter.tsx
@@ -20,7 +20,7 @@ const NewsletterForm: React.FC<NewsletterFormProps> = ({
   return (
     <section
       className={classnames(
-        'w-[100vw]  mx-auto flex items-center justify-center ',
+        'w-[100vw] mx-auto flex items-center justify-center ',
         background === 'white'
           ? 'bg-white dark:bg-transparent text-black'
           : 'bg-transparent text-white',
@@ -29,61 +29,69 @@ const NewsletterForm: React.FC<NewsletterFormProps> = ({
     >
       <div
         className={classnames(
-          'w-full max-w-[900px] text-center px-5 py-9 relative',
+          'w-full max-w-[1000px] text-center py-9 px-5 relative md:flex block',
           background === 'white'
             ? 'bg-white dark:bg-transparent'
             : 'bg-transparent',
           className,
+          'justify-between',
         )}
       >
-        <h3 className=' font-bold tracking-heading mb-4 text-h4 md:text-h3  px-5 dark:text-slate-50'>
-          Subscribe to our newsletter to receive news about Json Schema.
-        </h3>
-        <p className='text-lg  mb-8 dark:text-slate-50'>
-          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='emails'
-            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'
+        <div className='md:w-[48%] w-full'>
+          <p className='font-bold text-left tracking-heading mb-4 text-h4 dark:text-slate-50'>
+            Subscribe to our newsletter to receive news about Json Schema.
+          </p>
+          <p className='text-lg text-left mb-8 dark:text-slate-50'>
+            We respect your inbox. No spam, promise ✌️
+          </p>
+        </div>
+        <aside className='px-5 py-10 md:w-[48%] w-full border-2 rounded'>
+          <p className='uppercase font-bold dark:text-slate-50 text-left mb-5'>
+            Join the JSON Schema Weekly mailing list
+          </p>
+          <form
+            action={formAction}
+            method='post'
+            className='flex flex-col gap-4'
           >
-            <span className='inline-block'>Subscribe</span>
-          </button>
-          <div className='display: hidden'>
             <input
               type='text'
-              name='b_ef8789d5789a6aff8113a701d_11103c248b'
-              value=''
+              name='FNAME'
+              placeholder='Name'
+              className={classnames(
+                'form-input block w-full py-3 text-lg h-[38px] sm:h-[45px] dark:bg-transparent sm:text-lg sm:leading-5 border-2 rounded px-5 text-black dark:text-white',
+                background == 'black' ? 'bg-white' : '',
+              )}
+              value={username}
+              onChange={(e: any) => setUsername(e.target.value)}
             />
-          </div>
-        </form>
+            <input
+              type='email'
+              name='EMAIL'
+              placeholder='Email'
+              className={classnames(
+                'form-input block w-full py-3 text-lg sm:text-lg border-2 sm:leading-5 h-[38px] dark:bg-transparent sm:h-[45px] rounded px-5 text-black dark:text-white',
+                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 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>
+        </aside>
       </div>
     </section>
   );
diff --git a/components/NewsletterCard.tsx b/components/NewsletterCard.tsx
new file mode 100644
index 000000000..7760e562e
--- /dev/null
+++ b/components/NewsletterCard.tsx
@@ -0,0 +1,40 @@
+import Link from 'next/link';
+import React from 'react';
+
+type NewsletterProps = {
+  url: string;
+  title: string;
+  date: string;
+};
+
+const NewsletterCard = ({
+  newsletterData,
+}: {
+  newsletterData: NewsletterProps[];
+}) => {
+  const sortedNewsletterData = [...newsletterData].sort((a, b) => {
+    return new Date(b.date).getTime() - new Date(a.date).getTime();
+  });
+
+  return (
+    <div className='grid grid-cols-1 p-4 sm:grid-cols-2 md:grid-cols-3 gap-4'>
+      {sortedNewsletterData.map((newsletter, index) => (
+        <div
+          key={index}
+          className='p-4 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:shadow-lg'
+        >
+          <Link href={newsletter.url} className='block'>
+            <h3 className='text-lg font-semibold mb-2 truncate'>
+              {newsletter.title}
+            </h3>
+          </Link>
+          <p className='text-gray-600 dark:text-white mb-2'>
+            {newsletter.date}
+          </p>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default NewsletterCard;
diff --git a/data/newsletter.json b/data/newsletter.json
new file mode 100644
index 000000000..df1b7159c
--- /dev/null
+++ b/data/newsletter.json
@@ -0,0 +1,87 @@
+[
+    {
+      "url": "https://example.com/newsletter-123",
+      "title": "JSON Schema Newsletter #123",
+      "date": "2024-01-01"
+    },
+    {
+      "url": "https://example.com/newsletter-124",
+      "title": "JSON Schema Newsletter #124",
+      "date": "2024-01-08"
+    },
+    {
+      "url": "https://example.com/newsletter-125",
+      "title": "JSON Schema Newsletter #125",
+      "date": "2024-01-15"
+    },
+    {
+      "url": "https://example.com/newsletter-126",
+      "title": "JSON Schema Newsletter #126",
+      "date": "2024-01-22"
+    },
+    {
+      "url": "https://example.com/newsletter-127",
+      "title": "JSON Schema Newsletter #127",
+      "date": "2024-01-29"
+    },
+    {
+      "url": "https://example.com/newsletter-128",
+      "title": "JSON Schema Newsletter #128",
+      "date": "2024-02-05"
+    },
+    {
+      "url": "https://example.com/newsletter-129",
+      "title": "JSON Schema Newsletter #129",
+      "date": "2024-02-12"
+    },
+    {
+      "url": "https://example.com/newsletter-130",
+      "title": "JSON Schema Newsletter #130",
+      "date": "2024-02-19"
+    },
+    {
+      "url": "https://example.com/newsletter-131",
+      "title": "JSON Schema Newsletter #131",
+      "date": "2024-02-26"
+    },
+    {
+      "url": "https://example.com/newsletter-132",
+      "title": "JSON Schema Newsletter #132",
+      "date": "2024-03-04"
+    },
+    {
+      "url": "https://example.com/newsletter-133",
+      "title": "JSON Schema Newsletter #133",
+      "date": "2024-03-11"
+    },
+    {
+      "url": "https://example.com/newsletter-134",
+      "title": "JSON Schema Newsletter #134",
+      "date": "2024-03-18"
+    },
+    {
+      "url": "https://example.com/newsletter-135",
+      "title": "JSON Schema Newsletter #135",
+      "date": "2024-03-25"
+    },
+    {
+      "url": "https://example.com/newsletter-136",
+      "title": "JSON Schema Newsletter #136",
+      "date": "2024-04-01"
+    },
+    {
+      "url": "https://example.com/newsletter-137",
+      "title": "JSON Schema Newsletter #137",
+      "date": "2024-04-08"
+    },
+    {
+      "url": "https://example.com/newsletter-138",
+      "title": "JSON Schema Newsletter #138",
+      "date": "2024-04-15"
+    },
+    {
+      "url": "https://example.com/newsletter-139",
+      "title": "JSON Schema Newsletter #139",
+      "date": "2024-04-22"
+    }
+  ]
diff --git a/pages/newsletter/index.page.tsx b/pages/newsletter/index.page.tsx
index c1f28b844..24918607b 100644
--- a/pages/newsletter/index.page.tsx
+++ b/pages/newsletter/index.page.tsx
@@ -3,6 +3,8 @@ import Head from 'next/head';
 import { getLayout } from '~/components/SiteLayout';
 import NewsletterForm from '~/components/Newsletter';
 import { SectionContext } from '~/context';
+import data from '../../data/newsletter.json';
+import NewsletterCard from '~/components/NewsletterCard';
 
 export default function StaticMarkdownPage() {
   const newTitle = 'JSON Schema Newsletter';
@@ -14,9 +16,15 @@ export default function StaticMarkdownPage() {
       <div className='flex flex-col items-center justify-center'>
         <div className='max-w-[1400px] mx-auto'>
           <NewsletterForm
-            className='pt-[100px] text-black'
-            wrapperClassName='h-full sm:h-[calc(100vh-312px)] py-[50px] sm:py-0 px-5 sm:px-10 lg:w-full'
+            className='pt-[150px] text-black'
+            wrapperClassName='h-full sm:py-0 lg:w-full'
           />
+          <div className='mt-10'>
+            <h2 className='text-xl font-bold p-4 bg-gray-200 dark:bg-transparent'>
+              Grouping by 2024
+            </h2>
+            <NewsletterCard newsletterData={data} />
+          </div>
         </div>
       </div>
     </SectionContext.Provider>