diff --git a/components/CaseStudyCard.tsx b/components/CaseStudyCard.tsx
index 8156714a57a6..035c4af723cc 100644
--- a/components/CaseStudyCard.tsx
+++ b/components/CaseStudyCard.tsx
@@ -19,7 +19,7 @@ export default function CaseStudyCard({ studies = [] }: ICaseStudyCardProps) {
   }
 
   return (
-    <div className='flex flex-wrap gap-3 pt-10 justify-center lg:gap-8 lg:text-center'>
+    <div className='flex flex-wrap justify-center gap-3 pt-10 lg:gap-8 lg:text-center'>
       {studies.map((study, index) => (
         <a key={index} className='lg:w-[30%]' href={`casestudies/${study.id}`}>
           <div
diff --git a/components/layout/CommunityLayout.tsx b/components/layout/CommunityLayout.tsx
new file mode 100644
index 000000000000..1fdee1751fe7
--- /dev/null
+++ b/components/layout/CommunityLayout.tsx
@@ -0,0 +1,332 @@
+import { UserGroupIcon } from '@heroicons/react/outline';
+import { sortBy } from 'lodash';
+import React from 'react';
+
+import type { Ambassador, Tsc } from '@/types/pages/community/Community';
+
+import tscBoardList from '../../config/TSC_BOARD_MEMBERS.json';
+import IconGithub from '../icons/Github';
+import IconLinkedIn from '../icons/LinkedIn';
+import IconTwitter from '../icons/Twitter';
+import NewsletterSubscribe from '../NewsletterSubscribe';
+import TextLink from '../typography/TextLink';
+import GenericLayout from './GenericLayout';
+
+interface SocialLinkProps {
+  href: string;
+  social: string;
+}
+
+export enum Membership {
+  TSC = 'TSC',
+  BOARD = 'Board'
+}
+
+interface TSCUser {
+  user: Tsc | Ambassador;
+  membership?: Membership;
+}
+
+/**
+ * @description This function adds additional information to the user object having Board (TSC or Ambassador) data.
+ *
+ * @param user The user object having Board (TSC or Ambassador) data.
+ * @returns The user object with additional information.
+ */
+function addAdditionalUserInfo(user: Tsc | Ambassador) {
+  const userData: Tsc | Ambassador = {
+    ...user
+  };
+
+  // if username is not present, use the github username
+  if (!userData.name) {
+    userData.name = userData.github;
+  }
+
+  // add social links
+  if (userData.github) {
+    userData.github = `https://www.github.com/${userData.github}`;
+  }
+  if (userData.linkedin) {
+    userData.linkedin = `https://www.linkedin.com/in/${userData.linkedin}`;
+  }
+  if (userData.twitter) {
+    userData.twitter = `https://www.twitter.com/${userData.twitter}`;
+  }
+
+  // add avatar url
+  // github redirects to avatar url using `https://www.github.com/<username>.png`
+  userData.avatarUrl = `${userData.github}.png`;
+
+  // make repo links
+  if ('repos' in userData) {
+    userData.repos = userData.repos.map((repoName: string) => ({
+      name: repoName,
+      url: `https://www.github.com/asyncapi/${repoName}`
+    }));
+  }
+
+  return userData;
+}
+
+/**
+ * @description This function returns the SVG component for Twitter.
+ *
+ * @returns The Twitter SVG component.
+ */
+function TwitterSVG() {
+  return (
+    <div className='size-5'>
+      <IconTwitter className='hover:fill-black' />
+    </div>
+  );
+}
+
+/**
+ * @description This function returns the SVG component for GitHub.
+ *
+ * @returns The GitHub SVG component.
+ */
+function GitHubSVG() {
+  return (
+    <div className='size-5'>
+      <IconGithub className='hover:fill-black' />
+    </div>
+  );
+}
+
+/**
+ * @description This function returns the SVG component for LinkedIn.
+ *
+ * @returns The LinkedIn SVG component.
+ */
+function LinkedInSVG() {
+  return (
+    <div className='size-5'>
+      <IconLinkedIn className='hover:fill-linkedin' />
+    </div>
+  );
+}
+
+const socials: { [key: string]: React.JSX.Element } = {
+  GitHub: <GitHubSVG />,
+  Twitter: <TwitterSVG />,
+  Linkedin: <LinkedInSVG />
+};
+
+/**
+ * @description This function returns the social link component.
+ *
+ * @param {SocialLinkProps} props - The props for the social link component.
+ * @param {string} props.href - The URL for the social link.
+ * @param {string} props.social - The social media platform.
+ */
+function SocialLink({ href, social }: SocialLinkProps) {
+  return (
+    <li>
+      <a
+        data-testid='Social-Links'
+        href={href}
+        className='text-gray-600 hover:text-gray-500'
+        target='_blank'
+        rel='noreferrer noopener'
+      >
+        <span className='sr-only'>{social}</span>
+        {socials[social]}
+      </a>
+    </li>
+  );
+}
+
+/**
+ * @description This function returns the user work status component.
+ *
+ * @param {TSCUser} props - The props for the user work status component.
+ * @param {Tsc | Ambassador} props.user - The user object having Board (TSC or Ambassador) data.
+ */
+function UserWorkStatus({ user }: TSCUser) {
+  if ('availableForHire' in user && user.availableForHire) {
+    return (
+      <div
+        data-testid='status-element'
+        className='text-md inline-flex items-center rounded-full bg-green-100 px-3 py-1 font-medium leading-5 text-green-800'
+      >
+        Available for hire
+      </div>
+    );
+  }
+  if (user.company) {
+    return (
+      <div
+        data-testid='status-element'
+        className='text-md inline-flex items-center rounded-full bg-orange-100 px-3 py-1 font-medium leading-5 text-orange-800'
+      >
+        {user.company}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      data-testid='status-element'
+      className='text-md inline-flex items-center rounded-full bg-blue-100 px-3 py-1 font-medium leading-5 text-blue-800'
+    >
+      Individual Member
+    </div>
+  );
+}
+
+/**
+ * @description This function returns the user info component.
+ *
+ * @param {TSCUser} props - The props for the user info component.
+ * @param {Tsc} props.user - The user object having Board (TSC or Ambassador) data.
+ * @param {Membership} props.membership - determines the community members belong to board or TSC (ambassadors & maintainers).
+ */
+function UserInfo({ user, membership }: TSCUser) {
+  const githubUsername = user.github.split('/').pop();
+
+  return (
+    <li
+      data-testid='UserInfo-list'
+      className='rounded-md border border-gray-200 p-4 text-center shadow-md'
+      key={user.github}
+    >
+      <div className='flex flex-row'>
+        <img
+          data-testid='UserInfo-avatar'
+          src={user.avatarUrl}
+          alt={user.name}
+          className='mx-auto size-20 rounded-full xl:size-28'
+        />
+        <div className='flex-1'>
+          <div className='my-3 text-lg font-bold' data-testid='UserInfo-name'>
+            {user.name}
+          </div>
+          <UserWorkStatus user={user} />
+          <ul role='list' className='my-5 flex justify-center space-x-5'>
+            <SocialLink href={user.github} social='GitHub' />
+            {user.twitter ? <SocialLink href={user.twitter} social='Twitter' /> : null}
+            {user.linkedin ? <SocialLink href={user.linkedin} social='Linkedin' /> : null}
+          </ul>
+        </div>
+      </div>
+      {'repos' in user ? (
+        <div className='flex flex-wrap items-center gap-1'>
+          Maintainer of:
+          {user.repos.map((repo: { name: string; url: string }) => (
+            <a
+              data-testid='Repo-Links'
+              key={repo.name}
+              className='inline-flex items-center rounded-full bg-cyan-100 px-3 py-0.5 text-xs font-medium leading-5 text-cyan-800 hover:bg-cyan-300'
+              href={repo.url}
+            >
+              {repo.name}
+            </a>
+          ))}
+        </div>
+      ) : (
+        // fallback to ambassador page
+        <TextLink
+          href={`/community/ambassadors/${githubUsername}`}
+          className='flex font-normal text-base text-blue-500 no-underline hover:text-sky-400'
+        >
+          AsyncAPI Ambassador
+        </TextLink>
+      )}
+      <div className='flex justify-end mt-4'>
+        {membership === Membership.BOARD && user.isBoardChair && (
+          <a
+            data-testid='Chairperson'
+            className='inline-flex items-center rounded-full bg-amber-600 px-3 py-0.5 text-xs font-medium leading-5 text-amber-100'
+          >
+            <UserGroupIcon className='w-[20px] pr-1' />
+            Chairperson
+          </a>
+        )}
+      </div>
+    </li>
+  );
+}
+
+/**
+ * @description This function returns the question card component.
+ */
+function QuestionCard() {
+  return (
+    <li className='rounded-md border border-gray-200 p-4 px-6 py-10 text-center shadow-md' data-testid='Question-card'>
+      <img
+        data-testid='Question-card-img'
+        src='/img/avatars/questionmark.webp'
+        alt='Question Mark'
+        className='mx-auto size-20 rounded-full xl:size-28'
+      />
+      <div className='my-4'>
+        Want to become a member? Follow this
+        <TextLink
+          href='https://github.com/asyncapi/community/blob/master/TSC_MEMBERSHIP.md'
+          target='_blank'
+          className='font-normal text-base text-sky-600 no-underline hover:text-sky-400'
+        >
+          Link
+        </TextLink>
+        &nbsp;to know more!
+      </div>
+    </li>
+  );
+}
+
+interface ICommunityLayout {
+  membership: Membership;
+  children: React.ReactNode;
+}
+
+/**
+ * @description This function returns the TSC or Board component.
+ * @param {Membership} props.membership - determines the community members belong to board or TSC (ambassadors & maintainers).
+ */
+export default function CommunityLayout({ children, membership }: ICommunityLayout) {
+  const description = `Meet the current AsyncAPI ${membership} members and learn how you can become one.`;
+  const image = `/img/social/community-${membership.toLowerCase()}.webp`;
+
+  const isTSCMembership = membership === Membership.TSC;
+  const tscBoardMembers = sortBy(
+    tscBoardList.map((user) => addAdditionalUserInfo(user)),
+    ['name']
+  ).filter((user) => (isTSCMembership ? user.isTscMember : user.isBoardMember || user.isBoardChair));
+
+  return (
+    <GenericLayout
+      title={isTSCMembership ? 'Technical Steering Committee' : 'Board Committee'}
+      description={description}
+      image={image}
+      wide
+    >
+      <div className='relative mx-auto px-4 py-12 sm:px-6 lg:px-8'>
+        {children}
+        {isTSCMembership && (
+          <div className='mt-8'>
+            <NewsletterSubscribe
+              type='TSC Voting'
+              title='Get notified when TSC is voting'
+              subtitle="You'll receive an email whenever someone requests the TSC to vote."
+            />
+          </div>
+        )}
+        <div className='mt-10'>
+          <div className='text-primary-800 mb-5 text-center'>
+            <h3 className='text-2xl font-semibold'>Current {membership} members</h3>
+            <span className='font-thin text-sm'>(in alphabetical order)</span>
+          </div>
+
+          <ul role='list' className='space-y-4 sm:grid sm:grid-cols-2 sm:gap-6 sm:space-y-0 lg:grid-cols-3 lg:gap-8'>
+            {tscBoardMembers.map((user) => (
+              <UserInfo key={user.github} user={user} membership={membership} />
+            ))}
+            <QuestionCard />
+          </ul>
+        </div>
+      </div>
+    </GenericLayout>
+  );
+}
diff --git a/components/navigation/FlyoutMenu.tsx b/components/navigation/FlyoutMenu.tsx
index fc5ab7d41a4e..d83cf2f2611f 100644
--- a/components/navigation/FlyoutMenu.tsx
+++ b/components/navigation/FlyoutMenu.tsx
@@ -14,7 +14,7 @@ interface FlyoutProps {
 export default function Flyout({ items = [] }: FlyoutProps) {
   return (
     <div
-      className='absolute z-50 -ml-4 w-screen max-w-md pt-3 md:ml-12 md:-translate-x-1/2 lg:left-1/2 lg:max-w-3xl lg:-translate-x-1/2'
+      className='absolute z-50 -ml-4 md:h-[80vh] overflow-x-scroll w-screen max-w-md pt-3 md:ml-12 md:-translate-x-1/2 lg:left-1/2 lg:max-w-3xl lg:-translate-x-1/2'
       data-testid='Flyout-main'
     >
       <div className='rounded-lg shadow-lg'>
diff --git a/components/navigation/communityItems.tsx b/components/navigation/communityItems.tsx
index aa25ac89a1b3..fa6b3ee05965 100644
--- a/components/navigation/communityItems.tsx
+++ b/components/navigation/communityItems.tsx
@@ -5,6 +5,7 @@ import IconContributing from '../icons/Contributing';
 import IconDashboard from '../icons/Dashboard';
 import IconGithubOrganization from '../icons/GithubOrganization';
 import IconMeetings from '../icons/Meetings';
+import IconModelina from '../icons/Modelina';
 import IconNewsroom from '../icons/Newsroom';
 import IconSlack from '../icons/Slack';
 import IconTSC from '../icons/TSC';
@@ -52,6 +53,12 @@ const communityItems: CommunityItem[] = [
     href: '/community/ambassadors',
     description: 'Passionate about APIs? Become an AsyncAPI Ambassador and help shape the future of APIs.'
   },
+  {
+    icon: IconModelina,
+    title: 'Board Members',
+    href: '/community/board',
+    description: 'Get to know what is a Board member, how you can become one, and meet our current board members.'
+  },
   {
     icon: IconDashboard,
     title: 'Dashboard',
diff --git a/config/TSC_BOARD_MEMBERS.json b/config/TSC_BOARD_MEMBERS.json
index fe4eda81f46e..15951b9d0be1 100644
--- a/config/TSC_BOARD_MEMBERS.json
+++ b/config/TSC_BOARD_MEMBERS.json
@@ -118,6 +118,7 @@
         "availableForHire": false,
         "linkedin": "fmvilas",
         "isTscMember": true,
+        "isBoardMember": true,
         "repos": [
             "spec",
             "spec-json-schemas",
@@ -613,6 +614,7 @@
         "availableForHire": false,
         "company": "AsyncAPI Initiative",
         "isTscMember": true,
+        "isBoardMember": true,
         "repos": [
             "website",
             "conference-website",
@@ -833,6 +835,7 @@
         "company": "Kong",
         "country": "\ud83c\uddf2\ud83c\uddfd",
         "isTscMember": true,
+        "isBoardMember": true,
         "contributions": [
             {
                 "type": "presentation",
@@ -933,4 +936,4 @@
             }
         ]
     }
-]
\ No newline at end of file
+]
diff --git a/config/TSC_BOARD_MEMBERS.yaml b/config/TSC_BOARD_MEMBERS.yaml
deleted file mode 100644
index 5087dc03f570..000000000000
--- a/config/TSC_BOARD_MEMBERS.yaml
+++ /dev/null
@@ -1,718 +0,0 @@
-# ⚠️ This file is generated. Do not edit manually. Check this workflow for more details: .github/workflows/update-website-board-governance.yml
-- name: Aishat Muibudeen
-  github: Mayaleeeee
-  linkedin: aishatmuibudeen
-  slack: U03CNHGEUR1
-  twitter: maya_ux_ui
-  availableForHire: true
-  isTscMember: true
-  repos:
-    - website
-    - conference-website
-    - brand
-  githubID: 105395613
-- name: Aayush Sahu
-  github: aayushmau5
-  linkedin: aayushmau5
-  slack: U01QRHR1ABH
-  twitter: aayushmau5
-  availableForHire: false
-  isTscMember: true
-  repos:
-    - diff
-  githubID: 54525741
-- name: Aayush Saini
-  github: AayushSaini101
-  linkedin: aayush-saini-0a25931b1
-  slack: U04RN9LRV97
-  twitter: Aayush__Saini_
-  availableForHire: true
-  isTscMember: true
-  repos:
-    - cli
-  githubID: 60972989
-- name: Abir Pal
-  linkedin: imabp
-  slack: U01S8EQ9LQ2
-  twitter: imabptweets
-  github: imabp
-  availableForHire: false
-  isTscMember: true
-  repos:
-    - problem
-  githubID: 53480076
-- name: Akshat Nema
-  github: akshatnema
-  linkedin: akshat-nema
-  slack: U02TAMG2VKN
-  twitter: AksNema
-  availableForHire: true
-  isTscMember: true
-  repos:
-    - website
-  githubID: 76521428
-- name: Ansh Goyal
-  github: anshgoyalevil
-  linkedin: thisisanshg
-  slack: U057J527M24
-  twitter: thisisanshg
-  availableForHire: true
-  isTscMember: true
-  repos:
-    - website
-  githubID: 94157520
-- name: Ashish Padhy
-  github: Shurtu-gal
-  linkedin: ashish-padhy3023
-  slack: U0572R8J927
-  twitter: Shurtu_Gal
-  availableForHire: true
-  isTscMember: true
-  repos:
-    - studio
-    - cli
-  githubID: 100484401
-- name: Dale Lane
-  github: dalelane
-  linkedin: dalelane
-  slack: U01EYAFR5BR
-  twitter: dalelane
-  availableForHire: false
-  isTscMember: true
-  company: IBM
-  repos:
-    - spec
-    - spec-json-schemas
-    - bindings
-    - avro-schema-parser
-    - java-template
-  githubID: 1444788
-- name: Fran Méndez
-  github: fmvilas
-  slack: U34F2JRRS
-  availableForHire: false
-  linkedin: fmvilas
-  isTscMember: true
-  repos:
-    - spec
-    - spec-json-schemas
-    - asyncapi-react
-    - extensions-catalog
-    - converter-js
-    - bindings
-    - enterprise-patterns
-    - raml-dt-schema-parser
-    - openapi-schema-parser
-    - html-template
-    - markdown-template
-    - nodejs-ws-template
-    - glee
-    - brand
-  githubID: 242119
-- name: Jonas Lagoni
-  github: jonaslagoni
-  linkedin: jonaslagoni
-  slack: UQ2ANBG1E
-  company: EventStack
-  availableForHire: false
-  isTscMember: true
-  repos:
-    - spec-json-schemas
-    - generator
-    - parser-js
-    - converter-js
-    - generator-react-sdk
-    - modelina
-    - simulator
-    - parser-api
-    - EDAVisualiser
-  githubID: 13396189
-- name: Khuda Dad Nomani
-  github: KhudaDad414
-  twitter: KhudaDadNomani
-  linkedin: khudadadnomani
-  slack: U01RVRD1TCL
-  availableForHire: false
-  company: Postman
-  isTscMember: true
-  repos:
-    - spec-json-schemas
-    - studio
-    - .github
-    - optimizer
-    - glee
-  githubID: 32505158
-- name: Lukasz Gornicki
-  github: derberg
-  linkedin: lukasz-gornicki-a621914
-  slack: UD698Q5LM
-  twitter: derberq
-  availableForHire: true
-  isTscMember: true
-  repos:
-    - spec
-    - website
-    - spec-json-schemas
-    - generator
-    - extensions-catalog
-    - bindings
-    - enterprise-patterns
-    - html-template
-    - markdown-template
-    - nodejs-template
-    - nodejs-ws-template
-    - java-spring-template
-    - .github
-    - vs-asyncapi-preview
-    - template-for-generator-templates
-    - community
-    - diff
-    - chatbot
-  githubID: 6995927
-- name: Maciej Urbańczyk
-  github: magicmatatjahu
-  availableForHire: false
-  linkedin: maciej-urbańczyk-909547164
-  slack: U01EB02BP7A
-  company: Travelping GmbH
-  isTscMember: true
-  repos:
-    - generator
-    - asyncapi-react
-    - parser-go
-    - parser-js
-    - converter-js
-    - converter-go
-    - studio
-    - html-template
-    - markdown-template
-    - template-for-generator-templates
-    - generator-react-sdk
-    - modelina
-    - template-for-go-projects
-    - diff
-    - chatbot
-    - server-api
-    - EDAVisualiser
-    - problem
-  githubID: 20404945
-- name: Azeez Elegbede
-  linkedin: acebuild
-  github: AceTheCreator
-  twitter: _acebuild
-  slack: U01RWDD69PZ
-  availableForHire: false
-  isTscMember: true
-  repos:
-    - asyncapi-react
-    - conference-website
-    - chatbot
-  githubID: 40604284
-- name: Pavel Bodiachevskii
-  github: Pakisan
-  slack: U0132LQU8C9
-  twitter: pbodiachevskii
-  availableForHire: false
-  isTscMember: true
-  repos:
-    - spec-json-schemas
-    - tck
-    - jasyncapi
-    - jasyncapi-idea-plugin
-  githubID: 3388414
-- name: Philip Schlesinger
-  github: theschles
-  slack: U054UUYBNLF
-  twitter: philschlesinger
-  availableForHire: false
-  isTscMember: true
-  repos:
-    - jasyncapi-idea-plugin
-  githubID: 901430
-- name: Prince Rajpoot
-  github: princerajpoot20
-  linkedin: princerajpoot
-  slack: U04STTQHV18
-  twitter: iamPrince_2003
-  availableForHire: true
-  isTscMember: true
-  repos:
-    - studio
-  githubID: 44585452
-- name: Richard Coppen
-  github: rcoppen
-  linkedin: richard-coppen
-  slack: U01L3FH3BUH
-  availableForHire: false
-  company: IBM
-  isTscMember: true
-  repos:
-    - spec-json-schemas
-    - bindings
-  githubID: 30902631
-- name: Samir AMZANI
-  github: Amzani
-  slack: U01N6AW5V5G
-  twitter: amzani
-  linkedin: amzani
-  company: Apideck
-  availableForHire: false
-  isTscMember: true
-  repos:
-    - studio
-    - cli
-  githubID: 554438
-- name: Souvik De
-  github: Souvikns
-  slack: U01SGCZMJKW
-  twitter: souvik_ns
-  linkedin: souvik-de-a2b941169
-  availableForHire: true
-  isTscMember: true
-  repos:
-    - cli
-    - glee
-    - bundler
-  githubID: 41781438
-- name: Quetzalli Writes
-  github: quetzalliwrites
-  twitter: QuetzalliWrites
-  slack: U02AKC14WAJ
-  linkedin: quetzalli-writes
-  availableForHire: true
-  isTscMember: true
-  repos:
-    - website
-    - community
-  githubID: 19964402
-  img: https://avatars.githubusercontent.com/u/19964402?v=4
-  bio: >-
-    Quetzalli Writes is an author of the book titled 'Docs-as-Ecosystem', which
-    was published by the Apress Publishing Company. Quetzalli has been in tech
-    for 9 years, working with SEO, Paid Search, Full-Stack development, UX,
-    Developer Relations, and Technical Writing (Engineering Documentation).
-    She's currently a core OSS contributor for Docs, DevRel, and Community
-    Building at AsyncAPI Initiative. She's also a member of the AsyncAPI
-    Technical Steering Committee (TSC).
-  title: DevRel & DevDocs @AsyncAPI
-  company: Postman
-  country: 🇲🇽
-  contributions:
-    - type: presentation
-      title: How to contribute to AsyncAPI Dev Docs, AsyncAPI Conference
-      date:
-        year: 2021
-        month: November
-      link: https://www.youtube.com/watch?v=xAzbDDEbQ18
-    - type: workshop
-      title: Workshop on contributing to AsyncAPI, CCOSS
-      date:
-        year: 2021
-        month: October
-      link: https://ccoss.org/sessions/2021/taller-contribucion-asyncapi/
-    - type: article
-      title: Change is coming to our AsyncAPI Developer Documentation
-      date:
-        year: 2021
-        month: December
-      link: https://www.asyncapi.com/blog/changes-coming-docs
-    - type: initiative_driver
-      title: Driver and promoter of Google Season of Docs at AsyncAPI
-      date:
-        year: 2022
-        month: December
-      link: https://www.asyncapi.com/blog/google-season-of-docs-2022
-- name: David Pereira
-  github: BOLT04
-  twitter: BOLT2938
-  slack: U02EC8BT0TX
-  linkedin: josé-david-pereira-13ba5315a
-  availableForHire: false
-  company: Create IT
-  isTscMember: true
-  repos:
-    - server-api
-  githubID: 18630253
-- name: Daniel Raper
-  github: dan-r
-  slack: U02FP8WBFQE
-  linkedin: danielr
-  availableForHire: false
-  isTscMember: true
-  repos:
-    - java-template
-  githubID: 1384852
-- name: Semen Tenishchev
-  github: Tenischev
-  linkedin: semen-tenishchev
-  availableForHire: true
-  slack: U011D1DAU6S
-  isTscMember: true
-  repos:
-    - java-spring-template
-  githubID: 4137916
-- name: Samridhi Agrawal
-  github: Samridhi-98
-  slack: U02T2MY9W5T
-  linkedin: samridhi-agrawal-1713201ab
-  availableForHire: false
-  company: ThoughtWorks
-  isTscMember: true
-  repos:
-    - modelina
-  githubID: 54466041
-- name: Ivan Garcia Sainz-Aja
-  github: ivangsa
-  linkedin: ivangarciasainzaja
-  slack: UTCN3ET4M
-  availableForHire: false
-  company: IZERTIS
-  isTscMember: true
-  repos:
-    - vs-asyncapi-preview
-  githubID: 1246876
-  twitter: ivangsa
-  bio: >-
-    Java Architect with a deep understanding of Java, Spring-Boot, Spring-Cloud
-    technologies, specializing in Domain-Driven Design (DDD) and Event-Driven
-    Architectures creating Software Easy to Understand. Building ZenWave 360º.
-    ZenWave 360º is a set of tools built on the foundations of Domain Driven
-    Design and API-First principles for Event-Driven Architectures, to help you
-    create software easy to understand. https://www.zenwave360.io/
-  title: Java Architect. Speaker. Building ZenWave 360°.
-  img: https://avatars.githubusercontent.com/u/1246876?v=4
-  contributions:
-    - type: initiative_driver
-      title: AsyncAPI Conference On Tour 2023 - Madrid
-      date:
-        year: 2023
-        month: October
-      link: https://www.youtube.com/playlist?list=PLbi1gRlP7pihD-7XYb6c9wcTdkavDzF3_
-    - type: initiative_driver
-      title: ZenWave SDK - Code Generator for AsyncAPI with Spring Cloud Streams
-      date:
-        year: 2024
-        month: '2022'
-      link: >-
-        https://www.zenwave360.io/zenwave-sdk/plugins/asyncapi-spring-cloud-streams3/
-    - type: article
-      title: API-First with AsyncAPI
-      date:
-        year: 2023
-        month: March
-      link: https://www.zenwave360.io/posts/API-First-with-AsyncAPI-And-ZenWave-SDK/
-    - type: article
-      title: ZenWave AsyncAPI Code Generator
-      date:
-        year: 2023
-        month: March
-      link: https://www.zenwave360.io/posts/ZenWave-AsyncAPI-Code-Generator/
-    - type: article
-      title: Generating AsyncAPI definition files from JDL with ZenWaveSDK
-      date:
-        year: 2023
-        month: April
-      link: https://www.zenwave360.io/posts/JHipster-As-IDL-for-AsyncAPIv2/
-    - type: presentation
-      title: KIT - API-First with AsyncAPI for Event Driven Architectures
-      date:
-        year: 2023
-        month: May
-      link: https://www.youtube.com/watch?v=EoWFZfmspFM
-    - type: presentation
-      title: Practical Event Storming with AsyncAPI v3 and ZenWave SDK
-      date:
-        year: 2023
-        month: October
-      link: https://www.youtube.com/watch?v=-uHONzz-a6U
-    - type: presentation
-      title: >-
-        Code Generation For Enterprise Integration Patterns w/ AsyncAPI &
-        ZenWave SDK
-      date:
-        year: 2023
-        month: October
-      link: https://www.youtube.com/watch?v=gUsoD8RaCuw
-- name: Florence Njeri
-  github: Florence-Njeri
-  linkedin: florencenjeri
-  slack: U03D18YKX2M
-  twitter: njericodes
-  availableForHire: true
-  isTscMember: true
-  repos:
-    - generator
-  githubID: 40742916
-- name: Jeremy Whitlock
-  github: whitlockjc
-  linkedin: whitlockjc
-  slack: U03HBC08EBB
-  twitter: whitlockjc
-  availableForHire: false
-  company: Google
-  isTscMember: true
-  repos:
-    - spec-json-schemas
-    - bindings
-  githubID: 98899
-- name: Alexander Wichmann
-  github: VisualBean
-  linkedin: alexcarlsen
-  slack: U04C58GB8TF
-  availableForHire: false
-  company: The LEGO Group
-  isTscMember: true
-  repos:
-    - spec-json-schemas
-    - bindings
-    - saunter
-  githubID: 5294032
-- name: Kenneth Aasan
-  github: kennethaasan
-  slack: U037S2HK4TS
-  twitter: kennethaasan
-  availableForHire: false
-  company: Sportradar
-  isTscMember: true
-  repos:
-    - modelina
-  githubID: 1437394
-- name: Heiko Henning
-  github: GreenRover
-  slack: U03AC4G51H8
-  availableForHire: false
-  company: mtrail GmbH
-  isTscMember: true
-  repos:
-    - spec
-    - spec-json-schemas
-    - bindings
-    - protobuf-schema-parser
-  githubID: 512850
-- name: Thulisile Sibanda
-  github: thulieblack
-  linkedin: v-thulisile-sibanda
-  twitter: thulieblack
-  slack: U03CNJPMT7C
-  availableForHire: false
-  company: AsyncAPI Initiative
-  isTscMember: true
-  repos:
-    - website
-    - conference-website
-    - community
-  githubID: 66913810
-- name: Ashmit JaiSarita Gupta
-  github: devilkiller-ag
-  linkedin: jaisarita
-  twitter: jaisarita
-  slack: U062LA14E58
-  availableForHire: true
-  isTscMember: true
-  repos:
-    - website
-    - modelina
-  githubID: 43639341
-- name: Sambhav Gupta
-  github: sambhavgupta0705
-  linkedin: sambhavgupta0705
-  twitter: sambhavgupta75
-  slack: U04630DU3N3
-  availableForHire: true
-  isTscMember: true
-  repos:
-    - website
-  githubID: 81870866
-- name: Rohit T
-  github: TRohit20
-  linkedin: rohit-t-0124a4242
-  slack: U05174ZKGQ6
-  twitter: TRRohit20
-  availableForHire: true
-  isTscMember: true
-  repos:
-    - website
-  githubID: 108233235
-- name: Ashmit Jagtap
-  github: ashmit-coder
-  linkedin: ashmit-jagtap
-  twitter: AshmitJagtap
-  slack: U06RA7GDHU1
-  availableForHire: true
-  isTscMember: true
-  repos:
-    - conference-website
-  githubID: 69006513
-- name: Hari Krishnan
-  github: harikrishnan83
-  twitter: harikrishnan83
-  linkedin: harikrishnan83
-  slack: U067JPY0UH5
-  availableForHire: false
-  isTscMember: true
-  repos:
-    - jasyncapi
-  githubID: 126087
-  country: 🇮🇳
-  bio: >-
-    Co-creator of Specmatic and Perfiz. I also advise organizations, both large
-    and small, on their transformation journey. Apart from bringing ideas to
-    life as working software products, I coach developers, project managers,
-    product owners, and engineering leaders. I have spoken at several
-    conferences, including AACoT 2023, API Specification Conference (#ASC2022),
-    API World, SeleniumConf, Agile2021, Agile India, TestingUY 2021, SREConf,
-    PyCon Singapore, RubyConf India. My areas of interest include distributed
-    systems, concurrency, high-performance application architecture, coaching,
-    and training.
-  company: Specmatic and Polarizer Technologies
-  title: Co-founder and CTO at Specmatic, Founder, and CEO at Polarizer Technologies
-  img: >-
-    https://raw.githubusercontent.com/harikrishnan83/harikrishnan83/master/HariKrishnan-profile.jpg
-  contributions:
-    - type: talk
-      title: Kafka and JMS Mocking with AsyncAPI
-      date:
-        year: 2023
-        month: November
-      link: https://www.youtube.com/watch?v=9yRf75p_kTU
-    - type: talk
-      title: >-
-        Unshackling Your System Under Test: Shift-Left Testing Through
-        Dependency Isolation (Kafka Mocks with AsyncAPI specification)
-      date:
-        year: 2024
-        month: June
-      link: >-
-        https://confengine.com/conferences/selenium-conf-2024/proposal/20021/unshackling-your-system-under-test-shift-left-testing-through-dependency-isolation
-    - type: talk
-      title: Using API spec as an Executable Contract To Mock and Test Microservices
-      date:
-        year: 2024
-        month: October
-      link: https://www.youtube.com/watch?v=wiM20HTCerM
-    - type: talk
-      title: Contract-Driven Development for Event-Driven Architectures
-      date:
-        year: 2024
-        month: December
-      link: https://conference.asyncapi.com/venue/Paris
-- name: Charles d'Avernas
-  github: cdavernas
-  linkedin: charles-d-avernas-40836a13
-  slack: U02MRF09BL1
-  availableForHire: false
-  isTscMember: true
-  repos:
-    - net-sdk
-  githubID: 16137162
-- name: Jean-Baptiste Bianchi
-  github: jbbianchi
-  twitter: JBBianchi
-  linkedin: jean-baptiste-bianchi-aa42b914
-  slack: U08K91GKK8T
-  isTscMember: true
-  availableForHire: false
-  repos:
-    - net-sdk
-  githubID: 72747835
-- name: Vishvamsinh Vaghela
-  github: vishvamsinh28
-  twitter: Vishvamsinh28
-  linkedin: vishvamsinh-vaghela-591695217
-  slack: U05FM7WRKU4
-  availableForHire: true
-  isTscMember: true
-  repos:
-    - website
-    - conference-website
-  githubID: 90895835
-- name: Daniel Kocot
-  img: https://avatars.githubusercontent.com/u/466609?v=4
-  bio: >-
-    Daniel has been part of the codecentric team since October 2016. Since the
-    beginning of 2022 he works as Senior Solution Architect at the Dortmund
-    branch. Starting as a consultant with a focus on application lifecycle
-    management, his focus shifted more and more towards APIs. In addition to
-    numerous customer projects and his involvement in the open source world
-    around APIs, our Head of API Experience & Operations is also a frequent
-    speaker at conferences.
-  title: Senior Solution Architect / Head of API Experience and Operations
-  github: danielkocot
-  githubID: 466609
-  slack: U029F3XUYM8
-  twitter: dk_1977
-  linkedin: danielkocot
-  company: codecentric AG
-  country: 🇩🇪
-  isTscMember: true
-  contributions:
-    - type: article
-      title: AsyncAPI - Documentation of event and message-driven architectures
-      date:
-        year: 2021
-        month: September
-      link: >-
-        https://blog.codecentric.de/en/2021/09/asyncapi-documentation-event-message-driven-architectures/?hmsr=joyk.com&utm_source=joyk.com&utm_medium=referral
-    - type: article
-      title: AsyncAPI specification updates
-      date:
-        year: 2022
-        month: February
-      link: >-
-        https://blog.codecentric.de/en/2022/02/asyncapi-version-2-3-0-specification-updates/
-    - type: presentation
-      title: AsyncAPI 101
-      date:
-        year: 2022
-        month: May
-      link: https://www.buildingiot.de/veranstaltung-13856-0-asyncapi-101.html
-    - type: presentation
-      title: Adopting AsyncAPI in Enterprisey Contexts, AsyncAPI Conference
-      date:
-        year: 2022
-        month: November
-      link: https://www.youtube.com/watch?v=_wTcV63jrnU
-- name: Naresh Jain
-  github: nashjain
-  githubID: 38799
-  slack: U07QPEBAC9Y
-  twitter: nashjain
-  linkedin: http://linkedin.com/in/nareshjain/
-  country: 🇮🇳
-  isTscMember: true
-  bio: >-
-    Naresh is an internationally recognised Technology & Product Development
-    Expert. Over the last 25 years, he has played a key role in streamlining the
-    product engineering culture at many unicorns and fortune 500 companies.
-    Naresh is the Founder, CEO of several companies - Xnsio, ConfEngine and
-    Specmatic. Naresh is also the local organiser of API Days India. In 2004,
-    Naresh started the Agile movement in India. More details:
-    https://nareshjain.com
-  company: Specmatic, Xnsio, ConfEngine
-  title: Founder, CEO at Specmatic, Xnsio and ConfEngine
-  img: https://avatars.githubusercontent.com/u/38799?v=4
-  contributions:
-    - type: talk
-      title: 'Multi-Protocol APIs: Designing a Unified Interface for EDA'
-      date:
-        year: 2025
-        month: April
-      link: https://www.youtube.com/watch?v=mQVo498NtOI
-    - type: talk
-      title: TMForum's AsyncAPIs For a New Era of Event-Driven Architecture
-      date:
-        year: 2024
-        month: December
-      link: https://www.youtube.com/watch?v=L2W1058nPyU
-    - type: talk
-      title: 'Project API Forge: Streamlining Dev-First API Lifecycle Management'
-      date:
-        year: 2024
-        month: December
-      link: https://www.youtube.com/watch?v=AfopdGddnLc
-    - type: talk
-      title: '10x DevEx: Shift-Left API Governance = CycleTime/2'
-      date:
-        year: 2024
-        month: October
-      link: https://www.youtube.com/watch?v=I5eplxVQrhI
diff --git a/package-lock.json b/package-lock.json
index 3ac9aedce590..b47acc3ae79f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32124,6 +32124,21 @@
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
       }
+    },
+    "node_modules/@next/swc-win32-ia32-msvc": {
+      "version": "14.2.26",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.26.tgz",
+      "integrity": "sha512-GQWg/Vbz9zUGi9X80lOeGsz1rMH/MtFO/XqigDznhhhTfDlDoynCM6982mPCbSlxJ/aveZcKtTlwfAjwhyxDpg==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
     }
   }
 }
diff --git a/pages/community/board.tsx b/pages/community/board.tsx
new file mode 100644
index 000000000000..089730579c34
--- /dev/null
+++ b/pages/community/board.tsx
@@ -0,0 +1,71 @@
+import CommunityLayout, { Membership } from '@/components/layout/CommunityLayout';
+import TextLink from '@/components/typography/TextLink';
+
+/**
+ * @description This function returns the Board component.
+ */
+export default function Board() {
+  return (
+    <CommunityLayout membership={Membership.BOARD}>
+      <div className='mx-auto my-0 grid max-w-xl lg:max-w-screen-xl lg:grid-cols-3 lg:gap-8' data-testid='GB-content'>
+        <div>
+          <h3 className='text-primary-800 mb-2 font-semibold lg:text-center lg:text-2xl'>
+            What is the Governance Board?
+          </h3>
+          <p className='my-4 text-base text-gray-500 lg:text-center'>
+            The Governance Board (GB) is responsible for ensuring organizational health, strategic continuity, and legal
+            and financial oversight of the AsyncAPI Initiative. While the TSC oversees technical direction, the GB
+            focuses on governance, community safety, sustainability, and stewardship in alignment with the{' '}
+            <a
+              href='https://github.com/asyncapi/community/blob/master/docs/020-governance-and-policies/CHARTER.md'
+              className='text-blue-500 hover:text-blue-400'
+              target='_blank'
+              rel='noopener noreferrer'
+            >
+              Charter
+            </a>
+            .
+          </p>
+        </div>
+        <div>
+          <h3 className='text-primary-800 mb-2 font-semibold lg:text-center lg:text-2xl'>
+            How can I become a Board Member?
+          </h3>
+          <p className='my-4 text-base text-gray-500 lg:text-center'>
+            To become a member of the Governance Board, you must first be a part of the Technical Steering Committee
+            (TSC), which requires being an Ambassador or Maintainer. Board members are elected through a
+            community-driven voting process held every 12 months. Learn more about the eligibility and election cycle on
+            our{' '}
+            <TextLink
+              href='https://github.com/asyncapi/community/blob/master/GOVERNANCE.md'
+              target='_blank'
+              className='font-normal text-base text-blue-500 no-underline hover:text-sky-400'
+            >
+              governance file
+            </TextLink>
+            .
+          </p>
+        </div>
+        <div>
+          <h3 className='text-primary-800 mb-2 font-semibold lg:text-center lg:text-2xl'>
+            What are the responsibilities of a board member?
+          </h3>
+          <p className='my-4 text-base text-gray-500 lg:text-center'>
+            GB members guide AsyncAPI’s financial strategy, sponsorships, hiring, and service access management. They
+            also help sustain an inclusive and safe environment. All major proposals require TSC approval, ensuring a
+            balanced and collaborative governance model. See the{' '}
+            <a
+              href='https://github.com/asyncapi/community/blob/master/GOVERNANCE.md#duties-and-responsibilities'
+              className='text-blue-500 hover:text-blue-400'
+              target='_blank'
+              rel='noopener noreferrer'
+            >
+              governance document
+            </a>{' '}
+            for more details.
+          </p>
+        </div>
+      </div>
+    </CommunityLayout>
+  );
+}
diff --git a/pages/community/tsc.tsx b/pages/community/tsc.tsx
index 41e894dd5558..d7f1c4438ce4 100644
--- a/pages/community/tsc.tsx
+++ b/pages/community/tsc.tsx
@@ -1,340 +1,65 @@
-import { sortBy } from 'lodash';
-import React from 'react';
-
-import type { Tsc } from '@/types/pages/community/Community';
-
-import IconGithub from '../../components/icons/Github';
-import IconLinkedIn from '../../components/icons/LinkedIn';
-import IconTwitter from '../../components/icons/Twitter';
-import GenericLayout from '../../components/layout/GenericLayout';
-import NewsletterSubscribe from '../../components/NewsletterSubscribe';
-import TextLink from '../../components/typography/TextLink';
-import TSCMembersList from '../../config/MAINTAINERS.json';
-
-interface SocialLinkProps {
-  href: string;
-  social: string;
-}
-
-interface TSCUser {
-  user: Tsc;
-}
-
-/**
- * @description This function adds additional information to the user object having TSC data.
- *
- * @param user The user object having TSC data.
- * @returns The user object with additional information.
- */
-function addAdditionalUserInfo(user: Tsc) {
-  const userData: Tsc = {
-    ...user
-  };
-
-  // if username is not present, use the github username
-  if (!userData.name) {
-    userData.name = userData.github;
-  }
-
-  // add social links
-  if (userData.github) {
-    userData.github = `https://www.github.com/${userData.github}`;
-  }
-  if (userData.linkedin) {
-    userData.linkedin = `https://www.linkedin.com/in/${userData.linkedin}`;
-  }
-  if (userData.twitter) {
-    userData.twitter = `https://www.twitter.com/${userData.twitter}`;
-  }
-
-  // add avatar url
-  // github redirects to avatar url using `https://www.github.com/<username>.png`
-  userData.avatarUrl = `${userData.github}.png`;
-
-  // make repo links
-  userData.repos = userData.repos.map((repoName: string) => ({
-    name: repoName,
-    url: `https://www.github.com/asyncapi/${repoName}`
-  }));
-
-  return userData;
-}
-
-/**
- * @description This function returns the SVG component for Twitter.
- *
- * @returns The Twitter SVG component.
- */
-function TwitterSVG() {
-  return (
-    <div className='size-5'>
-      <IconTwitter className='hover:fill-black' />
-    </div>
-  );
-}
-
-/**
- * @description This function returns the SVG component for GitHub.
- *
- * @returns The GitHub SVG component.
- */
-function GitHubSVG() {
-  return (
-    <div className='size-5'>
-      <IconGithub className='hover:fill-black' />
-    </div>
-  );
-}
-
-/**
- * @description This function returns the SVG component for LinkedIn.
- *
- * @returns The LinkedIn SVG component.
- */
-function LinkedInSVG() {
-  return (
-    <div className='size-5'>
-      <IconLinkedIn className='hover:fill-linkedin' />
-    </div>
-  );
-}
-
-const socials: { [key: string]: React.JSX.Element } = {
-  GitHub: <GitHubSVG />,
-  Twitter: <TwitterSVG />,
-  Linkedin: <LinkedInSVG />
-};
-
-/**
- * @description This function returns the social link component.
- *
- * @param {SocialLinkProps} props - The props for the social link component.
- * @param {string} props.href - The URL for the social link.
- * @param {string} props.social - The social media platform.
- */
-function SocialLink({ href, social }: SocialLinkProps) {
-  return (
-    <li>
-      <a
-        data-testid='Social-Links'
-        href={href}
-        className='text-gray-600 hover:text-gray-500'
-        target='_blank'
-        rel='noreferrer noopener'
-      >
-        <span className='sr-only'>{social}</span>
-        {socials[social]}
-      </a>
-    </li>
-  );
-}
-
-/**
- * @description This function returns the user work status component.
- *
- * @param {TSCUser} props - The props for the user work status component.
- * @param {Tsc} props.user - The user object having TSC data.
- */
-function UserWorkStatus({ user }: TSCUser) {
-  if (user.availableForHire) {
-    return (
-      <div
-        data-testid='status-element'
-        className='text-md inline-flex items-center rounded-full bg-green-100 px-3 py-1 font-medium leading-5 text-green-800'
-      >
-        Available for hire
-      </div>
-    );
-  }
-  if (user.company) {
-    return (
-      <div
-        data-testid='status-element'
-        className='text-md inline-flex items-center rounded-full bg-orange-100 px-3 py-1 font-medium leading-5 text-orange-800'
-      >
-        {user.company}
-      </div>
-    );
-  }
-
-  return (
-    <div
-      data-testid='status-element'
-      className='text-md inline-flex items-center rounded-full bg-blue-100 px-3 py-1 font-medium leading-5 text-blue-800'
-    >
-      Individual Member
-    </div>
-  );
-}
-
-/**
- * @description This function returns the user info component.
- *
- * @param {TSCUser} props - The props for the user info component.
- * @param {Tsc} props.user - The user object having TSC data.
- */
-function UserInfo({ user }: TSCUser) {
-  return (
-    <li
-      data-testid='UserInfo-list'
-      className='rounded-md border border-gray-200 p-4 text-center shadow-md'
-      key={user.github}
-    >
-      <div className='flex flex-row'>
-        <img
-          data-testid='UserInfo-avatar'
-          src={user.avatarUrl}
-          alt={user.name}
-          className='mx-auto size-20 rounded-full xl:size-28'
-        />
-        <div className='flex-1'>
-          <div className='my-3 text-lg font-bold' data-testid='UserInfo-name'>
-            {user.name}
-          </div>
-          <UserWorkStatus user={user} />
-          <ul role='list' className='my-5 flex justify-center space-x-5'>
-            <SocialLink href={user.github} social='GitHub' />
-            {user.twitter ? <SocialLink href={user.twitter} social='Twitter' /> : null}
-            {user.linkedin ? <SocialLink href={user.linkedin} social='Linkedin' /> : null}
-          </ul>
-        </div>
-      </div>
-      <div className='flex flex-wrap items-center gap-1'>
-        Maintainer of:
-        {user.repos.map((repo: { name: string; url: string }) => (
-          <a
-            data-testid='Repo-Links'
-            key={repo.name}
-            className='inline-flex items-center rounded-full bg-cyan-100 px-3 py-0.5 text-xs font-medium leading-5 text-cyan-800 hover:bg-cyan-300'
-            href={repo.url}
-          >
-            {repo.name}
-          </a>
-        ))}
-      </div>
-    </li>
-  );
-}
-
-/**
- * @description This function returns the question card component.
- */
-function QuestionCard() {
-  return (
-    <li className='rounded-md border border-gray-200 p-4 px-6 py-10 text-center shadow-md' data-testid='Question-card'>
-      <img
-        data-testid='Question-card-img'
-        src='/img/avatars/questionmark.webp'
-        alt='Question Mark'
-        className='mx-auto size-20 rounded-full xl:size-28'
-      />
-      <div className='my-4'>
-        Want to become a member? Follow this
-        <TextLink
-          href='https://github.com/asyncapi/community/blob/master/TSC_MEMBERSHIP.md'
-          target='_blank'
-          className='font-normal text-base text-sky-600 no-underline hover:text-sky-400'
-        >
-          Link
-        </TextLink>
-        &nbsp;to know more!
-      </div>
-    </li>
-  );
-}
+import CommunityLayout, { Membership } from '@/components/layout/CommunityLayout';
+import TextLink from '@/components/typography/TextLink';
 
 /**
  * @description This function returns the TSC component.
  */
 export default function TSC() {
-  const description = 'Meet the current AsyncAPI TSC members and learn how you can become one.';
-  const image = '/img/social/community-tsc.webp';
-
-  const tscMembers = sortBy(
-    TSCMembersList.map((user) => addAdditionalUserInfo(user)),
-    ['name']
-  ).filter((user) => user.isTscMember);
-
   return (
-    <GenericLayout title='Technical Steering Committee' description={description} image={image} wide>
-      <div className='relative mx-auto px-4 py-12 sm:px-6 lg:px-8'>
-        <div
-          className='mx-auto my-0 grid max-w-xl lg:max-w-screen-xl lg:grid-cols-3 lg:gap-8'
-          data-testid='TSC-content'
-        >
-          <div>
-            <h3 className='text-primary-800  mb-2 font-semibold lg:text-center lg:text-2xl'>What is a TSC?</h3>
-            <p className='my-4 text-base text-gray-500 lg:text-center'>
-              The Technical Steering Committee (TSC) is responsible for the oversight of the AsyncAPI Initiative.
-              Maintainers (aka committers) make decisions at the given repository/project level. The TSC helps to make
-              decisions on a higher level, or when maintainers cannot find a consensus.
-            </p>
-          </div>
-          <div>
-            <h3 className='text-primary-800  mb-2 font-semibold lg:text-center lg:text-2xl'>
-              How can I become a TSC member?
-            </h3>
-            <p className='my-4 text-base text-gray-500 lg:text-center'>
-              Anybody can become a member of the TSC. All you have to do is become a maintainer of one of the AsyncAPI
-              projects! To become a maintainer, you just need to regularly contribute to one of the projects and then
-              other maintainers will invite you to join. You can also build a great AsyncAPI-based project that we
-              don&apos;t have yet in our GitHub organization and donate it (we&apos;ll ask you to stay as a maintainer).
-              Follow this
-              <TextLink
-                href='https://github.com/asyncapi/community/blob/master/TSC_MEMBERSHIP.md'
-                target='_blank'
-                className='font-normal text-base text-blue-500 no-underline hover:text-sky-400'
-              >
-                Link
-              </TextLink>
-              &nbsp;to know more!
-            </p>
-          </div>
-          <div>
-            <h3 className='text-primary-800  mb-2 font-semibold lg:text-center lg:text-2xl'>Our governance model</h3>
-            <p className='my-4 text-base text-gray-500 lg:text-center'>
-              AsyncAPI Initiative runs under an{' '}
-              <a
-                data-testid='TSC-Governance-Link'
-                href='https://github.com/asyncapi/community/blob/master/CHARTER.md'
-                className='text-blue-500 hover:text-blue-400'
-              >
-                Open Governance Model
-              </a>{' '}
-              that gives power to the people actively involved and working on the project. No matter if you are an
-              individual contributor or backed by a company, you have equal rights. Read{' '}
-              <a
-                data-testid='TSC-Article-Link'
-                href='https://www.asyncapi.com/blog/governance-motivation'
-                className='text-blue-500 hover:text-blue-400'
-              >
-                this
-              </a>{' '}
-              article to learn more.
-            </p>
-          </div>
+    <CommunityLayout membership={Membership.TSC}>
+      <div className='mx-auto my-0 grid max-w-xl lg:max-w-screen-xl lg:grid-cols-3 lg:gap-8' data-testid='TSC-content'>
+        <div>
+          <h3 className='text-primary-800  mb-2 font-semibold lg:text-center lg:text-2xl'>What is a TSC?</h3>
+          <p className='my-4 text-base text-gray-500 lg:text-center'>
+            The Technical Steering Committee (TSC) is responsible for the oversight of the AsyncAPI Initiative.
+            Maintainers (aka committers) make decisions at the given repository/project level. The TSC helps to make
+            decisions on a higher level, or when maintainers cannot find a consensus.
+          </p>
         </div>
-        <div className='mt-8'>
-          <NewsletterSubscribe
-            type='TSC Voting'
-            title='Get notified when TSC is voting'
-            subtitle="You'll receive an email whenever someone requests the TSC to vote."
-          />
+        <div>
+          <h3 className='text-primary-800  mb-2 font-semibold lg:text-center lg:text-2xl'>
+            How can I become a TSC member?
+          </h3>
+          <p className='my-4 text-base text-gray-500 lg:text-center'>
+            Anybody can become a member of the TSC. All you have to do is become a maintainer of one of the AsyncAPI
+            projects! To become a maintainer, you just need to regularly contribute to one of the projects and then
+            other maintainers will invite you to join. You can also build a great AsyncAPI-based project that we
+            don&apos;t have yet in our GitHub organization and donate it (we&apos;ll ask you to stay as a maintainer).
+            Follow this
+            <TextLink
+              href='https://github.com/asyncapi/community/blob/master/TSC_MEMBERSHIP.md'
+              target='_blank'
+              className='font-normal text-base text-blue-500 no-underline hover:text-sky-400'
+            >
+              Link
+            </TextLink>
+            &nbsp;to know more!
+          </p>
         </div>
-        <div className='mt-10'>
-          <div className='text-primary-800 mb-5 text-center'>
-            <h3 className='text-2xl font-semibold'>Current TSC members</h3>
-            <span className='font-thin text-sm'>(in alphabetical order)</span>
-          </div>
-
-          <ul role='list' className='space-y-4 sm:grid sm:grid-cols-2 sm:gap-6 sm:space-y-0 lg:grid-cols-3 lg:gap-8'>
-            {tscMembers.map((user) => (
-              <UserInfo key={user.github} user={user} />
-            ))}
-            <QuestionCard />
-          </ul>
+        <div>
+          <h3 className='text-primary-800  mb-2 font-semibold lg:text-center lg:text-2xl'>Our governance model</h3>
+          <p className='my-4 text-base text-gray-500 lg:text-center'>
+            AsyncAPI Initiative runs under an{' '}
+            <a
+              data-testid='TSC-Governance-Link'
+              href='https://github.com/asyncapi/community/blob/master/CHARTER.md'
+              className='text-blue-500 hover:text-blue-400'
+            >
+              Open Governance Model
+            </a>{' '}
+            that gives power to the people actively involved and working on the project. No matter if you are an
+            individual contributor or backed by a company, you have equal rights. Read{' '}
+            <a
+              data-testid='TSC-Article-Link'
+              href='https://www.asyncapi.com/blog/governance-motivation'
+              className='text-blue-500 hover:text-blue-400'
+            >
+              this
+            </a>{' '}
+            article to learn more.
+          </p>
         </div>
       </div>
-    </GenericLayout>
+    </CommunityLayout>
   );
 }
diff --git a/pages/tools/generator.tsx b/pages/tools/generator.tsx
index 87ab0ced2c53..6a070dd96c23 100644
--- a/pages/tools/generator.tsx
+++ b/pages/tools/generator.tsx
@@ -53,7 +53,7 @@ export default function GeneratorPage() {
               Docs, Code, Anything!
             </Heading>
             <Paragraph className='mt-4'>{description}</Paragraph>
-            <img src={generatorimage} alt='generator diagram' className=' mx-auto h-auto lg:w-1/2 object-cover' />
+            <img src={generatorimage} alt='generator diagram' className=' mx-auto h-auto object-cover lg:w-1/2' />
           </div>
 
           <div className='relative mt-12 lg:mt-20 lg:grid lg:grid-cols-2 lg:items-center lg:gap-8'>
diff --git a/types/pages/community/Community.ts b/types/pages/community/Community.ts
index 3f8548b09a90..846c10293729 100644
--- a/types/pages/community/Community.ts
+++ b/types/pages/community/Community.ts
@@ -30,6 +30,10 @@ export interface Ambassador {
   githubUrl?: string;
   linkedinUrl?: string;
   twitterUrl?: string;
+  avatarUrl?: string;
+  isTscMember?: boolean;
+  isBoardMember?: boolean;
+  isBoardChair?: boolean;
 };
 
 export interface Tsc {
@@ -44,4 +48,6 @@ export interface Tsc {
   company?: string;
   repos: any;
   githubID: number
+  isBoardMember?: boolean;
+  isBoardChair?: boolean;
 };