diff --git a/components/navigation/communityItems.js b/components/navigation/communityItems.js
index e03aacf22510..1d7bc8223e98 100644
--- a/components/navigation/communityItems.js
+++ b/components/navigation/communityItems.js
@@ -12,7 +12,7 @@ export default [
     icon: IconOverview,
     title: 'Overview',
     href: '/community',
-    description: 'Connect, share and learn',
+    description: 'Connect, share, and learn.',
   },
   {
     icon: IconTools,
diff --git a/config/orbitData.json b/config/orbitData.json
new file mode 100644
index 000000000000..4719b6f1de28
--- /dev/null
+++ b/config/orbitData.json
@@ -0,0 +1,109 @@
+[
+[
+  {
+    "id": "item",
+    "img": "/img/homepage/reaction.png",
+    "alt": "reaction"
+  },
+  {
+    "id": "item",
+    "img": "/img/homepage/ale.jpeg",
+    "alt": "ale"
+  },
+  {
+    "id": "item",
+    "img": "/img/homepage/idea.png",
+    "alt": "idea"
+  },
+  {
+    "id": "item",
+    "img": "/img/homepage/lukasz-homepage-slack.jpg",
+    "alt": "lukasz"
+  },
+  {
+    "id": "item",
+    "img": "/img/homepage/comment.png",
+    "alt": "comment"
+  },
+  {
+    "id": "item",
+    "img": "/img/homepage/fran.png",
+    "alt": "fran"
+  }
+],
+[
+  {
+    "id": "item-2",
+    "img": "/img/homepage/jonas.jpeg",
+    "alt": "jonas"
+  },
+  {
+    "id": "item-2",
+    "img": "/img/homepage/slack.png",
+    "alt": "slack"
+  },
+  {
+    "id": "item-2",
+    "img": "/img/homepage/missy.jpeg",
+    "alt": "missy"
+  },
+  {
+    "id": "item-2",
+    "img": "/img/homepage/check.png",
+    "alt": "check"
+  },
+  {
+    "id": "item-2",
+    "img": "/img/homepage/eve-and-chan.png",
+    "alt": "eve-chan"
+  },
+  {
+    "id": "item-2",
+    "img": "/img/homepage/maciej.png",
+    "alt": "maciej"
+  },
+  {
+    "id": "item-2",
+    "img": "/img/homepage/git.png",
+    "alt": "git"
+  }
+],
+[
+  {
+    "id": "item-3",
+    "img": "/img/homepage/ace.jpeg",
+    "alt": "ace"
+  },
+  {
+    "id": "item-3",
+    "img": "/img/homepage/star.png",
+    "alt": "star"
+  },
+  {
+    "id": "item-3",
+    "img": "/img/homepage/barbano.jpeg",
+    "alt": "barbano"
+  },
+  {
+    "id": "item-3",
+    "img": "/img/homepage/dale.jpeg",
+    "alt": "dale"
+  },
+  {
+    "id": "item-3",
+    "img": "/img/homepage/kuda.jpeg",
+    "alt": "kuda"
+  },
+  {
+    "id": "item-3",
+    "img": "/img/homepage/yash.jpeg",
+    "alt": "yash"
+  },
+  {
+    "id": "item-3",
+    "img": "/img/homepage/sergio.jpeg",
+    "alt": "sergio"
+  }
+]
+
+]
\ No newline at end of file
diff --git a/pages/community/index.js b/pages/community/index.js
index 43dcd5ab721d..25a39fc48385 100644
--- a/pages/community/index.js
+++ b/pages/community/index.js
@@ -2,129 +2,16 @@
 import React from 'react';
 import Heading from '../../components/typography/Heading';
 import Button from '../../components/buttons/Button';
-import CommunityLayout from '../../components/layout/CommunityLayout';
 import IconRocket from '../../components/icons/Rocket';
 import NewsletterSubscribe from '../../components/NewsletterSubscribe';
-
-const orbit1 = [
-  {
-    id: "item",
-    img: "/img/homepage/reaction.png",
-    alt: "reaction",
-  },
-  {
-    id: "item",
-    img: "/img/homepage/ale.jpeg",
-    alt: "ale",
-  },
-  {
-    id: "item",
-    img: "/img/homepage/idea.png",
-    alt: "idea",
-  },
-  {
-    id: "item",
-    img: "/img/homepage/lukasz-homepage-slack.jpg",
-    alt: "lukasz",
-  },
-  {
-    id: "item",
-    img: "/img/homepage/comment.png",
-    alt: "comment",
-  },
-  {
-    id: "item",
-    img: "/img/homepage/fran.png",
-    alt: "fran",
-  },
-];
-
-const orbit2 = [
-  {
-    id: "item-2",
-    img: "/img/homepage/jonas.jpeg",
-    alt: "jonas",
-  },
-  {
-    id: "item-2",
-    img: "/img/homepage/slack.png",
-    alt: "slack",
-  },
-  {
-    id: "item-2",
-    img: "/img/homepage/missy.jpeg",
-    alt: "missy",
-  },
-  {
-    id: "item-2",
-    img: "/img/homepage/check.png",
-    alt: "check",
-  },
-  {
-    id: "item-2",
-    img: "/img/homepage/eve-and-chan.png",
-    alt: "eve-chan",
-  },
-  {
-    id: "item-2",
-    img: "/img/homepage/maciej.png",
-    alt: "maciej",
-  },
-  {
-    id: "item-2",
-    img: "/img/homepage/git.png",
-    alt: "git",
-  },
-];
-
-const orbit3 = [
-  {
-    id: "item-3",
-    img: "/img/homepage/ace.jpeg",
-    alt: "ace",
-  },
-  {
-    id: "item-3",
-    img: "/img/homepage/star.png",
-    alt: "star",
-  },
-  {
-    id: "item-3",
-    img: "/img/homepage/barbano.jpeg",
-    alt: "barbano",
-  },
-  {
-    id: "item-3",
-    img: "/img/homepage/dale.jpeg",
-    alt: "dale",
-  },
-  {
-    id: "item-3",
-    img: "/img/homepage/kuda.jpeg",
-    alt: "kuda",
-  },
-  {
-    id: "item-3",
-    img: "/img/homepage/yash.jpeg",
-    alt: "yash",
-  },
-  {
-    id: "item-3",
-    img: "/img/homepage/sergio.jpeg",
-    alt: "sergio",
-  },
-];
-
-const quickLinks = [
-  { title: "Advocate Programs", bg: "white", color: "primary-600" },
-  { title: "Events & Meetups", bg: "white", color: "primary-600" },
-  { title: "Community Members", bg: "white", color: "primary-600" },
-  { title: "Start Contributing", bg: "white", color: "primary-600" },
-];
+import GenericLayout from '../../components/layout/GenericLayout';
+import Link from 'next/link';
+import orbitData from '../../config/orbitData.json';
 
 function CommunityIndexPage() {
+  const image = '/img/social/website-card.png';
   const heading = (
-    <div className="text-center flex justify-center flex-col items-center">
+    <div className="text-center flex justify-center flex-col items-center mt-10 md:mt-0">
       <Heading
         className="countdown-text-gradient font-bold"
         level="h6"
@@ -135,7 +22,7 @@ function CommunityIndexPage() {
       <div className="mt-10">
         <Heading level="h1" typeStyle="heading-xl" className="">
           <span className="title block md:-mt-1 leading-[3rem]">
-            The home <br /> for developer <br /> communities
+            Welcome to the<br /> AsyncAPI Community
           </span>
         </Heading>
       </div>
@@ -144,33 +31,37 @@ function CommunityIndexPage() {
           level="h2"
           typeStyle="body-md"
           textColor="text-gray-700"
-          className="text-slate-500 text-xs md:text-sm"
+          className="text-slate-500 text-sm"
         >
-          We"re a community of great people who are passionate about AsyncAPI.
+          We're an OSS community that's passionate about AsyncAPI.
           Join us in building the future of Event Driven APIs by asking
-          questions, share ideas and build connection with each other
+          questions, sharing ideas, and building connections.
         </Heading>
       </div>
       <div className="mt-10">
         <Button
           className="block md:inline-block focus:outline-none"
-          text="Explore Discussions"
+          text="AsyncAPI Discussions"
+          href="https://github.com/orgs/asyncapi/discussions"
+          target="_blank"
           icon={<IconRocket className="w-5 h-5 -mb-1 ml-1" />}
         />
       </div>
     </div>
   );
   return (
-    <CommunityLayout
-      title="AsyncAPI Meetings"
+    <GenericLayout
+      title="AsyncAPI Community Meetings"
       description="The home for developer communities"
+      image={image}
+      hideBanner={true}
       wide
     >
       <div className="md:hidden mt-15">{heading}</div>
       <div className="overflow-hidden orbits">
         <div className="orbit-container">
           <div id="first-orbit" className="orbit">
-            {orbit1.map((orbit) => (
+            {orbitData[0].map((orbit) => (
               <div key={orbit.id} className={orbit.id}>
                 <img src={orbit.img} alt={orbit.alt} className="orbit-img" />
               </div>
@@ -180,14 +71,14 @@ function CommunityIndexPage() {
             </div>
           </div>
           <div id="second-orbit" className="orbit">
-            {orbit2.map((orbit) => (
+            {orbitData[1].map((orbit) => (
               <div key={orbit.id} className={orbit.id}>
                 <img src={orbit.img} alt={orbit.alt} />
               </div>
             ))}
           </div>
           <div id="third-orbit" className="orbit">
-            {orbit3.map((orbit) => (
+            {orbitData[2].map((orbit) => (
               <div key={orbit.id} className={orbit.id}>
                 <img src={orbit.img} alt={orbit.alt} />
               </div>
@@ -195,20 +86,18 @@ function CommunityIndexPage() {
           </div>
         </div>
       </div>
-      <div className="text-center relative md:h-half-screen z-40 mt-15 md:mt-0">
-        <div className="gh-bg absolute">
-          <img
-            className="gh-img"
-            src="/img/homepage/discuss-page.png"
-            alt="github-discussion"
-          />
-        </div>
+      <div className="gh-img mt-10 md:mt-0 w-full h-auto w-full object-contain">
+        <img
+          className="gh-img object-contain"
+          src="/img/homepage/discuss-page.png"
+          alt="github-discussion"
+        />
       </div>
-      <div className="text-center flex justify-center flex-col items-center mt-72">
-        <Heading level="h1" typeStyle="heading-xl" className="z-40">
+      <div className="text-center flex justify-center flex-col items-center mt-[5rem]">
+        <Heading level="h1" typeStyle="heading-xl">
           Home of #CommunityOps
         </Heading>
-        <div className="w-3/6 z-40">
+        <div>
           <Heading
             level="h2"
             typeStyle="body-lg"
@@ -219,180 +108,174 @@ function CommunityIndexPage() {
             everywhere.
           </Heading>
         </div>
-        <div className="mt-10 md:mt-32 z-40">
-          <ul className="grid grid-cols-2 gap-5 sm:grid-cols-2 lg:grid-cols-4">
-            {quickLinks.map((link) => (
-              <li
-                key={link.title}
-                className={`h-44 w-54 md:h-72 md:w-72 justify-between border border-primary-100 shadow-xl hover:shadow-lg transition-all duration-300 ease-in-out rounded-xl px-3 pb-5 bg-${link.bg} text-left flex justify-end items-end`}
-              >
-                <h1
-                  className={`text:lg md:text-3xl font-black text-${link.color}`}
-                >
-                  {link.title}
-                </h1>
-              </li>
-            ))}
-          </ul>
-        </div>
-        <div className="z-40 mt-28 bg-white w-full h-full-screen md:h-130 rounded-lg shadow-xl md:flex md:justify-between">
-          <div className="p-10 h-half-screen md:flex justify-between md:w-2/5 md:h-full flex-col text-center md:text-left">
-            <div>
-              <Heading
-                level="h2"
-                typeStyle="heading-md"
-                textColor="text-gray-200"
-              >
-                All community info, tracked
-              </Heading>
-            </div>
-            <div>
-              <Heading
-                level="h2"
-                typeStyle="heading-lg"
-                className="mt-10 md:mt-0"
-              >
-                Community Platform
-              </Heading>
-              <Heading
-                level="h2"
-                typeStyle="body-lg"
-                textColor="text-gray-700"
-                className="text-slate-500 text-sm mt-10"
-              >
-                AsyncAPI’s incredible community of developers, designers,
-                technical writers, hail from over 83 countries, actively
-                contributing, collaborating and mentoring others to build with
-                AsyncAPI.
-              </Heading>
-              <div className="mt-10"></div>
+      </div>
+      <div className="z-40 mt-10 bg-white w-full md:h-130 rounded-lg shadow-xl md:flex md:justify-between">
+        <div className="p-10 flex justify-between w-full md:w-2/5 h-auto flex-col text-center md:text-left">
+          <div>
+            <Heading
+              level="h2"
+              typeStyle="heading-md"
+              textColor="text-purple-300"
+            >
+              Thanking our AsyncAPI Ambassadors
+            </Heading>
+          </div>
+          <div>
+            <Heading level="h2" typeStyle="heading-lg" className="mt-10">
+              Ambassador Programs
+            </Heading>
+            <Heading
+              level="h2"
+              typeStyle="body-lg"
+              textColor="text-gray-700"
+              className="text-slate-500 text-sm mt-10"
+            >
+              Launch OSS community programs that your community is proud to
+              participate in. Let's build thriving OSS communities together!
+            </Heading>
+            <div className="mt-10">
+              <Button
+                text="Become an ambassador"
+                buttonSize="medium"
+                href="/community/ambassador-program"
+              />
             </div>
           </div>
-          <div className="w-full h-half-screen md:h-full md:w-3/6 md:flex md:justify-end bg-channelCover md:bg-left bg-cover"></div>
         </div>
-
-        <div className="z-40 mt-10 w-full h-full-screen md:h-130 shadow-xl md:flex md:justify-between">
-          <div className="p-10 bg-primary-500 rounded-t-lg md:rounded-t-none md:rounded-l-lg md:flex justify-between w-full md:w-3/5 h-half-screen md:h-full md:flex-col text-center md:text-left">
-            <div className="">
-              <Heading
-                level="h2"
-                typeStyle="heading-md"
-                textColor="text-gray-400"
-              >
-                Community heartbeat
-              </Heading>
-            </div>
-            <div>
-              <Heading
-                level="h2"
-                typeStyle="heading-lg"
-                textColor="text-white"
-                className="mt-10 md:mt-0"
-              >
-                Events & Meetups
-              </Heading>
-              <Heading
-                level="h2"
-                typeStyle="body-lg"
-                textColor="text-white"
-                className="text-slate-500 text-sm mt-10"
-              >
-                Join a AsyncAPI event, from anywhere in the world. Learn more
-                about our live and recorded events below. You can also sign up
-                to our community newsletter to stay up-to-date on our events.
-              </Heading>
-              <div className="mt-10"></div>
+        <div className="w-full h-fit-content md:w-3/6 flex justify-end rounded-lg">
+          <img
+            src="/img/homepage/ambassador.png"
+            alt="slack-cover"
+            className="md:rounded-r-lg object-fit "
+          />
+        </div>
+      </div>
+      <div className="z-40 mt-10 w-full md:h-130 shadow-xl md:flex md:justify-between">
+        <div className="p-10 bg-primary-500 rounded-t-lg md:rounded-t-none md:rounded-l-lg md:flex justify-between w-full md:w-3/5 md:h-full md:flex-col text-center md:text-left">
+          <div className="">
+            <Heading
+              level="h2"
+              typeStyle="heading-md"
+              textColor="text-purple-200"
+            >
+              Community heartbeat
+            </Heading>
+          </div>
+          <div>
+            <Heading
+              level="h2"
+              typeStyle="heading-lg"
+              textColor="text-white"
+              className="mt-10 md:mt-0"
+            >
+              AsyncAPI Community Meetings & Events
+            </Heading>
+            <Heading
+              level="h2"
+              typeStyle="body-lg"
+              textColor="text-white"
+              className="text-sm mt-10"
+            >
+              Join an AsyncAPI meeting from anywhere in the world! We host both
+              live and recorded community events. You can also sign up for
+              our community newsletter to stay up-to-date on all meetings and events.
+            </Heading>
+            <div className="mt-10">
+              <Button
+                text="Explore more events"
+                buttonSize="medium"
+                href="/community/events"
+                bgClassName="bg-secondary-500 hover:bg-secondary-400"
+              />
             </div>
           </div>
-          <div className="w-full h-half-screen md:h-full md:w-3/5 flex relative justify-end  bg-eventCover bg-cover bg-center">
-            <div className="bg-primary-500 w-full opacity-25 rounded-b-lg md:rounded-b-none md:rounded-r-lg" />
-            <div className="absolute h-full w-full flex flex-col md:justify-center items-end item-right">
-              <div className="w-4/5 mt-10">
-                <div className="bg-white w-full p-2 md:p-4 rounded-l-md">
-                  <div className="flex">
-                    <div className="flex justify-center flex-col w-24 md:w-40 bg-pink-400 p-1 md:p-4 rounded-md text-xs md:text-sm font-semibold text-white">
-                      <span>Conference</span>
-                    </div>
-                    <div className="ml-4 text-left">
-                      <h1 className="text-md md:text-xl">
-                        AsyncAPI Conference
-                      </h1>
-                      <span className="text-gray-500 text-xs md:text-sm">
-                        3rd Nov, 2022 - 5th Nov, 2022
-                      </span>
-                    </div>
+        </div>
+        <div className="w-full md:h-full md:w-3/5 flex relative justify-end  bg-eventCover bg-cover bg-center">
+          <div className="bg-primary-500 w-full opacity-25 rounded-b-lg md:rounded-b-none md:rounded-r-lg" />
+          <div className="absolute h-full w-full hidden md:flex justify-end">
+            <div className="w-4/5 mt-10">
+              <div className="bg-white w-full p-2 md:p-4 rounded-l-md">
+                <div className="flex">
+                  <div className="flex justify-center flex-col w-24 md:w-40 bg-pink-400 p-1 md:p-4 rounded-md text-xs md:text-sm font-semibold text-white">
+                    <span className="text-center">Conference</span>
                   </div>
-                  <div
-                    className="w-full bg-gray-200 mt-4"
-                    style={{ height: "1px" }}
-                  />
-                  <div className="flex mt-2 justify-between">
-                    <div className="text-left border-r-2 border-r-gray-400 pr-5">
-                      <h1 className="text-sm md:text-2xl">91</h1>
-                      <div className="text-gray-500 text-xs md:text-sm">
-                        Days left
-                      </div>
+                  <div className="ml-4 text-left">
+                    <h1 className="text-md md:text-xl">AsyncAPI Conference</h1>
+                    <span className="text-gray-500 text-xs md:text-sm">
+                      3rd Nov, 2022 - 5th Nov, 2022
+                    </span>
+                  </div>
+                </div>
+                <div
+                  className="w-full bg-gray-200 mt-4"
+                  style={{ height: '1px' }}
+                />
+                <div className="flex mt-2 justify-between">
+                  <div className="text-left border-r-2 border-r-gray-400 pr-5">
+                    <h1 className="text-sm md:text-2xl">91</h1>
+                    <div className="text-gray-500 text-xs md:text-sm">
+                      Days left
                     </div>
-                    <div className="text-left border-r-2 border-r-gray-400 pr-5">
-                      <h1 className="text-sm md:text-2xl">40</h1>
-                      <div className="text-gray-500 text-xs md:text-sm">
-                        Talks
-                      </div>
+                  </div>
+                  <div className="text-left border-r-2 border-r-gray-400 pr-5">
+                    <h1 className="text-sm md:text-2xl">40</h1>
+                    <div className="text-gray-500 text-xs md:text-sm">
+                      Talks
                     </div>
-                    <div className="text-left border-r-2 border-r-gray-400 pr-5">
-                      <h1 className="text-sm md:text-2xl">1.4k</h1>
-                      <div className="text-gray-500 text-xs md:text-sm">
-                        Attendees
-                      </div>
+                  </div>
+                  <div className="text-left border-r-2 border-r-gray-400 pr-5">
+                    <h1 className="text-sm md:text-2xl">1.4k</h1>
+                    <div className="text-gray-500 text-xs md:text-sm">
+                      Attendees
                     </div>
-                    <div className="text-left">
-                      <h1 className="text-sm md:text-2xl">91</h1>
-                      <div className="text-gray-500 text-xs md:text-sm">
-                        Days left
-                      </div>
+                  </div>
+                  <div className="text-left">
+                    <h1 className="text-sm md:text-2xl">91</h1>
+                    <div className="text-gray-500 text-xs md:text-sm">
+                      Days left
                     </div>
                   </div>
                 </div>
-                <div className="bg-white mt-10 w-full p-2 md:p-4 rounded-l-md">
-                  <div className="flex">
-                    <div className="flex w-24 md:w-40 justify-center flex-col w-24 md:w-40 bg-secondary-500 p-1 md:p-4 rounded-md text-xs md:text-sm font-semibold text-white">
-                      <span>Spec 3.0</span>
-                    </div>
-                    <div className="ml-4 text-left">
-                      <h1 className="text-md md:text-xl">Spec 3.0</h1>
-                      <span className="text-gray-500 text-xs md:text-sm">
-                        3rd Nov, 2022 - 5th Nov, 2022
-                      </span>
-                    </div>
+              </div>
+              <div className="bg-white mt-10 w-full p-2 md:p-4 rounded-l-md">
+                <div className="flex">
+                  <div className="flex w-24 md:w-40 justify-center flex-col w-24 md:w-40 bg-secondary-500 p-1 md:p-4 rounded-md text-xs md:text-sm font-semibold text-white">
+                    <span className="text-center">Spec 3.0</span>
                   </div>
-                  <div
-                    className="w-full bg-gray-200 mt-4"
-                    style={{ height: "1px" }}
-                  />
-                  <div className="flex mt-2 justify-between">
-                    <div className="text-left border-r-2 border-r-gray-400 pr-5">
-                      <h1 className="text-sm md:text-2xl">91</h1>
-                      <div className="text-gray-500 text-xs md:text-sm">
-                        Days left
-                      </div>
+                  <div className="ml-4 text-left">
+                    <h1 className="text-md md:text-xl">Spec 3.0</h1>
+                    <span className="text-gray-500 text-xs md:text-sm">
+                      3rd Nov, 2022 - 5th Nov, 2022
+                    </span>
+                  </div>
+                </div>
+                <div
+                  className="w-full bg-gray-200 mt-4"
+                  style={{ height: '1px' }}
+                />
+                <div className="flex mt-2 justify-between">
+                  <div className="text-left border-r-2 border-r-gray-400 pr-5">
+                    <h1 className="text-sm md:text-2xl">91</h1>
+                    <div className="text-gray-500 text-xs md:text-sm">
+                      Days left
                     </div>
-                    <div className="text-left border-r-2 border-r-gray-400 pr-5">
-                      <h1 className="text-sm md:text-2xl">40</h1>
-                      <div className="text-gray-500 text-xs md:text-sm">
-                        Talks
-                      </div>
+                  </div>
+                  <div className="text-left border-r-2 border-r-gray-400 pr-5">
+                    <h1 className="text-sm md:text-2xl">40</h1>
+                    <div className="text-gray-500 text-xs md:text-sm">
+                      Talks
                     </div>
-                    <div className="text-left border-r-2 border-r-gray-400 pr-5">
-                      <h1 className="text-sm md:text-2xl">1.4k</h1>
-                      <div className="text-gray-500 text-xs md:text-sm">
-                        Attendees
-                      </div>
+                  </div>
+                  <div className="text-left border-r-2 border-r-gray-400 pr-5">
+                    <h1 className="text-sm md:text-2xl">1.4k</h1>
+                    <div className="text-gray-500 text-xs md:text-sm">
+                      Attendees
                     </div>
-                    <div className="text-left">
-                      <h1 className="text-sm md:text-2xl">91</h1>
-                      <div className="text-gray-500 text-xs md:text-sm">
-                        Days left
-                      </div>
+                  </div>
+                  <div className="text-left">
+                    <h1 className="text-sm md:text-2xl">91</h1>
+                    <div className="text-gray-500 text-xs md:text-sm">
+                      Days left
                     </div>
                   </div>
                 </div>
@@ -400,122 +283,111 @@ function CommunityIndexPage() {
             </div>
           </div>
         </div>
-        <div className="community-pattern absolute"></div>
-        <div className="z-40 mt-10 bg-white w-full md:h-130 rounded-lg shadow-xl md:flex md:justify-between">
-          <div className="p-10 flex justify-between w-full md:w-2/5 h-full flex-col text-center md:text-left">
-            <div>
-              <Heading
-                level="h2"
-                typeStyle="heading-md"
-                textColor="text-gray-200"
-              >
-                Support your rockstars
-              </Heading>
-            </div>
-            <div>
-              <Heading level="h2" typeStyle="heading-lg" className="mt-10">
-                Advocate Programs
-              </Heading>
-              <Heading
-                level="h2"
-                typeStyle="body-lg"
-                textColor="text-gray-700"
-                className="text-slate-500 text-sm mt-10"
-              >
-                Launch community advocate programs that your members are proud
-                to be a part of. Powerful ambassador engagement analytics make
-                it easy to track and reward you contributors and build thriving
-                communities.
-              </Heading>
-              <div className="mt-10"></div>
-            </div>
-          </div>
-          <div className="w-full h-half-screen md:h-full md:w-3/6 flex justify-end rounded-lg">
-            <img
-              src="/img/homepage/ambassador.jpeg"
-              alt="slack-cover"
-              className="rounded-r-lg"
-            />
-          </div>
-        </div>
-        <div className="mt-10 md:flex justify-between w-full h-full-screen md:h-130">
-          <div className="w-full md:w-3/4 mr-5 rounded-lg relative shadow-xl bg-tutorialCover bg-cover h-half-screen md:h-full bg-center">
-            <div className="w-full h-full bg-primary-500 opacity-25 absolute rounded-lg" />
+      </div>
+      <div className="mt-10 md:flex justify-between w-full h-half-screen">
+        <div className="h-full rounded-lg shadow-lg bg-roadmapCover bg-cover bg-center relative md:w-[49%]">
+          <a
+            href="https://github.com/asyncapi/community/discussions/513"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <div className="w-full h-full absolute rounded-lg" />
             <div className="w-full h-full flex flex-col justify-end absolute">
-              <div className="bg-primary-400 text-left rounded-b-lg p-5 ">
+              <div className="bg-primary-600 text-left rounded-b-lg p-5 ">
                 <Heading
                   level="h2"
-                  typeStyle="heading-lg"
+                  typeStyle="heading-md"
                   className="text-white"
                 >
-                  Browse our Tutorials
+                  Community Goals 2023
                 </Heading>
                 <Heading
                   level="h2"
-                  typeStyle="body-lg"
-                  textColor="text-gray-900"
-                  className="text-slate-500 text-sm"
+                  typeStyle="body-md"
+                  textColor="text-white"
+                  className="text-sm"
                 >
-                  We have thousands of tutorials covering a wide range of
-                  topics. Jump into our catalog!
+                  Look into the AsyncAPI community building/maintenance goals
+                  for 2023 and help us improve.
                 </Heading>
               </div>
             </div>
-          </div>
-          <div className="h-half-screen md:h-full w-full md:w-2/4 md:flex md:flex-col md:justify-around mt-10 md:mt-0">
-            <div className="h-4/6 md:h-beforeHalf rounded-lg shadow-lg bg-usecases bg-cover bg-center relative">
-              <div className="w-full h-full bg-pink-500 opacity-25 absolute rounded-lg" />
+          </a>
+        </div>
+        <div className="h-full cursor-pointer rounded-lg shadow-lg bg-usecases bg-cover bg-center mt-10 relative md:w-[49%] md:mt-0">
+          <Link href="/community/contributors">
+            <div>
+              <div className="w-full h-full absolute rounded-lg" />
               <div className="w-full h-full flex flex-col justify-end absolute">
-                <div className="bg-pink-300 text-left rounded-b-lg p-5 ">
+                <div className="bg-yellow-600 text-left rounded-b-lg p-5 ">
                   <Heading
                     level="h2"
                     typeStyle="heading-md"
                     className="text-white"
                   >
-                    Explore our Use-cases
+                    Recognize AsyncAPI OSS contributors
                   </Heading>
                   <Heading
                     level="h2"
                     typeStyle="body-md"
-                    textColor="text-gray-900"
-                    className="text-slate-500 text-sm"
+                    textColor="text-white"
+                    className="text-sm"
                   >
-                    We have thousands of tutorials covering a wide range of
-                    topics. Jump into our catalog!
+                    Recognize the people who inspire and contribute
+                    to our OSS community.
                   </Heading>
                 </div>
               </div>
             </div>
-            <div className="h-4/6 md:h-beforeHalf mt-5 rounded-lg shadow-lg bg-roadmapCover bg-cover md:h-full bg-center relative">
-              <div className="w-full h-full bg-secondary-500 opacity-25 absolute rounded-lg" />
-              <div className="w-full h-full flex flex-col justify-end absolute">
-                <div className="bg-secondary-300 text-left rounded-b-lg p-5 ">
-                  <Heading
-                    level="h2"
-                    typeStyle="heading-md"
-                    className="text-white"
-                  >
-                    Look into our Roadmap
-                  </Heading>
-                  <Heading
-                    level="h2"
-                    typeStyle="body-md"
-                    textColor="text-gray-900"
-                    className="text-slate-500 text-sm"
-                  >
-                    We have thousands of tutorials covering a wide range of
-                    topics. Jump into our catalog!
-                  </Heading>
-                </div>
-              </div>
+          </Link>
+        </div>
+      </div>
+      <div className="z-40 mt-[30rem] md:mt-10 bg-white w-full md:h-130 rounded-lg shadow-xl md:flex md:justify-between">
+        <div className="p-10 md:flex justify-between md:w-2/5 md:h-full flex-col text-center md:text-left">
+          <div>
+            <Heading
+              level="h2"
+              typeStyle="heading-md"
+              textColor="text-purple-300"
+            >
+              All community info, tracked
+            </Heading>
+          </div>
+          <div>
+            <Heading
+              level="h2"
+              typeStyle="heading-lg"
+              className="mt-10 md:mt-0"
+            >
+              AsyncAPI Slack
+            </Heading>
+            <Heading
+              level="h2"
+              typeStyle="body-lg"
+              textColor="text-gray-700"
+              className="text-slate-500 text-sm mt-10"
+            >
+              AsyncAPI’s incredible community of developers, designers,
+              technical writers, and more hail from over 83 countries. We actively
+              contribute, collaborate, and mentor others on how to build with
+              AsyncAPI.
+            </Heading>
+            <div className="mt-10">
+              <Button
+                text="Join AsyncAPI slack"
+                buttonSize="medium"
+                href="https://asyncapi.com/slack-invite"
+                target="_blank"
+              />
             </div>
           </div>
         </div>
+        <div className="w-full h-half-screen hidden md:block md:h-full md:w-3/6 md:flex md:justify-end bg-channelCover md:bg-left bg-cover"></div>
       </div>
-      <div className="mt-72 md:mt-36 flex justify-center">
-        <NewsletterSubscribe formName="form 2" />
+      <div className="bg-dark py-12 mt-8 md:mt-20 rounded-lg">
+        <NewsletterSubscribe dark />
       </div>
-    </CommunityLayout>
+    </GenericLayout>
   );
 }
 
diff --git a/public/img/homepage/ambassador.jpeg b/public/img/homepage/ambassador.jpeg
deleted file mode 100644
index c5459a069b26..000000000000
Binary files a/public/img/homepage/ambassador.jpeg and /dev/null differ
diff --git a/public/img/homepage/ambassador.png b/public/img/homepage/ambassador.png
new file mode 100644
index 000000000000..f63d47ec5e21
Binary files /dev/null and b/public/img/homepage/ambassador.png differ