diff --git a/components/AmbassadorsList.tsx b/components/AmbassadorsList.tsx
index 0328f4772..628114b27 100644
--- a/components/AmbassadorsList.tsx
+++ b/components/AmbassadorsList.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import Image from 'next/image';
 
 interface AmbassadorsLink {
   title: string;
@@ -21,7 +22,9 @@ const AmbassadorList = ({ ambassadorList }: AmbassadorsListProps) => {
           className='flex flex-col items-center text-center p-5 bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition hover:scale-105'
           data-testid='Ambassadors-list'
         >
-          <img
+          <Image
+            height={150}
+            width={150}
             src={link.icon}
             alt={link.title}
             className='w-[150px] h-auto object-contain mb-5'
diff --git a/pages/index.page.tsx b/pages/index.page.tsx
index ab35d29d8..a8a0eae0b 100644
--- a/pages/index.page.tsx
+++ b/pages/index.page.tsx
@@ -6,13 +6,11 @@ import matter from 'gray-matter';
 const PATH = 'pages/blog/posts';
 import readingTime from 'reading-time';
 import Link from 'next/link';
-import TextTruncate from 'react-text-truncate';
 import Image from 'next/image';
 import {
   fetchRemoteICalFile,
   printEventsForNextWeeks,
 } from '../lib/calendarUtils';
-import { Headline4 } from '~/components/Headlines';
 import { GetStaticProps } from 'next';
 
 /* eslint-disable */
@@ -353,42 +351,45 @@ const Home = (props: any) => {
               build new connections.
             </p>
           </div>
-          <div className='grid grid-cols-1 lg:grid-cols-3 gap-6 mb-12 mx-auto w-5/6 md:w-3/5 lg:w-5/6'>
-            <div className='p-4 w-full mb-6 dark:shadow-2xl'>
+          <div className='grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12 mx-auto w-5/6 md:w-3/5 lg:w-[85%]'>
+            <div className='w-full mb-6'>
               <Link href='https://json-schema.org/slack'>
-                <h3 className='mb-4 font-semibold flex items-center dark:text-slate-200'>
-                  Join the JSON Schema Slack Workspace!
+                <div className='p-2 py-8 border dark:border-gray-600 rounded-md hover:scale-105 duration-200'>
+                  <h3 className='mb-4 font-semibold flex items-center dark:text-slate-200'>
+                    Join the JSON Schema Slack Workspace!
+                    {isClient && (
+                      <>
+                        <Image
+                          src='/img/logos/Slack-mark.svg'
+                          className='w-12 h-12'
+                          alt='slack'
+                          height={48}
+                          width={48}
+                        />
+                      </>
+                    )}
+                  </h3>
                   {isClient && (
                     <>
                       <Image
-                        src='/img/logos/Slack-mark.svg'
-                        className='w-8 h-8'
-                        alt='slack'
-                        height={32}
-                        width={32}
+                        src='/img/home-page/slack-json-schema.png'
+                        className='w-full rounded-md'
+                        alt='slack-json-schema'
+                        height={500}
+                        width={300}
                       />
                     </>
                   )}
-                </h3>
-                {isClient && (
-                  <>
-                    <Image
-                      src='/img/home-page/slack-json-schema.png'
-                      className='w-full mb-4'
-                      alt='slack-json-schema'
-                      height={500}
-                      width={300}
-                    />
-                  </>
-                )}
-
-                {/* <h3 className='mb-4 font-semibold' >Event</h3> */}
-                <p className='mb-4 dark:text-slate-300'>
-                  Join our Slack to ask questions, get feedback on your
-                  projects, and connect with +5000 practitioners and experts.
-                </p>
+                </div>
               </Link>
-              <button className='w-full lg:w-1/2 rounded border-2 bg-primary hover:bg-blue-700 transition-all duration-300 ease-in-out text-white h-[40px] flex items-center justify-center mx-auto dark:border-none'>
+
+              {/* <h3 className='mb-4 font-semibold' >Event</h3> */}
+              <p className='my-4 dark:text-slate-300'>
+                Join our Slack to ask questions, get feedback on your projects,
+                and connect with +5000 practitioners and experts. Simply say
+                hello 👋, you're welcome to join us.
+              </p>
+              <button className='w-full lg:w-1/2 rounded border-2 bg-primary hover:bg-blue-700 transition-all duration-300 ease-in-out text-white h-[40px] flex items-center justify-center  dark:border-none'>
                 <a
                   href='https://json-schema.org/slack'
                   className='flex items-center '
@@ -409,92 +410,92 @@ const Home = (props: any) => {
               </button>
             </div>
             {/* BlogPost Data */}
-            <div className='p-4 w-full mb-6 dark:shadow-2xl'>
+            <div className='w-full mb-6 '>
               <Link href={`/blog/posts/${blogPosts[0].slug}`}>
-                <h3 className='mb-5 font-semibold pt-1 dark:text-slate-200'>
-                  The JSON Schema Blog
-                </h3>
-                {isClient && (
-                  <>
-                    <Image
-                      src={blogPosts[0].frontmatter.cover}
-                      className='w-full h-[232px]  mb-4'
-                      width={600}
-                      height={232}
-                      alt='blog'
-                    />
-                  </>
-                )}
-                <h3 className='mb-4 font-semibold dark:text-slate-300'>
-                  {' '}
-                  {blogPosts[0].frontmatter.title}
-                </h3>
-                <div className='mb-4'>
-                  <TextTruncate
-                    element='span'
-                    line={4}
-                    text={blogPosts[0].frontmatter.excerpt}
-                  />
-                </div>
-
-                <div className='flex ml-2 mb-2 '>
-                  {(blogPosts[0].frontmatter.authors || []).map(
-                    (author: any, index: number) => {
-                      return (
-                        <div
-                          key={index}
-                          className='bg-slate-50 h-[44px] w-[44px] rounded-full -ml-3 bg-cover bg-center border-2 border-white'
-                          style={{
-                            backgroundImage: `url(${author.photo})`,
-                            zIndex: 10 - index,
-                          }}
-                        />
-                      );
-                    },
+                <div className='p-2 border dark:border-gray-600 rounded-md hover:scale-105 duration-200'>
+                  <h3 className='mb-4 font-semibold pt-1 dark:text-slate-200'>
+                    Latest blog post
+                  </h3>
+                  {isClient && (
+                    <>
+                      <Image
+                        src={blogPosts[0].frontmatter.cover}
+                        className='w-full rounded-md h-[170px]  mb-2'
+                        width={600}
+                        height={232}
+                        alt='blog'
+                      />
+                    </>
                   )}
-                  <div className='flex flex-col ml-2'>
-                    <p className='text-sm font-semibold dark:text-slate-300'>
-                      {blogPosts[0].frontmatter.authors.length > 2 ? (
-                        <>
-                          {blogPosts[0].frontmatter.authors
-                            .slice(0, 2)
-                            .map((author: any, index: number) => (
-                              <span key={author.name}>
-                                {author.name}
-                                {index === 0 && ' & '}
-                              </span>
-                            ))}
-                          {'...'}
-                        </>
-                      ) : (
-                        blogPosts[0].frontmatter.authors.map((author: any) => (
-                          <span key={author.name}>{author.name}</span>
-                        ))
-                      )}
-                    </p>
+                  <h3 className='mb-2 font-semibold dark:text-slate-300'>
+                    {' '}
+                    {blogPosts[0].frontmatter.title}
+                  </h3>
+                  <div className='flex mb-2 '>
+                    {(blogPosts[0].frontmatter.authors || []).map(
+                      (author: any, index: number) => {
+                        return (
+                          <div
+                            key={index}
+                            className='bg-slate-50 h-[44px] w-[44px] rounded-full bg-cover bg-center border-2 border-white'
+                            style={{
+                              backgroundImage: `url(${author.photo})`,
+                              zIndex: 10 - index,
+                            }}
+                          />
+                        );
+                      },
+                    )}
+                    <div className='flex flex-col ml-2'>
+                      <p className='text-sm font-semibold dark:text-slate-300'>
+                        {blogPosts[0].frontmatter.authors.length > 2 ? (
+                          <>
+                            {blogPosts[0].frontmatter.authors
+                              .slice(0, 2)
+                              .map((author: any, index: number) => (
+                                <span key={author.name}>
+                                  {author.name}
+                                  {index === 0 && ' & '}
+                                </span>
+                              ))}
+                            {'...'}
+                          </>
+                        ) : (
+                          blogPosts[0].frontmatter.authors.map(
+                            (author: any) => (
+                              <span key={author.name}>{author.name}</span>
+                            ),
+                          )
+                        )}
+                      </p>
 
-                    <div className='text-slate-500 text-sm dark:text-slate-300'>
-                      <span>
-                        {blogPosts[0].frontmatter.date} &middot; {timeToRead}{' '}
-                        min read
-                      </span>
+                      <div className='text-slate-500 text-sm dark:text-slate-300'>
+                        <span>
+                          {blogPosts[0].frontmatter.date} &middot; {timeToRead}{' '}
+                          min read
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </div>
               </Link>
-
+              <div className='my-4'>
+                Explore our blogs. Their, you'll get latest information about
+                our blogs, articles, announcements. Let's get upto date with the
+                recent activities in the organization.
+              </div>
               <div>
                 <Link
-                  href={`/blog/posts/${blogPosts[0].slug}`}
-                  className=' w-full lg:w-1/2 rounded border-2 bg-primary text-white hover:bg-blue-700 transition-all duration-300 ease-in-out h-[40px] text-center pt-1 semi-bold flex items-center justify-center mx-auto dark:border-none'
+                  href={'/blog'}
+                  className=' w-full lg:w-1/2 rounded border-2 bg-primary text-white hover:bg-blue-700 transition-all duration-300 ease-in-out h-[40px] text-center semi-bold flex items-center justify-center dark:border-none'
                 >
-                  Read more{' '}
+                  Read all blogs{' '}
                 </Link>
               </div>
             </div>
             <div>
-              <div className='p-4 md:w-full mb-6 mr-4 dark:shadow-2xl'>
-                <h3 className='mb-2 font-semibold dark:text-slate-200'>
+              <div className='p-3 border dark:border-gray-600 rounded-md hover:scale-105 duration-200'>
+                <h3 className='mb-4 mt-2 font-semibold dark:text-slate-200'>
                   JSON Schema Community Meetings & Events
                 </h3>
                 <p className='mb-4 dark:text-slate-300'>
@@ -504,29 +505,49 @@ const Home = (props: any) => {
                   third Monday of the month at 12:00 PT.
                 </p>
                 <div className=''>
-                  <button className='max-w-[300px] w-full text-center rounded border-2 bg-primary hover:bg-blue-700 transition-all duration-300 ease-in-out text-white  h-[40px] mb-4 flex items-center justify-center mx-auto dark:border-none'>
+                  <button className='max-w-[300px] w-full text-center rounded border-2 bg-primary hover:bg-blue-700 transition-all duration-300 ease-in-out text-white  h-[40px] mb-4 flex items-center justify-center dark:border-none'>
                     <a href='https://github.com/orgs/json-schema-org/discussions/35'>
                       Open Community Working Meetings
                     </a>
                   </button>
-                  <button className='max-w-[200px] w-full text-center rounded border-2 bg-primary hover:bg-blue-700 transition-all duration-300 ease-in-out text-white  h-[40px] flex items-center justify-center mx-auto dark:border-none'>
+                  <button className='max-w-[200px] w-full text-center rounded border-2 bg-primary hover:bg-blue-700 transition-all duration-300 ease-in-out text-white  h-[40px] flex items-center justify-center dark:border-none'>
                     <a href='https://github.com/orgs/json-schema-org/discussions/34/'>
                       Office Hours
                     </a>
                   </button>
                 </div>
               </div>
-              <div className='p-2'>
+              <div className='p-2 border dark:border-gray-600 rounded-md hover:scale-105 duration-200 mt-6'>
                 <div>
-                  <Headline4>Upcoming events</Headline4>
+                  <h2 className='text-h5 mb-4 mt-2 font-semibold dark:text-slate-200'>
+                    Upcoming events
+                  </h2>{' '}
                   <div>
                     <ul>
                       {props.datesInfo.map((event: any, index: any) => (
                         <li key={index}>
-                          <div className='flex mb-4'>
-                            <p className='bg-btnOrange rounded-full w-10 h-10 p-2 text-center text-white mr-2'>
-                              {event.day}
-                            </p>
+                          <div className='flex mb-4 items-center gap-2'>
+                            <div className='h-12 overflow-hidden w-12 rounded-xl border border-gray-200 dark:border-gray-600 flex flex-col'>
+                              <div className='w-full h-5 bg-red-600'>
+                                <p className='text-sm text-center font-semibold text-white my-auto'>
+                                  {new Date(
+                                    event.time.replace(
+                                      /(\d+)(th|st|nd|rd)/,
+                                      '$1',
+                                    ),
+                                  )
+                                    .toLocaleDateString('en-US', {
+                                      weekday: 'short',
+                                    })
+                                    .toUpperCase()}
+                                </p>
+                              </div>
+                              <p className='h-7 text-center text-black dark:text-white'>
+                                {String(event.day).padStart(2, '0')}{' '}
+                              </p>
+                            </div>
+
+                            <div className='w-[1px] h-[25px] bg-gray-300 dark:border-gray-600'></div>
                             <div className='text-sm'>
                               <p>{event.title}</p>
                               <p>
@@ -542,7 +563,7 @@ const Home = (props: any) => {
 
                 <a
                   href='https://calendar.google.com/calendar/embed?src=json.schema.community%40gmail.com&ctz=Europe%2FLondon'
-                  className='w-full lg:w-1/2 rounded border-2 bg-primary text-white hover:bg-blue-700 transition-all duration-300 ease-in-out h-[40px] text-center flex items-center justify-center mx-auto dark:border-none'
+                  className='w-full lg:w-1/2 rounded border-2 bg-primary text-white hover:bg-blue-700 transition-all duration-300 ease-in-out h-[40px] text-center flex items-center justify-center dark:border-none'
                   target='_blank'
                   rel='noopener noreferrer'
                 >
@@ -818,16 +839,24 @@ const Home = (props: any) => {
                 )}
               </a>
               <a href='https://www.octue.com/' target='_blank' rel='noreferrer'>
-                <img src={octue_logo} className=' w-44' />
+                <Image
+                  src={octue_logo}
+                  className=' w-44'
+                  width={176}
+                  height={100}
+                  alt='octue'
+                />
               </a>
               <a
                 href='https://www.apideck.com/'
                 target='_blank'
                 rel='noreferrer'
               >
-                <img
+                <Image
                   src={apideck_logo}
                   className=' w-44'
+                  width={176}
+                  height={100}
                   alt='The Realtime Unified API
 for Accounting integrations'
                 />
@@ -837,9 +866,11 @@ for Accounting integrations'
                 target='_blank'
                 rel='noreferrer'
               >
-                <img
+                <Image
                   src={rxdb_logo}
                   className=' w-44'
+                  width={176}
+                  height={100}
                   alt='The local Database for JavaScript Applications'
                 />
               </a>
@@ -848,9 +879,11 @@ for Accounting integrations'
                 target='_blank'
                 rel='noreferrer'
               >
-                <img
+                <Image
                   src={wda_logo}
                   className=' w-44'
+                  width={176}
+                  height={100}
                   alt='best website design agencies'
                 />
               </a>
diff --git a/pages/overview/pro-help/index.page.tsx b/pages/overview/pro-help/index.page.tsx
index 5978c6a56..65f8913cf 100644
--- a/pages/overview/pro-help/index.page.tsx
+++ b/pages/overview/pro-help/index.page.tsx
@@ -7,6 +7,7 @@ import { SectionContext } from '~/context';
 import { DocsHelp } from '~/components/DocsHelp';
 import NextPrevButton from '~/components/NavigationButtons';
 import StyledMarkdown from '~/components/StyledMarkdown';
+import Image from 'next/image';
 
 interface ContractorLink {
   title: string;
@@ -105,7 +106,9 @@ export default function ProHelp({ contractorData }: ProHelpPageProps) {
                   <div className='flex flex-row items-center space-x-4'>
                     {/* Image */}
                     <div className='relative group flex-shrink-0'>
-                      <img
+                      <Image
+                        height={80}
+                        width={80}
                         src={`https://github.com/${contractor.github}.png`}
                         className='w-20 h-20 rounded-md border-4 border-blue-100 shadow-lg hover:border-blue-300 transition-all duration-300 dark:border-gray-600'
                         alt={`${contractor.name}'s avatar`}
@@ -214,7 +217,9 @@ export default function ProHelp({ contractorData }: ProHelpPageProps) {
                   {/* Image and Name */}
                   <div className='flex items-center space-x-8 pr-8'>
                     <div className='relative group'>
-                      <img
+                      <Image
+                        height={128}
+                        width={128}
                         src={`https://github.com/${contractor.github}.png`}
                         className='w-32 h-32 rounded-md border-4 border-blue-100 shadow-lg hover:border-blue-300 transition-all duration-300 dark:border-gray-600'
                         alt={`${contractor.name}'s avatar`}