diff --git a/CODEOWNERS b/CODEOWNERS
index cf7a212d7c9..db47e3d311e 100644
--- a/CODEOWNERS
+++ b/CODEOWNERS
@@ -5,7 +5,7 @@
 # For more details, read the following article on GitHub: https://help.github.com/articles/about-codeowners/.
 
 # The default owners are automatically added as reviewers when you open a pull request unless different owners are specified in the file.
-* @derberg @akshatnema @magicmatatjahu @asyncapi-bot-eve
+* @derberg @akshatnema @magicmatatjahu @mayaleeeee @asyncapi-bot-eve
 
 # All .md files
 *.md @alequetzalli @asyncapi-bot-eve
@@ -13,4 +13,4 @@
 pages/blog/*.md @thulieblack @alequetzalli
 pages/community/*.md @thulieblack @alequetzalli
 
-README.md @alequetzalli @derberg @akshatnema @magicmatatjahu @asyncapi-bot-eve
+README.md @alequetzalli @derberg @akshatnema @magicmatatjahu @mayaleeeee @asyncapi-bot-eve
diff --git a/components/buttons/Button.js b/components/buttons/Button.js
index 3c19313c6cb..d75e61f8a2f 100644
--- a/components/buttons/Button.js
+++ b/components/buttons/Button.js
@@ -19,16 +19,16 @@ export default function Button({
 
   if (!href) {
     return (
-      <button {...props} type={type} className={buttonSize === 'small' ? smallButtonClasses : classNames}>
+      <button {...props} type={type} className={buttonSize === 'small' ? smallButtonClasses : classNames} data-testid="Button-main" > 
         {
           icon && iconPosition === 'left' && (
-            <span className="inline-block mr-2">{icon}</span>
+            <span className="inline-block mr-2" data-testid="Button-icon-left">{icon}</span>
           )
         }
         <span className="inline-block">{text}</span>
         {
           icon && iconPosition === 'right' && (
-            <span className="inline-block ml-2">{icon}</span>
+            <span className="inline-block ml-2" data-testid="Button-icon-right">{icon}</span>
           )
         }
       </button>
@@ -37,7 +37,7 @@ export default function Button({
 
   return (
     <Link href={href} passHref>
-      <a {...props} target={target} rel="noopener noreferrer" className={buttonSize === 'small' ? smallButtonClasses : classNames}>
+      <a {...props} target={target} rel="noopener noreferrer" className={buttonSize === 'small' ? smallButtonClasses : classNames} data-testid="Button-link">
         {
           icon && iconPosition === 'left' && (
             <span className="inline-block mr-2">{icon}</span>
diff --git a/components/buttons/ChapterSuggestion.js b/components/buttons/ChapterSuggestion.js
index 137b944c09c..3d28a1f8001 100644
--- a/components/buttons/ChapterSuggestion.js
+++ b/components/buttons/ChapterSuggestion.js
@@ -16,6 +16,7 @@ export default function ChapterSuggestion({
         rel="noopener noreferrer"
         title={description}
         className={`${className} flex flex-col mt-4 p-6 max-w-lg rounded shadow-md border border-gray-200 text-gray-900 transition-all duration-300 ease-in-out hover:shadow-lg hover:border-gray-300`}
+       data-testid="ChapterSuggestion-link"
       >
         <h5 className="text-lg font-medium font-sans antialiased mb-2">{title}</h5>
         <p className="flex-1 mb-2 font-normal text-gray-600 font-sans antialiased">{description}</p>
diff --git a/components/buttons/DocsButton.js b/components/buttons/DocsButton.js
index c8b64b4f72c..4f9d5d2af23 100644
--- a/components/buttons/DocsButton.js
+++ b/components/buttons/DocsButton.js
@@ -7,7 +7,7 @@ export default function DocsButton({ post, className='' }) {
         { post?.prevPage && <Link href={post.prevPage.href} passHref>
             <a>
             <div className="p-4 rounded shadow-md border border-gray-200 transition-all duration-300 ease-in-out hover:shadow-lg hover:border-gray-300 text-center lg:text-left cursor-pointer">
-              <div className="text-secondary-500">
+              <div className="text-secondary-500" data-testid="DocsButton-Prevdiv">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   className="h-6 w-6 inline mr-1"
@@ -26,7 +26,7 @@ export default function DocsButton({ post, className='' }) {
                   Go Back
                 </div>
               </div>
-              <div className="font-medium text-base my-2">{post.prevPage.title}</div>
+              <div className="font-medium text-base my-2" data-testid="DocsButton-PrevPage" >{post.prevPage.title}</div>
             </div>
             </a>
           </Link>
@@ -36,7 +36,7 @@ export default function DocsButton({ post, className='' }) {
         { post?.nextPage && <Link href={post.nextPage.href} className='h-auto' passHref>
             <a>
             <div className="p-4 rounded shadow-md border border-gray-200 transition-all duration-300 ease-in-out hover:shadow-lg hover:border-gray-300 text-center lg:text-right cursor-pointer">
-              <div className="text-secondary-500">
+              <div className="text-secondary-500" data-testid="DocsButton-Nextdiv">
                 <div className="font-bold my-auto text-sm inline uppercase">
                   Up Next
                 </div>
@@ -55,7 +55,7 @@ export default function DocsButton({ post, className='' }) {
                   />
                 </svg>
               </div>
-              <div className="font-medium text-base my-2">{post.nextPage.title}</div>
+              <div className="font-medium text-base my-2" data-testid="DocsButton-NextPage">{post.nextPage.title}</div>
             </div>
             </a>
           </Link>
diff --git a/components/buttons/GitHubIssue.js b/components/buttons/GitHubIssue.js
index c54098d6fb6..30fcdcde47c 100644
--- a/components/buttons/GitHubIssue.js
+++ b/components/buttons/GitHubIssue.js
@@ -2,7 +2,7 @@ import React from 'react'
 
 export default function GitHubIssue({className=''}) {
     return (
-        <a className={`bg-black text-white flex flex-row lg:w-6/12 shadow-md hover:shadow-lg transition-all duration-500 ease-in-out py-2 rounded justify-center ${className}`} href='https://github.com/asyncapi/website/issues/new?assignees=alequetzalli+-&labels=%F0%9F%93%91+docs&template=docs.yml&title=%5B%F0%9F%93%91+Docs%5D%3A+' target='_blank' rel='noopener noreferrer'>
+        <a className={`bg-black text-white flex flex-row lg:w-6/12 shadow-md hover:shadow-lg transition-all duration-500 ease-in-out py-2 rounded justify-center ${className}`} href='https://github.com/asyncapi/website/issues/new?assignees=alequetzalli+-&labels=%F0%9F%93%91+docs&template=docs.yml&title=%5B%F0%9F%93%91+Docs%5D%3A+' target='_blank' rel='noopener noreferrer' data-testid="GithubIssue-Link">
             <img src='/img/logos/github-fill.svg' className='mr-2' alt="Github:AsyncAPI" />
             Create Issue on GitHub
         </a>
diff --git a/components/buttons/ICSFileButton.js b/components/buttons/ICSFileButton.js
index e7e4dbdd126..78ac35cc609 100644
--- a/components/buttons/ICSFileButton.js
+++ b/components/buttons/ICSFileButton.js
@@ -1,7 +1,7 @@
 import Button from './Button';
 import IconCalendar from '../icons/Calendar';
 
-export default function GoogleCalendarButton({
+export default function ICSFButton({
   text = 'Download ICS File',
   href,
   target = '_blank',
diff --git a/config/MAINTAINERS.json b/config/MAINTAINERS.json
index b6df736af66..98015228c24 100644
--- a/config/MAINTAINERS.json
+++ b/config/MAINTAINERS.json
@@ -1,4 +1,16 @@
 [
+    {
+        "name": "Aishat Muibudeen",
+        "github": "mayaleeeee",
+        "linkedin": "aishatmuibudeen",
+        "slack": "U03CNHGEUR1",
+        "twitter": "maya_ux_ui",
+        "availableForHire": true,
+        "isTscMember": true,
+        "repos": [
+            "website"
+        ]
+    },
     {
         "name": "Aayush Sahu",
         "github": "aayushmau5",
diff --git a/config/meetings.json b/config/meetings.json
index a14a3d7e5c9..dbc7839241c 100644
--- a/config/meetings.json
+++ b/config/meetings.json
@@ -227,5 +227,12 @@
     "url": "https://github.com/asyncapi/community/issues/798",
     "banner": "https://user-images.githubusercontent.com/40604284/252807786-f93110e3-c344-4080-9c4f-9d32cb324680.png",
     "date": "2023-07-25T08:00:00.000Z"
+  },
+  {
+    "title": "Design meeting",
+    "calLink": "https://www.google.com/calendar/event?eid=czVxbG5jZXV2MThxczJjczdhMmtxZzE1djAgY19xOXRzZWlnbG9tZHNqNm5qdWh2YnB0czExY0Bn",
+    "url": "https://github.com/asyncapi/community/issues/800",
+    "banner": "",
+    "date": "2023-07-18T08:00:00.000Z"
   }
 ]
\ No newline at end of file
diff --git a/cypress/test/buttons/ApplyJob.cy.js b/cypress/test/buttons/ApplyJob.cy.js
new file mode 100644
index 00000000000..69189e8156f
--- /dev/null
+++ b/cypress/test/buttons/ApplyJob.cy.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import { mount } from 'cypress/react';
+import ApplyJobButton from '../../../components/buttons/ApplyJob';
+
+describe('ApplyJobButton', () => {
+  const job = {
+    contact: 'https://www.asyncapi.com/',
+  };
+
+  beforeEach(() => {
+    mount(<ApplyJobButton job={job} />);
+  });
+
+  it('renders the ApplyJobButton component', () => {
+    cy.contains('Apply for this job').should('exist');
+  });
+
+  it('sets the correct href and target attributes', () => {
+    cy.get('[data-testid="Button-link"]').should('have.attr', 'href', 'https://www.asyncapi.com/');
+    cy.get('[data-testid="Button-link"]').should('have.attr', 'target', '_blank');
+  });
+});
diff --git a/cypress/test/buttons/Buttons.cy.js b/cypress/test/buttons/Buttons.cy.js
new file mode 100644
index 00000000000..38a30d26bc4
--- /dev/null
+++ b/cypress/test/buttons/Buttons.cy.js
@@ -0,0 +1,64 @@
+import React from 'react';
+import { mount } from 'cypress/react';
+import Button from '../../../components/buttons/Button';
+import IconGithub from '../../../components/icons/Github'
+describe('Button component', () => {
+  it('renders a button without href', () => {
+    const text = 'Click me';
+    const type = 'button';
+    const icon = <IconGithub />;
+    mount(
+      <Button text={text} type={type} icon={icon} />
+    );
+    cy.get('[data-testid="Button-main"]').should('have.text', text);
+    cy.get('[data-testid="Button-main"]').should('have.attr', 'type', type);
+    cy.get('[data-testid="Button-link"]').should('not.exist');
+  });
+
+  it('renders a button with href', () => {
+    const text = 'Click me';
+    const href = '/link';
+    const target = '_blank';
+    mount(
+      <Button text={text} href={href} target={target} />
+    );
+    cy.get('[data-testid="Button-link"]').should('have.text', text);
+    cy.get('[data-testid="Button-link"]').should('have.attr', 'href', href);
+    cy.get('[data-testid="Button-link"]').should('have.attr', 'target', target);
+    cy.get('[data-testid="Button-main"]').should('not.exist');
+  });
+
+  it('renders a small button', () => {
+    const text = 'Click me';
+    const buttonSize = 'small';
+    mount(
+      <Button text={text} buttonSize={buttonSize} />
+    );
+    cy.get('[data-testid="Button-main"]').should('have.class', 'px-3 py-2 text-sm');
+  });
+  it('renders a button with custom class', () => {
+    const text = 'Click me';
+    const className = 'custom-button';
+
+    mount(
+      <Button text={text} className={className} />
+    );
+    cy.get('[data-testid="Button-main"]').should('have.class', className);
+  });
+
+  it('does not render an icon with position left in the button', () => {
+    const text = 'Click me';
+    mount(
+      <Button text={text} />
+    );
+    cy.get('[data-testid="Button-icon-left"]').should('not.exist');
+  });
+
+  it('does not render an icon with position left in the button', () => {
+    const text = 'Click me';
+    mount(
+      <Button text={text} />
+    );
+    cy.get('[data-testid="Button-icon-right"]').should('not.exist');
+  });
+});
diff --git a/cypress/test/buttons/ChapterSuggestion.cy.js b/cypress/test/buttons/ChapterSuggestion.cy.js
new file mode 100644
index 00000000000..84eb5eb9a4a
--- /dev/null
+++ b/cypress/test/buttons/ChapterSuggestion.cy.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import { mount } from 'cypress/react';
+import ChapterSuggestion from '../../../components/buttons/ChapterSuggestion';
+describe('ChapterSuggestion', () => {
+  const chapter = {
+    href: 'https://www.asyncapi.com/',
+    target: '_self', 
+    title: 'Chapter Title',
+    description: 'Chapter Description',
+    linkText: 'Read More',
+    className: 'custom-class',
+  };
+  beforeEach(() => {
+    mount(<ChapterSuggestion {...chapter} />);
+  });
+
+  it('renders the ChapterSuggestion component', () => {
+    cy.contains(chapter.title).should('exist');
+    cy.contains(chapter.description).should('exist');
+    cy.contains(chapter.linkText).should('exist');
+    cy.get('[data-testid="ChapterSuggestion-link"]').should('have.attr', 'href', chapter.href);
+  });
+
+  it('applies the correct className', () => {
+    cy.get('[data-testid="ChapterSuggestion-link"]').should('have.class', chapter.className);
+  });
+
+  it('sets the target attribute', () => {
+    cy.get('[data-testid="ChapterSuggestion-link"]').should('have.attr', 'target', chapter.target);
+  });
+
+  it('sets the title attribute', () => {
+    cy.get('[data-testid="ChapterSuggestion-link"]').should('have.attr', 'title', chapter.description);
+  });
+
+  it('renders the link text and IconArrowRight', () => {
+    cy.contains(chapter.linkText).should('exist');
+    cy.get('svg').should('have.class', 'h-4');
+  });
+});
diff --git a/cypress/test/buttons/DocsButton.cy.js b/cypress/test/buttons/DocsButton.cy.js
new file mode 100644
index 00000000000..624c0a97e66
--- /dev/null
+++ b/cypress/test/buttons/DocsButton.cy.js
@@ -0,0 +1,32 @@
+import {mount} from 'cypress/react';
+import DocsButton from '../../../components/buttons/DocsButton';
+describe('DocsButton', () => {
+  
+    it('does not render buttons without post data', () => {
+        mount(<DocsButton />);
+        cy.get('[data-testid="DocsButton-div"]').should('not.exist');
+        cy.get('[data-testid="DocsButton-PrevPage"]').should('not.exist');
+        cy.get('[data-testid="DocsButton-div"]').should('not.exist');
+        cy.get('[data-testid="DocsButton-NextPage"]').should('not.exist');
+      });
+
+    it('renders correctly with post data', () => {
+        // mock post object with dummy data
+        const post = {
+          prevPage: {
+            href: 'https://www.asyncapi.com/',
+            title: 'Previous Page',
+          },
+          nextPage: {
+            href: 'https://www.asyncapi.com/',
+            title: 'Next Page',
+          },
+        };
+        mount(<DocsButton post={post} />);
+        cy.get('[data-testid="DocsButton-Prevdiv"]').should('contain', 'Go Back');
+        cy.get('[data-testid="DocsButton-PrevPage"]').should('contain', 'Previous Page');
+        cy.get('[data-testid="DocsButton-Nextdiv"]').should('contain', 'Up Next');
+        cy.get('[data-testid="DocsButton-NextPage"]').should('contain', 'Next Page');
+      });
+  });
+  
\ No newline at end of file
diff --git a/cypress/test/buttons/GithubButton.cy.js b/cypress/test/buttons/GithubButton.cy.js
new file mode 100644
index 00000000000..270d0ec4f99
--- /dev/null
+++ b/cypress/test/buttons/GithubButton.cy.js
@@ -0,0 +1,27 @@
+import {mount} from 'cypress/react';
+import GithubButton from '../../../components/buttons/GithubButton'
+describe('GithubButton', () => {
+    it('renders correctly with default props', () => {
+      mount(<GithubButton />);
+      cy.contains('View on Github').should('be.visible');
+      cy.get('[ data-testid="Button-link"]').should('have.attr', 'href', 'https://github.com/asyncapi');
+      cy.get('[ data-testid="Button-link"]').should('have.attr', 'target', '_blank');
+});
+  
+    it('renders correctly with custom props', () => {
+      mount(
+        <GithubButton
+          text="Custom Text"
+          href="https://example.com"
+          target="_self"
+          iconPosition="right"
+          className="custom-class"
+          inNav="true"
+        />
+      );
+      cy.contains('Custom Text').should('be.visible');
+      cy.get('[data-testid="Button-link"]').should('have.attr', 'href', 'https://example.com');
+      cy.get('[data-testid="Button-link"]').should('have.attr', 'target', '_self');
+    });
+  });
+  
\ No newline at end of file
diff --git a/cypress/test/buttons/GithubIssue.cy.js b/cypress/test/buttons/GithubIssue.cy.js
new file mode 100644
index 00000000000..5a9107cf684
--- /dev/null
+++ b/cypress/test/buttons/GithubIssue.cy.js
@@ -0,0 +1,19 @@
+import {mount} from 'cypress/react'
+import GitHubIssue from '../../../components/buttons/GitHubIssue';
+describe('GitHubIssue', () => {
+    it('renders correctly with default props', () => {
+      mount(<GitHubIssue />);
+      cy.contains('Create Issue on GitHub').should('be.visible');
+      cy.get('[data-testid="GithubIssue-Link"]')
+        .should('have.attr', 'href', 'https://github.com/asyncapi/website/issues/new?assignees=alequetzalli+-&labels=%F0%9F%93%91+docs&template=docs.yml&title=%5B%F0%9F%93%91+Docs%5D%3A+')
+        .should('have.attr', 'target', '_blank')
+        .should('have.attr', 'rel', 'noopener noreferrer');
+    });
+  
+    it('renders correctly with custom class', () => {
+      mount(<GitHubIssue className="custom-class" />);
+      //data-testid was not working here
+      cy.get('.bg-black').should('have.class', 'custom-class');
+    });
+  });
+  
\ No newline at end of file
diff --git a/cypress/test/buttons/GoogleCalendarButton.cy.js b/cypress/test/buttons/GoogleCalendarButton.cy.js
new file mode 100644
index 00000000000..2803b1f3e64
--- /dev/null
+++ b/cypress/test/buttons/GoogleCalendarButton.cy.js
@@ -0,0 +1,24 @@
+import {mount} from 'cypress/react'
+import GoogleCalendarButton from '../../../components/buttons/GoogleCalendarButton'
+describe('GoogleCalendarButton', () => {
+    it('renders correctly with default props', () => {
+      mount(<GoogleCalendarButton />);
+      cy.contains('Add to Google Calendar').should('be.visible');
+    });
+  
+    it('renders correctly with custom props', () => {
+      mount(
+        <GoogleCalendarButton
+          text="Custom Text"
+          href="https://example.com"
+          target="_self"
+          iconPosition="right"
+          className="custom-class"
+        />
+      );
+      cy.contains('Custom Text').should('be.visible');
+      cy.get('[data-testid="Button-link"]').should('have.attr', 'href', 'https://example.com').and('have.attr', 'target', '_self');
+    });
+  });
+  
+  
\ No newline at end of file
diff --git a/cypress/test/buttons/ICSFileButton.cy.js b/cypress/test/buttons/ICSFileButton.cy.js
new file mode 100644
index 00000000000..13964726699
--- /dev/null
+++ b/cypress/test/buttons/ICSFileButton.cy.js
@@ -0,0 +1,26 @@
+import { mount } from 'cypress/react';
+import ICSFButton from '../../../components/buttons/ICSFileButton';
+
+describe('ICSFButton', () => {
+
+  it('renders correctly with custom props', () => {
+    const customHref = 'https://example.com';
+  
+    mount(
+      < ICSFButton
+        text="Custom Text"
+        href={customHref}
+        target="_self"
+        iconPosition="right"
+      />
+    );
+    cy.contains('Custom Text').should('be.visible');
+    cy.get('[data-testid="Button-link"]').should('have.attr', 'href', customHref);
+    cy.get('[data-testid="Button-link"]').should('have.attr', 'target', '_self');
+  });
+
+  it('renders correctly with default props', () => {
+    mount(<ICSFButton />);
+    cy.contains('Download ICS File').should('be.visible');
+  });
+});
diff --git a/cypress/test/buttons/OpenInPlaygroundButton.cy.js b/cypress/test/buttons/OpenInPlaygroundButton.cy.js
new file mode 100644
index 00000000000..d7523630290
--- /dev/null
+++ b/cypress/test/buttons/OpenInPlaygroundButton.cy.js
@@ -0,0 +1,9 @@
+import { mount } from 'cypress/react';
+import OpenInPlaygroundButton from "../../../components/buttons/OpenInPlaygroundButton"
+
+describe('OpenInPlaygroundButton', () => {
+it('renders correctly with default props', () => {
+        mount(<OpenInPlaygroundButton />);
+        cy.contains('Open Playground').should('be.visible');
+    });
+});
diff --git a/cypress/test/buttons/OpenInStudioButton.cy.js b/cypress/test/buttons/OpenInStudioButton.cy.js
new file mode 100644
index 00000000000..dd276aa6da1
--- /dev/null
+++ b/cypress/test/buttons/OpenInStudioButton.cy.js
@@ -0,0 +1,21 @@
+import { mount } from 'cypress/react';
+import OpenInStudioButton from '../../../components/buttons/OpenInStudioButton';
+
+describe('OpenInStudioButton', () => {
+
+    it('renders correctly with custom props', () => {
+        mount(
+            < OpenInStudioButton
+                text="Custom Text"
+                target="_self"
+                iconPosition="right"
+            />
+        );
+        cy.contains('Custom Text').should('be.visible');
+    });
+
+    it('renders correctly with default props', () => {
+        mount(<OpenInStudioButton />);
+        cy.contains('Open in Studio').should('be.visible');
+    });
+});
diff --git a/cypress/test/buttons/SlackButton.cy.js b/cypress/test/buttons/SlackButton.cy.js
new file mode 100644
index 00000000000..7f03469cbbc
--- /dev/null
+++ b/cypress/test/buttons/SlackButton.cy.js
@@ -0,0 +1,27 @@
+import {mount} from 'cypress/react';
+import SlackButton from '../../../components/buttons/SlackButton';
+describe('Slack Button', () => {
+    it('renders correctly with default props', () => {
+      mount(<SlackButton/>);
+      cy.contains('Join on Slack').should('be.visible');
+      cy.get('[ data-testid="Button-link"]').should('have.attr', 'href', '/slack-invite');
+      cy.get('[ data-testid="Button-link"]').should('have.attr', 'target', '_blank');
+});
+  
+    it('renders correctly with custom props', () => {
+      mount(
+        <SlackButton
+          text="Custom Text"
+          href="https://example.com"
+          target="_self"
+          iconPosition="right"
+          className="custom-class"
+          inNav="true"
+        />
+      );
+      cy.contains('Custom Text').should('be.visible');
+      cy.get('[data-testid="Button-link"]').should('have.attr', 'href', 'https://example.com');
+      cy.get('[data-testid="Button-link"]').should('have.attr', 'target', '_self');
+    });
+  });
+  
\ No newline at end of file
diff --git a/cypress/test/buttons/SubscribeButton.cy.js b/cypress/test/buttons/SubscribeButton.cy.js
new file mode 100644
index 00000000000..55c3b191be4
--- /dev/null
+++ b/cypress/test/buttons/SubscribeButton.cy.js
@@ -0,0 +1,27 @@
+import {mount} from 'cypress/react';
+import SubscribeButton from '../../../components/buttons/SubscribeButton';
+
+describe('Subscribe Button', () => {
+    it('renders correctly with default props', () => {
+      mount(<SubscribeButton/>);
+      cy.contains('Subscribe').should('be.visible');
+  
+});
+  
+    it('renders correctly with custom props', () => {
+      mount(
+        <SubscribeButton
+          text="Custom Text"
+          href="https://example.com"
+          target="_self"
+          iconPosition="right"
+          className="custom-class"
+          inNav="true"
+        />
+      );
+      cy.contains('Custom Text').should('be.visible');
+      cy.get('[data-testid="Button-link"]').should('have.attr', 'href', 'https://example.com');
+      cy.get('[data-testid="Button-link"]').should('have.attr', 'target', '_self');
+    });
+  });
+  
\ No newline at end of file
diff --git a/cypress/test/buttons/YoutubeButton.cy.js b/cypress/test/buttons/YoutubeButton.cy.js
new file mode 100644
index 00000000000..ec202ace7f8
--- /dev/null
+++ b/cypress/test/buttons/YoutubeButton.cy.js
@@ -0,0 +1,27 @@
+import {mount} from 'cypress/react';
+import YoutubeButton from '../../../components/buttons/YoutubeButton';
+
+describe('Youtube Button', () => {
+    it('renders correctly with default props', () => {
+      mount(<YoutubeButton/>);
+      cy.contains('Watch on YouTube').should('be.visible');
+  
+});
+  
+    it('renders correctly with custom props', () => {
+      mount(
+        <YoutubeButton
+          text="Custom Text"
+          href="https://example.com"
+          target="_self"
+          iconPosition="right"
+          className="custom-class"
+          inNav="true"
+        />
+      );
+      cy.contains('Custom Text').should('be.visible');
+      cy.get('[data-testid="Button-link"]').should('have.attr', 'href', 'https://example.com');
+      cy.get('[data-testid="Button-link"]').should('have.attr', 'target', '_self');
+    });
+  });
+  
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 0ca4662364d..71db8d39365 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -262,9 +262,9 @@
       }
     },
     "node_modules/@babel/core/node_modules/semver": {
-      "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
       "bin": {
         "semver": "bin/semver"
       }
@@ -5059,10 +5059,13 @@
       }
     },
     "node_modules/eslint-plugin-react/node_modules/semver": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-      "dev": true
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
     },
     "node_modules/eslint-scope": {
       "version": "5.1.1",
@@ -11395,9 +11398,9 @@
       }
     },
     "node_modules/semver": {
-      "version": "7.5.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
-      "integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
       "dependencies": {
         "lru-cache": "^6.0.0"
       },
@@ -13194,9 +13197,9 @@
       },
       "dependencies": {
         "semver": {
-          "version": "5.7.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
+          "version": "5.7.2",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+          "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g=="
         },
         "source-map": {
           "version": "0.5.7",
@@ -16962,9 +16965,9 @@
           }
         },
         "semver": {
-          "version": "6.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "version": "6.3.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+          "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
           "dev": true
         }
       }
@@ -21955,9 +21958,9 @@
       }
     },
     "semver": {
-      "version": "7.5.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
-      "integrity": "sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
       "requires": {
         "lru-cache": "^6.0.0"
       }
diff --git a/pages/roadmap.js b/pages/roadmap.js
index 442aac9bb7e..1653f61b7a7 100644
--- a/pages/roadmap.js
+++ b/pages/roadmap.js
@@ -281,6 +281,7 @@ const solutions = {
   },
   createSupportProgram: {
     title: 'Create a support program to give back to the community',
+    done: true,
     description: <>
       <p>We are very fortunate with the support we got at AsyncAPI. There are many people out there creating great stuff. Some of these things power AsyncAPI and others augment it, making it easier for the end-user to adopt AsyncAPI. We should create a program to give support to these community members. It should consist —at least— of the following things:</p>
       <ul>
@@ -418,7 +419,8 @@ const outcomes = {
     title: 'Number of contributors go above 100 in top repos',
     description: <p>We make top repos grow to a point where we go over 100 contributors in the whole history of the project.</p>,
     solutions: [
-      solutions.createOutstandingContributingGuide
+      solutions.createOutstandingContributingGuide,
+      solutions.createSupportProgram
     ]
   },
   numberProjectsAbove100: {