diff --git a/.gitignore b/.gitignore
index 03d7f01266eb..dd949d926f52 100644
--- a/.gitignore
+++ b/.gitignore
@@ -25,3 +25,5 @@ config/tools-ignored.json
 deno.lock
 cypress/videos
 cypress/screenshots
+next-env.d.ts
+*.tsbuildinfo
\ No newline at end of file
diff --git a/components/Accordion/AccordionItem.tsx b/components/Accordion/AccordionItem.tsx
index 715244d6ffd4..a1647a59a2ea 100644
--- a/components/Accordion/AccordionItem.tsx
+++ b/components/Accordion/AccordionItem.tsx
@@ -39,9 +39,9 @@ export default function AccordionItem({ itemIndex, title, content, isActive, set
   }, [isActive]);
 
   return (
-    <div className='my-2 flex size-full flex-col gap-1 border border-gray-200 bg-white px-2'>
+    <div className='my-2 flex size-full flex-col gap-1 border-none px-2'>
       <button className='flex h-8 w-full items-center justify-between rounded-sm py-2' onClick={handleClick}>
-        <div className='font-body font-semibold text-gray-800 antialiased'>{title}</div>
+        <div className='font-body font-semibold text-gray-700 antialiased dark:text-white text-gray-700'>{title}</div>
         <div>
           {isActive ? (
             <svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
@@ -72,7 +72,7 @@ export default function AccordionItem({ itemIndex, title, content, isActive, set
       >
         <div
           ref={contentRef}
-          className='rounded-sm border-t border-gray-200 py-2 font-body font-regular text-gray-700 antialiased'
+          className='rounded-sm border-none py-2 font-body font-regular text-gray-700 antialiased dark:text-white text-gray-700'
         >
           {content}
         </div>
diff --git a/components/Calendar.tsx b/components/Calendar.tsx
index 22fa2962085b..12ab385b21a2 100644
--- a/components/Calendar.tsx
+++ b/components/Calendar.tsx
@@ -37,11 +37,15 @@ export default function Calendar({ className = '', size }: ICalendarProps) {
   return (
     <div
       className={twMerge(
-        'overflow-hidden rounded-md border border-gray-200 bg-white p-4 h-full flex flex-col gap-2',
+        'overflow-hidden rounded-md border border-gray-200 bg-white dark:bg-dark-background dark:border-border p-4 h-full flex  flex-col gap-2',
         className
       )}
     >
-      <Heading level={HeadingLevel.h2} typeStyle={HeadingTypeStyle.mdSemibold}>
+      <Heading
+        level={HeadingLevel.h2}
+        typeStyle={HeadingTypeStyle.mdSemibold}
+        className='dark:text-dark-heading text-gray-900'
+      >
         {t('calendar.title')}
       </Heading>
       <ul>
@@ -52,8 +56,10 @@ export default function Calendar({ className = '', size }: ICalendarProps) {
                 <span className='flex-1 self-center text-center'>{dayjs(event.date).format('D')}</span>
               </div>
               <div className='grow text-left sm:mt-0 sm:pl-6'>
-                <h2 className='title-font font-medium text-gray-900 hover:text-gray-500'>{event.title}</h2>
-                <p className='text-gray-600'>
+                <h2 className='title-font font-medium text-gray-900 dark:text-white hover:text-gray-500 dark:hover:text-gray-300'>
+                  {event.title}
+                </h2>
+                <p className='text-gray-600 dark:text-gray-300'>
                   {dayjs(event.date).format('LLLL')} UTC
                   {dayjs(event.date).format('Z')}
                 </p>
@@ -63,7 +69,9 @@ export default function Calendar({ className = '', size }: ICalendarProps) {
         ))}
       </ul>
       <div className='h-full content-center'>
-        {!eventsExist && <div className='font-bold text-gray-700 lg:pb-8'>{t('calendar.noMeetingsMessage')}</div>}
+        {!eventsExist && (
+          <div className='font-bold text-gray-700 dark:text-gray-300 lg:pb-8'>{t('calendar.noMeetingsMessage')}</div>
+        )}
         <div className='sm:pt-0 md:pt-2 lg:pb-8 lg:pt-0' data-testid='Calendar-button'>
           <GoogleCalendarButton href={CALENDAR_URL} text={t('calendar.viewCalendarBtn')} />
         </div>
diff --git a/components/CaseStudyCard.tsx b/components/CaseStudyCard.tsx
index 035c4af723cc..78306ce04f57 100644
--- a/components/CaseStudyCard.tsx
+++ b/components/CaseStudyCard.tsx
@@ -1,8 +1,10 @@
+import Link from 'next/link';
 import React from 'react';
 
-import type { ICaseStudies } from '@/types/post';
+import type { ICaseStudies, ICaseStudy } from '@/types/post';
 import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
 
+import Button from './buttons/Button';
 import Paragraph from './typography/Paragraph';
 
 interface ICaseStudyCardProps {
@@ -10,7 +12,7 @@ interface ICaseStudyCardProps {
 }
 
 /**
- * @description A component that displays a list of case studies in a card format
+ * @description Displays case studies in a card grid layout
  * @param {ICaseStudies} props.studies - The list of case studies to display
  */
 export default function CaseStudyCard({ studies = [] }: ICaseStudyCardProps) {
@@ -19,21 +21,26 @@ export default function CaseStudyCard({ studies = [] }: ICaseStudyCardProps) {
   }
 
   return (
-    <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
-            className='h-full min-h-[300px] max-w-sm overflow-hidden rounded-md border border-gray-200 bg-white p-4'
-            data-testid='CaseStudyCard-main'
-          >
-            <span className='mr-2'>
-              <img className='m-auto h-16' src={study.company.logo} alt={study.company.name} />
-            </span>
-            <Paragraph typeStyle={ParagraphTypeStyle.md} className='my-4'>
+    <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8'>
+      {studies.map((study: ICaseStudy) => (
+        <Link key={study.id} href={`/casestudies/${study.id}`} className='group block h-full'>
+          <div className='h-full bg-white dark:bg-dark-background border border-gray-200 dark:border-gray-700 rounded-2xl p-6 transition-all duration-300 hover:shadow-xl hover:-translate-y-1'>
+            <div className='flex items-center justify-center h-20 mb-6'>
+              <img src={study.company.logo} alt={study.company.name} className='max-h-16 max-w-full object-contain' />
+            </div>
+
+            <Paragraph typeStyle={ParagraphTypeStyle.md} className='text-gray-600 dark:text-gray-400 mb-6 line-clamp-4'>
               {study.company.description}
             </Paragraph>
+
+            <div className='mt-auto'>
+              <Button
+                text='Read case study →'
+                className='w-full bg-primary-500 hover:bg-primary-600 text-white group-hover:bg-primary-600 transition-colors'
+              />
+            </div>
           </div>
-        </a>
+        </Link>
       ))}
     </div>
   );
diff --git a/components/CaseTOC.tsx b/components/CaseTOC.tsx
index 52b59abc0dcd..fc165d249689 100644
--- a/components/CaseTOC.tsx
+++ b/components/CaseTOC.tsx
@@ -95,7 +95,7 @@ function TOCItem({ item, index, currSelected, closeMenu }: TOCItemProps) {
       <nav className='relative block max-w-max'>
         <a
           className={twMerge(
-            'font-normal mb-1 flex items-center font-sans text-sm text-gray-900 antialiased transition duration-100 ease-in-out hover:underline',
+            'font-normal mb-1 flex items-center font-sans text-sm dark:text-white text-gray-900 antialiased transition duration-100 ease-in-out hover:underline',
             active && 'font-bold text-primary-500'
           )}
           href={`#${item.slug}`}
@@ -168,8 +168,8 @@ export default function CaseTOC({ className, cssBreakingPoint = 'xl', toc }: Cas
               open && 'mb-4'
             } flex-1 text-primary-500 font-medium uppercase tracking-wide text-sm font-sans antialiased ${
               cssBreakingPoint === 'xl'
-                ? 'xl:mb-4 xl:text-xs xl:text-gray-900 xl:font-bold'
-                : 'lg:mb-4 lg:text-xs lg:text-gray-900 lg:font-bold'
+                ? 'xl:mb-4 xl:text-xs xl:text-gray-900 dark:text-gray-300 xl:font-bold'
+                : 'lg:mb-4 lg:text-xs lg:text-gray-900 dark:text-gray-300 lg:font-bold'
             }`
           )}
         >
diff --git a/components/DarkModeToggle.tsx b/components/DarkModeToggle.tsx
new file mode 100644
index 000000000000..0a89b9d36953
--- /dev/null
+++ b/components/DarkModeToggle.tsx
@@ -0,0 +1,86 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+// SVG Icons as components
+const SunIcon = ({ className = 'w-5 h-5' }) => (
+  <svg
+    className={className}
+    fill='none'
+    stroke='white'
+    strokeWidth='2'
+    viewBox='0 0 24 24'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <circle cx='12' cy='12' r='5' />
+    <path d='M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42' />
+  </svg>
+);
+
+const MoonIcon = ({ className = 'w-5 h-5' }) => (
+  <svg
+    className={`stroke-current text-opacity-85 text-zinc-600 ${className}`}
+    fill='none'
+    strokeWidth='2'
+    viewBox='0 0 24 24'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <path d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z' />
+  </svg>
+);
+
+/**
+ * A modern toggle button component that switches between light and dark mode.
+ * Remembers the selected mode using localStorage with smooth animations.
+ */
+export default function DarkModeToggle() {
+  const [isDark, setIsDark] = useState(false);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    // Load preference on mount
+    const storedTheme = localStorage.getItem('theme');
+    const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; // NOSONAR
+
+    const shouldUseDark = storedTheme === 'dark' || (!storedTheme && systemPrefersDark);
+
+    document.documentElement.classList.toggle('dark', shouldUseDark);
+    setIsDark(shouldUseDark);
+  }, []);
+
+  const toggleDarkMode = () => {
+    const newTheme = !isDark;
+
+    document.documentElement.classList.toggle('dark', newTheme);
+    localStorage.setItem('theme', newTheme ? 'dark' : 'light');
+    setIsDark(newTheme);
+  };
+
+  // Prevent hydration mismatch
+  if (!mounted) {
+    return <div className='w-10 h-10 rounded-lg bg-gray-100 dark:bg-gray-800 animate-pulse' />;
+  }
+
+  return (
+    <button
+      onClick={toggleDarkMode}
+      className='relative p-2 mx-2 text-zinc-800 dark:text-zinc-800 hover:text-black dark:hover:text-white hover:bg-gray-100 dark:hover:bg-primary-500 rounded-lg transition-all duration-300 group'
+      aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+    >
+      {/* Icon container with smooth rotation */}
+      <div className='relative w-5 h-5 transition-transform duration-300 group-hover:scale-110'>
+        {isDark ? (
+          <SunIcon className='w-5 h-5 transition-all duration-300 rotate-0 group-hover:rotate-12' />
+        ) : (
+          <MoonIcon className='w-5 h-5 transition-all duration-300 rotate-0 group-hover:-rotate-12' />
+        )}
+      </div>
+
+      {/* Tooltip */}
+      <div className='absolute -bottom-10 left-1/2 transform -translate-x-1/2 px-2 py-1 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap'>
+        {isDark ? 'Light mode' : 'Dark mode'}
+      </div>
+    </button>
+  );
+}
diff --git a/components/Feedback.tsx b/components/Feedback.tsx
index 104e21107f0f..2de4ef197f2b 100644
--- a/components/Feedback.tsx
+++ b/components/Feedback.tsx
@@ -95,31 +95,35 @@ export default function Feedback({ className }: IFeedbackProps) {
   }
 
   return (
-    <div className={`flex flex-col rounded-md border border-gray-200 p-4 shadow-md ${className}`}>
+    <div
+      className={`flex flex-col rounded-md border dark:bg-dark-card dark:border-border border-gray-200 p-4 shadow-md ${className}`}
+    >
       <div className='flex flex-row'>
-        <img src='/img/illustrations/icons/icon.svg' className='my-auto sm:size-14 lg:w-16' alt='' aria-hidden='true' />
+        <img src='/img/illustrations/icons/icon.svg' className='my-auto sm:size-14 lg:w-14' alt='' aria-hidden='true' />
         <div className='ml-4 flex flex-col'>
-          <div className='text-xl'>Was this helpful?</div>
-          <div className='text-sm text-gray-500'>Help us improve the docs by adding your contribution.</div>
+          <div className='text-xl dark:text-dark-heading'>Was this helpful?</div>
+          <div className='text-sm dark:text-dark-text text-gray-500'>
+            Help us improve the docs by adding your contribution.
+          </div>
         </div>
       </div>
       <form onSubmit={handleSubmit}>
         <div className='my-4 flex flex-col'>
           <textarea
-            className='inline-block h-20 w-full rounded-md border bg-gray-50 px-2 py-1 align-top text-sm text-gray-700 focus:border-0'
+            className='inline-block h-20 w-full rounded-md border dark:border-border dark:bg-dark-footer bg-gray-50 px-2 py-1 align-top text-sm text-gray-700 focus:border-0'
             placeholder='Write your suggestions here'
             onChange={(e) => setFeedback(e.target.value)}
             required
           />
           <div className='mt-4 block text-sm lg:flex lg:flex-row'>
             <button
-              className='w-full rounded bg-primary-500 py-2 text-white shadow-md transition-all duration-500 ease-in-out hover:shadow-lg lg:w-6/12'
+              className='w-full rounded bg-primary-500 dark:border border-primary-500 dark:hover:bg-transparent py-2 text-white shadow-md transition-all duration-300 ease-in-out hover:shadow-lg lg:w-6/12'
               type='submit'
             >
               Submit feedback
             </button>
-            <div className='my-2 w-full text-center font-medium lg:my-auto lg:w-1/12'>OR</div>
-            <GitHubIssue />
+            <div className='my-2 w-full text-center dark:text-dark-text font-medium lg:my-auto lg:w-1/12'>OR</div>
+            <GitHubIssue className='bg-secondary-500 dark:border dark:border-secondary-500 dark:hover:bg-transparent' />
           </div>
         </div>
       </form>
diff --git a/components/FinancialSummary/AsyncAPISummary.tsx b/components/FinancialSummary/AsyncAPISummary.tsx
index 7ee80d54dbfa..6442a31ce781 100644
--- a/components/FinancialSummary/AsyncAPISummary.tsx
+++ b/components/FinancialSummary/AsyncAPISummary.tsx
@@ -18,7 +18,7 @@ export default function AsyncAPISummary() {
           <Heading level={HeadingLevel.h2} className='m-3 text-center text-5xl'>
             AsyncAPI Financial Summary
           </Heading>
-          <Paragraph typeStyle={ParagraphTypeStyle.md} className='my-1 max-w-4xl text-darkGunMetal'>
+          <Paragraph typeStyle={ParagraphTypeStyle.md} className='my-1 max-w-4xl text-darkGunMetal dark:text-dark-text'>
             To help improve the current state of Event-Driven Architectures and their tooling, you can show your support
             for the AsyncAPI Initiative by making a financial contribution. We offer three donation options:{' '}
             <strong>Open Collective, GitHub Sponsors, and Linux Foundation Crowdfunding</strong>. Our expenses are
@@ -39,7 +39,7 @@ export default function AsyncAPISummary() {
           Ways to Support Us?
         </Heading>
       </div>
-      <div className='max-width my-4 text-center text-base text-darkGunMetal'>
+      <div className='max-width my-4 text-center text-base text-darkGunMetal dark:text-dark-text'>
         <Paragraph typeStyle={ParagraphTypeStyle.sm} className='my-4'>
           The easiest way to support AsyncAPI is by becoming a financial sponsor. While{' '}
           <br className='hidden lg:inline-block' />
@@ -69,7 +69,7 @@ export default function AsyncAPISummary() {
         </a>
         <a href='https://github.com/sponsors/asyncapi' target='_blank'>
           <img
-            className='mx-4 inline size-10 transition-transform hover:scale-110 active:scale-90'
+            className='mx-4 inline size-10 transition-transform hover:scale-110 active:scale-90 dark:invert'
             src='/img/logos/github-black.svg'
             alt='Github'
           />
diff --git a/components/FinancialSummary/BarChartComponent.tsx b/components/FinancialSummary/BarChartComponent.tsx
index 3c6ed0dbb0ad..5afec2767525 100644
--- a/components/FinancialSummary/BarChartComponent.tsx
+++ b/components/FinancialSummary/BarChartComponent.tsx
@@ -17,6 +17,7 @@ export default function BarChartComponent() {
   const [selectedCategory, setSelectedCategory] = useState<string>('All Categories');
   const [selectedMonth, setSelectedMonth] = useState<string>('All Months');
   const [windowWidth, setWindowWidth] = useState<number>(0);
+  const [isMounted, setIsMounted] = useState<boolean>(false);
 
   /*
     TODO: Uncomment the block below to enable previous-years data (2023) and "All Years" selection.
@@ -94,6 +95,7 @@ export default function BarChartComponent() {
 
   // Effect hook to update windowWidth state on resize
   useEffect(() => {
+    setIsMounted(true);
     const handleResize = () => {
       setWindowWidth(window.innerWidth);
     };
@@ -149,21 +151,23 @@ export default function BarChartComponent() {
 
   return (
     <div className='mt-8 flex items-center justify-center sm:px-6 lg:px-8'>
-      <div className='w-full px-4 text-center lg:w-2/3'>
+      <div className='w-full px-4 text-center lg:w-2/3 dark:text-dark-text'>
         <div className='mb-5'>
-          <h1 id='budget-analysis' className='my-2 mb-4 text-3xl font-semibold'>
+          <h1 id='budget-analysis' className='my-2 mb-4 text-3xl font-semibold dark:text-white'>
             Budget Analysis
           </h1>
           <p>Gain insights into the allocation of funds across different categories through our Budget Analysis</p>
           <div className='my-4 flex flex-col justify-between md:m-8 md:flex-row md:items-center md:justify-between'>
             <div className='my-2'>
               <p className='text-center sm:text-left'>Expenses</p>
-              <p className='mt-1 text-center text-xl font-semibold sm:text-left'>${totalAmount.toFixed(2)}</p>
+              <p className='mt-1 text-center text-xl font-semibold sm:text-left dark:text-white'>
+                ${totalAmount.toFixed(2)}
+              </p>
             </div>
             <div className='space-x-4 md:flex'>
               <div className='mx-auto'>
                 <select
-                  className='m-1 w-full rounded-md border border-gray-600 bg-white p-2 text-xs font-semibold text-violet sm:w-auto md:w-48'
+                  className='m-1 w-full rounded-md border border-gray-600 bg-white dark:bg-dark-card dark:text-white p-2 text-xs font-semibold text-violet sm:w-auto md:w-48'
                   value={selectedCategory}
                   onChange={(e) => setSelectedCategory(e.target.value)}
                 >
@@ -206,40 +210,42 @@ export default function BarChartComponent() {
             </div>
           </div>
         </div>
-        <div className='flex justify-center'>
-          <BarChart width={barWidth} height={barHeight} data={chartData}>
-            <CartesianGrid strokeDasharray='3 3' />
-            <YAxis tickFormatter={(value) => `$${value}`} />
-            <Tooltip content={<CustomTooltip />} />
-            <Legend />
-            <Bar
-              dataKey='Amount'
-              fill='#7B5DD3FF'
-              onClick={(data) => {
-                const category = data.payload.Category;
-
-                // Active behavior: use the static 2024 ExpensesLinkData (code 2)
-                const matchedLinkObject: ExpensesLinkItem | undefined = ExpensesLinkData.find(
-                  (obj) => obj.category === category
-                );
-
-                if (matchedLinkObject) {
-                  window.open(matchedLinkObject.link, '_blank');
-                }
-
-                // // --- if previous-years support is enabled: Uncomment code given below
-                // // const matchedLinkObject: ExpensesLinkItem | undefined = currentExpensesLinkData.find(
-                // //   (obj: ExpensesLinkItem) => obj.category === category
-                // // );
-                // //
-                // // if (matchedLinkObject) {
-                // //   window.open(matchedLinkObject.link, '_blank');
-                // // }
-              }}
-            />
-          </BarChart>
+        <div className='flex justify-center dark:text-dark-text'>
+          {isMounted && windowWidth >= 900 && (
+            <BarChart width={barWidth} height={barHeight} data={chartData}>
+              <CartesianGrid strokeDasharray='3 3' stroke='currentColor' className='opacity-30' />
+              <YAxis tickFormatter={(value) => `$${value}`} stroke='currentColor' />
+              <Tooltip content={<CustomTooltip />} />
+              <Legend wrapperStyle={{ color: 'inherit' }} />
+              <Bar
+                dataKey='Amount'
+                fill='#7B5DD3FF'
+                onClick={(data) => {
+                  const category = data.payload.Category;
+
+                  // Active behavior: use the static 2024 ExpensesLinkData (code 2)
+                  const matchedLinkObject: ExpensesLinkItem | undefined = ExpensesLinkData.find(
+                    (obj) => obj.category === category
+                  );
+
+                  if (matchedLinkObject) {
+                    window.open(matchedLinkObject.link, '_blank', 'noopener,noreferrer');
+                  }
+
+                  // // --- if previous-years support is enabled: Uncomment code given below
+                  // // const matchedLinkObject: ExpensesLinkItem | undefined = currentExpensesLinkData.find(
+                  // //   (obj: ExpensesLinkItem) => obj.category === category
+                  // // );
+                  // //
+                  // // if (matchedLinkObject) {
+                  // //   window.open(matchedLinkObject.link, '_blank');
+                  // // }
+                }}
+              />
+            </BarChart>
+          )}
         </div>
-        {windowWidth && windowWidth < 900 ? <ExpensesCard /> : null}
+        {isMounted && windowWidth < 900 ? <ExpensesCard /> : null}
       </div>
     </div>
   );
diff --git a/components/FinancialSummary/Card.tsx b/components/FinancialSummary/Card.tsx
index 44c9a00ca555..b57bcfe49f37 100644
--- a/components/FinancialSummary/Card.tsx
+++ b/components/FinancialSummary/Card.tsx
@@ -26,7 +26,7 @@ export default function Card({ month, data }: { month: keyof Expenses; data: Exp
   }
 
   return (
-    <div className='flex h-56 flex-col overflow-hidden rounded-lg bg-slate-100 p-4 shadow-lg'>
+    <div className='flex h-56 flex-col overflow-hidden rounded-lg bg-slate-100 dark:bg-dark-card dark:text-white p-4 shadow-lg'>
       <div className='mb-4 text-lg font-semibold'>{month}</div>
       <div className='flex flex-col overflow-auto'>
         {data.map((item, index) => (
diff --git a/components/FinancialSummary/CustomTooltip.tsx b/components/FinancialSummary/CustomTooltip.tsx
index f4ae6afe1172..e26077dc7ce8 100644
--- a/components/FinancialSummary/CustomTooltip.tsx
+++ b/components/FinancialSummary/CustomTooltip.tsx
@@ -15,9 +15,9 @@ export default function CustomTooltip({ active, payload }: CustomTooltipProps) {
     const data = payload[0].payload;
 
     return (
-      <div className='bg-opacity-90/90 rounded-md border border-gray-300 bg-white p-2 shadow-md'>
+      <div className='rounded-md border border-gray-300 bg-white/90 p-2 shadow-md dark:border-gray-600 dark:bg-dark-card'>
         <p className='text-14 mb-1 font-bold'>{data.Category}</p>
-        <p className='text-12 text-gray-900'>${data.Amount.toFixed(2)}</p>
+        <p className='text-12 text-gray-900 dark:text-dark-text'>${data.Amount.toFixed(2)}</p>
         <p>Click the bar to learn more</p>
       </div>
     );
diff --git a/components/FinancialSummary/ExpenseBreakdown.tsx b/components/FinancialSummary/ExpenseBreakdown.tsx
index d0566968820e..4b97a053a835 100644
--- a/components/FinancialSummary/ExpenseBreakdown.tsx
+++ b/components/FinancialSummary/ExpenseBreakdown.tsx
@@ -11,14 +11,14 @@ import Paragraph from '../typography/Paragraph';
  */
 export default function ExpenseBreakdown() {
   return (
-    <div className='bg-[#EFFAFE] px-4 sm:px-6 lg:px-8'>
+    <div className='bg-[#EFFAFE] dark:bg-dark-background px-4 sm:px-6 lg:px-8'>
       <div className='mb-16 grid lg:grid-cols-9 lg:gap-8 lg:text-center'>
         <div className='col-span-7 col-start-2 my-12'>
           <div className='mx-2'>
             <Heading className='m-3 text-center text-base'>Expense Breakdown</Heading>
             <Paragraph
               typeStyle={ParagraphTypeStyle.md}
-              className='mx-auto my-3 max-w-4xl text-center text-darkGunMetal'
+              className='mx-auto my-3 max-w-4xl text-center text-darkGunMetal dark:text-dark-text'
             >
               Funds from GitHub Sponsors are directly transferred to our AsyncAPI Open Collective account. We maintain
               transparency in all expenses, and the TSC approves anticipated expenses.
@@ -28,19 +28,21 @@ export default function ExpenseBreakdown() {
             {expenseData.map((expense, index) => (
               <div
                 key={index}
-                className='flex flex-col items-center rounded-md bg-white p-4 shadow-md transition-transform hover:scale-105 active:scale-90'
+                className='flex flex-col items-center rounded-md bg-white dark:bg-dark-card p-4 shadow-md transition-transform hover:scale-105 active:scale-90'
               >
                 <a href={expense.link} target='_blank' rel='noopener noreferrer'>
-                  <div className='text-darkGunMetal'>
+                  <div className='text-darkGunMetal dark:text-dark-text'>
                     <div className='flex flex-col items-center'>
                       <img
                         src={expense.imageUrl}
                         alt={expense.title}
                         className='m-1 h-auto w-1/5 rounded-md object-cover'
                       />
-                      <h2 className='my-2 text-center text-2xl font-semibold text-darkGunMetal'>{expense.title}</h2>
+                      <h2 className='my-2 text-center text-2xl font-semibold text-darkGunMetal dark:text-white'>
+                        {expense.title}
+                      </h2>
                     </div>
-                    <p className='text-center text-base text-darkGunMetal'>{expense.description}</p>
+                    <p className='text-center text-base text-darkGunMetal dark:text-dark-text'>{expense.description}</p>
                   </div>
                 </a>
               </div>
diff --git a/components/FinancialSummary/OtherFormsComponent.tsx b/components/FinancialSummary/OtherFormsComponent.tsx
index 2c52e7775fc9..a6177b1d6cbd 100644
--- a/components/FinancialSummary/OtherFormsComponent.tsx
+++ b/components/FinancialSummary/OtherFormsComponent.tsx
@@ -11,25 +11,29 @@ import Paragraph from '../typography/Paragraph';
  */
 export default function OtherFormsComponent() {
   return (
-    <div className='bg-[#F5F5F5] px-4 sm:px-6 lg:px-8'>
+    <div className='bg-[#F5F5F5] dark:bg-dark-background px-4 sm:px-6 lg:px-8'>
       <div className='grid lg:grid-cols-9 lg:gap-8 lg:text-center'>
         <div className='col-span-7 col-start-2 my-12'>
           <div className='mx-2'>
             <Heading className='mx-3 mb-5 mt-10 text-center text-base'>Other Forms Of Financial Support</Heading>
             <Paragraph
               typeStyle={ParagraphTypeStyle.md}
-              className='mx-auto mb-3 max-w-4xl text-center text-darkGunMetal'
+              className='mx-auto mb-3 max-w-4xl text-center text-darkGunMetal dark:text-dark-text'
             >
-              You can also support AsyncAPI initiative by getting<br className='hidden lg:inline-block'></br> involved
-              through employment, providing services and<br className='hidden lg:inline-block'></br> organizing events
+              You can also support AsyncAPI initiative by getting
+              <br className='hidden lg:inline-block'></br> involved through employment, providing services and
+              <br className='hidden lg:inline-block'></br> organizing events
             </Paragraph>
           </div>
           <div className='mx-3 mt-8 grid grid-cols-1 gap-10 md:grid-cols-3'>
-            {otherFormsData.map((form, index) => (
-              <div key={index} className='flex flex-col items-center rounded-md bg-white p-4 text-center shadow-md'>
+            {otherFormsData.map((form) => (
+              <div
+                key={form.title}
+                className='flex flex-col items-center rounded-md bg-white dark:bg-dark-card p-4 text-center shadow-md'
+              >
                 <img src={form.imageUrl} alt={form.title} className='m-2 h-auto w-1/3 object-cover' />
-                <h2 className='my-2 text-2xl font-semibold'>{form.title}</h2>
-                <p className='mx-2 mt-1 text-base text-darkGunMetal'>{form.description}</p>
+                <h2 className='my-2 text-2xl font-semibold text-gray-900 dark:text-white'>{form.title}</h2>
+                <p className='mx-2 mt-1 text-base text-darkGunMetal dark:text-dark-text'>{form.description}</p>
               </div>
             ))}
           </div>
diff --git a/components/FinancialSummary/SponsorshipTiers.tsx b/components/FinancialSummary/SponsorshipTiers.tsx
index 082fc22e5a37..e6084161f24c 100644
--- a/components/FinancialSummary/SponsorshipTiers.tsx
+++ b/components/FinancialSummary/SponsorshipTiers.tsx
@@ -12,14 +12,17 @@ import Paragraph from '../typography/Paragraph';
  */
 export default function SponsorshipTiers() {
   return (
-    <div className='mt-16 grid bg-purple-100 px-4 sm:px-6 lg:grid-cols-9 lg:gap-8 lg:px-8 lg:text-center'>
+    <div className='mt-16 grid bg-purple-100 dark:bg-dark-card px-4 sm:px-6 lg:grid-cols-9 lg:gap-8 lg:px-8 lg:text-center'>
       <div className='col-span-7 col-start-2 my-12'>
         <div id='sponsorship' className='mx-2'>
           <Heading level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.lg} className='my-3 text-base'>
             Sponsorship Tiers
           </Heading>
 
-          <Paragraph typeStyle={ParagraphTypeStyle.md} className='mx-auto my-3 max-w-4xl text-base text-darkGunMetal'>
+          <Paragraph
+            typeStyle={ParagraphTypeStyle.md}
+            className='mx-auto my-3 max-w-4xl text-base text-darkGunMetal dark:text-dark-text'
+          >
             AsyncAPI offers various sponsorship tiers, each with its own set <br className='hidden lg:inline-block' />
             of benefits and privileges. These tiers include Bronze, Silver,
             <br className='hidden lg:inline-block' />
@@ -41,13 +44,13 @@ export default function SponsorshipTiers() {
               <tbody className='font-normal text-sm'>
                 {sponsorshipTiers.map((tier, index) => (
                   <tr key={index}>
-                    <td className='border border-gray-500 p-2 text-left text-darkGunMetal md:px-10 md:py-2 md:text-base'>
+                    <td className='border border-gray-500 p-2 text-left text-darkGunMetal dark:text-dark-text md:px-10 md:py-2 md:text-base'>
                       {tier.tier}
                     </td>
-                    <td className='border border-gray-500 p-2 text-darkGunMetal md:px-10 md:py-2 md:text-base'>
+                    <td className='border border-gray-500 p-2 text-darkGunMetal dark:text-dark-text md:px-10 md:py-2 md:text-base'>
                       {tier.amount}
                     </td>
-                    <td className='border border-gray-500 p-2 text-left text-darkGunMetal md:px-10 md:py-2 md:text-base'>
+                    <td className='border border-gray-500 p-2 text-left text-darkGunMetal dark:text-dark-text md:px-10 md:py-2 md:text-base'>
                       {tier.benefits}
                     </td>
                   </tr>
diff --git a/components/FinancialSummary/SuccessStories.tsx b/components/FinancialSummary/SuccessStories.tsx
index 2ffdd960b003..3fd3abfab768 100644
--- a/components/FinancialSummary/SuccessStories.tsx
+++ b/components/FinancialSummary/SuccessStories.tsx
@@ -7,14 +7,14 @@ import { successStories } from '../data/successStoriesData';
  */
 export default function SuccessStories() {
   return (
-    <div className='bg-purple-100 px-4 sm:px-6 lg:px-8'>
+    <div className='bg-purple-100 dark:bg-dark-card px-4 sm:px-6 lg:px-8'>
       <div className='my-16 grid lg:grid-cols-9 lg:gap-8 lg:text-center'>
         <div className='col-span-7 col-start-2 my-12'>
           <div className='mx-2'>
-            <h1 id='success-stories' className='m-3 text-center text-4xl font-bold'>
+            <h1 id='success-stories' className='m-3 text-center text-4xl font-bold text-gray-900 dark:text-white'>
               Success Stories
             </h1>
-            <p className='mx-auto my-3 max-w-4xl text-center text-lg text-darkGunMetal'>
+            <p className='mx-auto my-3 max-w-4xl text-center text-lg text-darkGunMetal dark:text-dark-text'>
               Thanks to financial support we can already see many
               <br className='hidden lg:inline-block' /> success stories in the project.
             </p>
@@ -22,8 +22,8 @@ export default function SuccessStories() {
           <div className='mt-4 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3'>
             {successStories.map((story, index) => (
               <div key={index} className='m-4 p-2'>
-                <h1 className='mb-2 text-2xl font-semibold'>{story.title}</h1>
-                <p className='text-base text-darkGunMetal'>{story.description}</p>
+                <h1 className='mb-2 text-2xl font-semibold text-gray-900 dark:text-white'>{story.title}</h1>
+                <p className='text-base text-darkGunMetal dark:text-dark-text'>{story.description}</p>
               </div>
             ))}
           </div>
diff --git a/components/Hero.tsx b/components/Hero.tsx
index c0609e837569..9abf3b02e7dc 100644
--- a/components/Hero.tsx
+++ b/components/Hero.tsx
@@ -1,18 +1,15 @@
 import React from 'react';
 
 import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
-import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
 
 import { useTranslation } from '../utils/i18n';
-import AlgoliaSearch, { SearchButton } from './AlgoliaSearch'; // Import AlgoliaSearch component
 import Button from './buttons/Button';
 import AnnouncementHero from './campaigns/AnnouncementHero';
-import DemoAnimation from './DemoAnimation';
 import Features from './features';
 import ArrowRight from './icons/ArrowRight';
-import IconLoupe from './icons/Loupe';
+import SneakPeek from './SneakPeek';
+import DiamondSponsors from './sponsors/DiamondSponsors';
 import Heading from './typography/Heading';
-import Paragraph from './typography/Paragraph';
 
 interface HeroProps {
   className?: string;
@@ -32,13 +29,15 @@ export default function Hero({ className = '' }: HeroProps) {
       <AnnouncementHero className='my-4' />
       <header className={`mt-12 px-2 ${className}`}>
         <div className='text-center'>
-          <Heading level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.xl} className='mb-4'>
+          <Heading level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.xxl} className='mb-4'>
             {t('main.header')} <span className='block md:-mt-4'> {t('main.subHeader')}</span>
+            <span className='block md:-mt-4'>{t('main.extraSubHeader')}</span>
           </Heading>
+
           <Heading
             level={HeadingLevel.h2}
-            typeStyle={HeadingTypeStyle.bodyLg}
-            textColor='text-gray-700'
+            typeStyle={HeadingTypeStyle.bodyLlg}
+            textColor='text-gray-700 dark:text-dark-text'
             className='mx-auto mb-10 max-w-4xl'
           >
             {t('main.body_pretext')} <strong>{t('main.body_boldtext')}</strong>
@@ -46,43 +45,22 @@ export default function Hero({ className = '' }: HeroProps) {
           </Heading>
           <div className='flex flex-col items-center justify-center gap-2 md:flex-row'>
             <Button
-              className='block w-full md:w-auto'
-              text={t('main.docs_btn')}
-              href='/docs'
+              className='block w-full md:w-1/3 hover:bg-primary-600'
+              text={t('main.community_btn')}
+              href='https://www.asyncapi.com/slack-invite'
+              target='_blank'
+              rel='noopener noreferrer'
               icon={<ArrowRight className='-mb-1 size-5' />}
               data-testid='Hero-Button'
             />
-            {/* Wrap SearchButton with AlgoliaSearch component */}
-            <AlgoliaSearch>
-              <SearchButton className='flex w-full items-center space-x-3 rounded-md border border-secondary-500 bg-secondary-100 px-4 py-3 text-left text-secondary-500 shadow-md transition-all duration-500 ease-in-out hover:bg-secondary-500 hover:text-white md:w-auto'>
-                {({ actionKey }) => (
-                  <>
-                    <IconLoupe />
-                    <span className='flex-auto'>{t('main.search_btn')}</span>
-                    {actionKey && (
-                      <kbd className='font-sans font-semibold'>
-                        <abbr title={actionKey.key} className='no-underline'>
-                          {actionKey.shortKey}
-                        </abbr>{' '}
-                        K
-                      </kbd>
-                    )}
-                  </>
-                )}
-              </SearchButton>
-            </AlgoliaSearch>
           </div>
-          <Paragraph typeStyle={ParagraphTypeStyle.sm} className='mt-4' textColor='text-gray-500'>
-            {t('main.slogan_text')}{' '}
-            <a className='underline' href='https://www.linuxfoundation.org/'>
-              {t('main.slogan_link')}
-            </a>
-          </Paragraph>
+
+          <DiamondSponsors className={'w-full relative left-1/2 right-1/2 -ml-[50vw] -mr-[50vw]'} />
         </div>
+        <Features />
         <div className='mt-8 md:mt-16'>
-          <DemoAnimation />
+          <SneakPeek />
         </div>
-        <Features />
       </header>
     </>
   );
diff --git a/components/link.tsx b/components/Link.tsx
similarity index 52%
rename from components/link.tsx
rename to components/Link.tsx
index ca81ddef399e..7cdd5d2aefa9 100644
--- a/components/link.tsx
+++ b/components/Link.tsx
@@ -4,14 +4,14 @@ import React from 'react';
 
 import { defaultLanguage, i18nPaths, languages } from '@/utils/i18n';
 
-interface LinkComponentProps {
+type LinkComponentProps = Readonly<{
   children: React.ReactNode;
   locale?: string;
   href?: string;
   legacyBehavior?: boolean;
   target?: string;
   rel?: string;
-}
+}>;
 
 /**
  * @description Custom Link component for handling internationalization (i18n).
@@ -31,7 +31,7 @@ export default function LinkComponent({
 }: LinkComponentProps) {
   const router = useRouter();
 
-  // If there is no router available (e.g., during server-side rendering & cypress tests), render a standard Link
+  // Render plain Link if no router (SSR / tests)
   if (!router) {
     return (
       <Link href={props.href || ''} legacyBehavior={legacyBehavior} target={target} rel={rel}>
@@ -42,40 +42,42 @@ export default function LinkComponent({
 
   const { pathname, query, asPath } = router;
 
-  // Detect current language based on the path or query parameter
-  const slug = asPath.split('/')[1];
-  const langSlug = languages.includes(slug) && slug;
-  const language: string = query.lang && typeof query.lang === 'string' ? query.lang : langSlug || defaultLanguage; // Ensure language is always a string
+  const pathSlug = asPath.split('/')[1];
+  const langFromPath = languages.includes(pathSlug) ? pathSlug : undefined;
+  const language = typeof query.lang === 'string' ? query.lang : langFromPath || defaultLanguage;
 
-  let href = props.href || pathname;
+  const originalHref = props.href ?? pathname;
+  const isExternal = originalHref.startsWith('http');
+  const hasI18n = Boolean(i18nPaths[language]);
+  const hrefInI18n = hasI18n && i18nPaths[language].includes(originalHref);
 
-  /*
-    If explicit href is provided, and the language-specific paths for the current language do not include the href,
-    or if the href starts with "http", render a standard Link
-  */
-  if ((props.href && i18nPaths[language] && !i18nPaths[language].includes(href)) || href.includes('http', 0)) {
+  // External links or links not present in i18n map -> simple Link
+  if (isExternal || (props.href && !hrefInI18n)) {
     return (
-      <Link href={href} legacyBehavior={legacyBehavior} passHref target={target} rel={rel}>
+      <Link href={originalHref} legacyBehavior={legacyBehavior} passHref target={target} rel={rel}>
         {children}
       </Link>
     );
   }
-  // If a locale is provided, update the href with the locale
-  if (locale) {
-    if (props.href) {
-      href = `/${locale}${href}`;
-    } else {
-      // If the current path starts with "/404", update href to be the root path with the locale
-      // Otherwise, replace "[lang]" placeholder with the locale
-      href = pathname.startsWith('/404') ? `/${locale}` : pathname.replace('[lang]', locale);
+
+  // Build localized href
+  const buildLocalizedHref = (): string => {
+    if (locale) {
+      if (props.href) return `/${locale}${originalHref}`;
+
+      return pathname.startsWith('/404') ? `/${locale}` : pathname.replace('[lang]', locale);
     }
-  } else {
-    // If no locale is provided, update the href with the current language or keep it as is
-    href = language ? `/${language}${href}` : `/${href}`;
-  }
 
-  // Fix double slashes
-  href = href.replace(/([^:/]|^)\/{2,}/g, '$1/');
+    // No explicit locale: prefer resolved language; keep leading slash consistent
+    const langPrefix = language ? `/${language}` : '/';
+
+    return `${langPrefix}${originalHref}`.replaceAll(/\/{2,}/g, '/');
+  };
+
+  let href = buildLocalizedHref();
+
+  // Fix double slashes (ensure protocol slashes preserved)
+  href = href.replaceAll(/([^:/]|^)\/{2,}/g, '$1/');
 
   return (
     <Link href={href} legacyBehavior={legacyBehavior} target={target} rel={rel} passHref>
diff --git a/components/MDX/MDX.tsx b/components/MDX/MDX.tsx
index 860456738b85..1674c040fd4c 100644
--- a/components/MDX/MDX.tsx
+++ b/components/MDX/MDX.tsx
@@ -1,7 +1,7 @@
 import { MDXProvider as CoreMDXProvider } from '@mdx-js/react';
 import mermaid from 'mermaid';
 import Link from 'next/link';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useId, useState } from 'react';
 import {
   TwitterDMButton,
   TwitterFollowButton,
@@ -66,7 +66,8 @@ function initializeMermaid() {
       fontSize: '18px',
       primaryTextColor: '#242929',
       tertiaryColor: '#F7F9FA',
-      tertiaryBorderColor: '#BFC6C7'
+      tertiaryBorderColor: '#BFC6C7',
+      lineColor: '#BFC6C7'
     }
   });
 }
@@ -172,78 +173,152 @@ function Text({ content = '', className = '' }) {
   return <span className={className}>{content}</span>;
 }
 
+/**
+ * Recursively extracts and concatenates text content from a React node.
+ *
+ * Handles the common React node types:
+ * - null/undefined and boolean: treated as empty strings
+ * - string and number: converted to string
+ * - arrays: each element is processed and results concatenated
+ * - React elements: their `props.children` are recursively processed
+ * - any other values: treated as empty string
+ *
+ * Examples:
+ * - extractText("hello") -> "hello"
+ * - extractText(123) -> "123"
+ * - extractText([ "a", <span>b</span>, null ]) -> "ab"
+ *
+ * @param {React.ReactNode} node - The React node to extract text from. May be a string, number, boolean, null, array, or a React element.
+ * @returns {string} The concatenated text content found within the node and its children.
+ */
+function extractText(node: React.ReactNode): string {
+  if (node == null || typeof node === 'boolean') return '';
+  if (typeof node === 'string' || typeof node === 'number') return String(node);
+  if (Array.isArray(node)) return node.map(extractText).join('');
+  if (React.isValidElement(node)) return extractText((node.props as { children?: React.ReactNode }).children);
+
+  return '';
+}
+
+/**
+ * @description Generates a URL-safe slug from text.
+ *
+ * @param {React.ReactNode} text - The text to convert to a slug.
+ * @returns {string} - A URL-safe slug.
+ */
+function generateSlug(text: React.ReactNode): string {
+  return extractText(text)
+    .toLowerCase()
+    .trim()
+    .replaceAll(/\s+/g, '-')
+    .replaceAll(/[^\w-]/g, '');
+}
+
 /**
  * @description This function returns MDX components.
  */
-const getMDXComponents = {
+const getMDXComponents = (reactId: string) => ({
   h1: (props: React.HTMLProps<HTMLHeadingElement>) => (
     <h1
       {...props}
-      className={`${props.className || ''} my-4 font-heading text-2xl font-semibold tracking-heading text-gray-900 antialiased`}
-    />
+      id={props.id || generateSlug(props.children) || `heading-${reactId}`}
+      className={`${props.className || ''} my-4 font-heading text-2xl font-semibold tracking-heading dark:text-dark-heading text-gray-900 antialiased`}
+      aria-label={props['aria-label'] ?? (extractText(props.children).trim() ? undefined : 'Section title')}
+    >
+      {props.children || <span className='sr-only'>Section title</span>}
+    </h1>
   ),
   h2: (props: React.HTMLProps<HTMLHeadingElement>) => (
     <h2
       {...props}
-      className={`${props.className || ''} mb-4 mt-6 font-heading text-2xl font-semibold tracking-heading text-gray-900 antialiased`}
-    />
+      id={props.id || generateSlug(props.children) || `heading-${reactId}`}
+      className={`${props.className || ''} mb-4 mt-6 font-heading text-2xl font-semibold tracking-heading  dark:text-dark-heading text-gray-900 antialiased`}
+      aria-label={props['aria-label'] ?? (extractText(props.children).trim() ? undefined : 'Section title')}
+    >
+      {props.children || <span className='sr-only'>Section title</span>}
+    </h2>
   ),
   h3: (props: React.HTMLProps<HTMLHeadingElement>) => (
     <h3
       {...props}
-      className={`${props.className || ''} mb-4 mt-6 font-heading text-lg font-medium tracking-heading text-gray-900 antialiased`}
-    />
+      id={props.id || generateSlug(props.children) || `heading-${reactId}`}
+      className={`${props.className || ''} mb-4 mt-6 font-heading text-lg font-medium tracking-heading dark:text-dark-heading text-gray-900 antialiased`}
+      aria-label={props['aria-label'] ?? (extractText(props.children).trim() ? undefined : 'Section title')}
+    >
+      {props.children || <span className='sr-only'>Section title</span>}
+    </h3>
   ),
   h4: (props: React.HTMLProps<HTMLHeadingElement>) => (
     <h4
       {...props}
-      className={`${props.className || ''} text-md my-4 font-heading font-medium text-gray-900 antialiased`}
-    />
+      id={props.id || generateSlug(props.children) || `heading-${reactId}`}
+      className={`${props.className || ''} text-md my-4 font-heading font-medium dark:text-dark-heading text-gray-900 antialiased`}
+      aria-label={props['aria-label'] ?? (extractText(props.children).trim() ? undefined : 'Section title')}
+    >
+      {props.children || <span className='sr-only'>Section title</span>}
+    </h4>
   ),
   h5: (props: React.HTMLProps<HTMLHeadingElement>) => (
-    <h5 {...props} className={`${props.className || ''} text-md my-4 font-heading font-bold antialiased`} />
+    <h5
+      {...props}
+      id={props.id || generateSlug(props.children) || `heading-${reactId}`}
+      className={`${props.className || ''} text-md my-4 font-heading dark:text-dark-heading   font-bold antialiased`}
+      aria-label={props['aria-label'] ?? (extractText(props.children).trim() ? undefined : 'Section title')}
+    >
+      {props.children || <span className='sr-only'>Section title</span>}
+    </h5>
   ),
   h6: (props: React.HTMLProps<HTMLHeadingElement>) => (
     <h6
       {...props}
-      className={`${props.className || ''} my-4 font-heading text-sm font-bold uppercase text-gray-900 antialiased`}
-    />
+      id={props.id || generateSlug(props.children) || `heading-${reactId}`}
+      className={`${props.className || ''} my-4 font-heading text-sm font-bold uppercase dark:text-dark-heading text-gray-900 antialiased`}
+      aria-label={props['aria-label'] ?? (extractText(props.children).trim() ? undefined : 'Section title')}
+    >
+      {props.children || <span className='sr-only'>Section title</span>}
+    </h6>
   ),
   blockquote: (props: React.HTMLProps<HTMLQuoteElement>) => (
     <blockquote
       {...props}
-      className={`${props.className || ''} my-4 border-l-4 border-gray-400 bg-white py-1 pl-4 pr-1 font-body italic text-gray-700 antialiased`}
+      className={`${props.className || ''} my-4 border-l-4 border-gray-400 dark:bg-dark-footer bg-white py-1 pl-4 pr-1 font-body italic dark:text-white text-gray-700 antialiased`}
     />
   ),
   p: (props: React.HTMLProps<HTMLParagraphElement>) => (
-    <p {...props} className={`${props.className || ''} my-4 font-body font-regular text-gray-700 antialiased`} />
+    <p
+      {...props}
+      className={`${props.className || ''} my-4 font-body font-regular dark:text-dark-heading text-gray-700 antialiased`}
+    />
   ),
   strong: (props: React.HTMLProps<HTMLSpanElement>) => (
-    <strong {...props} className={`${props.className || ''} my-4 font-body font-semibold text-gray-800 antialiased`} />
+    <strong
+      {...props}
+      className={`${props.className || ''} my-4 font-body font-semibold text-gray-800 dark:text-white antialiased`}
+    />
   ),
   a: (props: React.HTMLProps<HTMLAnchorElement>) => (
     <a
       {...props}
-      className={`${props.className || 'border-b border-secondary-400 font-semibold text-gray-900 transition duration-300 ease-in-out hover:border-secondary-500'} font-body antialiased`}
+      className={`${props.className || 'border-b border-secondary-400 dark:text-white font-semibold text-gray-900 transition duration-300 ease-in-out hover:border-secondary-500'} font-body antialiased`}
     />
   ),
   ul: (props: React.HTMLProps<HTMLUListElement>) => (
     <ul
       {...props}
-      className={`${props.className || ''} font-normal my-4 ml-4 list-disc font-body text-gray-700 antialiased`}
+      className={`${props.className || ''} font-normal my-4 ml-4 list-disc font-body dark:text-dark-heading text-gray-700 antialiased`}
     />
   ),
   ol: (props: React.HTMLProps<HTMLOListElement>) => (
     <ol
       {...props}
-      className={`${props.className || ''} font-normal my-4 ml-4 list-decimal font-body text-gray-700 antialiased`}
+      className={`${props.className || ''} font-normal my-4 ml-4 list-decimal font-body dark:text-dark-heading text-gray-700 antialiased`}
       type='1'
     />
   ),
   li: (props: React.HTMLProps<HTMLLIElement>) => (
     <li
       {...props}
-      className={`${props.className || ''} my-3 font-body font-regular tracking-tight text-gray-700 antialiased`}
+      className={`${props.className || ''} my-3 font-body font-regular tracking-tight dark:text-white text-gray-700 antialiased`}
     />
   ),
   button: Button as React.ComponentType<React.ButtonHTMLAttributes<HTMLButtonElement>>,
@@ -328,7 +403,7 @@ const getMDXComponents = {
   TwitterOnAirButton,
   Profiles,
   Visualizer
-};
+});
 
 export const mdxComponents = getMDXComponents;
 
@@ -343,5 +418,7 @@ interface MDXProviderProps {
  * @param {React.ReactNode} props.children - The children to render.
  */
 export function MDXProvider({ children }: MDXProviderProps) {
-  return <CoreMDXProvider components={mdxComponents}>{children}</CoreMDXProvider>;
+  const reactId = useId();
+
+  return <CoreMDXProvider components={mdxComponents(reactId)}>{children}</CoreMDXProvider>;
 }
diff --git a/components/Modal.tsx b/components/Modal.tsx
index 77db02d4720e..3a80e7dfeb6e 100644
--- a/components/Modal.tsx
+++ b/components/Modal.tsx
@@ -54,10 +54,15 @@ export default function Modal({ title, children, onModalClose = () => {} }: IMod
       onClick={backdropClickHandler}
       onKeyUp={onKeyUpHandler}
     >
-      <div className='relative m-auto overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:w-full sm:max-w-4xl sm:p-6'>
+      <div className='relative m-auto overflow-hidden rounded-lg bg-white dark:bg-dark-background px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:w-full sm:max-w-4xl sm:p-6'>
         <div className='mb-6 flex justify-between'>
-          <h1 className='mr-4 truncate text-lg font-bold'>{title}</h1>
-          <button onClick={() => onModalClose()} data-testid='Modal-close' aria-label='Close modal'>
+          <h1 className='mr-4 truncate text-lg font-bold dark:text-white'>{title}</h1>
+          <button
+            onClick={() => onModalClose()}
+            data-testid='Modal-close'
+            aria-label='Close modal'
+            className='dark:text-white dark:hover:text-gray-300'
+          >
             <svg
               xmlns='http://www.w3.org/2000/svg'
               fill='none'
@@ -70,7 +75,7 @@ export default function Modal({ title, children, onModalClose = () => {} }: IMod
             </svg>
           </button>
         </div>
-        <div className='max-h-[65vh] w-full overflow-auto lg:max-h-[70vh]'>{children}</div>
+        <div className='max-h-[65vh] w-full overflow-auto dark:text-gray-300 lg:max-h-[70vh]'>{children}</div>
       </div>
     </div>
   );
diff --git a/components/NewsletterSubscribe.tsx b/components/NewsletterSubscribe.tsx
index 2d5983b13a1b..785930194581 100644
--- a/components/NewsletterSubscribe.tsx
+++ b/components/NewsletterSubscribe.tsx
@@ -41,7 +41,7 @@ interface NewsletterSubscribeProps {
  * @param {string} props.errorSubtitle - The error subtitle to be displayed.
  */
 export default function NewsletterSubscribe({
-  className = 'p-8 text-center text-black',
+  className = 'p-8 text-center',
   dark = false,
   title = 'Subscribe to our newsletter to receive news about AsyncAPI.',
   subtitle = 'We respect your inbox. No spam, promise ✌️',
@@ -54,8 +54,8 @@ export default function NewsletterSubscribe({
 
   const { t, ready } = useTranslation('common', { keyPrefix: 'newsletterCTA' });
 
-  const headTextColor = dark ? 'text-white' : '';
-  const paragraphTextColor = dark ? 'text-gray-300' : '';
+  const headTextColor = dark ? 'text-white' : 'text-darkGunMetal dark:text-white';
+  const paragraphTextColor = dark ? 'text-gray-300' : 'text-gray-700 dark:text-gray-300';
 
   const setFormStatus = (formResponse: FormStatus) => {
     setStatus(formResponse);
diff --git a/components/Pagination.tsx b/components/Pagination.tsx
new file mode 100644
index 000000000000..82312ccb7e2a
--- /dev/null
+++ b/components/Pagination.tsx
@@ -0,0 +1,285 @@
+import React, { useState } from 'react';
+
+type PaginationProps = Readonly<{
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (_page: number) => void;
+  showGoToPage?: boolean;
+  variant?: 'default' | 'simple' | 'compact';
+  className?: string;
+}>;
+
+/**
+ * @description Returns the active/inactive button class string for a page button.
+ */
+function getPageButtonClass(isActive: boolean, padding = 'px-4 py-2'): string {
+  if (isActive) {
+    return `${padding} rounded-lg transition-colors bg-primary-500 text-white`;
+  }
+
+  return `${padding} rounded-lg transition-colors text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800`;
+}
+
+/**
+ * @description Builds the compact page list with ellipsis markers.
+ */
+function buildCompactPageList(totalPages: number, currentPage: number): (number | 'ellipsis')[] {
+  if (totalPages <= 7) {
+    return Array.from({ length: totalPages }, (_, i) => i + 1);
+  }
+
+  const pages: (number | 'ellipsis')[] = [1];
+
+  if (currentPage > 3) {
+    pages.push('ellipsis');
+  }
+
+  const start = Math.max(2, currentPage - 1);
+  const end = Math.min(totalPages - 1, currentPage + 1);
+
+  for (let i = start; i <= end; i++) {
+    if (i !== 1 && i !== totalPages) {
+      pages.push(i);
+    }
+  }
+
+  if (currentPage < totalPages - 2) {
+    pages.push('ellipsis');
+  }
+
+  if (totalPages > 1) {
+    pages.push(totalPages);
+  }
+
+  return pages;
+}
+
+/**
+ * @description Computes the visible page range for the default variant.
+ */
+function getDefaultPageRange(totalPages: number, currentPage: number, maxVisible: number) {
+  if (totalPages <= maxVisible) {
+    return { startPage: 1, endPage: totalPages };
+  }
+
+  if (currentPage <= 3) {
+    return { startPage: 1, endPage: maxVisible };
+  }
+
+  if (currentPage >= totalPages - 2) {
+    return { startPage: totalPages - maxVisible + 1, endPage: totalPages };
+  }
+
+  return { startPage: currentPage - 2, endPage: currentPage + 2 };
+}
+
+/**
+ * @description Returns the CSS rotation class for the dropdown chevron.
+ */
+function getChevronRotation(isOpen: boolean, direction: 'down' | 'up'): string {
+  if (!isOpen) {
+    return '';
+  }
+
+  return direction === 'up' ? 'rotate-0' : 'rotate-180';
+}
+
+/**
+ * @description Unified Pagination component with customizable display modes and "Go to page" dropdown
+ * @param {PaginationProps} props - The props for the component
+ * @param {number} props.currentPage - The current active page number
+ * @param {number} props.totalPages - The total number of pages
+ * @param {(_page: number) => void} props.onPageChange - Callback function when page changes
+ * @param {boolean} [props.showGoToPage=true] - Whether to show the "Go to page" dropdown
+ * @param {'default' | 'simple' | 'compact'} [props.variant='default'] - Display variant
+ * @param {string} [props.className=''] - Additional CSS classes
+ */
+export default function Pagination({
+  currentPage,
+  totalPages,
+  onPageChange,
+  showGoToPage = true,
+  variant = 'default',
+  className = ''
+}: PaginationProps) {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [dropdownDirection, setDropdownDirection] = useState<'down' | 'up'>('down');
+
+  if (totalPages <= 1) return null;
+
+  const handlePageClick = (page: number) => {
+    if (page >= 1 && page <= totalPages && page !== currentPage) {
+      onPageChange(page);
+    }
+  };
+
+  const renderSimplePages = () =>
+    Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
+      <button
+        key={page}
+        onClick={() => handlePageClick(page)}
+        className={`${getPageButtonClass(currentPage === page)} ${
+          currentPage === page
+            ? ''
+            : 'border border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
+        }`}
+      >
+        {page}
+      </button>
+    ));
+
+  const renderCompactPages = () => {
+    const pages = buildCompactPageList(totalPages, currentPage);
+
+    return pages.map((page, index) => {
+      if (page === 'ellipsis') {
+        const prevPage = pages[index - 1];
+        const nextPage = pages[index + 1];
+
+        return (
+          <span key={`ellipsis-${prevPage}-${nextPage}`} className='px-2 text-gray-600 dark:text-gray-400'>
+            ...
+          </span>
+        );
+      }
+
+      return (
+        <button
+          key={page}
+          onClick={() => handlePageClick(page)}
+          className={getPageButtonClass(currentPage === page, 'px-3 py-2')}
+        >
+          {page}
+        </button>
+      );
+    });
+  };
+
+  const renderDefaultPages = () => {
+    const maxVisible = 5;
+    const { startPage, endPage } = getDefaultPageRange(totalPages, currentPage, maxVisible);
+
+    const pages: React.JSX.Element[] = [];
+
+    for (let i = startPage; i <= endPage; i++) {
+      pages.push(
+        <button key={i} onClick={() => handlePageClick(i)} className={getPageButtonClass(currentPage === i)}>
+          {i}
+        </button>
+      );
+    }
+
+    return (
+      <>
+        {pages}
+        {totalPages > maxVisible && endPage < totalPages && (
+          <span className='px-2 text-gray-600 dark:text-gray-400'>...</span>
+        )}
+      </>
+    );
+  };
+
+  const renderPageNumbers = () => {
+    switch (variant) {
+      case 'simple':
+        return renderSimplePages();
+      case 'compact':
+        return renderCompactPages();
+      default:
+        return renderDefaultPages();
+    }
+  };
+
+  const handleDropdownToggle = (e: React.MouseEvent<HTMLButtonElement>) => {
+    const button = e.currentTarget;
+    const rect = button.getBoundingClientRect();
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const spaceAbove = rect.top;
+    const dropdownHeight = 140; // max height of dropdown
+
+    // Open upward if not enough space below but enough space above
+    if (spaceBelow < dropdownHeight && spaceAbove > spaceBelow) {
+      setDropdownDirection('up');
+    } else {
+      setDropdownDirection('down');
+    }
+    setIsDropdownOpen(!isDropdownOpen);
+  };
+
+  const chevronRotation = getChevronRotation(isDropdownOpen, dropdownDirection);
+
+  return (
+    <div className={`flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-2 ${className}`}>
+      <div className='flex items-center gap-2'>
+        <button
+          onClick={() => handlePageClick(currentPage - 1)}
+          disabled={currentPage === 1}
+          className='px-3 py-2 rounded-lg text-gray-600 dark:text-gray-400 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors'
+          aria-label='Previous page'
+        >
+          ‹
+        </button>
+
+        {renderPageNumbers()}
+
+        <button
+          onClick={() => handlePageClick(currentPage + 1)}
+          disabled={currentPage === totalPages}
+          className='px-3 py-2 rounded-lg text-gray-600 dark:text-gray-400 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors'
+          aria-label='Next page'
+        >
+          ›
+        </button>
+      </div>
+
+      {showGoToPage && (
+        <div className='relative flex items-center gap-2 sm:ml-4'>
+          <span className='text-sm text-gray-600 dark:text-gray-400'>Go to page</span>
+          <div className='relative'>
+            <button
+              onClick={handleDropdownToggle}
+              onBlur={() => setTimeout(() => setIsDropdownOpen(false), 200)}
+              className='px-2 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm w-[60px] sm:w-[65px] md:w-[70px] text-left flex items-center justify-between gap-1 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2'
+              aria-label='Select page'
+            >
+              <span className='flex-1 text-left text-gray-900 dark:text-white'>{currentPage}</span>
+              <svg
+                className={`w-4 h-4 flex-shrink-0 text-gray-600 dark:text-gray-400 transition-transform ${chevronRotation}`}
+                fill='none'
+                stroke='currentColor'
+                viewBox='0 0 24 24'
+              >
+                <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M19 9l-7 7-7-7' />
+              </svg>
+            </button>
+
+            {isDropdownOpen && (
+              <div
+                className={`absolute left-0 w-[60px] sm:w-[65px] md:w-[70px] bg-white dark:bg-gray-800 
+                  border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg max-h-[140px] 
+                  overflow-y-auto z-50 ${dropdownDirection === 'up' ? 'bottom-full mb-1' : 'top-full mt-1'}`}
+              >
+                {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
+                  <button
+                    key={page}
+                    onClick={() => {
+                      handlePageClick(page);
+                      setIsDropdownOpen(false);
+                    }}
+                    className={`w-full px-3 py-2 text-left text-sm transition-colors ${
+                      currentPage === page
+                        ? 'bg-primary-500 text-white hover:bg-primary-600'
+                        : 'text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700'
+                    }`}
+                  >
+                    {page}
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/components/Remember.tsx b/components/Remember.tsx
index 04a0ae5d090f..11abb796f3f5 100644
--- a/components/Remember.tsx
+++ b/components/Remember.tsx
@@ -17,8 +17,11 @@ interface RememberProps {
  */
 export default function Remember({ title = 'Remember', className = '', children }: RememberProps) {
   return (
-    <div className={`${className} mb-8 mt-4 rounded bg-secondary-100 p-4 text-gray-900`} data-testid='Remember-main'>
-      <h5 className='mb-4 border-b border-gray-900 pb-2 text-lg' data-testid='Remember-heading'>
+    <div
+      className={`${className} mb-8 mt-4 rounded bg-secondary-100 dark:bg-dark-background p-4 text-gray-900`}
+      data-testid='Remember-main'
+    >
+      <h5 className='mb-4 border-b dark:text-white border-gray-900 pb-2 text-lg' data-testid='Remember-heading'>
         <LightBulb className='-mt-0.5 mr-2 inline-block h-8' />
         <span className='ml-2 inline-block font-sans font-medium antialiased' data-testid='Remember-title'>
           {title}
diff --git a/components/SneakPeek.tsx b/components/SneakPeek.tsx
new file mode 100644
index 000000000000..7edbce00ecec
--- /dev/null
+++ b/components/SneakPeek.tsx
@@ -0,0 +1,320 @@
+import React, { useState } from 'react';
+
+import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
+
+import { useTranslation } from '../utils/i18n';
+import ArrowRight from './icons/ArrowRight';
+import Heading from './typography/Heading';
+import Paragraph from './typography/Paragraph';
+
+type SneakPeekTab = 'document' | 'generation' | 'documentation';
+
+/**
+ * @description This component displays the Sneak Peek section with tabs showing AsyncAPI examples
+ */
+export default function SneakPeek() {
+  const { t } = useTranslation('landing-page');
+  const [activeTab, setActiveTab] = useState<SneakPeekTab>('document');
+  const [showPayload, setShowPayload] = useState(true);
+
+  const renderAsyncAPICode = () => (
+    <>
+      <div>
+        <span className='text-teal-400'>asyncapi:</span> <span className='text-white'>3.0.0</span>
+      </div>
+      <div>
+        <span className='text-teal-400'>info:</span>
+      </div>
+      <div>
+        <span className='text-teal-400'>&nbsp;&nbsp;title:</span> <span className='text-white'>Account Service</span>
+      </div>
+      <div>
+        <span className='text-teal-400'>&nbsp;&nbsp;version:</span> <span className='text-white'>1.0.0</span>
+      </div>
+      <div>
+        <span className='text-teal-400'>&nbsp;&nbsp;description:</span>{' '}
+        <span className='text-white'>This service is in charge of processing user signups :rocket:</span>
+      </div>
+      <div>
+        <span className='text-teal-400'>channels:</span>
+      </div>
+      <div>
+        <span className='text-yellow-300'>&nbsp;&nbsp;userSignedup:</span>
+      </div>
+      <div>
+        <span className='text-purple-400'>&nbsp;&nbsp;&nbsp;&nbsp;address:</span>
+        <span className='text-teal-200'>&apos;user/signedup&apos;</span>
+      </div>
+      <div>
+        <span className='text-teal-400'>&nbsp;&nbsp;&nbsp;&nbsp;messages:</span>
+      </div>
+      <div>
+        <span className='text-yellow-300'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;userSignedupMessage:</span>
+      </div>
+      <div>
+        <span className='text-teal-200'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$ref:</span>
+        <span className='text-teal-200'>&apos;#/components/messages/UserSignedUp&apos;</span>
+      </div>
+      <div>
+        <span className='text-teal-400'>operations:</span>
+      </div>
+      <div>
+        <span className='text-yellow-300'>&nbsp;&nbsp;processUserSignedupMessage:</span>
+      </div>
+      <div>
+        <span className='text-purple-400'>&nbsp;&nbsp;&nbsp;&nbsp;action:</span>
+        <span className='text-teal-200'>&apos;receive&apos;</span>
+      </div>
+      <div>
+        <span className='text-teal-400'>&nbsp;&nbsp;&nbsp;&nbsp;channel:</span>
+      </div>
+      <div>
+        <span className='text-teal-200'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$ref:</span>
+        <span className='text-teal-200'> &apos;#/channels/UserSignedup&apos;</span>
+      </div>
+      <div>
+        <span className='text-teal-400'>components:</span>
+      </div>
+      <div>
+        <span className='text-teal-400'>&nbsp;&nbsp;messages:</span>
+      </div>
+      <div>
+        <span className='text-teal-200'>&nbsp;&nbsp;&nbsp;&nbsp;UserSignedUp:</span>
+      </div>
+      <div>
+        <span className='text-teal-400'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;payload:</span>
+      </div>
+      <div>
+        <span className='text-teal-400'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type:</span>
+        <span className='text-white'> object</span>
+      </div>
+      <div>
+        <span className='text-teal-400'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;properties:</span>
+      </div>
+      <div>
+        <span className='text-green-400'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;displayName:</span>
+      </div>
+      <div>
+        <span className='text-teal-400'>
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type:
+        </span>
+        <span className='text-white'> object</span>
+      </div>
+      <div>
+        <span className='text-teal-400'>
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description:
+        </span>
+        <span className='text-white'> Name of the User</span>
+      </div>
+      <div>
+        <span className='text-green-400'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;email:</span>
+      </div>
+      <div>
+        <span className='text-teal-400'>
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type:
+        </span>
+        <span className='text-white'> string</span>
+      </div>
+      <div>
+        <span className='text-teal-400'>
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;format:
+        </span>
+        <span className='text-white'> email</span>
+      </div>
+      <div>
+        <span className='text-teal-400'>
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description:
+        </span>
+        <span className='text-white'> Email of the User</span>
+      </div>
+    </>
+  );
+
+  const renderGenerationCode = () => {
+    const logStatement = String.raw`\`Processing signup for \${message.displayName}\``;
+
+    return (
+      <>
+        <div>
+          <span className='text-gray-500'>{'//'} Generated TypeScript code</span>
+        </div>
+        <div>
+          <span className='text-purple-400'>export</span> <span className='text-purple-400'>interface</span>{' '}
+          <span className='text-yellow-200'>UserSignedUp</span> {'{'}
+        </div>
+        <div>
+          &nbsp;&nbsp;<span className='text-white'>displayName</span>: <span className='text-teal-400'>string</span>;
+        </div>
+        <div>
+          &nbsp;&nbsp;<span className='text-white'>email</span>: <span className='text-teal-400'>string</span>;
+        </div>
+        <div>{'}'}</div>
+        <div>&nbsp;</div>
+        <div>
+          <span className='text-purple-400'>export</span> <span className='text-purple-400'>class</span>{' '}
+          <span className='text-yellow-200'>UserSignupService</span> {'{'}
+        </div>
+        <div>
+          &nbsp;&nbsp;<span className='text-purple-400'>async</span>{' '}
+          <span className='text-yellow-300'>processSignup</span>(<span className='text-orange-300'>message</span>:{' '}
+          <span className='text-yellow-200'>UserSignedUp</span>): <span className='text-yellow-200'>Promise</span>
+          {'<'}
+          <span className='text-teal-400'>void</span>
+          {'>'} {'{'}
+        </div>
+        <div>
+          &nbsp;&nbsp;&nbsp;&nbsp;<span className='text-gray-500'>{'//'} Your business logic here</span>
+        </div>
+        <div>
+          &nbsp;&nbsp;&nbsp;&nbsp;<span className='text-yellow-200'>console</span>
+          {'.'}
+          <span className='text-yellow-300'>log</span>
+          {'('}
+          <span className='text-teal-200'>{logStatement}</span>
+          {')'}
+          {';'}
+        </div>
+        <div>&nbsp;&nbsp;{'}'}</div>
+        <div>{'}'}</div>
+      </>
+    );
+  };
+
+  const renderDocumentationCode = () => (
+    <div className='font-sans text-gray-800'>
+      <div className='mb-6 mt-2 sm:mb-8 sm:mt-4'>
+        <h1 className='text-xl sm:text-2xl font-bold text-gray-500'>Account Service 1.0.0</h1>
+        <p className='text-sm sm:text-base text-gray-700 mt-2'>
+          This service is in charge of processing user signups 🚀
+        </p>
+      </div>
+
+      <div className='mb-4 flex flex-wrap items-center gap-2'>
+        <span className='rounded bg-green-500 px-2 py-1 sm:px-3 sm:py-2 font-bold text-white text-xs'>RECEIVES</span>
+        <span className='text-sm sm:text-base text-gray-700 break-all'>user/signedup</span>
+      </div>
+
+      <div>
+        <div className='mb-2 mt-4 text-xs sm:text-sm text-gray-500'>Accepts the following message:</div>
+        <div className='rounded bg-gray-200 p-3 sm:p-4 text-gray-600'>
+          <button
+            type='button'
+            className='cursor-pointer bg-transparent border-none p-0 text-left w-full'
+            onClick={() => setShowPayload(!showPayload)}
+          >
+            <span className='font-medium text-sm sm:text-base'>Payload</span>{' '}
+            <ArrowRight
+              className={`inline-block size-4 transition-all duration-300 ease-in-out ${showPayload ? 'rotate-90' : ''}`}
+            />{' '}
+            <span className='ml-4 sm:ml-24 font-bold text-green-500 text-sm sm:text-base'>Object</span>
+          </button>
+          {showPayload && (
+            <div>
+              <div className='mt-2 rounded bg-gray-100 p-3 sm:p-4'>
+                <div className='mb-4 grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4'>
+                  <div className='text-sm font-medium text-gray-700'>displayName</div>
+                  <div>
+                    <div className='font-bold text-green-500 text-sm'>String</div>
+                    <div className='text-xs text-gray-600 mt-1'>Name of the user</div>
+                  </div>
+                </div>
+                <div className='grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4'>
+                  <div className='text-sm font-medium text-gray-700'>email</div>
+                  <div>
+                    <div className='font-bold text-green-500 text-sm'>
+                      String{' '}
+                      <span className='ml-2 rounded bg-yellow-300 px-1.5 py-0.5 text-xs text-black font-normal'>
+                        email
+                      </span>
+                    </div>
+                    <div className='text-xs text-gray-600 mt-1'>Email of the user</div>
+                  </div>
+                </div>
+
+                <div className='mt-6 sm:mt-8 text-xs text-gray-500'>Additional properties are allowed.</div>
+              </div>
+
+              <div className='mt-4 rounded bg-[#252f3f] p-3 sm:p-4 font-mono text-xs sm:text-sm overflow-x-auto'>
+                <div className='text-gray-500'>{'//'} Example</div>
+                <div>&nbsp;</div>
+                <div className='text-gray-300'>{'{'}</div>
+                <div>
+                  <span className='text-teal-400'>&nbsp;&nbsp;&quot;displayName&quot;</span>:{' '}
+                  <span className='text-white'>&quot;Eve & Chan&quot;</span>
+                  <span className='text-gray-300'>,</span>
+                </div>
+                <div>
+                  <span className='text-teal-400'>&nbsp;&nbsp;&quot;email&quot;</span>:{' '}
+                  <span className='text-white'>&quot;info@asyncapi.io&quot;</span>
+                </div>
+                <div className='text-gray-300'>{'}'}</div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+
+  const tabs = [
+    { id: 'document', label: 'AsyncAPI Document', render: renderAsyncAPICode },
+    { id: 'generation', label: 'Code Generation', render: renderGenerationCode },
+    { id: 'documentation', label: 'Documentation', render: renderDocumentationCode }
+  ] as const;
+
+  return (
+    <section className='relative bg-sky-100 dark:bg-dark-card py-8 sm:py-12 lg:py-16'>
+      <div className='mx-auto max-w-md px-4 text-center sm:max-w-3xl sm:px-6 lg:max-w-7xl lg:px-8'>
+        <Heading
+          level={HeadingLevel.h2}
+          typeStyle={HeadingTypeStyle.lg}
+          className='mt-2 text-gray-900 dark:text-white text-2xl sm:text-3xl lg:text-4xl'
+        >
+          {t('sneakpeek.title')}
+        </Heading>
+        <Paragraph className='mx-auto mt-2 text-sm sm:text-base text-gray-700 dark:text-gray-300 max-w-prose'>
+          {t('sneakpeek.description')}
+        </Paragraph>
+
+        {/* Tabs Container */}
+        <div className='mt-8 sm:mt-12'>
+          {/* Tabs Bar */}
+          <div className='flex flex-col sm:flex-row justify-center bg-dark-background dark:bg-dark-card rounded-t-lg overflow-hidden'>
+            {tabs.map((tab, index) => (
+              <button
+                key={tab.id}
+                onClick={() => setActiveTab(tab.id)}
+                className={`flex-1 px-3 py-3 sm:px-4 sm:py-4 text-xs sm:text-sm font-medium transition-all duration-200 ${index === tabs.length - 1 ? '' : 'border-b sm:border-b-0 sm:border-r'} border-gray-300 dark:border-gray-300 ${
+                  activeTab === tab.id
+                    ? 'bg-white dark:bg-[#1B1B2F] text-gray-900 dark:text-white'
+                    : 'bg-[#2D1F3F] dark:bg-[#14111D] text-gray-300 dark:text-gray-400 hover:bg-[#3D2F4F] dark:hover:bg-[#1F1A2F]'
+                }`}
+              >
+                {tab.label}
+              </button>
+            ))}
+          </div>
+
+          {/* Code Display */}
+          <div className='text-left'>
+            {tabs.map((tab) => (
+              <div key={tab.id} className={activeTab === tab.id ? 'block' : 'hidden'}>
+                <div
+                  className={`rounded-b-lg p-3 sm:p-4 lg:p-6 overflow-auto shadow-lg min-h-[300px] sm:min-h-[350px] lg:min-h-[400px] max-h-[500px] sm:max-h-[600px] ${tab.id === 'documentation' ? 'bg-gray-50 dark:bg-gray-100' : 'bg-[#1B1130] dark:bg-[#0A0515]'}`}
+                >
+                  <div
+                    className={
+                      tab.id === 'documentation' ? '' : 'text-[10px] sm:text-xs md:text-sm leading-relaxed font-mono'
+                    }
+                  >
+                    {tab.render()}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/components/SupportUs/SupportItemsList.ts b/components/SupportUs/SupportItemsList.ts
index aa1e49ec1049..64ad15c9469d 100644
--- a/components/SupportUs/SupportItemsList.ts
+++ b/components/SupportUs/SupportItemsList.ts
@@ -11,42 +11,42 @@ export const items: ISupportItemType[] = [
     href: 'https://slack.com/media-kit',
     imgSrc: '/img/supportus/slack.webp',
     imgTitle: 'Slack - Free Standard Subscription.',
-    imgClass: 'inline-block px-4 sm:h-10',
+    imgClass: 'inline-block px-4 sm:h-10 rounded-lg p-2 bg-white',
     section: 1
   },
   {
     href: 'https://www.netlify.com/',
     imgSrc: '/img/supportus/netlify.webp',
     imgTitle: 'Netlify - Free website deployment.',
-    imgClass: 'inline-block px-4 sm:h-10',
+    imgClass: 'inline-block px-4 sm:h-10 rounded-lg p-2 bg-white',
     section: 1
   },
   {
     href: 'https://sonarcloud.io/',
     imgSrc: '/img/supportus/sonarcloud.webp',
     imgTitle: 'Sonarcloud - Free tier for automated project scanning.',
-    imgClass: 'inline-block px-4 md:h-14',
+    imgClass: 'inline-block px-4 md:h-14 rounded-lg p-2 bg-white',
     section: 1
   },
   {
     href: 'https://confengine.com',
     imgSrc: '/img/supportus/confengine.png',
     imgTitle: 'Confengine - CFP platform sponsorship for AsyncAPI Conference.',
-    imgClass: 'inline-block px-4 sm:h-14 mt-4',
+    imgClass: 'inline-block px-4 sm:h-14 rounded-lg p-2 bg-white',
     section: 2
   },
   {
     href: 'https://www.digitalocean.com/press/',
     imgSrc: '/img/supportus/digitalocean.webp',
     imgTitle: 'DigitalOcean - 500 dollars on cloud services.',
-    imgClass: 'inline-block px-2 sm:h-8',
+    imgClass: 'inline-block px-4 sm:h-10 md:h-10 lg:h-10 rounded-lg p-2 bg-white',
     section: 2
   },
   {
     href: 'https://restream.io/',
     imgSrc: '/img/supportus/restream.webp',
     imgTitle: 'Restream - Free professional plan subscription.',
-    imgClass: 'inline-block px-4 sm:h-6',
+    imgClass: 'inline-block px-4 sm:h-10 md:h-10 lg:h-10 rounded-lg p-2 bg-white',
     section: 2
   }
 ];
diff --git a/components/TOC.tsx b/components/TOC.tsx
index d63f9e8a2ba0..f7240e1fd7c6 100644
--- a/components/TOC.tsx
+++ b/components/TOC.tsx
@@ -88,15 +88,15 @@ export default function TOC({ className, cssBreakingPoint = 'xl', toc, contentSe
       <div className={`${!open && 'hidden'} ${cssBreakingPoint === 'xl' ? 'xl:block' : 'lg:block'}`}>
         <Scrollspy
           items={tocItems.map((item) => (item.slug ? item.slug : item.slugWithATag))}
-          currentClassName='text-primary-500 font-bold'
+          currentClassName='!text-primary-500 dark:!text-primary-500 font-bold'
           componentTag='div'
           rootEl={contentSelector}
           offset={-120}
         >
           {tocItems.map((item, index) => (
             <a
-              className={`pl-${2 ** (item.lvl - 1)} font-normal mb-1 block font-sans text-sm 
-                  text-gray-900 antialiased transition duration-100 ease-in-out hover:underline`}
+              className={`pl-${2 ** (item.lvl - 1)} font-normal mb-1 block font-sans text-sm dark:text-white
+                 text-gray-900 antialiased transition duration-100 ease-in-out hover:underline`}
               href={`#${item.slug ? item.slug : item.slugWithATag}`}
               key={index}
               data-testid='TOC-Link'
diff --git a/components/buttons/DocsButton.tsx b/components/buttons/DocsButton.tsx
index b34666b3453c..464a95105038 100644
--- a/components/buttons/DocsButton.tsx
+++ b/components/buttons/DocsButton.tsx
@@ -22,8 +22,10 @@ export default function DocsButton({ post, className = '' }: IDocsButtonProps) {
         {post?.prevPage && (
           <Link href={post.prevPage.href}>
             <div
-              className={`h-full cursor-pointer rounded border border-gray-200 p-4 text-center shadow-md transition-all
-                            duration-300 ease-in-out hover:border-gray-300 hover:shadow-lg lg:text-left`}
+              className={`h-full cursor-pointer rounded border dark:border-border 
+                dark:hover:bg-dark-card dark:hover:shadow-dark-card
+                 border-gray-200 p-4 text-center shadow-md transition-all
+                duration-300 ease-in-out hover:border-gray-300 hover:shadow-lg lg:text-left`}
             >
               <div className='text-secondary-500' data-testid='DocsButton-Prevdiv'>
                 <svg
@@ -42,7 +44,7 @@ export default function DocsButton({ post, className = '' }: IDocsButtonProps) {
                 </svg>
                 <div className='my-auto inline text-sm font-bold uppercase'>Go Back</div>
               </div>
-              <div className='my-2 text-base font-medium' data-testid='DocsButton-PrevPage'>
+              <div className='my-2 text-base dark:text-white font-medium' data-testid='DocsButton-PrevPage'>
                 {post.prevPage.title}
               </div>
             </div>
@@ -53,8 +55,9 @@ export default function DocsButton({ post, className = '' }: IDocsButtonProps) {
         {post?.nextPage && (
           <Link href={post.nextPage.href}>
             <div
-              className={`h-full cursor-pointer rounded border border-gray-200 p-4 text-center shadow-md
-                          transition-all duration-300 ease-in-out hover:border-gray-300 hover:shadow-lg lg:text-right`}
+              className={`h-full cursor-pointer rounded border border-gray-200 dark:border-border 
+                dark:hover:bg-dark-card p-4 text-center shadow-md
+                transition-all duration-300 ease-in-out dark:hover:shadow-dark-card hover:border-gray-300 hover:shadow-lg lg:text-right`}
             >
               <div className='text-secondary-500' data-testid='DocsButton-Nextdiv'>
                 <div className='my-auto inline text-sm font-bold uppercase'>Up Next</div>
@@ -73,7 +76,7 @@ export default function DocsButton({ post, className = '' }: IDocsButtonProps) {
                   />
                 </svg>
               </div>
-              <div className='my-2 text-base font-medium' data-testid='DocsButton-NextPage'>
+              <div className='my-2 text-base dark:text-white font-medium' data-testid='DocsButton-NextPage'>
                 {post.nextPage.title}
               </div>
             </div>
diff --git a/components/buttons/GithubButton.tsx b/components/buttons/GithubButton.tsx
index 43e11e6b11d5..d218b826ae54 100644
--- a/components/buttons/GithubButton.tsx
+++ b/components/buttons/GithubButton.tsx
@@ -38,7 +38,7 @@ export default function GithubButton({
       target={target}
       className={className}
       data-testid='Github-button'
-      bgClassName='bg-gray-800 hover:bg-gray-700'
+      bgClassName='bg-primary-500 hover:bg-primary-600 '
       buttonSize={inNav ? ButtonSize.SMALL : ButtonSize.DEFAULT}
     />
   );
diff --git a/components/buttons/GoogleCalendarButton.tsx b/components/buttons/GoogleCalendarButton.tsx
index 15f16dca65f7..290cab8ee4a2 100644
--- a/components/buttons/GoogleCalendarButton.tsx
+++ b/components/buttons/GoogleCalendarButton.tsx
@@ -4,7 +4,7 @@ import { ButtonIconPosition } from '@/types/components/buttons/ButtonPropsType';
 
 import type { IButtonDefaultProps } from '../../types/components/buttons/types';
 import { useTranslation } from '../../utils/i18n';
-import IconGoogleCalendar from '../icons/GoogleCalendar';
+import PlusSign from '../icons/PlusSign';
 import Button from './Button';
 
 interface IGoogleCalendarButtonProps extends IButtonDefaultProps {}
@@ -21,7 +21,7 @@ export default function GoogleCalendarButton({
   text = 'googleCalendarBtn',
   href,
   target = '_blank',
-  iconPosition = ButtonIconPosition.LEFT,
+  iconPosition = ButtonIconPosition.RIGHT,
   className
 }: IGoogleCalendarButtonProps) {
   const { t } = useTranslation('common');
@@ -29,12 +29,12 @@ export default function GoogleCalendarButton({
   return (
     <Button
       text={t(text)}
-      icon={<IconGoogleCalendar />}
+      icon={<PlusSign className='-mb-1 size-5' />}
       href={href}
       iconPosition={iconPosition}
       target={target}
-      className={`mt-2 block text-center text-gray-900 md:mt-0 md:inline-block ${className}`}
-      bgClassName='bg-gray-200 hover:bg-gray-100'
+      className={`mt-2 block text-center text-white md:mt-0 md:inline-block ${className}`}
+      bgClassName='bg-primary-500 hover:bg-primary-400'
     />
   );
 }
diff --git a/components/buttons/ICSFileButton.tsx b/components/buttons/ICSFileButton.tsx
index 1f529cee3c10..1790962a7d3c 100644
--- a/components/buttons/ICSFileButton.tsx
+++ b/components/buttons/ICSFileButton.tsx
@@ -1,10 +1,10 @@
+import { PlusIcon } from '@heroicons/react/outline';
 import React from 'react';
 
 import { ButtonIconPosition } from '@/types/components/buttons/ButtonPropsType';
 
 import type { IButtonDefaultProps } from '../../types/components/buttons/types';
 import { useTranslation } from '../../utils/i18n';
-import IconCalendar from '../icons/Calendar';
 import Button from './Button';
 
 interface IICSFButtonProps extends IButtonDefaultProps {}
@@ -21,7 +21,7 @@ export default function ICSFButton({
   text = 'icsFileBtn',
   href,
   target = '_blank',
-  iconPosition = ButtonIconPosition.LEFT,
+  iconPosition = ButtonIconPosition.RIGHT,
   className
 }: IICSFButtonProps) {
   const { t } = useTranslation('common');
@@ -29,12 +29,12 @@ export default function ICSFButton({
   return (
     <Button
       text={t(text)}
-      icon={<IconCalendar />}
+      icon={<PlusIcon className='-mb-1 size-5' />}
       href={href}
       iconPosition={iconPosition}
       target={target}
-      className={`mt-2 block text-center text-gray-900 md:mt-0 md:inline-block ${className}`}
-      bgClassName='bg-gray-200 hover:bg-gray-100'
+      className={`mt-2 block text-center border-2 border-sky-300 text-sky-400 md:mt-0 md:inline-block ${className}`}
+      bgClassName=' hover:bg-sky-100'
     />
   );
 }
diff --git a/components/campaigns/AnnouncementBanner.tsx b/components/campaigns/AnnouncementBanner.tsx
index ac9271341dfd..bddf1754a818 100644
--- a/components/campaigns/AnnouncementBanner.tsx
+++ b/components/campaigns/AnnouncementBanner.tsx
@@ -48,7 +48,8 @@ export default function Banner({
 }: BannerProps) {
   return (
     <div
-      className={`size-full rounded border border-gray-200 bg-gray-50 py-6
+      className={`size-full rounded border dark:border-dark-card border-gray-200
+         dark:bg-dark-card bg-gray-50 py-6
           transition-transform${className} ${small ? 'mb-4' : 'mx-3 my-6 p-3'}
           ${activeBanner ? 'z-10 scale-100 opacity-100' : 'z-0 scale-90 opacity-0'}`}
       data-testid='AnnouncementHero-main-div'
@@ -59,7 +60,9 @@ export default function Banner({
       <Heading className='countdown-text-gradient' level={HeadingLevel.h2} typeStyle={HeadingTypeStyle.md}>
         {city}
       </Heading>
-      <Paragraph typeStyle={ParagraphTypeStyle.lg}>{dateLocation}</Paragraph>
+      <Paragraph className='dark:text-dark-text' typeStyle={ParagraphTypeStyle.lg}>
+        {dateLocation}
+      </Paragraph>
       <AnnouncementRemainingDays dateTime={cfpDeadline} eventName={eventName} />
       <div className='mt-6 space-x-2 pb-2'>
         <Button href={link} target='_blank' text={cfaText} data-testid='AnnouncementHero-submit-session' />
diff --git a/components/campaigns/AnnouncementHero.tsx b/components/campaigns/AnnouncementHero.tsx
index 19cea6690953..7b9e59592378 100644
--- a/components/campaigns/AnnouncementHero.tsx
+++ b/components/campaigns/AnnouncementHero.tsx
@@ -1,112 +1,46 @@
 import React, { useEffect, useMemo, useState } from 'react';
 
-import ArrowLeft from '../icons/ArrowLeft';
-import ArrowRight from '../icons/ArrowRight';
-import Container from '../layout/Container';
-import Banner from './AnnouncementBanner';
 import { banners, shouldShowBanner } from './banners';
+import ConferenceBanner from './ConferenceBanner';
 
-interface IAnnouncementHeroProps {
+type IAnnouncementHeroProps = Readonly<{
   className?: string;
-  small?: boolean;
-  hideVideo?: boolean;
-}
+}>;
 
 /**
  * @param {string} props.className - The class name of the announcement hero
- * @param {Boolean} props.small - Whether the banner is small
- * @param {Boolean} props.hideVideo - Whether the video should be hidden
- * @description The announcement hero
+ * @description The announcement hero - displays one rotating banner that changes every 2 seconds
  */
-export default function AnnouncementHero({ className = '', small = false }: IAnnouncementHeroProps) {
-  const [activeIndex, setActiveIndex] = useState(0);
-
-  const visibleBanners = useMemo(() => banners.filter((banner) => shouldShowBanner(banner.cfpDeadline)), [banners]);
-  const numberOfVisibleBanners = visibleBanners.length;
-
-  const goToPrevious = () => {
-    setActiveIndex((prevIndex) => (prevIndex === 0 ? numberOfVisibleBanners - 1 : prevIndex - 1));
-  };
-
-  const goToNext = () => {
-    setActiveIndex((prevIndex) => (prevIndex === numberOfVisibleBanners - 1 ? 0 : prevIndex + 1));
-  };
-
-  const goToIndex = (index: number) => {
-    setActiveIndex(index);
-  };
+export default function AnnouncementHero({ className = '' }: IAnnouncementHeroProps) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const visibleBanners = useMemo(() => banners.filter((banner) => shouldShowBanner(banner.cfpDeadline)), []);
 
   useEffect(() => {
-    const interval = setInterval(() => setActiveIndex((index) => (index + 1) % numberOfVisibleBanners), 10000);
+    if (visibleBanners.length <= 1) return undefined;
 
-    return () => {
-      clearInterval(interval);
-    };
-  }, [numberOfVisibleBanners]);
+    const interval = setInterval(() => {
+      setCurrentIndex((prevIndex) => (prevIndex + 1) % visibleBanners.length);
+    }, 5000); // Change every 5 seconds
 
-  if (numberOfVisibleBanners === 0) {
+    return () => clearInterval(interval);
+  }, [visibleBanners.length]);
+
+  if (visibleBanners.length === 0) {
     return null;
   }
 
-  return (
-    <Container as='section' padding='' className='text-center'>
-      <div className='relative flex flex-row items-center justify-center overflow-x-hidden md:gap-4'>
-        {numberOfVisibleBanners > 1 && (
-          <div
-            className={`absolute left-0 top-1/2 z-10 mb-2 flex size-8 -translate-y-1/2 cursor-pointer
-          items-center justify-center rounded-full bg-primary-500 opacity-50 hover:bg-primary-600 md:opacity-100`}
-            onClick={goToPrevious}
-          >
-            <ArrowLeft className='text-white' />
-          </div>
-        )}
-        <div className='relative flex w-4/5 md:w-5/6 flex-col items-center justify-center gap-2'>
-          <div className='relative flex min-h-72 w-full justify-center overflow-hidden lg:h-[17rem] lg:w-[38rem]'>
-            {visibleBanners.map((banner, index) => {
-              // Only render the active banner
-              const isVisible = index === activeIndex;
-
-              if (!isVisible) return null;
+  const currentBanner = visibleBanners[currentIndex];
 
-              return (
-                <Banner
-                  key={index}
-                  title={banner.title}
-                  dateLocation={banner.dateLocation}
-                  cfaText={banner.cfaText}
-                  eventName={banner.eventName}
-                  cfpDeadline={banner.cfpDeadline}
-                  link={banner.link}
-                  city={banner.city}
-                  activeBanner={isVisible}
-                  className={className}
-                  small={small}
-                />
-              );
-            })}
-          </div>
-          <div className='m-auto flex justify-center'>
-            {visibleBanners.map((banner, index) => (
-              <div
-                key={index}
-                className={`mx-1 size-2 cursor-pointer rounded-full ${
-                  activeIndex === index ? 'bg-primary-500' : 'bg-gray-300'
-                }`}
-                onClick={() => goToIndex(index)}
-              />
-            ))}
-          </div>
-        </div>
-        {numberOfVisibleBanners > 1 && (
-          <div
-            className={`absolute right-0 top-1/2 z-10 mb-2 size-8 -translate-y-1/2 cursor-pointer
-                      rounded-full bg-primary-500 opacity-50 hover:bg-primary-600 md:opacity-100`}
-            onClick={goToNext}
-          >
-            <ArrowRight className='text-white' />
-          </div>
-        )}
-      </div>
-    </Container>
+  return (
+    <div className={className}>
+      <ConferenceBanner
+        key={currentIndex}
+        title={currentBanner.title}
+        city={currentBanner.city}
+        dateLocation={currentBanner.dateLocation}
+        cfaText={currentBanner.cfaText}
+        link={currentBanner.link}
+      />
+    </div>
   );
 }
diff --git a/components/campaigns/ConferenceBanner.tsx b/components/campaigns/ConferenceBanner.tsx
new file mode 100644
index 000000000000..a23dc2f93ef3
--- /dev/null
+++ b/components/campaigns/ConferenceBanner.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+
+import IconArrowRight from '../icons/ArrowRight';
+
+type ConferenceBannerProps = Readonly<{
+  title: string;
+  city: string;
+  dateLocation: string;
+  cfaText: string;
+  link: string;
+  className?: string;
+}>;
+
+/**
+ * @description Small banner component for conference announcements, similar to the green banner style
+ * @param {string} props.title - The title of the conference
+ * @param {string} props.city - The city of the conference
+ * @param {string} props.dateLocation - The date and location of the conference
+ * @param {string} props.cfaText - The call to action text
+ * @param {string} props.link - The link to the conference
+ * @param {string} props.className - Additional CSS classes
+ */
+export default function ConferenceBanner({
+  title,
+  city,
+  dateLocation,
+  cfaText,
+  link,
+  className = ''
+}: ConferenceBannerProps) {
+  return (
+    <div
+      className={`bg-primary-500 text-white py-2 px-4 transition-opacity duration-500 ${className}`}
+      data-testid='ConferenceBanner-main-div'
+    >
+      <div className='mx-auto max-w-screen-xl px-3 sm:px-6 lg:px-8'>
+        <div className='flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between sm:gap-0'>
+          <div className='flex flex-1 items-center text-xs sm:text-sm'>
+            <p className='font-medium text-white flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-0'>
+              <span className='bg-primary-600 text-white px-2 py-1 rounded text-xs font-semibold sm:mr-3 inline-block w-fit'>
+                NEW
+              </span>
+              <span className='inline-block'>
+                {title} {city} - {dateLocation}
+              </span>
+            </p>
+          </div>
+          <div className='flex sm:flex-shrink-0'>
+            <a
+              href={link}
+              className='flex w-full sm:w-auto items-center justify-center rounded-md border border-transparent bg-white px-4 py-2 sm:py-1 text-sm font-medium text-primary-500 shadow-sm hover:bg-gray-50 focus:text-primary-600 transition-colors duration-200'
+              target='_blank'
+              rel='noopener noreferrer'
+            >
+              {cfaText}
+              <IconArrowRight className='ml-1 w-4 h-4' />
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/campaigns/LinuxBanner.tsx b/components/campaigns/LinuxBanner.tsx
new file mode 100644
index 000000000000..0bd8d90d8eb0
--- /dev/null
+++ b/components/campaigns/LinuxBanner.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+type LinuxBannerProps = Readonly<{
+  className?: string;
+}>;
+
+/**
+ * LinuxBanner component displays a simple banner component that displays a message
+ * with a link to the Linux Foundation website.
+ */
+export default function LinuxBanner({ className }: LinuxBannerProps) {
+  return (
+    <div
+      className={`bg-sky-100 w-full font-heading font-semibold dark:bg-dark-card dark:text-gray-100 text-gray-900 px-1 py-1 text-center mt-4 overflow-x-hidden ${className ?? ''}`}
+    >
+      <p>
+        <a
+          href='https://www.linuxfoundation.org/'
+          target='_blank'
+          rel='noopener noreferrer'
+          className='inline-block align-middle mr-2'
+        >
+          <img src='/img/logos/LFX.svg' alt='LFX Logo' className='inline-block h-6 align-middle' />
+        </a>
+        Part of the{' '}
+        <a href='https://www.linuxfoundation.org/' target='_blank' rel='noopener noreferrer' className='font-regular'>
+          Linux Foundation
+        </a>
+        {'.'}
+      </p>
+    </div>
+  );
+}
diff --git a/components/community/Card.tsx b/components/community/Card.tsx
index 00f4f0eb9ae8..02305b64175e 100644
--- a/components/community/Card.tsx
+++ b/components/community/Card.tsx
@@ -51,23 +51,27 @@ export default function Card({
     return (
       <Link href={link} target={link.includes('http') ? '_blank' : undefined}>
         <div
-          className={`w-full cursor-pointer rounded border border-[#ad20e2] p-3 shadow-xl ${bg}`}
+          className={`w-full cursor-pointer rounded border border-[#ad20e2] dark:border-primary-400 p-3 shadow-xl dark:shadow-primary-500/10 ${bg} dark:bg-dark-card`}
           data-testid='Card-small-bg'
         >
-          <div className='flex w-min justify-between rounded-xl bg-gray-100 p-2 text-center text-xs'>
+          <div className='flex w-min justify-between rounded-xl bg-gray-100 dark:bg-gray-800 p-2 text-center text-xs dark:text-gray-300'>
             <span>{icon}</span> <span className='ml-[5px]'>{tagline}</span>
           </div>
           <div className='mt-3' data-testid='Card-heading'>
-            <Heading level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.md}>
+            <Heading level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.md} className='dark:text-dark-heading'>
               {heading}
             </Heading>
           </div>
           <div className='mt-2' data-testid='Card-desc'>
-            <Paragraph textColor={bg === 'bg-white' ? 'text-gray-600' : 'text-black'} typeStyle={ParagraphTypeStyle.sm}>
+            <Paragraph
+              textColor={bg === 'bg-white' ? 'text-gray-600' : 'text-black'}
+              typeStyle={ParagraphTypeStyle.sm}
+              className='dark:text-gray-300'
+            >
               {description}
             </Paragraph>
           </div>
-          <div className='flex w-full justify-end text-right' data-testid='Card-icon'>
+          <div className='flex w-full justify-end text-right dark:text-gray-300' data-testid='Card-icon'>
             <IconArrowUp className='w-[20px]' />
           </div>
         </div>
@@ -77,23 +81,30 @@ export default function Card({
 
   return (
     <div
-      className={`h-140 w-full rounded border p-6 shadow-xl ${!bg && 'border-[#ad20e2]'} ${bg}`}
+      className={`h-140 w-full rounded border p-6 shadow-xl dark:shadow-primary-500/10 ${!bg && 'border-[#ad20e2] dark:border-primary-400'} ${bg} ${bg === 'bg-code-editor-dark' ? '' : 'dark:bg-dark-card'}`}
       data-testid='Card-lg-bg'
     >
       <div
-        className={`flex w-min justify-between rounded-xl p-2 text-center text-xs text-black ${taglineBg}`}
+        className={`flex w-min justify-between rounded-xl p-2 text-center text-xs text-black dark:text-gray-900 ${taglineBg}`}
         data-testid='Card-lg-tagline'
       >
         <span>{icon}</span> <span className='ml-[5px]'>{tagline}</span>
       </div>
 
       <div className='mt-10' data-testid='Card-heading-lg'>
-        <Heading level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.lg} textColor={bg && 'text-white'}>
+        <Heading
+          level={HeadingLevel.h1}
+          typeStyle={HeadingTypeStyle.lg}
+          textColor={bg && 'text-white'}
+          className={bg ? '' : 'dark:text-dark-heading'}
+        >
           {heading}
         </Heading>
       </div>
       <div className='mt-6' data-testid='Card-desc-lg'>
-        <Paragraph textColor={bg && 'text-gray-400'}>{description}</Paragraph>
+        <Paragraph textColor={bg && 'text-gray-400'} className={bg ? '' : 'dark:text-gray-300'}>
+          {description}
+        </Paragraph>
       </div>
       <div className='mt-10'>
         <Link href={link} data-testid='Card-link-lg'>
diff --git a/components/community/FeatureCard.tsx b/components/community/FeatureCard.tsx
new file mode 100644
index 000000000000..ee3d84e2ba66
--- /dev/null
+++ b/components/community/FeatureCard.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
+import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
+
+import Heading from '../typography/Heading';
+import Paragraph from '../typography/Paragraph';
+
+type FeatureCardProps = Readonly<{
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+}>;
+
+/**
+ * @description FeatureCard component for displaying a feature card with icon, title and description
+ * @param {FeatureCardProps} props - Props for the FeatureCard component
+ */
+export default function FeatureCard({ icon, title, description }: FeatureCardProps) {
+  return (
+    <div className='flex flex-col items-center text-center' data-testid='FeatureCard'>
+      <div className='mb-6 flex size-16 items-center justify-center rounded-2xl bg-indigo-600 dark:bg-primary-500 text-white shadow-lg dark:shadow-primary-500/20'>
+        {icon}
+      </div>
+      <Heading level={HeadingLevel.h3} typeStyle={HeadingTypeStyle.smSemibold} className='mb-3 dark:text-dark-heading'>
+        {title}
+      </Heading>
+      <Paragraph typeStyle={ParagraphTypeStyle.md} className='text-gray-600 dark:text-gray-400'>
+        {description}
+      </Paragraph>
+    </div>
+  );
+}
diff --git a/components/community/Header.tsx b/components/community/Header.tsx
index d6bde6dd0a3c..99008c602be3 100644
--- a/components/community/Header.tsx
+++ b/components/community/Header.tsx
@@ -25,7 +25,7 @@ export default function Header({ className = '' }: HeaderProps) {
         AsyncAPI Community
       </Heading>
       <div className='mt-10' data-testid='Header-heading-1'>
-        <Heading level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.xl} className=''>
+        <Heading level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.xl} className='dark:text-white'>
           <span className='title block leading-[3rem] md:-mt-1'>
             Welcome to the
             <br /> AsyncAPI Community
@@ -37,7 +37,7 @@ export default function Header({ className = '' }: HeaderProps) {
           level={HeadingLevel.h2}
           typeStyle={HeadingTypeStyle.bodyMd}
           textColor='text-gray-700'
-          className='text-slate-500'
+          className='text-slate-500 dark:text-gray-300'
         >
           We&apos;re an OSS community that&apos;s passionate about AsyncAPI. Join us in building the future of Event
           Driven APIs by asking questions, sharing ideas, and building connections.
diff --git a/components/community/HomeCard.tsx b/components/community/HomeCard.tsx
index de34b46cf42a..12f006ac1b47 100644
--- a/components/community/HomeCard.tsx
+++ b/components/community/HomeCard.tsx
@@ -27,22 +27,27 @@ interface HomeCardProps {
  */
 export default function HomeCards({ headline, title, description, btnText, link, className }: HomeCardProps) {
   return (
-    <div className='z-40 mt-20 w-full rounded-lg bg-white shadow-xl md:flex md:h-130 md:justify-between'>
+    <div className='z-40 mt-20 w-full rounded-lg bg-white dark:bg-dark-card shadow-xl dark:shadow-primary-500/10 md:flex md:h-130 md:justify-between'>
       <div className='flex h-auto w-full flex-col justify-between p-10 text-center md:w-2/5 md:text-left'>
         <div data-testid='HomeCard-main'>
-          <Heading level={HeadingLevel.h2} typeStyle={HeadingTypeStyle.md} textColor='text-purple-300'>
+          <Heading
+            level={HeadingLevel.h2}
+            typeStyle={HeadingTypeStyle.md}
+            textColor='text-purple-300'
+            className='dark:text-primary-400'
+          >
             {headline}
           </Heading>
         </div>
         <div data-testid='HomeCard-title'>
-          <Heading level={HeadingLevel.h2} typeStyle={HeadingTypeStyle.lg} className='mt-10'>
+          <Heading level={HeadingLevel.h2} typeStyle={HeadingTypeStyle.lg} className='mt-10 dark:text-dark-heading'>
             {title}
           </Heading>
           <Heading
             level={HeadingLevel.h2}
             typeStyle={HeadingTypeStyle.bodyLg}
             textColor='text-gray-700'
-            className='mt-10 text-slate-500'
+            className='mt-10 text-slate-500 dark:text-gray-300'
           >
             {description}
           </Heading>
diff --git a/components/community/TSCMemberCard.tsx b/components/community/TSCMemberCard.tsx
new file mode 100644
index 000000000000..1a18c0c8c69e
--- /dev/null
+++ b/components/community/TSCMemberCard.tsx
@@ -0,0 +1,138 @@
+import React from 'react';
+
+import type { Tsc } from '@/types/pages/community/Community';
+
+type TSCMemberCardProps = Readonly<{
+  member: Tsc;
+}>;
+
+/**
+ * @param {{ className?: string }} props - Props for the GitHub icon
+ * @returns {React.JSX.Element} GitHub icon component
+ */
+function GitHubIcon({ className = '' }: Readonly<{ className?: string }>): React.JSX.Element {
+  return (
+    <svg className={className} fill='currentColor' viewBox='0 0 20 20'>
+      <path
+        fillRule='evenodd'
+        d='M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z'
+        clipRule='evenodd'
+      />
+    </svg>
+  );
+}
+
+/**
+ * @param {{ className?: string }} props - Props for the Twitter icon
+ * @returns {React.JSX.Element} Twitter icon component
+ */
+function TwitterIcon({ className = '' }: Readonly<{ className?: string }>): React.JSX.Element {
+  return (
+    <svg className={className} fill='currentColor' viewBox='0 0 20 20'>
+      <path d='M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84' />
+    </svg>
+  );
+}
+
+/**
+ * @param {{ className?: string }} props - Props for the LinkedIn icon
+ * @returns {React.JSX.Element} LinkedIn icon component
+ */
+function LinkedInIcon({ className = '' }: Readonly<{ className?: string }>): React.JSX.Element {
+  return (
+    <svg className={className} fill='currentColor' viewBox='0 0 19 19'>
+      <path
+        fillRule='evenodd'
+        d='M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z'
+        clipRule='evenodd'
+      />
+    </svg>
+  );
+}
+
+/**
+ * @description Component for displaying a TSC member card
+ * @param {TSCMemberCardProps} props - The props for TSC member card
+ * @param {Tsc} props.member - The TSC member data
+ */
+export default function TSCMemberCard({ member }: TSCMemberCardProps) {
+  return (
+    <div className='bg-white dark:bg-dark-card rounded-xl border border-gray-200 dark:border-gray-700 p-6 hover:shadow-lg transition-shadow'>
+      <div className='flex items-start gap-4 mb-4'>
+        <img
+          src={member.github ? `https://www.github.com/${member.github}.png` : ''}
+          alt={member.name || 'TSC Member'}
+          className='w-16 h-16 rounded-full'
+        />
+        <div className='flex-1 min-w-0'>
+          <h3 className='text-lg font-bold text-gray-900 dark:text-white truncate'>{member.name}</h3>
+          <p className='text-sm text-gray-600 dark:text-gray-400'>
+            {member.availableForHire ? 'Available for hire' : member.company || 'Individual Member'}
+          </p>
+        </div>
+        {member.availableForHire && (
+          <span className='inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300'>
+            Available
+          </span>
+        )}
+      </div>
+
+      {member.repos && Array.isArray(member.repos) && member.repos.length > 0 && (
+        <div className='mb-4'>
+          <p className='text-xs text-gray-500 dark:text-gray-300 mb-2'>Maintainer of:</p>
+          <div className='flex flex-wrap gap-2'>
+            {member.repos.slice(0, 2).map((repoName: string) => (
+              <span
+                key={repoName}
+                className='inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300'
+              >
+                {repoName}
+              </span>
+            ))}
+            {member.repos.length > 2 && (
+              <span className='inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400'>
+                +{member.repos.length - 2}
+              </span>
+            )}
+          </div>
+        </div>
+      )}
+
+      <div className='flex gap-3 pt-4 border-t border-gray-200 dark:border-gray-700'>
+        {member.github && (
+          <a
+            href={`https://www.github.com/${member.github}`}
+            target='_blank'
+            rel='noreferrer'
+            aria-label={`${member.name || 'Member'} on GitHub`}
+            className='text-gray-600 dark:text-gray-400 hover:!text-primary-500 dark:hover:!text-primary-500 transition-colors'
+          >
+            <GitHubIcon className='h-5 w-5' />
+          </a>
+        )}
+        {member.twitter && (
+          <a
+            href={`https://www.twitter.com/${member.twitter}`}
+            target='_blank'
+            rel='noreferrer'
+            aria-label={`${member.name || 'Member'} on Twitter`}
+            className='text-gray-600 dark:text-gray-400 hover:!text-primary-500 dark:hover:!text-primary-500 transition-colors'
+          >
+            <TwitterIcon className='h-5 w-5' />
+          </a>
+        )}
+        {member.linkedin && (
+          <a
+            href={`https://www.linkedin.com/in/${member.linkedin}`}
+            target='_blank'
+            rel='noreferrer'
+            aria-label={`${member.name || 'Member'} on LinkedIn`}
+            className='text-gray-600 dark:text-gray-400 hover:!text-primary-500 dark:hover:!text-primary-500 transition-colors'
+          >
+            <LinkedInIcon className='h-5 w-5' />
+          </a>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/components/community/ToolingCard.tsx b/components/community/ToolingCard.tsx
new file mode 100644
index 000000000000..31eda6b3abbe
--- /dev/null
+++ b/components/community/ToolingCard.tsx
@@ -0,0 +1,124 @@
+import React from 'react';
+
+type ToolingCardProps = Readonly<{
+  name: string;
+  description: string;
+  badge?: string;
+  language: string;
+  link?: string;
+  isShuffling?: boolean;
+}>;
+
+/**
+ * @description ToolingCard component for displaying AsyncAPI tools with stacked, rotated effect
+ */
+export default function ToolingCard({ name, description, badge, language, link, isShuffling }: ToolingCardProps) {
+  const CardContent = (
+    <div className='relative max-w-xl w-full'>
+      {/* Stacked Cards Behind - Positioned on LEFT side */}
+      <div
+        className={`absolute w-full h-full bg-gradient-to-br from-purple-200 to-purple-300 
+          dark:from-purple-800/60 dark:to-purple-700/50 rounded-3xl shadow-xl border-4 
+          border-purple-400 dark:border-purple-600 transition-all duration-300 ${
+            isShuffling ? 'transform -rotate-[18deg] translate-x-[-10px]' : 'transform -rotate-[12deg]'
+          }`}
+        style={{ top: '-15px', left: '-45px', zIndex: 1 }}
+      />
+      <div
+        className={`absolute w-full h-full bg-gradient-to-br from-purple-100 to-purple-200 
+          dark:from-purple-800/70 dark:to-purple-700/60 rounded-3xl shadow-xl border-4 
+          border-purple-300 dark:border-purple-500 transition-all duration-300 ${
+            isShuffling ? 'transform -rotate-[13deg] translate-x-[-5px]' : 'transform -rotate-[7deg]'
+          }`}
+        style={{ top: '-10px', left: '-25px', zIndex: 2 }}
+      />
+
+      {/* Main Card */}
+      <div className='relative bg-white dark:bg-dark-card rounded-3xl p-10 shadow-2xl dark:shadow-primary-500/20 overflow-hidden border-4 border-primary-500 dark:border-primary-400 h-[520px] transition-all hover:translate-y-[-4px] hover:shadow-3xl cursor-pointer z-10'>
+        {/* Background Vector Graphics - Matching exact design */}
+        <div className='absolute inset-0 pointer-events-none overflow-hidden'>
+          {/* Top Background Layers - Gray to Purple gradient triangular shapes */}
+          <div className='absolute -top-20 -right-32 w-[600px] h-[300px] bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 opacity-40 transform rotate-[25deg] rounded-[80px]' />
+          <div className='absolute -top-16 -right-24 w-[500px] h-[280px] bg-gradient-to-br from-blue-100 to-blue-200 dark:from-blue-900/30 dark:to-blue-800/30 opacity-40 transform rotate-[25deg] rounded-[70px]' />
+          <div className='absolute -top-12 -right-16 w-[420px] h-[260px] bg-gradient-to-br from-purple-100 to-purple-200 dark:from-purple-900/30 dark:to-purple-800/30 opacity-50 transform rotate-[25deg] rounded-[60px]' />
+
+          {/* Bottom Large Fan/Petal Shape - Blue gradient */}
+          <div className='absolute -bottom-40 -left-32 w-[700px] h-[500px]'>
+            <svg
+              viewBox='0 0 500 500'
+              xmlns='http://www.w3.org/2000/svg'
+              className='w-full h-full'
+              aria-hidden='true'
+              role='presentation'
+              focusable='false'
+            >
+              <defs>
+                <linearGradient id='blueGradient' x1='20%' y1='80%' x2='80%' y2='20%'>
+                  <stop
+                    offset='0%'
+                    className='text-primary-500 dark:text-primary-600'
+                    stopColor='currentColor'
+                    stopOpacity='0.9'
+                  />
+                  <stop
+                    offset='40%'
+                    className='text-blue-400 dark:text-blue-500'
+                    stopColor='currentColor'
+                    stopOpacity='0.85'
+                  />
+                  <stop
+                    offset='100%'
+                    className='text-cyan-400 dark:text-cyan-600'
+                    stopColor='currentColor'
+                    stopOpacity='0.8'
+                  />
+                </linearGradient>
+              </defs>
+              {/* Fan/Petal shape spreading from bottom left */}
+              <path
+                fill='url(#blueGradient)'
+                d='M 50 450 Q 150 350 280 320 Q 400 300 480 340 Q 500 380 470 420
+                   Q 440 460 380 480 Q 280 500 180 490 Q 100 480 50 450 Z
+                   M 60 440 Q 140 380 240 360 Q 320 350 380 380
+                   L 320 420 Q 240 400 160 430 Z
+                   M 80 430 Q 150 390 220 380 Q 280 375 320 395
+                   L 280 420 Q 220 410 160 425 Z'
+              />
+            </svg>
+          </div>
+        </div>
+
+        {/* Content */}
+        <div className='relative z-10 flex flex-col h-full'>
+          {/* Badge */}
+          {badge && (
+            <div className='inline-block self-start mb-6 px-5 py-2.5 bg-purple-100 dark:bg-purple-900/30 rounded-full'>
+              <span className='text-sm font-semibold text-gray-900 dark:text-gray-200'>{badge}</span>
+            </div>
+          )}
+
+          {/* Tool Name */}
+          <h3 className='text-3xl font-bold text-gray-900 dark:text-white mb-5'>{name}</h3>
+
+          {/* Description */}
+          <p className='text-gray-700 dark:text-gray-300 mb-6 leading-relaxed text-base flex-grow'>{description}</p>
+
+          {/* Language Tag */}
+          <div className='inline-block self-start px-5 py-2.5 border-2 border-pink-500 dark:border-pink-400 rounded-lg'>
+            <span className='text-sm font-bold text-pink-600 dark:text-pink-400 uppercase'>{language}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  if (link) {
+    return (
+      <a href={link} target='_blank' rel='noopener noreferrer' className='block'>
+        {CardContent}
+      </a>
+    );
+  }
+
+  return CardContent;
+}
diff --git a/components/community/ToolingsShowcase.tsx b/components/community/ToolingsShowcase.tsx
new file mode 100644
index 000000000000..9c60dc99247f
--- /dev/null
+++ b/components/community/ToolingsShowcase.tsx
@@ -0,0 +1,118 @@
+'use client';
+
+import Link from 'next/link';
+import React, { useState } from 'react';
+
+import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
+import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
+
+import communityToolingsShowcase from '../../config/community-toolings-showcase.json';
+import Heading from '../typography/Heading';
+import Paragraph from '../typography/Paragraph';
+import ToolingCard from './ToolingCard';
+
+interface ToolData {
+  name: string;
+  displayName: string;
+  description: string;
+  language: string;
+  link: string;
+  color: string;
+  badge?: string;
+}
+
+const toolsData: Record<string, ToolData> = communityToolingsShowcase as Record<string, ToolData>;
+
+/**
+ * @description ToolingsShowcase component for displaying AsyncAPI tools collection
+ */
+export default function ToolingsShowcase() {
+  const [selectedTool, setSelectedTool] = useState<string>('java-asyncapi');
+  const [isShuffling, setIsShuffling] = useState<boolean>(false);
+
+  const currentTool = toolsData[selectedTool];
+
+  const handleToolChange = (toolName: string) => {
+    if (toolName === selectedTool) return;
+
+    // Start shuffle animation
+    setIsShuffling(true);
+
+    // Change tool after shuffle animation starts
+    setTimeout(() => {
+      setSelectedTool(toolName);
+      setIsShuffling(false);
+    }, 300);
+  };
+
+  return (
+    <div className='mt-20 py-20 px-6 md:px-12 bg-gray-50 dark:bg-dark-background'>
+      <div className='max-w-7xl mx-auto'>
+        <div className='flex flex-col lg:flex-row items-center gap-12 lg:gap-16'>
+          {/* Left Content */}
+          <div className='flex-1 space-y-8'>
+            <div>
+              <Heading
+                level={HeadingLevel.h1}
+                typeStyle={HeadingTypeStyle.xl}
+                className='text-gray-900 dark:text-dark-heading font-bold mb-4'
+              >
+                Checkout Our Collection of Toolings
+              </Heading>
+              <Paragraph typeStyle={ParagraphTypeStyle.lg} className='text-gray-700 dark:text-gray-300 leading-relaxed'>
+                Discover various AsyncAPI tools to optimize your journey! These tools are made by the community, for the
+                community.
+              </Paragraph>
+            </div>
+
+            {/* Explore Tools Button */}
+            <Link
+              href='/tools'
+              className='inline-block px-8 py-4 bg-primary-500 hover:bg-primary-600
+                dark:bg-primary-500 dark:hover:bg-primary-600 text-white rounded-lg transition-all
+                font-semibold text-lg shadow-lg hover:shadow-xl transform hover:-translate-y-0.5'
+            >
+              Explore Tools
+            </Link>
+
+            {/* Tool Tags */}
+            <div className='flex flex-wrap gap-3 pt-4'>
+              {Object.values(toolsData).map((tool) => (
+                <button
+                  key={tool.name}
+                  onClick={() => handleToolChange(tool.name)}
+                  className={`px-4 py-2 border-2 ${tool.color} rounded-lg transition-all font-medium hover:shadow-md ${
+                    selectedTool === tool.name
+                      ? 'ring-2 ring-primary-500 ring-offset-2 dark:ring-offset-dark-background'
+                      : ''
+                  }`}
+                >
+                  {tool.displayName}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Right Card Showcase */}
+          <div
+            className={`flex-1 w-full lg:max-w-xl flex justify-center lg:justify-end pt-8 pb-4 
+              pl-16 pr-4 transition-all duration-300 ease-in-out ${
+                isShuffling
+                  ? 'opacity-0 scale-90 -rotate-6 translate-x-[-30px]'
+                  : 'opacity-100 scale-100 rotate-0 translate-x-0'
+              }`}
+          >
+            <ToolingCard
+              name={currentTool.displayName}
+              description={currentTool.description}
+              badge={currentTool.badge}
+              language={currentTool.language}
+              link={currentTool.link}
+              isShuffling={isShuffling}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/community/UpcomingEventsSection.tsx b/components/community/UpcomingEventsSection.tsx
new file mode 100644
index 000000000000..0cc8c3a72985
--- /dev/null
+++ b/components/community/UpcomingEventsSection.tsx
@@ -0,0 +1,192 @@
+import React, { useState } from 'react';
+
+import EventPostItem from '@/components/navigation/EventPostItem';
+import Heading from '@/components/typography/Heading';
+import Paragraph from '@/components/typography/Paragraph';
+import meetings from '@/config/meetings.json';
+import type { Event } from '@/types/pages/community/Community';
+import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
+import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
+import { getEvents } from '@/utils/staticHelpers';
+
+/**
+ * @description UpcomingEventsSection component for displaying upcoming events with pagination
+ */
+export default function UpcomingEventsSection() {
+  const [events] = useState(getEvents(meetings));
+  const [currentPage, setCurrentPage] = useState(1);
+  const eventsPerPage = 6;
+
+  // Calculate pagination
+  const indexOfLastEvent = currentPage * eventsPerPage;
+  const indexOfFirstEvent = indexOfLastEvent - eventsPerPage;
+  const currentEvents = events.slice(indexOfFirstEvent, indexOfLastEvent);
+  const totalPages = Math.ceil(events.length / eventsPerPage);
+
+  const goToPage = (pageNumber: number) => {
+    setCurrentPage(pageNumber);
+    // Scroll to top of events section
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  const renderPageNumbers = () => {
+    const pageNumbers = [];
+    const maxVisiblePages = 5;
+    let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
+    const endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
+
+    if (endPage - startPage + 1 < maxVisiblePages) {
+      startPage = Math.max(1, endPage - maxVisiblePages + 1);
+    }
+
+    // Previous button
+    pageNumbers.push(
+      <button
+        key='prev'
+        onClick={() => goToPage(currentPage - 1)}
+        disabled={currentPage === 1}
+        className='rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-dark-card px-3 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:cursor-not-allowed disabled:opacity-50'
+        data-testid='Pagination-Prev'
+      >
+        &lt;
+      </button>
+    );
+
+    // First page
+    if (startPage > 1) {
+      pageNumbers.push(
+        <button
+          key={1}
+          onClick={() => goToPage(1)}
+          className='rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-dark-card px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700'
+          data-testid='Pagination-Page-1'
+        >
+          1
+        </button>
+      );
+      if (startPage > 2) {
+        pageNumbers.push(
+          <span key='ellipsis1' className='px-2 text-gray-500 dark:text-gray-400'>
+            ...
+          </span>
+        );
+      }
+    }
+
+    // Page numbers
+    for (let i = startPage; i <= endPage; i++) {
+      pageNumbers.push(
+        <button
+          key={i}
+          onClick={() => goToPage(i)}
+          className={`rounded border px-4 py-2 ${
+            currentPage === i
+              ? 'border-indigo-600 dark:border-primary-500 bg-indigo-600 dark:bg-primary-500 text-white'
+              : 'border-gray-300 dark:border-gray-600 bg-white dark:bg-dark-card text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700'
+          }`}
+          data-testid={`Pagination-Page-${i}`}
+        >
+          {i}
+        </button>
+      );
+    }
+
+    // Last page
+    if (endPage < totalPages) {
+      if (endPage < totalPages - 1) {
+        pageNumbers.push(
+          <span key='ellipsis2' className='px-2 text-gray-500 dark:text-gray-400'>
+            ...
+          </span>
+        );
+      }
+      pageNumbers.push(
+        <button
+          key={totalPages}
+          onClick={() => goToPage(totalPages)}
+          className='rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-dark-card px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700'
+          data-testid={`Pagination-Page-${totalPages}`}
+        >
+          {totalPages}
+        </button>
+      );
+    }
+
+    // Next button
+    pageNumbers.push(
+      <button
+        key='next'
+        onClick={() => goToPage(currentPage + 1)}
+        disabled={currentPage === totalPages}
+        className='rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-dark-card px-3 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:cursor-not-allowed disabled:opacity-50'
+        data-testid='Pagination-Next'
+      >
+        &gt;
+      </button>
+    );
+
+    return pageNumbers;
+  };
+
+  return (
+    <div className='py-20' data-testid='UpcomingEvents-Section'>
+      <div className='text-center'>
+        <Heading
+          level={HeadingLevel.h2}
+          typeStyle={HeadingTypeStyle.lg}
+          className='mb-4 text-gray-900 dark:text-dark-heading'
+        >
+          Upcoming Events
+        </Heading>
+        <Paragraph
+          typeStyle={ParagraphTypeStyle.md}
+          className='mx-auto mb-12 max-w-2xl text-gray-600 dark:text-gray-300'
+        >
+          Don&apos;t miss out on these amazing community gatherings
+        </Paragraph>
+      </div>
+
+      {/* Events Grid */}
+      <div className='mt-10'>
+        {!currentEvents || currentEvents.length === 0 ? (
+          <div className='flex content-center justify-center'>
+            <Paragraph typeStyle={ParagraphTypeStyle.md} className='mx-auto mt-5 max-w-2xl'>
+              No Events. Check back later!
+            </Paragraph>
+          </div>
+        ) : (
+          <ul className='grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3' data-testid='UpcomingEvents-Grid'>
+            {currentEvents.map((event: Event) => {
+              return <EventPostItem key={event.title} id={event.title} post={event} />;
+            })}
+          </ul>
+        )}
+      </div>
+
+      {/* Pagination */}
+      {totalPages > 1 && (
+        <div
+          className='mt-12 flex flex-col items-center justify-center gap-4 sm:flex-row'
+          data-testid='UpcomingEvents-Pagination'
+        >
+          <div className='flex items-center gap-2'>{renderPageNumbers()}</div>
+          <div className='flex items-center gap-2'>
+            <span className='text-sm text-gray-600 dark:text-gray-400'>Go to page</span>
+            <select
+              value={currentPage}
+              onChange={(e) => goToPage(Number(e.target.value))}
+              className='rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-dark-card px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700'
+              data-testid='Pagination-Dropdown'
+            >
+              {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
+                <option key={page} value={page}>
+                  {page}/{totalPages}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/components/dashboard/GoodFirstIssues.tsx b/components/dashboard/GoodFirstIssues.tsx
index 29cec9a3a911..9183024fce9f 100644
--- a/components/dashboard/GoodFirstIssues.tsx
+++ b/components/dashboard/GoodFirstIssues.tsx
@@ -61,11 +61,26 @@ export default function GoodFirstIssues({ issues }: GoodFirstIssuesProps) {
   return (
     <Table
       title={
-        <div className='flex gap-3' data-testid='GoodFirstIssues-main-div'>
-          <span>Good First Issues</span>
-          <GoodFirstIssuesTip />
+        <div className='flex items-center gap-3 w-full flex-wrap sm:flex-nowrap' data-testid='GoodFirstIssues-main-div'>
+          <div className='flex items-center gap-3 flex-1 min-w-0'>
+            <svg
+              className='w-5 h-5 text-gray-700 dark:text-gray-300 flex-shrink-0'
+              fill='none'
+              viewBox='0 0 24 24'
+              stroke='currentColor'
+            >
+              <path
+                strokeLinecap='round'
+                strokeLinejoin='round'
+                strokeWidth={2}
+                d='M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z'
+              />
+            </svg>
+            <span className='dark:text-white font-semibold truncate'>Good First Issues</span>
+            <GoodFirstIssuesTip />
+          </div>
           <Filters
-            className='ml-auto'
+            className='ml-auto sm:ml-auto flex-shrink-0 dark:bg-dark-background dark:border-gray-500'
             data-testid='GoodFirstIssues-filter-component'
             issues={filteredIssues}
             allIssues={allIssues}
@@ -77,7 +92,7 @@ export default function GoodFirstIssues({ issues }: GoodFirstIssuesProps) {
         </div>
       }
       data={filteredIssues.slice(0, 24)}
-      className='grow'
+      className='flex-1'
       listClassName='lg:grid-cols-2'
     />
   );
diff --git a/components/dashboard/GoodFirstIssuesTip.tsx b/components/dashboard/GoodFirstIssuesTip.tsx
index 4a8a2197160a..19b6233312d3 100644
--- a/components/dashboard/GoodFirstIssuesTip.tsx
+++ b/components/dashboard/GoodFirstIssuesTip.tsx
@@ -20,6 +20,7 @@ export default function GoodFirstIssuesTip() {
         src='/img/illustrations/icons/tip-icon.svg'
         data-testid='GoodFirstIssuesTip-hover-icon'
         alt='Tooltip'
+        className='dark:invert'
       />
 
       {open && (
@@ -31,12 +32,31 @@ export default function GoodFirstIssuesTip() {
             left: x ?? ''
           }}
         >
-          <div className='max-w-xs rounded bg-white p-4 shadow-xl'>
-            <h4 className='mb-3 text-base font-bold '>Is this your first contribution?</h4>
-            <p className='font-regular'>
-              The issues in this column are perfect for you! These issues are of low-complexity and should be a quick
-              commit. Thanks for your help, and welcome!
-            </p>
+          <div className='max-w-xs rounded-xl bg-white dark:bg-dark-card p-5 shadow-2xl dark:shadow-2xl border border-gray-200 dark:border-gray-700'>
+            <div className='flex items-start gap-3'>
+              <div className='flex-shrink-0 w-10 h-10 rounded-lg bg-green-100 dark:bg-green-900/30 flex items-center justify-center'>
+                <svg
+                  className='w-5 h-5 text-green-600 dark:text-green-400'
+                  fill='none'
+                  viewBox='0 0 24 24'
+                  stroke='currentColor'
+                >
+                  <path
+                    strokeLinecap='round'
+                    strokeLinejoin='round'
+                    strokeWidth={2}
+                    d='M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'
+                  />
+                </svg>
+              </div>
+              <div className='flex-1'>
+                <h4 className='mb-2 text-base font-bold dark:text-white'>Is this your first contribution?</h4>
+                <p className='text-sm font-regular dark:text-gray-300 leading-relaxed'>
+                  The issues in this column are perfect for you! These issues are of low-complexity and should be a
+                  quick commit. Thanks for your help, and welcome!
+                </p>
+              </div>
+            </div>
           </div>
         </div>
       )}
diff --git a/components/dashboard/Header.tsx b/components/dashboard/Header.tsx
index cc993b4d5326..c50fd9b31533 100644
--- a/components/dashboard/Header.tsx
+++ b/components/dashboard/Header.tsx
@@ -9,21 +9,21 @@ import SlackButton from '../buttons/SlackButton';
  */
 export default function Header() {
   return (
-    <div className='sm:flex sm:justify-between' id='main-content'>
+    <div className='sm:flex sm:justify-between items-start' id='main-content'>
       <div className='lg:flex lg:justify-between'>
-        <div className='max-w-xl'>
+        <div className='max-w-2xl'>
           <h2
-            className='text-4xl font-extrabold leading-10 text-gray-900 sm:text-4xl sm:leading-none sm:tracking-tight'
+            className='text-4xl font-extrabold leading-10 text-gray-900 dark:text-white sm:text-4xl sm:leading-none sm:tracking-tight mb-4'
             data-testid='Header-heading'
           >
             Dashboard
           </h2>
-          <p className='mt-5 text-xl leading-7 text-gray-700' data-testid='Header-paragraph'>
+          <p className='text-xl leading-7 text-gray-700 dark:text-gray-300' data-testid='Header-paragraph'>
             Visualize our progress. Get involved.{' '}
           </p>
         </div>
       </div>
-      <div className='mt-3 flex flex-col gap-x-2 gap-y-1 self-end text-center xs:flex-row'>
+      <div className='mt-6 sm:mt-0 flex flex-col gap-2 self-end text-center xs:flex-row'>
         <Button
           text='Contribution Guide'
           href='https://www.asyncapi.com/docs/community/010-contribution-guidelines'
diff --git a/components/dashboard/table/Filters.tsx b/components/dashboard/table/Filters.tsx
index e9d8a9066c4d..80c2f9ff2e30 100644
--- a/components/dashboard/table/Filters.tsx
+++ b/components/dashboard/table/Filters.tsx
@@ -39,7 +39,7 @@ function useOutsideAlerter(ref: RefObject<any>, setOpen: (open: boolean) => void
       // Unbind the event listener on clean up
       document.removeEventListener('mousedown', handleClickOutside);
     };
-  }, [ref]);
+  }, [ref, setOpen]);
 }
 
 /**
@@ -63,8 +63,25 @@ export default function Filters({
   setSelectedArea
 }: FilterProps) {
   const [open, setOpen] = useState(false);
+  const [placement, setPlacement] = useState<'left-start' | 'bottom-end'>('left-start');
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth < 768) {
+        setPlacement('bottom-end');
+      } else {
+        setPlacement('left-start');
+      }
+    };
+
+    handleResize();
+    window.addEventListener('resize', handleResize);
+
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
   const { x, y, reference, floating, strategy } = useFloating({
-    placement: 'left-start',
+    placement,
     open
   });
 
@@ -85,44 +102,78 @@ export default function Filters({
 
   return (
     <>
-      <img
+      <button
         onClick={() => setOpen(!open)}
         ref={reference}
-        alt='filter menu'
-        src='/img/illustrations/icons/filters-icon.svg'
-        className={`cursor-pointer ${className}`}
+        className={`flex items-center justify-center w-8 h-8 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-dark-background hover:bg-gray-50 dark:hover:bg-dark-card transition-all duration-200 hover:shadow-md ${className}`}
+        aria-label='Filter issues'
         data-testid='Filters-img-container'
-      />
+      >
+        <img
+          alt='filter menu'
+          src='/img/illustrations/icons/filters-icon.svg'
+          className='w-4 h-4 dark:invert dark:opacity-80'
+        />
+      </button>
 
       <div ref={wrapperRef}>
         {open && (
           <div
             ref={floating}
-            className={`${strategy} ${x && x > 0 ? `left-[${x}px]` : 'left-[14px]'}`}
+            className='z-50'
             style={{
+              position: strategy,
               top: y ?? '',
-              left: x && x > 0 ? x : ''
+              left: x ?? '',
+              right: placement === 'bottom-end' ? '1rem' : undefined
             }}
             data-testid='Filter-menu'
           >
-            <div className='w-96 max-w-[19rem] rounded bg-white shadow-xl'>
-              <div className='flex p-4'>
-                <h4 className='text-base'>Filter Issues</h4>
-                <button onClick={() => setOpen(!open)} className='ml-auto'>
-                  <img src='/img/illustrations/icons/close-icon.svg' alt='close' />
+            <div className='w-[calc(100vw-2rem)] max-w-[19rem] sm:w-96 rounded-xl bg-white dark:bg-dark-card shadow-2xl dark:shadow-2xl border border-gray-200 dark:border-gray-700 overflow-hidden z-50'>
+              <div className='flex items-center justify-between px-4 sm:px-5 py-3 sm:py-4 bg-gradient-to-r from-gray-50 to-white dark:from-dark-background dark:to-dark-card border-b border-gray-200 dark:border-gray-700'>
+                <div className='flex items-center gap-2'>
+                  <div className='w-7 h-7 sm:w-8 sm:h-8 rounded-lg bg-primary-100 dark:bg-primary-900/30 flex items-center justify-center flex-shrink-0'>
+                    <svg
+                      className='w-3.5 h-3.5 sm:w-4 sm:h-4 text-primary-600 dark:text-primary-400'
+                      fill='none'
+                      viewBox='0 0 24 24'
+                      stroke='currentColor'
+                    >
+                      <path
+                        strokeLinecap='round'
+                        strokeLinejoin='round'
+                        strokeWidth={2}
+                        d='M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z'
+                      />
+                    </svg>
+                  </div>
+                  <h4 className='text-sm sm:text-base font-semibold dark:text-white'>Filter Issues</h4>
+                </div>
+                <button
+                  onClick={() => setOpen(!open)}
+                  className='ml-auto p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors flex-shrink-0'
+                  aria-label='Close filter menu'
+                >
+                  <img
+                    src='/img/illustrations/icons/close-icon.svg'
+                    alt='close'
+                    className='w-4 h-4 dark:invert dark:opacity-80'
+                  />
                 </button>
               </div>
-              <div className='h-px w-full bg-gray-900' />
-              <div className='flex flex-col gap-2 p-4'>
-                <h5 className='text-base'>BY REPOSITORY</h5>
-                <Select
-                  options={uniqueRepos}
-                  onChange={setSelectedRepo}
-                  className='mb-4 w-full '
-                  selected={selectedRepo}
-                />
-                <h5 className='text-base'>BY AREA</h5>
-                <Select options={uniqueAreas} onChange={setSelectedArea} className='w-full' selected={selectedArea} />
+              <div className='flex flex-col gap-4 p-4 sm:p-5'>
+                <div>
+                  <h5 className='text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-3'>
+                    BY REPOSITORY
+                  </h5>
+                  <Select options={uniqueRepos} onChange={setSelectedRepo} className='w-full' selected={selectedRepo} />
+                </div>
+                <div>
+                  <h5 className='text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-3'>
+                    BY AREA
+                  </h5>
+                  <Select options={uniqueAreas} onChange={setSelectedArea} className='w-full' selected={selectedArea} />
+                </div>
               </div>
             </div>
           </div>
diff --git a/components/dashboard/table/Row.tsx b/components/dashboard/table/Row.tsx
index 8b03be87263c..85656c016bd3 100644
--- a/components/dashboard/table/Row.tsx
+++ b/components/dashboard/table/Row.tsx
@@ -15,54 +15,66 @@ interface RowProps {
 export default function Row({ item }: RowProps) {
   return (
     <li>
-      <div className=' rounded-md border border-gray-200 bg-white p-4'>
-        <div className='flex justify-between'>
-          <div className='flex flex-col gap-2'>
-            <div className='flex items-center gap-1 underline'>
-              <img
-                alt='issue or pull-request icon'
-                className='size-4'
-                src={item.isPR ? '/img/illustrations/icons/pull-request.svg' : '/img/illustrations/icons/issue.svg'}
-                data-testid='Row-img-issue'
-              />
-              <a
-                target='_blank'
-                rel='noreferrer'
-                className='text-sm font-light lowercase text-gray-900'
-                href={`https://github.com/${item.repo}`}
-                data-testid='Row-github-redirect'
-              >
-                {item.repo}
-              </a>
-            </div>
-            <a target='_blank' rel='noreferrer' href={`https://github.com/${item.resourcePath}`}>
+      <a target='_blank' rel='noreferrer' href={`https://github.com/${item.resourcePath}`} className='block group'>
+        <div className='rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-dark-background p-5 transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5 hover:border-primary-300 dark:hover:border-primary-600 cursor-pointer'>
+          <div className='flex justify-between items-start gap-4'>
+            <div className='flex flex-col gap-3 flex-1 min-w-0'>
+              <div className='flex items-center gap-2'>
+                <div
+                  className={`flex items-center justify-center w-5 h-5 rounded ${item.isPR ? 'bg-blue-100 dark:bg-blue-900/30' : 'bg-green-100 dark:bg-green-900/30'}`}
+                >
+                  <img
+                    alt='issue or pull-request icon'
+                    className='size-3 dark:invert dark:opacity-80'
+                    src={item.isPR ? '/img/illustrations/icons/pull-request.svg' : '/img/illustrations/icons/issue.svg'}
+                    data-testid='Row-img-issue'
+                  />
+                </div>
+                <a
+                  target='_blank'
+                  rel='noreferrer'
+                  onClick={(e) => e.stopPropagation()}
+                  className='text-xs font-medium lowercase text-gray-600 dark:text-gray-400 hover:text-primary-500 dark:hover:text-primary-400 transition-colors'
+                  href={`https://github.com/${item.repo}`}
+                  data-testid='Row-github-redirect'
+                >
+                  {item.repo}
+                </a>
+              </div>
               <span
-                className='two-liner w-full text-base font-medium leading-5 text-gray-900'
+                className='two-liner w-full text-base font-semibold leading-6 text-gray-900 dark:text-white group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors'
                 data-testid='Row-spanText'
               >
                 {item.title}
               </span>
-            </a>
-            {item.labels && item?.labels?.length > 0 && (
-              <div className='flex flex-wrap items-center gap-1'>
-                {item.labels.map((label) => (
-                  <span key={label.name} className={'rounded-full bg-secondary-300 px-2 text-sm leading-5'}>
-                    {label.name}
-                  </span>
-                ))}
+              {item.labels && item?.labels?.length > 0 && (
+                <div className='flex flex-wrap items-center gap-2'>
+                  {item.labels.map((label) => (
+                    <span
+                      key={label.name}
+                      className='rounded-full bg-secondary-200 dark:bg-secondary-600 text-gray-700 dark:text-white px-3 py-1 text-xs font-medium leading-4 border border-secondary-300 dark:border-secondary-500'
+                    >
+                      {label.name}
+                    </span>
+                  ))}
+                </div>
+              )}
+            </div>
+            <div className='flex-shrink-0 my-auto'>
+              <div className='w-8 h-8 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center group-hover:bg-primary-100 dark:group-hover:bg-primary-900/30 transition-colors'>
+                <svg
+                  className='w-5 h-5 text-gray-600 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors'
+                  fill='none'
+                  viewBox='0 0 24 24'
+                  stroke='currentColor'
+                >
+                  <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M9 5l7 7-7 7' />
+                </svg>
               </div>
-            )}
+            </div>
           </div>
-          <a
-            target='_blank'
-            rel='noreferrer'
-            className='my-auto w-fit'
-            href={`https://github.com/${item.resourcePath}`}
-          >
-            <img alt='arrow icon' src='/img/illustrations/icons/arrow.svg' />
-          </a>
         </div>
-      </div>
+      </a>
     </li>
   );
 }
diff --git a/components/dashboard/table/Table.tsx b/components/dashboard/table/Table.tsx
index f5153fabc979..1b81bc374d48 100644
--- a/components/dashboard/table/Table.tsx
+++ b/components/dashboard/table/Table.tsx
@@ -22,34 +22,68 @@ interface TableProps {
  */
 export default function Table({ title, data, className, listClassName }: TableProps) {
   return (
-    <div className={`rounded border border-gray-200  bg-gray-50 lg:w-1/2 ${className}`}>
-      <div className='inline-flex w-full rounded bg-white p-5'>
-        <h2 className='w-full text-base font-semibold'>{title}</h2>
+    <div
+      className={`rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-dark-card shadow-lg dark:shadow-xl overflow-hidden lg:w-1/2 transition-all duration-300 hover:shadow-xl dark:hover:shadow-2xl flex flex-col ${className}`}
+    >
+      <div className='inline-flex w-full bg-gradient-to-r from-gray-50 to-white dark:from-dark-background dark:to-dark-card border-b border-gray-200 dark:border-gray-700 px-4 sm:px-6 py-4 sm:py-5'>
+        <h2 className='w-full text-base sm:text-lg font-semibold dark:text-white flex items-center gap-2'>{title}</h2>
       </div>
-      <div className='min-w-full inline-block overflow-y-scroll'>
+      <div className='min-w-full inline-block overflow-y-auto max-h-[600px] flex-1'>
         {data.length === 0 && (
-          <div className='w-full p-5 text-base font-medium'>
-            <p>There aren&apos;t any good first issues open for the given repository and area at the moment.</p>
-            <ul className='mt-3 list-disc pl-5 text-sm font-[400]'>
-              <li className='mb-2'>
-                Join our{' '}
-                <a href='https://asyncapi.com/slack-invite' className='text-blue-500 underline'>
-                  Slack
-                </a>{' '}
-                to seek help.
-              </li>
-              <li className='mb-2'>
-                In the <span className='font-semibold text-green-900'>#11_contributing</span> channel, call out the
-                maintainers that you want to work with. Ask them if there are any issues you could solve. You know who
-                these people are from <span className='font-bold'>CODEOWNERS</span> file in each repo.
-              </li>
-              <li className='mb-2'>
-                If there is no response, you need to look for a different issue from different repository.
-              </li>
-            </ul>
+          <div className='w-full p-8 text-base font-medium dark:text-gray-300'>
+            <div className='flex flex-col items-center justify-center py-8'>
+              <div className='w-16 h-16 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center mb-4'>
+                <svg
+                  className='w-8 h-8 text-gray-400 dark:text-gray-500'
+                  fill='none'
+                  viewBox='0 0 24 24'
+                  stroke='currentColor'
+                >
+                  <path
+                    strokeLinecap='round'
+                    strokeLinejoin='round'
+                    strokeWidth={2}
+                    d='M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'
+                  />
+                </svg>
+              </div>
+              <p className='text-center mb-4 dark:text-gray-300'>
+                There aren&apos;t any good first issues open for the given repository and area at the moment.
+              </p>
+              <ul className='mt-4 space-y-3 text-sm text-left max-w-md'>
+                <li className='flex items-start gap-2'>
+                  <span className='text-primary-500 dark:text-primary-400 mt-1'>•</span>
+                  <span className='dark:text-gray-300'>
+                    Join our{' '}
+                    <a
+                      href='https://asyncapi.com/slack-invite'
+                      className='text-blue-500 dark:text-blue-400 underline font-medium'
+                    >
+                      Slack
+                    </a>{' '}
+                    to seek help.
+                  </span>
+                </li>
+                <li className='flex items-start gap-2'>
+                  <span className='text-primary-500 dark:text-primary-400 mt-1'>•</span>
+                  <span className='dark:text-gray-300'>
+                    In the <span className='font-semibold text-green-700 dark:text-green-400'>#11_contributing</span>{' '}
+                    channel, call out the maintainers that you want to work with. Ask them if there are any issues you
+                    could solve. You know who these people are from{' '}
+                    <span className='font-bold dark:text-white'>CODEOWNERS</span> file in each repo.
+                  </span>
+                </li>
+                <li className='flex items-start gap-2'>
+                  <span className='text-primary-500 dark:text-primary-400 mt-1'>•</span>
+                  <span className='dark:text-gray-300'>
+                    If there is no response, you need to look for a different issue from different repository.
+                  </span>
+                </li>
+              </ul>
+            </div>
           </div>
         )}
-        <ul className={`m-4 grid gap-4  ${listClassName}`}>
+        <ul className={`p-4 grid gap-3 ${listClassName}`}>
           {data.map((item) => (
             <Row key={item.title} item={item} />
           ))}
diff --git a/components/data/buckets.ts b/components/data/buckets.ts
index 140d21b2e112..cdb25c85c76b 100644
--- a/components/data/buckets.ts
+++ b/components/data/buckets.ts
@@ -26,7 +26,7 @@ export const buckets: Bucket[] = [
     title: 'Concepts',
     description: 'Our Concepts section defines the concepts of AsyncAPI features and capabilities.',
     link: '/docs/concepts',
-    className: 'bg-secondary-200',
+    className: 'bg-primary-100 dark:bg-primary-500/20 border border-primary-500 text-primary-600 dark:text-primary-300',
     borderClassName: 'border-secondary-200',
     href: '/docs/concepts',
     icon: IconGettingStarted
@@ -36,7 +36,7 @@ export const buckets: Bucket[] = [
     title: 'Tutorials',
     description: 'Our Tutorials section teaches beginner processes with AsyncAPI, guiding you from Point A to Point B.',
     link: '/docs/tutorials',
-    className: 'bg-pink-100',
+    className: 'bg-primary-100 dark:bg-primary-500/20 border border-primary-500 text-primary-600 dark:text-primary-300',
     borderClassName: 'border-pink-100',
     href: '/docs/tutorials',
     icon: IconTutorials
@@ -46,7 +46,7 @@ export const buckets: Bucket[] = [
     title: 'Guides',
     description: "Our Guides section teaches AsyncAPI's capabilities at a high level.",
     link: '/docs/guides',
-    className: 'bg-primary-200',
+    className: 'bg-primary-100 dark:bg-primary-500/20 border border-primary-500 text-primary-600 dark:text-primary-300',
     borderClassName: 'border-primary-200',
     href: '/docs/guides',
     icon: IconGuide
@@ -56,7 +56,7 @@ export const buckets: Bucket[] = [
     title: 'Tools',
     description: 'Our Tools section documents the AsyncAPI tools ecosystem.',
     link: '/docs/tools',
-    className: 'bg-green-200',
+    className: 'bg-primary-100 dark:bg-primary-500/20 border border-primary-500 text-primary-600 dark:text-primary-300',
     borderClassName: 'border-green-200',
     href: '/docs/tools',
     icon: IconUseCases
@@ -66,7 +66,7 @@ export const buckets: Bucket[] = [
     title: 'Reference',
     description: 'Our Reference section documents the AsyncAPI specification.',
     link: '/docs/reference',
-    className: 'bg-yellow-200',
+    className: 'bg-primary-100 dark:bg-primary-500/20 border border-primary-500 text-primary-600 dark:text-primary-300',
     borderClassName: 'border-yellow-200',
     href: '/docs/reference',
     icon: IconSpec
@@ -76,7 +76,7 @@ export const buckets: Bucket[] = [
     title: 'Migration',
     description: 'Our migration guides on how to upgrade to newer AsyncAPI versions.',
     link: '/docs/migration',
-    className: 'bg-blue-400',
+    className: 'bg-primary-100 dark:bg-primary-500/20 border border-primary-500 text-primary-600 dark:text-primary-300',
     borderClassName: 'border-blue-400',
     href: '/docs/migration',
     icon: IconMigration
@@ -86,8 +86,8 @@ export const buckets: Bucket[] = [
     title: 'Community',
     description: 'Our Community section documents the community guidelines and resources.',
     link: '/docs/community',
-    className: 'bg-orange-200',
-    borderClassName: 'border-orange-200',
+    className: 'bg-primary-100 dark:bg-primary-500/20 border border-primary-500 text-primary-600 dark:text-primary-300',
+    borderClassName: 'border-primary-500',
     href: '/docs/community',
     icon: IconUsers
   },
@@ -96,8 +96,8 @@ export const buckets: Bucket[] = [
     title: 'Specification Explorer',
     description: 'Simplifying our Specification JSON Schema like a pro.',
     link: '/docs/reference/specification/v3.0.0-explorer',
-    className: 'bg-teal-200',
-    borderClassName: 'border-orange-200',
+    className: 'bg-primary-100 dark:bg-primary-500/20 border border-primary-500 text-primary-600 dark:text-primary-300',
+    borderClassName: 'border-primary-200',
     icon: IconExplorer
   }
 ].map((bucket) => {
diff --git a/components/docs/Card.tsx b/components/docs/Card.tsx
index 64f6dbc07e21..b8de1f1fa224 100644
--- a/components/docs/Card.tsx
+++ b/components/docs/Card.tsx
@@ -29,20 +29,23 @@ export default function Card({ title, description, link, className, Icon }: Card
   return (
     <Link href={link} className='cursor-pointer' data-testid='Docs-link'>
       <div
-        className='h-full rounded-lg border border-gray-200 p-6 shadow-md transition-all duration-300 ease-in-out
+        className='h-full rounded-lg border dark:border-border
+         dark:bg-dark-card dark:shadow-md dark:transition-all
+         dark:duration-300 dark:ease-in-out dark:hover:shadow-lg dark:hover:shadow-dark-card
+         border-gray-200 p-6 shadow-md transition-all duration-300 ease-in-out
           hover:shadow-lg'
       >
         <div data-testid='Docs-div-contents'>
           <Heading
             level={HeadingLevel.h3}
             typeStyle={HeadingTypeStyle.smSemibold}
-            className='border-b border-gray-300 pb-4'
+            className='border-b dark:text-white border-gray-300 pb-4'
             id={title}
           >
             <div className='flex flex-row items-center'>
               <div
                 className={`flex size-12 shrink-0 items-center justify-center rounded-lg ${className}
-                  text-gray-900 sm:size-12`}
+                   text-primary-500 bg-primary-100 dark:bg-muted border dark:border-primary-500 dark:border-border sm:size-12`}
                 data-testid='Docs-icon'
               >
                 <Icon className='size-6' />
@@ -50,7 +53,7 @@ export default function Card({ title, description, link, className, Icon }: Card
               <span className='ml-4'>{title}</span>
             </div>
           </Heading>
-          <Paragraph typeStyle={ParagraphTypeStyle.sm} className='mt-5' fontWeight='light'>
+          <Paragraph typeStyle={ParagraphTypeStyle.sm} className='mt-5 dark:text-white' fontWeight='light'>
             {description}
           </Paragraph>
         </div>
diff --git a/components/faq/FAQList.tsx b/components/faq/FAQList.tsx
index eb9e3d90a1d6..933c85b02f03 100644
--- a/components/faq/FAQList.tsx
+++ b/components/faq/FAQList.tsx
@@ -19,7 +19,7 @@ export const faqList: FAQ[] = [
         WebSockets, Kafka, STOMP, HTTP, Mercure, etc). For more information, refer to the{' '}
         <a
           href='https://www.asyncapi.com/docs/reference/specification/latest#serverBindingsObject'
-          className='border-b border-secondary-400 font-semibold text-gray-900 transition duration-300 ease-in-out hover:border-secondary-500'
+          className='border-b border-secondary-400 font-semibold text-gray-900 transition duration-300 ease-in-out hover:border-secondary-500 dark:text-white'
         >
           AsyncAPI specification documentation
         </a>
diff --git a/components/features/index.tsx b/components/features/index.tsx
index 959db7b55a7f..88fb73395fcc 100644
--- a/components/features/index.tsx
+++ b/components/features/index.tsx
@@ -16,18 +16,21 @@ export default function Features() {
   const { t } = useTranslation('landing-page');
 
   return (
-    <section className='relative bg-white pt-16'>
+    <section className='relative bg-white  dark:bg-dark-background pt-16'>
       <div className='mx-auto max-w-md px-4 text-center sm:max-w-3xl sm:px-6 lg:max-w-7xl lg:px-8'>
         <Heading level={HeadingLevel.h2} typeStyle={HeadingTypeStyle.lg} className='mt-2'>
           {t('features.title')}
         </Heading>
-        <Paragraph className='mx-auto mt-2 max-w-prose'>{t('features.description')}</Paragraph>
+        <Paragraph className='mx-auto mt-2 dark:text-dark-text  max-w-prose'>{t('features.description')}</Paragraph>
         <div className='mt-12 text-left'>
-          <ul className='grid  grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3' data-testid='Feature-ul'>
+          <ul
+            className='grid  grid-cols-1  dark:text-dark-text gap-5 sm:grid-cols-2 lg:grid-cols-3'
+            data-testid='Feature-ul'
+          >
             {features.map((feature) => (
               <li
                 key={feature.id}
-                className='flex flex-col justify-between rounded-lg border border-gray-200 px-6 pb-8 shadow-md transition-all duration-300 ease-in-out hover:shadow-lg'
+                className='flex flex-col justify-between rounded-lg border-rounded border dark:border-border dark:bg-dark-card dark:hover:shadow-lg dark:shadow-dark-card px-6 pb-8 shadow-md transition-all duration-300 ease-in-out hover:shadow-lg'
                 data-testid='Feature-li'
               >
                 <div>
@@ -35,7 +38,7 @@ export default function Features() {
                     {t(`features.${feature.id}.name`)}
                   </Heading>
                   {
-                    <Paragraph typeStyle={ParagraphTypeStyle.md} className='mt-5'>
+                    <Paragraph typeStyle={ParagraphTypeStyle.md} className='mt-5 dark:text-dark-text'>
                       {t(`features.${feature.id}.description`)}
                     </Paragraph>
                   }
diff --git a/components/footer/Footer.tsx b/components/footer/Footer.tsx
index 3ecefdd4d53b..e6446109a947 100644
--- a/components/footer/Footer.tsx
+++ b/components/footer/Footer.tsx
@@ -13,7 +13,7 @@ import { initiativeLinks, socialMediaLinks } from './FooterList';
  */
 export default function Footer() {
   return (
-    <footer className='margin: 0 auto mt-12 bg-dark'>
+    <footer className='margin: 0 auto mt-12 dark:bg-dark-footer bg-dark'>
       <div className='mx-auto max-w-screen-xl divide-y divide-cool-gray overflow-hidden px-3 py-4 sm:p-6 md:py-12 lg:px-8 xl:py-16'>
         <nav className='flex flex-wrap justify-between py-4 sm:py-10'>
           <div className='mr-14 w-full md:w-auto'>
diff --git a/components/footer/FooterList.ts b/components/footer/FooterList.ts
index 32839f49645e..c81b6272bd33 100644
--- a/components/footer/FooterList.ts
+++ b/components/footer/FooterList.ts
@@ -73,3 +73,33 @@ export const initiativeLinks: InitiativeLink[] = [
     url: '/about#faqs'
   }
 ];
+
+export const COMMUNITY_URLS = {
+  GITHUB: {
+    BASE: 'https://github.com/asyncapi/community',
+    AMBASSADOR_PROGRAM:
+      'https://github.com/asyncapi/community/blob/master/docs/020-governance-and-policies/AMBASSADOR_PROGRAM.md',
+    AMBASSADOR_ORGANIZATION:
+      'https://github.com/asyncapi/community/blob/master/AMBASSADOR_ORGANIZATION.md#are-you-interested-in-becoming-an-official-asyncapi-ambassador',
+    TSC_MEMBERSHIP: 'https://github.com/asyncapi/community/blob/master/TSC_MEMBERSHIP.md',
+    CONTRIBUTING: 'https://github.com/asyncapi/community/blob/master/CONTRIBUTING.md'
+  },
+  YOUTUBE: {
+    BASE: 'https://www.youtube.com/asyncapi',
+    AMBASSADOR_VIDEO_ID: '3rg_7hIb9PQ'
+  },
+  BLOG: {
+    AMBASSADOR_PROGRAM: 'https://www.asyncapi.com/blog/asyncapi-ambassador-program'
+  }
+} as const;
+
+export const AMBASSADORS_CONFIG = {
+  POSTS_PER_PAGE: 6,
+  YOUTUBE_VIDEO_ID: '3rg_7hIb9PQ'
+} as const;
+
+export const SOCIAL_MEDIA_BASE_URLS = {
+  GITHUB: 'https://www.github.com',
+  LINKEDIN: 'https://www.linkedin.com/in',
+  TWITTER: 'https://www.twitter.com'
+} as const;
diff --git a/components/form/Select.tsx b/components/form/Select.tsx
index 9a367c6f770c..b4a60beac9c5 100644
--- a/components/form/Select.tsx
+++ b/components/form/Select.tsx
@@ -31,12 +31,12 @@ export default function Select({ className = '', onChange = () => {}, options, s
       data-testid='Select-form'
       onChange={handleOnChange}
       className={twMerge(
-        `form-select h-full pl-2 pr-8 inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${className}`
+        `form-select h-full pl-2 pr-8 inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-700 shadow-sm px-4 py-2 bg-white dark:bg-dark-card text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-dark-background focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 dark:focus:ring-offset-dark-background focus:ring-primary-500 ${className}`
       )}
       value={selected}
     >
       {options.map((option, index) => (
-        <option key={index} value={option.value} data-testid='Option-form'>
+        <option key={index} value={option.value} data-testid='Option-form' className='bg-white dark:bg-dark-card'>
           {option.text}
         </option>
       ))}
diff --git a/components/icons/Ambassador.tsx b/components/icons/Ambassador.tsx
index 196986141f20..ed5ba51c300c 100644
--- a/components/icons/Ambassador.tsx
+++ b/components/icons/Ambassador.tsx
@@ -10,7 +10,7 @@ export default function IconAmbassador({ className = '' }) {
       width='11'
       height='7'
       viewBox='0 0 512 512'
-      fill='#000000'
+      fill='currentColor'
       xmlns='http://www.w3.org/2000/svg'
       className={className}
     >
diff --git a/components/icons/ArrowRightStroke.tsx b/components/icons/ArrowRightStroke.tsx
new file mode 100644
index 000000000000..a6cd8db74b86
--- /dev/null
+++ b/components/icons/ArrowRightStroke.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+/* eslint-disable max-len */
+/**
+ * @description Icons for asyncapi website
+ */
+export default function IconArrowRightStroke(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg fill='none' stroke='currentColor' viewBox='0 0 24 24' {...props}>
+      <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M13 7l5 5m0 0l-5 5m5-5H6' />
+    </svg>
+  );
+}
diff --git a/components/icons/BadgeCheckmark.tsx b/components/icons/BadgeCheckmark.tsx
new file mode 100644
index 000000000000..dd4096918409
--- /dev/null
+++ b/components/icons/BadgeCheckmark.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+/* eslint-disable max-len */
+/**
+ * @description Icons for asyncapi website
+ */
+export default function IconBadgeCheckmark(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg fill='none' stroke='currentColor' viewBox='0 0 24 24' {...props}>
+      <path
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth={2}
+        d='M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z'
+      />
+    </svg>
+  );
+}
diff --git a/components/icons/Book.tsx b/components/icons/Book.tsx
new file mode 100644
index 000000000000..2b4e7adf58d4
--- /dev/null
+++ b/components/icons/Book.tsx
@@ -0,0 +1,15 @@
+/**
+ * @description Icon component for Book
+ */
+export default function IconBook({ className = '' }) {
+  return (
+    <svg className={className} fill='none' viewBox='0 0 24 24' stroke='currentColor' xmlns='http://www.w3.org/2000/svg'>
+      <path
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth={2}
+        d='M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253'
+      />
+    </svg>
+  );
+}
diff --git a/components/icons/Clipboard.tsx b/components/icons/Clipboard.tsx
index c0add09acf31..4d7d266d0807 100644
--- a/components/icons/Clipboard.tsx
+++ b/components/icons/Clipboard.tsx
@@ -1,13 +1,15 @@
-import React from 'react';
-
-/* eslint-disable max-len */
 /**
- * @description Icons for asyncapi website
+ * @description Icon component for Clipboard
  */
 export default function IconClipboard({ className = '' }) {
   return (
-    <svg className={className || 'inline-block'} fill='currentColor' viewBox='0 0 20 20'>
-      <path d='M15.6 2l-1.2 3H5.6L4.4 2C3.629 2 3 2.629 3 3.4v15.2c0 .77.629 1.4 1.399 1.4h11.2c.77 0 1.4-.631 1.4-1.4V3.4C17 2.629 16.369 2 15.6 2zm-2 2l.9-2h-2.181L11.6 0H8.4l-.72 2H5.5l.899 2H13.6z' />
+    <svg className={className} fill='currentColor' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'>
+      <path d='M9 2a1 1 0 000 2h2a1 1 0 100-2H9z' />
+      <path
+        fillRule='evenodd'
+        d='M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z'
+        clipRule='evenodd'
+      />
     </svg>
   );
 }
diff --git a/components/icons/CodeBrackets.tsx b/components/icons/CodeBrackets.tsx
new file mode 100644
index 000000000000..2562a8efece9
--- /dev/null
+++ b/components/icons/CodeBrackets.tsx
@@ -0,0 +1,14 @@
+/**
+ * @description Icon component for Code Brackets
+ */
+export default function IconCodeBrackets({ className = '' }) {
+  return (
+    <svg className={className} fill='currentColor' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'>
+      <path
+        fillRule='evenodd'
+        d='M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z'
+        clipRule='evenodd'
+      />
+    </svg>
+  );
+}
diff --git a/components/icons/CommunityDriven.tsx b/components/icons/CommunityDriven.tsx
new file mode 100644
index 000000000000..8a98f6f7c9ab
--- /dev/null
+++ b/components/icons/CommunityDriven.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+/* eslint-disable max-len */
+/**
+ * @description Icons for asyncapi website
+ */
+export default function IconCommunityDriven(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg fill='currentColor' viewBox='0 0 20 20' {...props}>
+      <path d='M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z' />
+    </svg>
+  );
+}
diff --git a/components/icons/Contributing.tsx b/components/icons/Contributing.tsx
index 090a7da3fa9d..f933db652c3c 100644
--- a/components/icons/Contributing.tsx
+++ b/components/icons/Contributing.tsx
@@ -14,7 +14,7 @@ export default function IconContributing({ className = '' }) {
       viewBox='0 0 29.07 26.59'
     >
       <defs>
-        <style>{'.cls-1{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;}'}</style>
+        <style>{'.cls-1{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;}'}</style>
       </defs>
       <path
         className='cls-1'
diff --git a/components/icons/Dashboard.tsx b/components/icons/Dashboard.tsx
index 974cca209805..8ab8ce0acfd3 100644
--- a/components/icons/Dashboard.tsx
+++ b/components/icons/Dashboard.tsx
@@ -13,12 +13,11 @@ export default function IconDashboard({ className = '' }) {
       viewBox='0 0 24 24'
       role='img'
       aria-labelledby='dashboardIconTitle'
-      stroke='#000000'
+      stroke='currentColor'
       strokeWidth='1'
       strokeLinecap='square'
       strokeLinejoin='miter'
       fill='none'
-      color='#000000'
       className={className}
     >
       {' '}
diff --git a/components/icons/Document.tsx b/components/icons/Document.tsx
new file mode 100644
index 000000000000..1aa995d6ec7d
--- /dev/null
+++ b/components/icons/Document.tsx
@@ -0,0 +1,14 @@
+/**
+ * @description Icon component for Document
+ */
+export default function IconDocument({ className = '' }) {
+  return (
+    <svg className={className} fill='currentColor' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'>
+      <path
+        fillRule='evenodd'
+        d='M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z'
+        clipRule='evenodd'
+      />
+    </svg>
+  );
+}
diff --git a/components/icons/Explorer.tsx b/components/icons/Explorer.tsx
index acb488eb8945..706f2ffd5c07 100644
--- a/components/icons/Explorer.tsx
+++ b/components/icons/Explorer.tsx
@@ -6,12 +6,12 @@ import React from 'react';
 export default function IconExplorer({ className = '' }) {
   return (
     <svg
-      fill='#000000'
+      fill='currentColor'
       className={className}
       width='35px'
       height='35px'
       viewBox='-2.4 -2.4 28.80 28.80'
-      stroke='#000000'
+      stroke='currentColor'
       strokeWidth='0.1'
       transform='matrix(1, 0, 0, 1, 0, 0)rotate(0)'
     >
diff --git a/components/icons/ExternalLink.tsx b/components/icons/ExternalLink.tsx
new file mode 100644
index 000000000000..4cb1edb58250
--- /dev/null
+++ b/components/icons/ExternalLink.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+/* eslint-disable max-len */
+/**
+ * @description Icons for asyncapi website
+ */
+export default function IconExternalLink(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg fill='none' stroke='currentColor' viewBox='0 0 24 24' {...props}>
+      <path
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth={2}
+        d='M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14'
+      />
+    </svg>
+  );
+}
diff --git a/components/icons/Gear.tsx b/components/icons/Gear.tsx
new file mode 100644
index 000000000000..4bafcc6abd12
--- /dev/null
+++ b/components/icons/Gear.tsx
@@ -0,0 +1,16 @@
+/**
+ * @description Icon component for Gear
+ */
+export default function IconGear({ className = '' }) {
+  return (
+    <svg className={className} fill='none' viewBox='0 0 24 24' stroke='currentColor' xmlns='http://www.w3.org/2000/svg'>
+      <path
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth={2}
+        d='M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z'
+      />
+      <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M15 12a3 3 0 11-6 0 3 3 0 016 0z' />
+    </svg>
+  );
+}
diff --git a/components/icons/GettingStarted.tsx b/components/icons/GettingStarted.tsx
index 86cced07732c..32f12ef43c33 100644
--- a/components/icons/GettingStarted.tsx
+++ b/components/icons/GettingStarted.tsx
@@ -8,7 +8,7 @@ export default function IconGettingStarted({ className = '' }) {
   return (
     <svg
       className={className}
-      strokeWidth='.5'
+      strokeWidth='.3'
       fill='currentColor'
       xmlns='http://www.w3.org/2000/svg'
       xmlnsXlink='http://www.w3.org/1999/xlink'
diff --git a/components/icons/GithubOrganization.tsx b/components/icons/GithubOrganization.tsx
index ab16310c397b..b4dc5c0e85a1 100644
--- a/components/icons/GithubOrganization.tsx
+++ b/components/icons/GithubOrganization.tsx
@@ -14,7 +14,7 @@ export default function IconGithubOrganization({ className = '' }) {
       viewBox='0 0 24.63 26.6'
     >
       <defs>
-        <style>{'.cls-1{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;}'}</style>
+        <style>{'.cls-1{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;}'}</style>
       </defs>
       <path
         className='cls-1'
diff --git a/components/icons/Home.tsx b/components/icons/Home.tsx
index 63df2794e49d..07bcb591fffc 100644
--- a/components/icons/Home.tsx
+++ b/components/icons/Home.tsx
@@ -11,7 +11,7 @@ export default function IconHome(props: React.SVGProps<SVGSVGElement>) {
         fillRule='evenodd'
         clipRule='evenodd'
         d='M9.40498 1.54126L16.56 8.06626L15.7612 8.86501L14.625 7.83451V15.1763L14.0625 15.7388H10.6875L10.125 15.1763V11.2388H7.87498V15.1763L7.31248 15.7388H3.93748L3.37498 15.1763V7.84351L2.24998 8.86501L1.45123 8.06626L8.59498 1.54126H9.40498ZM4.49998 6.82089V14.6138H6.74998V10.6763L7.31248 10.1138H10.6875L11.25 10.6763V14.6138H13.5V6.81414L8.99998 2.73376L4.49998 6.82089Z'
-        fill='black'
+        fill='currentColor'
       />
     </svg>
   );
diff --git a/components/icons/LightBulb.tsx b/components/icons/LightBulb.tsx
index 884e8b618d4a..78829c643593 100644
--- a/components/icons/LightBulb.tsx
+++ b/components/icons/LightBulb.tsx
@@ -1,20 +1,10 @@
-import React from 'react';
-
-/* eslint-disable max-len */
 /**
- * @description Icons for asyncapi website
+ * @description Icon component for Light Bulb
  */
-export default function IconLightBulb({ className = '' }) {
+export default function IconLightbulb({ className = '' }) {
   return (
-    <svg
-      className={className}
-      xmlns='http://www.w3.org/2000/svg'
-      fillRule='evenodd'
-      fill='currentColor'
-      clipRule='evenodd'
-      viewBox='0 0 22 25'
-    >
-      <path d='M13 24h-2c-.288 0-.563-.125-.753-.341l-.576-.659h4.658l-.576.659c-.19.216-.465.341-.753.341zm1.867-3c.287 0 .52.224.52.5s-.233.5-.52.5h-5.734c-.287 0-.52-.224-.52-.5s.233-.5.52-.5h5.734zm-2.871-17c2.983 0 6.004 1.97 6.004 5.734 0 1.937-.97 3.622-1.907 5.252-.907 1.574-1.843 3.201-1.844 5.014h1.001c0-3.286 3.75-6.103 3.75-10.266 0-4.34-3.502-6.734-7.004-6.734-3.498 0-6.996 2.391-6.996 6.734 0 4.163 3.75 6.98 3.75 10.266h.999c.001-1.813-.936-3.44-1.841-5.014-.938-1.63-1.908-3.315-1.908-5.252 0-3.764 3.017-5.734 5.996-5.734zm9.428 7.958c.251.114.362.411.248.662-.114.251-.41.363-.662.249l-.91-.414c-.252-.114-.363-.41-.249-.662.114-.251.411-.362.662-.248l.911.413zm-18.848 0c-.251.114-.362.411-.248.662.114.251.41.363.662.249l.91-.414c.252-.114.363-.41.249-.662-.114-.251-.411-.362-.662-.248l-.911.413zm18.924-2.958h-1c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h1c.276 0 .5.224.5.5s-.224.5-.5.5zm-18-1c.276 0 .5.224.5.5s-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h1zm16.818-3.089c.227-.158.284-.469.126-.696-.157-.227-.469-.283-.696-.126l-.821.57c-.227.158-.283.469-.126.696.157.227.469.283.696.126l.821-.57zm-16.636 0c-.227-.158-.284-.469-.126-.696.157-.227.469-.283.696-.126l.821.57c.227.158.283.469.126.696-.157.227-.469.283-.696.126l-.821-.57zm13.333-3.033c.134-.241.048-.546-.193-.68-.241-.135-.546-.048-.68.192l-.488.873c-.135.241-.048.546.192.681.241.134.546.048.681-.193l.488-.873zm-10.03 0c-.134-.241-.048-.546.193-.68.241-.135.546-.048.68.192l.488.873c.135.241.048.546-.192.681-.241.134-.546.048-.681-.193l-.488-.873zm5.515-1.378c0-.276-.224-.5-.5-.5s-.5.224-.5.5v1c0 .276.224.5.5.5s.5-.224.5-.5v-1z' />
+    <svg className={className} fill='currentColor' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'>
+      <path d='M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954 0c.27.213.462.519.476.859h4.002z' />
     </svg>
   );
 }
diff --git a/components/icons/Lightning.tsx b/components/icons/Lightning.tsx
new file mode 100644
index 000000000000..af9809b44402
--- /dev/null
+++ b/components/icons/Lightning.tsx
@@ -0,0 +1,10 @@
+/**
+ * @description Icon component for Lightning
+ */
+export default function IconLightning({ className = '' }) {
+  return (
+    <svg className={className} fill='none' viewBox='0 0 24 24' stroke='currentColor' xmlns='http://www.w3.org/2000/svg'>
+      <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M13 10V3L4 14h7v7l9-11h-7z' />
+    </svg>
+  );
+}
diff --git a/components/icons/Microphone.tsx b/components/icons/Microphone.tsx
new file mode 100644
index 000000000000..cae7930ec57e
--- /dev/null
+++ b/components/icons/Microphone.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+
+/**
+ * @description Icon component for Microphone
+ */
+type IconMicrophoneProps = Readonly<{
+  className?: string;
+}>;
+
+/**
+ * @param {IconMicrophoneProps} props - The props for the Microphone icon
+ * @returns {React.JSX.Element} The Microphone icon component
+ */
+export default function IconMicrophone({ className = '' }: IconMicrophoneProps): React.JSX.Element {
+  return (
+    <svg
+      className={className}
+      fill='currentColor'
+      viewBox='0 0 20 20'
+      xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
+      focusable='false'
+    >
+      <path
+        fillRule='evenodd'
+        d='M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 8a1 1 0 10-2 0A5 5 0 015 8a1 1 0 00-2 0 7.001 7.001 0 006 6.93V17H6a1 1 0 100 2h8a1 1 0 100-2h-3v-2.07z'
+        clipRule='evenodd'
+      />
+    </svg>
+  );
+}
diff --git a/components/icons/Migration.tsx b/components/icons/Migration.tsx
index 6d7d1358f371..2e171626f958 100644
--- a/components/icons/Migration.tsx
+++ b/components/icons/Migration.tsx
@@ -17,7 +17,7 @@ export default function IconUsers({ ...rest }) {
     >
       <path
         d='M550.208 960H209.28A81.792 81.792 0 0 1 128 877.76V146.24A81.92 81.92 0 0 1 209.344 64h613.632a81.92 81.92 0 0 1 81.28 82.432v405.76a29.824 29.824 0 1 1-59.584 0V146.56a22.272 22.272 0 0 0-21.76-22.656H209.408a22.08 22.08 0 0 0-21.696 22.528v731.52a21.76 21.76 0 0 0 21.44 22.464h341.056a29.824 29.824 0 0 1 0.064 59.584z m196.352-600.96H285.824a29.824 29.824 0 1 1 0-59.712h460.8a29.824 29.824 0 1 1 0 59.712z m-204.8 156.8H285.824a29.824 29.824 0 1 1 0-59.712h255.936a29.824 29.824 0 1 1 0 59.648z m179.2 391.936c-101.12 0-183.424-83.84-183.424-186.624a29.824 29.824 0 1 1 59.712 0c0 70.016 55.552 126.976 123.584 126.976 17.408 0 34.24-3.712 50.048-10.88a29.888 29.888 0 0 1 24.768 54.336c-23.552 10.688-48.64 16.192-74.688 16.192z m153.6-156.8a29.824 29.824 0 0 1-29.824-29.824c0-70.016-55.552-126.976-123.648-126.976-16.32 0-32.384 3.2-47.36 9.6a29.888 29.888 0 0 1-23.424-54.912 180.224 180.224 0 0 1 70.784-14.336c101.12 0 183.424 83.84 183.424 186.624a30.016 30.016 0 0 1-29.952 29.824z m-204.8-104.576h-51.264a29.76 29.76 0 0 1-25.28-14.08 30.144 30.144 0 0 1-1.536-28.928l25.6-52.352a29.696 29.696 0 0 1 53.632 0l25.6 52.352a29.696 29.696 0 0 1-1.472 28.928 29.504 29.504 0 0 1-25.28 14.08z m127.552 269.568h-1.024a29.696 29.696 0 0 1-24.896-14.848l-25.6-44.288a29.888 29.888 0 0 1 23.808-44.672l58.048-4.032c11.392-0.704 22.144 5.12 27.904 14.848a30.016 30.016 0 0 1-1.024 31.616l-32.448 48.256a29.824 29.824 0 0 1-24.768 13.12z'
-        fill='#000000'
+        fill='currentColor'
       />
     </svg>
   );
diff --git a/components/icons/NavItemDropdown.tsx b/components/icons/NavItemDropdown.tsx
index 4a1bcfb98cda..79decd651fb0 100644
--- a/components/icons/NavItemDropdown.tsx
+++ b/components/icons/NavItemDropdown.tsx
@@ -7,7 +7,7 @@ import React from 'react';
 const NavItemDropdown = () => (
   <span className='inline-block'>
     <svg
-      className='size-5 text-gray-400 transition duration-150 ease-in-out group-hover:text-gray-500 group-focus:text-gray-500'
+      className='size-5 text-gray-700  dark:text-dark-text duration-200 ease-in-out group-hover:text-gray-900  dark:group-hover:text-white group-focus:text-gray-500 transition-transform group-hover:rotate-180'
       fill='currentColor'
       viewBox='0 0 20 20'
     >
diff --git a/components/icons/Newsroom.tsx b/components/icons/Newsroom.tsx
index e744b9d68081..32f9bffac05b 100644
--- a/components/icons/Newsroom.tsx
+++ b/components/icons/Newsroom.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 /**
  * @description Icons for asyncapi website
  */
-export default function IconNewsroom(className = '') {
+export default function IconNewsroom({ className = '' }: { className?: string } = {}) {
   return (
     <svg
       className={className}
@@ -14,10 +14,10 @@ export default function IconNewsroom(className = '') {
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
     >
-      <rect width='42' height='37' fill='#EDFAFF' />
+      <rect width='42' height='37' fill='currentColor' opacity='0.1' className='dark:opacity-20' />
       <path
         d='M15.1667 14.1834C15.1667 14.0198 15.2281 13.863 15.3375 13.7473C15.4469 13.6317 15.5953 13.5667 15.75 13.5667H23.9167C24.0714 13.5667 24.2197 13.6317 24.3291 13.7473C24.4385 13.863 24.5 14.0198 24.5 14.1834C24.5 14.3469 24.4385 14.5038 24.3291 14.6194C24.2197 14.7351 24.0714 14.8 23.9167 14.8H15.75C15.5953 14.8 15.4469 14.7351 15.3375 14.6194C15.2281 14.5038 15.1667 14.3469 15.1667 14.1834ZM21.5833 17.2667C21.4286 17.2667 21.2802 17.3317 21.1708 17.4473C21.0614 17.563 21 17.7198 21 17.8834C21 18.0469 21.0614 18.2038 21.1708 18.3194C21.2802 18.4351 21.4286 18.5 21.5833 18.5H23.9167C24.0714 18.5 24.2197 18.4351 24.3291 18.3194C24.4385 18.2038 24.5 18.0469 24.5 17.8834C24.5 17.7198 24.4385 17.563 24.3291 17.4473C24.2197 17.3317 24.0714 17.2667 23.9167 17.2667H21.5833ZM21 21.5834C21 21.4198 21.0614 21.263 21.1708 21.1473C21.2802 21.0317 21.4286 20.9667 21.5833 20.9667H23.9167C24.0714 20.9667 24.2197 21.0317 24.3291 21.1473C24.4385 21.263 24.5 21.4198 24.5 21.5834C24.5 21.7469 24.4385 21.9038 24.3291 22.0194C24.2197 22.1351 24.0714 22.2 23.9167 22.2H21.5833C21.4286 22.2 21.2802 22.1351 21.1708 22.0194C21.0614 21.9038 21 21.7469 21 21.5834ZM15.75 17.2667C15.5953 17.2667 15.4469 17.3317 15.3375 17.4473C15.2281 17.563 15.1667 17.7198 15.1667 17.8834V21.5834C15.1667 21.7469 15.2281 21.9038 15.3375 22.0194C15.4469 22.1351 15.5953 22.2 15.75 22.2H19.25C19.4047 22.2 19.5531 22.1351 19.6625 22.0194C19.7719 21.9038 19.8333 21.7469 19.8333 21.5834V17.8834C19.8333 17.7198 19.7719 17.563 19.6625 17.4473C19.5531 17.3317 19.4047 17.2667 19.25 17.2667H15.75ZM16.3333 20.9667V18.5H18.6667V20.9667H16.3333ZM11.6667 12.3334C11.6667 11.6792 11.9125 11.0518 12.3501 10.5892C12.7877 10.1266 13.3812 9.8667 14 9.8667H25.6667C26.2855 9.8667 26.879 10.1266 27.3166 10.5892C27.7542 11.0518 28 11.6792 28 12.3334V13.5667C28.6188 13.5667 29.2123 13.8266 29.6499 14.2892C30.0875 14.7518 30.3333 15.3792 30.3333 16.0334V22.8167C30.3333 23.6344 30.026 24.4187 29.4791 24.9969C28.9321 25.5752 28.1902 25.9 27.4167 25.9H14.5833C13.8098 25.9 13.0679 25.5752 12.5209 24.9969C11.9739 24.4187 11.6667 23.6344 11.6667 22.8167V12.3334ZM26.8333 12.3334C26.8333 12.0063 26.7104 11.6926 26.4916 11.4613C26.2728 11.23 25.9761 11.1 25.6667 11.1H14C13.6906 11.1 13.3938 11.23 13.175 11.4613C12.9562 11.6926 12.8333 12.0063 12.8333 12.3334V22.8167C12.8333 23.3074 13.0177 23.7779 13.3459 24.1248C13.6741 24.4718 14.1192 24.6667 14.5833 24.6667H27.4167C27.8808 24.6667 28.3259 24.4718 28.6541 24.1248C28.9823 23.7779 29.1667 23.3074 29.1667 22.8167V16.0334C29.1667 15.7063 29.0437 15.3926 28.8249 15.1613C28.6062 14.93 28.3094 14.8 28 14.8V22.8167C28 22.9802 27.9385 23.1371 27.8291 23.2527C27.7197 23.3684 27.5714 23.4334 27.4167 23.4334C27.2619 23.4334 27.1136 23.3684 27.0042 23.2527C26.8948 23.1371 26.8333 22.9802 26.8333 22.8167V12.3334Z'
-        fill='black'
+        fill='currentColor'
       />
     </svg>
   );
diff --git a/components/icons/OpenSource.tsx b/components/icons/OpenSource.tsx
new file mode 100644
index 000000000000..710aa0242bc9
--- /dev/null
+++ b/components/icons/OpenSource.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+/* eslint-disable max-len */
+/**
+ * @description Icons for asyncapi website
+ */
+export default function IconOpenSource(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg fill='currentColor' viewBox='0 0 20 20' {...props}>
+      <path
+        fillRule='evenodd'
+        d='M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z'
+        clipRule='evenodd'
+      />
+    </svg>
+  );
+}
diff --git a/components/icons/Play.tsx b/components/icons/Play.tsx
new file mode 100644
index 000000000000..ea013a18193e
--- /dev/null
+++ b/components/icons/Play.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+/**
+ * @description Icon component for Play
+ */
+type IconPlayProps = Readonly<{
+  className?: string;
+}>;
+
+/**
+ * @param {IconPlayProps} props - The props for the Play icon
+ * @returns {React.JSX.Element} The Play icon component
+ */
+export default function IconPlay({ className = '' }: IconPlayProps): React.JSX.Element {
+  return (
+    <svg className={className} fill='currentColor' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'>
+      <path d='M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z' />
+    </svg>
+  );
+}
diff --git a/components/icons/Plus.tsx b/components/icons/Plus.tsx
new file mode 100644
index 000000000000..297396641a08
--- /dev/null
+++ b/components/icons/Plus.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+/**
+ * @description Icon component for Plus
+ */
+type IconProps = Readonly<{
+  className?: string;
+}>;
+
+/**
+ * @param {IconProps} props - The props for the Plus icon
+ * @returns {React.JSX.Element} The Plus icon component
+ */
+export default function IconPlus({ className = '' }: IconProps): React.JSX.Element {
+  return (
+    <svg className={className} fill='none' viewBox='0 0 24 24' stroke='currentColor' xmlns='http://www.w3.org/2000/svg'>
+      <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M12 6v6m0 0v6m0-6h6m-6 0H6' />
+    </svg>
+  );
+}
diff --git a/components/icons/PlusSign.tsx b/components/icons/PlusSign.tsx
new file mode 100644
index 000000000000..3dc1eb327621
--- /dev/null
+++ b/components/icons/PlusSign.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+/* eslint-disable max-len */
+/**
+ * @description Icons for asyncapi website
+ */
+export default function IconArrowRight({ className = '' }) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      className={className || 'inline-block'}
+      fill='currentColor'
+      viewBox='0 0 18 18'
+    >
+      <path
+        fillRule='evenodd'
+        d='M8.83333 1.33333C8.83333 0.873096 8.46024 0.5 8 0.5C7.53976 0.5 7.16667 0.873096 7.16667 1.33333V7.16667H1.33333C0.873096 7.16667 0.5 7.53976 0.5 8C0.5 8.46024 0.873096 8.83333 1.33333 8.83333H7.16667V14.6667C7.16667 15.1269 7.53976 15.5 8 15.5C8.46024 15.5 8.83333 15.1269 8.83333 14.6667V8.83333H14.6667C15.1269 8.83333 15.5 8.46024 15.5 8C15.5 7.53976 15.1269 7.16667 14.6667 7.16667H8.83333V1.33333Z'
+        clipRule='evenodd'
+      />
+    </svg>
+  );
+}
diff --git a/components/icons/ProductionReady.tsx b/components/icons/ProductionReady.tsx
new file mode 100644
index 000000000000..7a34b9c707c0
--- /dev/null
+++ b/components/icons/ProductionReady.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+/* eslint-disable max-len */
+/**
+ * @description Icons for asyncapi website
+ */
+export default function IconProductionReady(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg fill='currentColor' viewBox='0 0 20 20' {...props}>
+      <path
+        fillRule='evenodd'
+        d='M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z'
+        clipRule='evenodd'
+      />
+    </svg>
+  );
+}
diff --git a/components/icons/Star.tsx b/components/icons/Star.tsx
new file mode 100644
index 000000000000..6eae72b7a97d
--- /dev/null
+++ b/components/icons/Star.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+/**
+ * @description Icon component for Star
+ */
+type IconStarProps = Readonly<{
+  className?: string;
+}>;
+
+/**
+ * @param {IconStarProps} props - The props for the Star icon
+ * @returns {React.JSX.Element} The Star icon component
+ */
+export default function IconStar({ className = '' }: IconStarProps): React.JSX.Element {
+  return (
+    <svg className={className} fill='currentColor' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'>
+      <path d='M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z' />
+    </svg>
+  );
+}
diff --git a/components/icons/TSC.tsx b/components/icons/TSC.tsx
index ade1c0fdacbb..075e2f402f60 100644
--- a/components/icons/TSC.tsx
+++ b/components/icons/TSC.tsx
@@ -14,7 +14,7 @@ export default function IconTSC({ className = '' }) {
       viewBox='0 0 28.15 18.69'
     >
       <defs>
-        <style>{'.cls-1{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;}'}</style>
+        <style>{'.cls-1{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;}'}</style>
       </defs>
       <line className='cls-1' x1='17.86' y1='12.89' x2='10.93' y2='12.89' />
       <path
diff --git a/components/icons/Terminal.tsx b/components/icons/Terminal.tsx
new file mode 100644
index 000000000000..3e478b49a07f
--- /dev/null
+++ b/components/icons/Terminal.tsx
@@ -0,0 +1,14 @@
+/**
+ * @description Icon component for Terminal
+ */
+export default function IconTerminal({ className = '' }) {
+  return (
+    <svg className={className} fill='currentColor' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'>
+      <path
+        fillRule='evenodd'
+        d='M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm3.293 1.293a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 01-1.414-1.414L7.586 10 5.293 7.707a1 1 0 010-1.414zM11 12a1 1 0 100 2h3a1 1 0 100-2h-3z'
+        clipRule='evenodd'
+      />
+    </svg>
+  );
+}
diff --git a/components/icons/UseCases.tsx b/components/icons/UseCases.tsx
index d8f094ccd2bb..4f85b1ff3d08 100644
--- a/components/icons/UseCases.tsx
+++ b/components/icons/UseCases.tsx
@@ -8,29 +8,29 @@ export default function IconUseCases({ className = '' }) {
   return (
     <svg
       className={className}
-      strokeWidth='.5'
-      fill='currentColor'
       xmlns='http://www.w3.org/2000/svg'
-      xmlnsXlink='http://www.w3.org/1999/xlink'
-      version='1.1'
+      width='20'
+      height='20'
       viewBox='0 0 20 20'
-      xmlSpace='preserve'
+      fill='none'
     >
       <path
-        d='M16.7,4.6h0.5v0.5c0,1.8-0.7,3.6-2,4.8s-3,2-4.8,2H9.9v-0.5c0-1.8,0.7-3.6,2-4.8
-      C13.3,5.2,15,4.5,16.7,4.6z M14.6,9.2c1-1,1.6-2.3,1.7-3.7c-1.4,0.1-2.7,0.7-3.7,1.7s-1.6,2.3-1.7,3.7
-      C12.3,10.8,13.6,10.2,14.6,9.2z M3.3,1c1.8,0,3.6,0.7,4.8,2s2,3,2,4.8v0.5H9.6c-1.8,0-3.6-0.7-4.8-2s-2-3-2-4.8V1L3.3,1z M5.4,5.6
-      c1,1,2.3,1.6,3.7,1.7C9,5.9,8.4,4.5,7.4,3.6S5.1,2,3.7,1.9C3.8,3.3,4.4,4.6,5.4,5.6z'
+        d='M11.2852 17.3647L3.82243 18.7506C2.39103 19.0164 1.67534 19.1493 1.26303 18.737C0.850718 18.3246 0.983621 17.6089 1.24943 16.1774L2.63523 8.71435C2.85745 7.51762 2.96856 6.91925 3.36302 6.5577C3.75749 6.19616 4.47889 6.1256 5.9217 5.98448C7.31227 5.84847 8.6283 5.37177 10 4L16 10.0005C14.6283 11.3723 14.1513 12.6874 14.0151 14.0781C13.8738 15.5211 13.8031 16.2426 13.4416 16.637C13.0801 17.0314 12.4818 17.1425 11.2852 17.3647Z'
+        stroke='currentColor'
+        strokeWidth='1'
+        strokeLinejoin='round'
       />
       <path
-        d='M9.5,15.4c-1.6,0-2.9,1.1-3.1,2.7h6.2C12.4,16.6,11.1,15.4,9.5,15.4z M9.1,14.5V8.3H10v6.3
-      c2,0.2,3.6,2,3.6,4V19h-8v-0.5C5.5,16.4,7.1,14.8,9.1,14.5z'
+        d='M9 13.2105C8.44055 13.1197 7.92895 12.8763 7.52632 12.4737M7.52632 12.4737C7.12368 12.0711 6.8803 11.5595 6.78947 11M7.52632 12.4737L2 18'
+        stroke='currentColor'
+        strokeWidth='1.5'
+        strokeLinecap='round'
       />
       <path
-        d='M16.7,4.6h0.5v0.5c0,1.8-0.7,3.6-2,4.8s-3,2-4.8,2H9.9v-0.5c0-1.8,0.7-3.6,2-4.8
-      C13.3,5.2,15,4.5,16.7,4.6z M14.6,9.2c1-1,1.6-2.3,1.7-3.7c-1.4,0.1-2.7,0.7-3.7,1.7s-1.6,2.3-1.7,3.7
-      C12.3,10.8,13.6,10.2,14.6,9.2z M3.3,1c1.8,0,3.6,0.7,4.8,2s2,3,2,4.8v0.5H9.6c-1.8,0-3.6-0.7-4.8-2s-2-3-2-4.8V1L3.3,1z
-      M5.4,5.6c1,1,2.3,1.6,3.7,1.7C9,5.9,8.4,4.5,7.4,3.6S5.1,2,3.7,1.9C3.8,3.3,4.4,4.6,5.4,5.6z'
+        d='M10 4C10.7123 2.9491 11.6771 1.1812 13.1065 1.01098C14.0822 0.894786 14.8906 1.70312 16.5072 3.31978L16.6802 3.49277C18.2969 5.10944 19.1052 5.91777 18.989 6.8935C18.8188 8.32291 17.0509 9.2877 16 10'
+        stroke='currentColor'
+        strokeWidth='1.5'
+        strokeLinejoin='round'
       />
     </svg>
   );
diff --git a/components/icons/Users.tsx b/components/icons/Users.tsx
index bedc0213e1a3..769b7453e618 100644
--- a/components/icons/Users.tsx
+++ b/components/icons/Users.tsx
@@ -13,7 +13,7 @@ export default function IconUsers({ ...rest }) {
       viewBox='0 0 24 24'
       fill='none'
       stroke='currentColor'
-      strokeWidth='1.3'
+      strokeWidth='1.5'
       strokeLinecap='round'
       strokeLinejoin='round'
       {...rest}
diff --git a/components/icons/UsersGroup.tsx b/components/icons/UsersGroup.tsx
new file mode 100644
index 000000000000..4eb15ae6ff11
--- /dev/null
+++ b/components/icons/UsersGroup.tsx
@@ -0,0 +1,10 @@
+/**
+ * @description Icon component for Users Group
+ */
+export default function IconUsersGroup({ className = '' }) {
+  return (
+    <svg className={className} fill='currentColor' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'>
+      <path d='M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z' />
+    </svg>
+  );
+}
diff --git a/components/icons/Video.tsx b/components/icons/Video.tsx
new file mode 100644
index 000000000000..fb546066f318
--- /dev/null
+++ b/components/icons/Video.tsx
@@ -0,0 +1,10 @@
+/**
+ * @description Icon component for Video
+ */
+export default function IconVideo({ className = '' }) {
+  return (
+    <svg className={className} fill='currentColor' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'>
+      <path d='M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z' />
+    </svg>
+  );
+}
diff --git a/components/layout/BlogLayout.tsx b/components/layout/BlogLayout.tsx
index 2df9724cf2d1..9f5305b0a9df 100644
--- a/components/layout/BlogLayout.tsx
+++ b/components/layout/BlogLayout.tsx
@@ -13,11 +13,11 @@ import Head from '../Head';
 import TOC from '../TOC';
 import Container from './Container';
 
-interface IBlogLayoutProps {
+type IBlogLayoutProps = Readonly<{
   post: IPosts['blog'][number];
   children: React.ReactNode;
   navItems?: IPosts['blog'];
-}
+}>;
 
 /**
  * @description The blog layout with the post and its content
@@ -35,61 +35,67 @@ export default function BlogLayout({ post, children }: IBlogLayoutProps) {
   }
 
   return (
-    <BlogContext.Provider value={{ post }}>
-      <AnnouncementHero className='mx-8 my-4' />
-      <Container cssBreakingPoint='lg' flex flexReverse>
-        <TOC
-          toc={post.toc}
-          cssBreakingPoint='lg'
-          className={`sticky top-20 mt-4 max-h-screen overflow-y-auto bg-blue-100 p-4 lg:top-24
-            lg:-mr-20 lg:mt-2 lg:max-h-(screen-16) lg:min-w-40 lg:max-w-64 lg:border-l lg:border-gray-200
-            lg:bg-transparent lg:pb-8 lg:pt-0 xl:-mr-36 xl:min-w-72`}
-        />
-        <main className='mt-8 px-4 sm:px-6 lg:max-w-172 lg:flex-1 lg:pl-0 lg:pr-8 xl:max-w-172'>
-          <header className='pr-4 sm:pr-6 md:pr-8'>
-            <h1 className='font-normal font-sans text-4xl text-gray-800 antialiased' data-testid='BlogLayout-main'>
-              {post.title}
-            </h1>
-            <div className='mt-6 flex items-center'>
-              <div className='relative shrink-0'>
-                <AuthorAvatars authors={post.authors} />
-              </div>
-              <div className='ml-3'>
-                <p className='text-sm font-medium leading-5 text-gray-900'>
-                  <span className='hover:underline'>
-                    {post.authors
-                      .map((author, index) =>
-                        author.link ? (
-                          <a key={index} href={author.link}>
-                            {author.name}
-                          </a>
-                        ) : (
-                          author.name
+    <div className='min-h-screen bg-white dark:bg-dark-background'>
+      <BlogContext.Provider value={{ post }}>
+        <AnnouncementHero className='mx-8 my-4' />
+        <Container cssBreakingPoint='lg' flex flexReverse>
+          <TOC
+            toc={post.toc}
+            cssBreakingPoint='lg'
+            className={`sticky top-20 mt-4 max-h-screen overflow-y-auto bg-blue-100 dark:bg-dark-card p-4 lg:top-24
+              lg:-mr-20 lg:mt-2 lg:max-h-(screen-16) lg:min-w-40 lg:max-w-64 lg:border-l lg:border-gray-200
+              dark:border-gray-700 lg:bg-transparent dark:lg:bg-transparent lg:pb-8 lg:pt-0 xl:-mr-36
+              xl:min-w-72`}
+          />
+          <main className='mt-8 px-4 sm:px-6 lg:max-w-172 lg:flex-1 lg:pl-0 lg:pr-8 xl:max-w-172'>
+            <header className='pr-4 sm:pr-6 md:pr-8'>
+              <h1
+                className='font-normal font-sans text-4xl text-gray-800 dark:text-white antialiased'
+                data-testid='BlogLayout-main'
+              >
+                {post.title}
+              </h1>
+              <div className='mt-6 flex items-center'>
+                <div className='relative shrink-0'>
+                  <AuthorAvatars authors={post.authors} />
+                </div>
+                <div className='ml-3'>
+                  <p className='text-sm font-medium leading-5 text-gray-900 dark:text-gray-100'>
+                    <span className='hover:underline'>
+                      {post.authors
+                        .map((author) =>
+                          author.link ? (
+                            <a key={author.name} href={author.link} className='dark:text-gray-100'>
+                              {author.name}
+                            </a>
+                          ) : (
+                            author.name
+                          )
                         )
-                      )
-                      .reduce((prev, curr) => [prev, ' & ', curr] as any)}
-                  </span>
-                </p>
-                <div className='flex text-sm leading-5 text-gray-500'>
-                  <time dateTime={post.date}>{dayjs(post.date).format('MMMM D, YYYY')}</time>
-                  <span className='mx-1'>&middot;</span>
-                  <span>{post.readingTime} min read</span>
+                        .reduce((prev, curr) => [prev, ' & ', curr] as any)}
+                    </span>
+                  </p>
+                  <div className='flex text-sm leading-5 text-gray-500 dark:text-gray-400'>
+                    <time dateTime={post.date}>{dayjs(post.date).format('MMMM D, YYYY')}</time>
+                    <span className='mx-1'>&middot;</span>
+                    <span>{post.readingTime} min read</span>
+                  </div>
                 </div>
               </div>
-            </div>
-          </header>
-          <article className='mb-32'>
-            <Head title={post.title} description={post.excerpt} image={post.cover} />
-            {post.canonical && (
-              <HtmlHead>
-                <link rel='canonical' href={post.canonical} />
-              </HtmlHead>
-            )}
-            <img src={post.cover} alt={post.coverCaption} title={post.coverCaption} className='my-6 w-full' />
-            {children}
-          </article>
-        </main>
-      </Container>
-    </BlogContext.Provider>
+            </header>
+            <article className='mb-32'>
+              <Head title={post.title} description={post.excerpt} image={post.cover} />
+              {post.canonical && (
+                <HtmlHead>
+                  <link rel='canonical' href={post.canonical} />
+                </HtmlHead>
+              )}
+              <img src={post.cover} alt={post.coverCaption} title={post.coverCaption} className='my-6 w-full' />
+              {children}
+            </article>
+          </main>
+        </Container>
+      </BlogContext.Provider>
+    </div>
   );
 }
diff --git a/components/layout/CommunityLayout.tsx b/components/layout/CommunityLayout.tsx
index 2a7c9aa50401..82c9c60a9739 100644
--- a/components/layout/CommunityLayout.tsx
+++ b/components/layout/CommunityLayout.tsx
@@ -45,18 +45,18 @@ function addAdditionalUserInfo(user: Tsc | Ambassador) {
 
   // add social links
   if (userData.github) {
-    userData.github = `https://www.github.com/${userData.github}`;
+    userData.githubUrl = `https://www.github.com/${userData.github}`;
   }
   if (userData.linkedin) {
-    userData.linkedin = `https://www.linkedin.com/in/${userData.linkedin}`;
+    userData.linkedinUrl = `https://www.linkedin.com/in/${userData.linkedin}`;
   }
   if (userData.twitter) {
-    userData.twitter = `https://www.twitter.com/${userData.twitter}`;
+    userData.twitterUrl = `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`;
+  userData.avatarUrl = userData.githubUrl ? `${userData.githubUrl}.png` : '';
 
   // make repo links
   if ('repos' in userData) {
@@ -127,7 +127,7 @@ function SocialLink({ href, social }: SocialLinkProps) {
       <a
         data-testid='Social-Links'
         href={href}
-        className='text-gray-600 hover:text-gray-500'
+        className='text-gray-600 dark:text-gray-400 hover:text-gray-500 dark:hover:text-gray-300'
         target='_blank'
         rel='noreferrer noopener'
       >
@@ -149,7 +149,7 @@ function UserWorkStatus({ user }: TSCUser) {
     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'
+        className='text-md inline-flex items-center rounded-full bg-green-100 dark:bg-green-900/30 px-3 py-1 font-medium leading-5 text-green-800 dark:text-green-300'
       >
         Available for hire
       </div>
@@ -159,7 +159,7 @@ function UserWorkStatus({ user }: TSCUser) {
     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'
+        className='text-md inline-flex items-center rounded-full bg-orange-100 dark:bg-orange-900/30 px-3 py-1 font-medium leading-5 text-orange-800 dark:text-orange-300'
       >
         {user.company}
       </div>
@@ -169,7 +169,7 @@ function UserWorkStatus({ user }: TSCUser) {
   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'
+      className='text-md inline-flex items-center rounded-full bg-blue-100 dark:bg-blue-900/30 px-3 py-1 font-medium leading-5 text-blue-800 dark:text-blue-300'
     >
       Individual Member
     </div>
@@ -184,12 +184,12 @@ function UserWorkStatus({ user }: TSCUser) {
  * @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();
+  const githubUsername = user.github;
 
   return (
     <li
       data-testid='UserInfo-list'
-      className='rounded-md border border-gray-200 p-4 text-center shadow-md'
+      className='rounded-md border border-gray-200 dark:border-gray-700 p-4 text-center shadow-md bg-white dark:bg-dark-card'
       key={user.github}
     >
       <div className='flex flex-row'>
@@ -200,25 +200,25 @@ function UserInfo({ user, membership }: TSCUser) {
           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'>
+          <div className='my-3 text-lg font-bold text-gray-900 dark:text-white' 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}
+            {user.githubUrl ? <SocialLink href={user.githubUrl} social='GitHub' /> : null}
+            {user.twitterUrl ? <SocialLink href={user.twitterUrl} social='Twitter' /> : null}
+            {user.linkedinUrl ? <SocialLink href={user.linkedinUrl} social='Linkedin' /> : null}
           </ul>
         </div>
       </div>
       {'repos' in user ? (
-        <div className='flex flex-wrap items-center gap-1'>
+        <div className='flex flex-wrap items-center gap-1 text-gray-900 dark:text-gray-300'>
           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'
+              className='inline-flex items-center rounded-full bg-cyan-100 dark:bg-cyan-900/30 px-3 py-0.5 text-xs font-medium leading-5 text-cyan-800 dark:text-cyan-300 hover:bg-cyan-300 dark:hover:bg-cyan-900/50'
               href={repo.url}
             >
               {repo.name}
@@ -229,7 +229,7 @@ function UserInfo({ user, membership }: TSCUser) {
         // fallback to ambassador page
         <TextLink
           href={`/community/ambassadors/${githubUsername}`}
-          className='flex font-normal text-base text-blue-500 no-underline hover:text-sky-400'
+          className='flex font-normal text-base text-blue-500 dark:text-blue-400 no-underline hover:text-sky-400 dark:hover:text-sky-300'
         >
           AsyncAPI Ambassador
         </TextLink>
@@ -254,19 +254,22 @@ function UserInfo({ user, membership }: TSCUser) {
  */
 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'>
+    <li
+      className='rounded-md border border-gray-200 dark:border-gray-700 p-4 px-6 py-10 text-center shadow-md bg-white dark:bg-dark-card'
+      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'>
+      <div className='my-4 text-gray-900 dark:text-gray-300'>
         Want to become a member? Follow this
         <TextLink
           href='https://github.com/asyncapi/community/blob/master/docs/020-governance-and-policies/TSC_MEMBERSHIP.md'
           target='_blank'
-          className='font-normal text-base text-sky-600 no-underline hover:text-sky-400'
+          className='font-normal text-base text-sky-600 dark:text-sky-400 no-underline hover:text-sky-400 dark:hover:text-sky-300'
         >
           Link
         </TextLink>
@@ -314,9 +317,9 @@ export default function CommunityLayout({ children, membership }: ICommunityLayo
           </div>
         )}
         <div className='mt-10'>
-          <div className='text-primary-800 mb-5 text-center'>
+          <div className='text-primary-800 dark:text-white mb-5 text-center'>
             <h3 className='text-2xl font-semibold'>Current {membership} members</h3>
-            <span className='font-thin text-sm'>(in alphabetical order)</span>
+            <span className='font-thin text-sm text-gray-600 dark:text-gray-400'>(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'>
diff --git a/components/layout/DocsLayout.tsx b/components/layout/DocsLayout.tsx
index 9a32f037794a..d66d2e385469 100644
--- a/components/layout/DocsLayout.tsx
+++ b/components/layout/DocsLayout.tsx
@@ -12,7 +12,6 @@ import DocsContext from '../../context/DocsContext';
 import { getAllPosts } from '../../utils/api';
 import Button from '../buttons/Button';
 import DocsButton from '../buttons/DocsButton';
-import AnnouncementHero from '../campaigns/AnnouncementHero';
 import Feedback from '../Feedback';
 import Head from '../Head';
 import ArrowRight from '../icons/ArrowRight';
@@ -101,7 +100,7 @@ export default function DocsLayout({ post, navItems = {}, children }: IDocsLayou
           <Button
             className='inline-flex h-full justify-center rounded-sm border border-gray-300 bg-white py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-900'
             text='Menu'
-            icon={<IconMenuCenter className='size-6 fill-gray-700' />}
+            icon={<IconMenuCenter className='size-4 fill-gray-700' />}
             onClick={() => {
               if (explorerDocMenu) {
                 setExplorerDocMenu(false);
@@ -119,18 +118,18 @@ export default function DocsLayout({ post, navItems = {}, children }: IDocsLayou
 
   return (
     <DocsContext.Provider value={{ post, navItems }}>
-      <div className='w-full bg-white px-4 sm:px-6 lg:px-8 xl:mx-auto xl:max-w-7xl'>
+      <div className='w-full bg-white dark:bg-dark-background'>
         {showMenu && <DocsMobileMenu onClickClose={() => setShowMenu(false)} post={post} navigation={navigation} />}
         <div className='flex flex-row' id='main-content'>
           {/* <!-- Static sidebar for desktop --> */}
           {sidebar}
-          <div className='flex w-0 max-w-full flex-1 flex-col lg:max-w-(screen-16)'>
+          <div className='flex w-0 max-w-full min-w-0 dark:bg-dark-background flex-1 flex-col'>
             <main className='relative z-0 pb-6 pt-2 focus:outline-none md:py-6' tabIndex={0}>
               {!showMenu && (
                 <div className='lg:hidden'>
                   <button
                     onClick={() => setShowMenu(true)}
-                    className='flex rounded-sm px-4 text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-900 sm:px-6 md:px-8'
+                    className='flex px-4 text-gray-500 dark:text-dark-text hover:text-gray-900 focus:outline-none sm:px-6 md:px-8'
                     aria-label='Open sidebar'
                   >
                     <span>{post.title}</span>
@@ -139,20 +138,20 @@ export default function DocsLayout({ post, navItems = {}, children }: IDocsLayou
                 </div>
               )}
 
-              <AnnouncementHero className='ml-6' hideVideo={true} />
+              {/* <AnnouncementHero className='ml-6' hideVideo={true} /> */}
 
-              <div className={`xl:flex ${post.toc && post.toc.length ? 'xl:flex-row-reverse' : ''}`}>
+              <div className={`xl:flex xl:gap-4 ${post?.toc?.length ? 'xl:flex-row-reverse' : ''}`}>
                 <TOC
                   toc={post.toc}
                   depth={3}
-                  className='sticky top-20 mt-4 max-h-screen overflow-y-auto bg-blue-100 p-4 xl:mt-0 xl:w-72 xl:bg-transparent xl:pb-8'
+                  className='hidden xl:block sticky top-20 mt-4 max-h-screen overflow-y-auto xl:mt-0 xl:w-60 xl:flex-shrink-0 xl:bg-transparent xl:pb-8'
                 />
-                <div className='px-4 sm:px-6 xl:max-w-184 xl:flex-1 xl:px-8'>
-                  <Heading level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.lg}>
+                <div className='px-4 sm:px-6 w-full lg:max-w-6xl lg:mx-auto lg:px-8 xl:flex-1 xl:max-w-7xl overflow-x-hidden'>
+                  <Heading className='dark:text-dark-heading' level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.lg}>
                     {post.title}
                   </Heading>
                   <div>
-                    <p className='font-normal font-sans text-sm text-gray-600 antialiased'>
+                    <p className='font-normal font-sans text-sm dark:text-dark-text text-gray-600 antialiased'>
                       Found an error? Have a suggestion?
                       {generateEditLink(post)}
                     </p>
@@ -163,7 +162,7 @@ export default function DocsLayout({ post, navItems = {}, children }: IDocsLayou
                     // which will not have RN, so do not render this section.
                     <div className='mt-5 w-full rounded-lg bg-secondary-100 px-2 py-3 text-center'>
                       <div>
-                        <span className='font-sans text-sm text-gray-800 antialiased'>
+                        <span className='font-sans text-sm dark:text-dark-heading text-gray-800 antialiased'>
                           {`What is new in v${post.title}? Have a look at the `}
                         </span>
                         <Link
@@ -179,7 +178,7 @@ export default function DocsLayout({ post, navItems = {}, children }: IDocsLayou
                         .
                       </div>
                       <div>
-                        <span className='font-sans text-sm text-gray-800 antialiased'>
+                        <span className='font-sans text-sm dark:text-dark-text text-gray-800 antialiased'>
                           Interested in release notes of other versions of the specification?&nbsp;
                         </span>
                         <span className='font-sans text-sm text-gray-800 antialiased'>
@@ -199,7 +198,7 @@ export default function DocsLayout({ post, navItems = {}, children }: IDocsLayou
                       </div>
                     </div>
                   )}
-                  <article className='my-12'>
+                  <article className='my-12 overflow-x-auto'>
                     <Head title={post.title} description={post.excerpt} image={post.cover} />
                     {children}
                   </article>
diff --git a/components/layout/GenericLayout.tsx b/components/layout/GenericLayout.tsx
index 166293b703e5..1764bc9122fc 100644
--- a/components/layout/GenericLayout.tsx
+++ b/components/layout/GenericLayout.tsx
@@ -36,11 +36,11 @@ export default function GenericLayout({
   }
 
   return (
-    <div data-testid='GenericLayout'>
+    <div className='bg-white dark:bg-dark-background min-h-screen' data-testid='GenericLayout'>
       <Head title={title} description={description} image={image} />
       <Container wide={wide}>
         <div data-testid='GenericLayout-banner'>
-          <AnnouncementHero className={`m-4 text-center ${hideBanner && 'hidden'}`} small={true} />
+          <AnnouncementHero className={`m-4 text-center ${hideBanner && 'hidden'}`} />
         </div>
         <div id='main-content' data-testid='Generic-main'>
           {children}
diff --git a/components/layout/GenericPostLayout.tsx b/components/layout/GenericPostLayout.tsx
index 23bccc37d619..75799d83ef80 100644
--- a/components/layout/GenericPostLayout.tsx
+++ b/components/layout/GenericPostLayout.tsx
@@ -32,7 +32,7 @@ export default function GenericPostLayout({ post, children }: IGenericPostLayout
 
   return (
     <GenericPostContext.Provider value={{ post }}>
-      <AnnouncementHero className='m-4 text-center' small={true} />
+      <AnnouncementHero className='m-4 text-center' />
       <Container>
         <main className='mt-8 px-4 sm:px-6' data-testid='GenericPostLayout-main-div'>
           <header className='pr-4 sm:pr-6 md:pr-8'>
diff --git a/components/layout/GenericWideLayout.tsx b/components/layout/GenericWideLayout.tsx
index 1df6365f447c..ffbbf5aa3ab1 100644
--- a/components/layout/GenericWideLayout.tsx
+++ b/components/layout/GenericWideLayout.tsx
@@ -35,7 +35,7 @@ export default function GenericWideLayout({
     <>
       <Head title={title} description={description} image={image} />
       <Row>
-        <AnnouncementHero className='m-4 text-center' small={true} />
+        <AnnouncementHero className='m-4 text-center' />
         {children}
       </Row>
     </>
diff --git a/components/layout/Layout.tsx b/components/layout/Layout.tsx
index 1f1a4e939d3e..f7ed8782d7c5 100644
--- a/components/layout/Layout.tsx
+++ b/components/layout/Layout.tsx
@@ -58,5 +58,5 @@ export default function Layout({ children }: ILayoutProps): React.JSX.Element {
     return <GenericPostLayout post={post as unknown as IPosts['blog'][number]}>{children}</GenericPostLayout>;
   }
 
-  return children as React.JSX.Element;
+  return <div className='min-h-screen bg-white dark:bg-dark-background transition-colors duration-300'>{children}</div>;
 }
diff --git a/components/logos/AsyncAPILogo.tsx b/components/logos/AsyncAPILogo.tsx
index 5c8b91670eb2..bf94f89b3cf3 100644
--- a/components/logos/AsyncAPILogo.tsx
+++ b/components/logos/AsyncAPILogo.tsx
@@ -12,7 +12,7 @@ interface IAsyncAPILogoProps {
 export default function AsyncAPILogo({ className }: IAsyncAPILogoProps) {
   return (
     <svg
-      className={twMerge('h-10 w-auto mt-0.5', className)}
+      className={twMerge('h-6 w-auto mt-0.5', className)}
       width='165'
       height='36'
       viewBox='0 0 165 36'
@@ -74,35 +74,44 @@ export default function AsyncAPILogo({ className }: IAsyncAPILogoProps) {
         </linearGradient>
       </defs>
 
+      {/* "A" character */}
       <path
         d='M63.9815 27.6971H61.4524L59.3704 22.3187H50.4894L48.4074 27.6971H45.9074L53.5529 8.30026H56.3783L63.9815 27.6971ZM51.3386 20.1182H58.5079L54.9074 10.5635L51.3386 20.1182Z'
-        fill='#0C0928'
+        className='fill-gray-900 dark:fill-white'
       />
+      {/* "s" character */}
       <path
         d='M71.7037 27.9925C70.3161 28.0052 68.9453 27.6926 67.7037 27.0804C66.5264 26.5139 65.5472 25.6129 64.8915 24.4931L66.9154 23.0531C67.3281 23.9309 67.9957 24.6678 68.8333 25.17C69.7573 25.7002 70.8129 25.9645 71.881 25.9331C72.9392 25.9331 73.7566 25.7345 74.3519 25.332C74.5772 25.1976 74.771 25.0172 74.9202 24.8029C75.0695 24.5887 75.1707 24.3455 75.2173 24.0895C75.2639 23.8335 75.2547 23.5707 75.1903 23.3185C75.1259 23.0663 75.0078 22.8306 74.8439 22.6271C74.5741 22.2786 74.0635 22.0286 73.3122 21.877L69.7408 21.1348C68.291 20.8421 67.2549 20.3525 66.6323 19.6661C66.0004 18.9638 65.6644 18.0493 65.6931 17.1101C65.688 16.3206 65.9331 15.5493 66.3942 14.9044C66.9016 14.2043 67.5894 13.6512 68.3863 13.3024C69.3457 12.8822 70.3873 12.6769 71.4365 12.7013C72.7305 12.6615 74.0126 12.9561 75.1561 13.5559C76.148 14.1039 76.9395 14.9471 77.418 15.9654L75.4233 17.2722C75.1327 16.4626 74.5495 15.7878 73.7857 15.3774C73.0666 14.9839 72.2586 14.7762 71.4365 14.7737C70.8133 14.7596 70.1927 14.8588 69.6058 15.0664C69.1521 15.2272 68.7514 15.5073 68.4471 15.8766C68.1783 16.2134 68.0358 16.6318 68.044 17.0606C68.0522 17.4894 68.2106 17.9022 68.4921 18.2287C68.7884 18.5911 69.343 18.8524 70.1561 19.0127L73.8757 19.7784C75.2654 20.052 76.2355 20.5024 76.7857 21.1296C77.344 21.7637 77.6413 22.5815 77.619 23.4216C77.6361 24.2872 77.3759 25.136 76.8757 25.8468C76.3504 26.566 75.628 27.1218 74.7937 27.4489C73.8106 27.8314 72.7601 28.0163 71.7037 27.9925V27.9925Z'
-        fill='#0C0928'
+        className='fill-gray-900 dark:fill-white'
       />
+      {/* "y" character */}
       <path
         d='M90.3703 13.0018H92.9285L85.9391 30.1668C85.642 30.9811 85.2258 31.748 84.7037 32.4431C84.3138 32.9574 83.8037 33.3707 83.2169 33.6479C82.6214 33.9034 81.9771 34.0291 81.328 34.0164C80.6995 34.0219 80.0743 33.9275 79.4762 33.7367C78.939 33.565 78.4321 33.312 77.9735 32.9867L78.6269 30.9299C78.9951 31.2671 79.424 31.5331 79.8915 31.7139C80.3125 31.8803 80.7609 31.9689 81.2143 31.9753C81.7379 31.9722 82.2474 31.8077 82.6719 31.5049C83.127 31.1913 83.5432 30.5545 83.9206 29.5945L84.6931 27.684L83.2063 24.1873L78.4761 13.0175H81.1772L85.8174 24.2134L90.3703 13.0018Z'
-        fill='#0C0928'
+        className='fill-gray-900 dark:fill-white'
       />
+      {/* "n" character */}
       <path
         d='M94.9735 27.6971V13.0018H97.0502L97.2566 16.2947L96.8703 15.9707C97.1438 15.2501 97.5819 14.6017 98.1507 14.0759C98.6824 13.5968 99.3148 13.2398 100.003 13.0306C100.711 12.8158 101.449 12.7075 102.19 12.7091C103.193 12.6965 104.187 12.9017 105.101 13.3102C105.966 13.7045 106.695 14.3405 107.198 15.1396C107.727 15.9637 107.992 17.0091 107.992 18.2757V27.6841H105.611V19.1146C105.611 17.4891 105.258 16.3566 104.553 15.7172C103.842 15.079 102.91 14.7371 101.95 14.7633C101.207 14.7703 100.475 14.9408 99.8068 15.2624C99.0692 15.6187 98.4538 16.1812 98.037 16.8801C97.5714 17.6258 97.3386 18.625 97.3386 19.8777V27.6945L94.9735 27.6971Z'
-        fill='#0C0928'
+        className='fill-gray-900 dark:fill-white'
       />
+      {/* "c" character */}
       <path
         d='M117.251 12.7091C118.181 12.6912 119.105 12.851 119.974 13.1795C120.741 13.4831 121.436 13.9436 122.011 14.5307C122.599 15.1392 123.072 15.8474 123.407 16.6214L121.148 17.6668C120.895 16.8219 120.393 16.0705 119.706 15.5081C118.978 14.983 118.091 14.7185 117.19 14.758C116.291 14.7331 115.404 14.9625 114.632 15.4192C113.903 15.8776 113.332 16.5437 112.995 17.3297C112.243 19.2646 112.243 21.4057 112.995 23.3405C113.329 24.1319 113.9 24.8032 114.632 25.264C115.404 25.7207 116.291 25.9501 117.19 25.9252C117.877 25.9411 118.56 25.8211 119.198 25.5724C119.745 25.3515 120.226 24.9983 120.598 24.5453C120.979 24.0633 121.239 23.4991 121.357 22.8989L123.558 23.662C123.249 24.5153 122.779 25.3035 122.175 25.9853C121.591 26.6305 120.867 27.1378 120.058 27.4698C119.167 27.8283 118.211 28.006 117.249 27.9925C115.95 28.0139 114.667 27.6995 113.529 27.0804C112.433 26.4701 111.544 25.5548 110.971 24.4486C110.363 23.1655 110.048 21.7662 110.048 20.3495C110.048 18.9328 110.363 17.5334 110.971 16.2503C111.545 15.1447 112.434 14.2296 113.529 13.6186C114.668 12.9998 115.952 12.6862 117.251 12.7091Z'
-        fill='#0C0928'
+        className='fill-gray-900 dark:fill-white'
       />
+      {/* "A" character (second A) */}
       <path
         d='M143.659 27.6971H140.296L138.423 22.614H130.183L128.307 27.6971H125.034L132.442 8.30026H136.251L143.659 27.6971ZM131.074 20.0555H137.526L134.312 11.0052L131.074 20.0555Z'
-        fill='#0C0928'
+        className='fill-gray-900 dark:fill-white'
       />
+      {/* "P" character */}
       <path
         d='M152.992 8.30024C154.248 8.26933 155.494 8.52043 156.638 9.03462C157.616 9.49485 158.441 10.2199 159.019 11.1254C159.584 12.1193 159.881 13.2402 159.881 14.3804C159.881 15.5205 159.584 16.6415 159.019 17.6354C158.443 18.5428 157.617 19.2684 156.638 19.7262C155.495 20.2425 154.248 20.4945 152.992 20.4631H148.619V27.6919H145.444V8.30024H152.992ZM152.487 17.7635C153.898 17.7635 154.934 17.4743 155.595 16.8958C156.257 16.3174 156.589 15.4802 156.593 14.3843C156.593 13.2692 156.26 12.4216 155.595 11.8414C154.93 11.2613 153.894 10.972 152.487 10.9738H148.619V17.7687L152.487 17.7635Z'
-        fill='#0C0928'
+        className='fill-gray-900 dark:fill-white'
       />
-      <path d='M165 8.30026V27.6971H161.825V8.30026H165Z' fill='#0C0928' />
+      {/* "I" character */}
+      <path d='M165 8.30026V27.6971H161.825V8.30026H165Z' className='fill-gray-900 dark:fill-white' />
+      {/* Logo icon - keeping original gradients */}
       <path
         d='M27.8228 0H8.61905C3.85888 0 0 3.8121 0 8.51456V27.4854C0 32.1879 3.85888 36 8.61905 36H27.8228C32.5829 36 36.4418 32.1879 36.4418 27.4854V8.51456C36.4418 3.8121 32.5829 0 27.8228 0Z'
         fill='url(#gradient1)'
diff --git a/components/navigation/BlogPostItem.tsx b/components/navigation/BlogPostItem.tsx
index e7a3b801b713..df08f6302e4e 100644
--- a/components/navigation/BlogPostItem.tsx
+++ b/components/navigation/BlogPostItem.tsx
@@ -51,6 +51,15 @@ const BlogPostItem = ({ post, className = '', id = '' }: BlogPostItemProps, ref:
     case BlogPostType.Communication:
       typeColors = ['bg-teal-100', 'text-teal-800'];
       break;
+    case BlogPostType.Conference:
+      typeColors = ['bg-purple-100', 'text-purple-800'];
+      break;
+    case BlogPostType.Engineering:
+      typeColors = ['bg-blue-100', 'text-blue-800'];
+      break;
+    case BlogPostType.Community:
+      typeColors = ['bg-indigo-100', 'text-indigo-800'];
+      break;
     default:
   }
 
@@ -59,79 +68,74 @@ const BlogPostItem = ({ post, className = '', id = '' }: BlogPostItemProps, ref:
       <article className='h-full rounded-lg'>
         <Link href={post.slug}>
           <span
-            className={
-              'relative flex h-full cursor-pointer flex-col divide-y divide-gray-200 overflow-hidden rounded-lg border border-gray-200 shadow-md transition-all duration-300 ease-in-out hover:shadow-lg'
-            }
+            className='relative flex h-full cursor-pointer flex-col overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-dark-card shadow-md transition-all duration-300 ease-in-out hover:shadow-xl hover:-translate-y-1 hover:border-gray-300 dark:hover:border-gray-600'
             data-testid='BlogPostItem-Link'
           >
             {post.featured && (
-              <div className='absolute right-0 top-0 z-10 m-4'>
-                <span className='inline-flex items-center rounded-full bg-purple-100 px-3 py-0.5 text-sm font-medium text-purple-800'>
+              <div className='absolute right-0 top-0 z-10 m-3'>
+                <span className='inline-flex items-center rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-800'>
                   Featured
                 </span>
               </div>
             )}
             <img
-              className='h-48 w-full object-cover'
+              className='h-36 w-full object-cover'
               src={post.cover}
-              alt=''
+              alt={post.title}
               loading='lazy'
               data-testid='BlogPostItem-Img'
             />
-            <div className='flex flex-1 flex-col justify-between bg-white p-6'>
+            <div className='flex flex-1 flex-col p-4'>
               <div className='flex-1'>
-                <Paragraph typeStyle={ParagraphTypeStyle.sm} textColor='text-indigo-500'>
+                <Paragraph typeStyle={ParagraphTypeStyle.sm}>
                   <span
-                    className={`inline-flex items-center rounded-full px-3 py-0.5 ${typeColors[0]} ${typeColors[1]}`}
+                    className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs ${typeColors[0]} ${typeColors[1]}`}
                   >
                     {post.type}
                   </span>
                 </Paragraph>
-                <span className='block'>
-                  <Heading level={HeadingLevel.h5} typeStyle={HeadingTypeStyle.smSemibold} className='mt-2'>
-                    {post.title}
-                  </Heading>
-                  <Paragraph typeStyle={ParagraphTypeStyle.sm} className='mt-3'>
-                    <TextTruncate element='span' line={4} text={post.excerpt} />
-                  </Paragraph>
-                </span>
+                <Heading
+                  level={HeadingLevel.h5}
+                  typeStyle={HeadingTypeStyle.smSemibold}
+                  className='mt-2 line-clamp-2 text-sm text-gray-900 dark:text-gray-100'
+                >
+                  {post.title}
+                </Heading>
+                <Paragraph
+                  typeStyle={ParagraphTypeStyle.sm}
+                  className='mt-2 line-clamp-2 text-xs text-gray-600 dark:text-gray-400'
+                >
+                  <TextTruncate element='span' line={2} text={post.excerpt} />
+                </Paragraph>
               </div>
-              <div className='mt-6 flex items-center'>
-                <div className='relative shrink-0'>
-                  <AuthorAvatars authors={post.authors} />
+              <div className='mt-4 flex items-center justify-between border-t border-gray-100 dark:border-gray-700 pt-3'>
+                <div className='flex items-center'>
+                  <div className='relative shrink-0'>
+                    <AuthorAvatars authors={post.authors} />
+                  </div>
+                  <div className='ml-2'>
+                    <Heading
+                      level={HeadingLevel.h3}
+                      typeStyle={HeadingTypeStyle.xsSemibold}
+                      className='text-gray-900 dark:text-gray-100'
+                    >
+                      <span className='text-xs'>
+                        {post.authors
+                          .map((author) => author.name)
+                          .join(', ')
+                          .split(', ')
+                          .slice(0, 2)
+                          .join(' & ')}
+                      </span>
+                    </Heading>
+                    <Paragraph typeStyle={ParagraphTypeStyle.sm} className='text-xs text-gray-500 dark:text-gray-400'>
+                      {post.date ? dayjs(post.date).format('MMMM D, YYYY') : ''}
+                    </Paragraph>
+                  </div>
                 </div>
-                <div className='ml-3'>
-                  <Heading level={HeadingLevel.h3} typeStyle={HeadingTypeStyle.xsSemibold} textColor='text-gray-900'>
-                    <span>
-                      {post.authors
-                        .map((author, index) =>
-                          author.link ? (
-                            <button
-                              key={index}
-                              data-alt={author.name}
-                              className='cursor-pointer border-none bg-inherit p-0 hover:underline'
-                              onClick={(e) => {
-                                e.preventDefault();
-                                window.open(author.link, '_blank');
-                              }}
-                            >
-                              {author.name}
-                            </button>
-                          ) : (
-                            author.name
-                          )
-                        )
-                        .reduce((prev, curr, index) => (
-                          <React.Fragment key={`author-${index}`}>
-                            {prev} & {curr}
-                          </React.Fragment>
-                        ))}
-                    </span>
-                  </Heading>
-                  <Paragraph typeStyle={ParagraphTypeStyle.sm} className='flex'>
-                    <time dateTime={post.date}>{dayjs(post.date).format('MMMM D, YYYY')}</time>
-                    <span className='mx-1'>&middot;</span>
-                    <span>{post.readingTime} min read</span>
+                <div className='text-right'>
+                  <Paragraph typeStyle={ParagraphTypeStyle.sm} className='text-xs text-gray-500 dark:text-gray-400'>
+                    {post.readingTime} min
                   </Paragraph>
                 </div>
               </div>
diff --git a/components/navigation/DocsNav.tsx b/components/navigation/DocsNav.tsx
index 83bf94294f27..60303a107c45 100644
--- a/components/navigation/DocsNav.tsx
+++ b/components/navigation/DocsNav.tsx
@@ -52,7 +52,7 @@ const serializedBuckets: SerializedBuckets = buckets.reduce(
   {
     welcome: {
       icon: IconHome,
-      className: 'bg-gray-300 border-gray-300'
+      className: 'dark:bg-[#8851FB] bg-gray-300 border-gray-300'
     }
   } as SerializedBuckets // Initial value of the accumulator
 );
@@ -76,11 +76,11 @@ export default function DocsNav({ item, active, onClick = () => {} }: DocsNavPro
 
   useEffect(() => {
     setOpenSubCategory(active.startsWith(item.item.slug));
-  }, [active]);
+  }, [active, item.item.slug]);
 
   return (
     <li className='mb-4' key={item.item.title} data-testid='DocsNav-item'>
-      <div className='flex gap-2'>
+      <div className='flex gap-2 hover:bg-secondary-100 dark:hover:bg-dark-card my-2 rounded-md bg-transparent '>
         <DocsArrow
           isDropDown={Object.values(subCategories).length > 0}
           activeDropDownItem={openSubCategory}
@@ -89,7 +89,7 @@ export default function DocsNav({ item, active, onClick = () => {} }: DocsNavPro
         <DocsNavItem
           {...item.item}
           activeSlug={active}
-          defaultClassName='font-body text-sm text-black hover:font-semibold'
+          defaultClassName='font-body text-sm my-1 text-black dark:text-white hover:font-semibold'
           inactiveClassName='font-regular'
           activeClassName='font-semibold'
           bucket={{
diff --git a/components/navigation/DocsNavItem.tsx b/components/navigation/DocsNavItem.tsx
index eadc6f464184..18adabd5333e 100644
--- a/components/navigation/DocsNavItem.tsx
+++ b/components/navigation/DocsNavItem.tsx
@@ -1,7 +1,7 @@
 import Link from 'next/link';
 import React from 'react';
 
-export interface DocsNavItemProps {
+export type DocsNavItemProps = Readonly<{
   title: string;
   slug: string;
   href?: string;
@@ -13,9 +13,9 @@ export interface DocsNavItemProps {
   activeClassName?: string;
   bucket?: {
     className: string;
-    icon: React.ComponentType<any>;
+    icon: React.ComponentType<{ className?: string }>;
   };
-}
+}>;
 
 /**
  * @description Determines if a given slug is active.
@@ -69,14 +69,20 @@ export default function DocsNavItem({
     <div>
       <div className={classes}>
         <Link href={href || slug} className='inline-block w-full' onClick={onClick}>
-          {bucket && (
-            <div
-              className={`${(slug === '/docs' ? slug === activeSlug : activeSlug.startsWith(slug)) ? bucket.className : ''} inline-block rounded`}
-              style={{ marginRight: '5px', marginBottom: '-6px', padding: '2px' }}
-            >
-              <bucket.icon className='size-5' />
-            </div>
-          )}
+          {bucket &&
+            (() => {
+              const isBucketActive = slug === '/docs' ? slug === activeSlug : activeSlug.startsWith(slug);
+              const bucketClass = isBucketActive ? `${bucket.className} dark:bg-primary-500` : '';
+
+              return (
+                <div
+                  className={`${bucketClass} inline-block rounded`}
+                  style={{ marginRight: '5px', marginBottom: '-6px', padding: '2px' }}
+                >
+                  <bucket.icon className='size-5' />
+                </div>
+              );
+            })()}
           <span>{title}</span>
         </Link>
       </div>
diff --git a/components/navigation/DocsNavWrapper.tsx b/components/navigation/DocsNavWrapper.tsx
index c51f0cb2033e..086375607d40 100644
--- a/components/navigation/DocsNavWrapper.tsx
+++ b/components/navigation/DocsNavWrapper.tsx
@@ -21,16 +21,16 @@ interface IDocsNavWrapperProps {
 export default function DocsNavWrapper({ setShowMenu, navigation, post }: IDocsNavWrapperProps) {
   return (
     <div className='hidden lg:flex lg:shrink-0' data-testid='DocsLayout-main'>
-      <div className='flex w-72 flex-col border-r border-gray-200 bg-white py-2'>
-        <div className='flex flex-1 flex-col md:sticky md:top-20 md:max-h-(screen-14) md:overflow-y-auto'>
+      <div className='flex w-64 flex-col border-r-2 border-gray-200 dark:border-border dark:bg-dark-background bg-white py-2'>
+        <div className='flex flex-1 bg-transparent flex-col md:sticky md:top-20 md:max-h-(screen-14) md:overflow-y-auto'>
           <SearchButton
-            className='mb-4 mr-2 mt-8 flex items-center space-x-3 rounded-md border border-gray-300 bg-white px-3 py-1.5 text-left text-sm text-gray-700 shadow-sm transition-all duration-500 ease-in-out hover:border-secondary-500 hover:bg-secondary-100 hover:text-secondary-500'
+            className='mb-4 mr-2 mt-8 flex items-center space-x-3 rounded-md border dark:hover:text-secondary-500 border-gray-300 dark:border-dark-text dark:bg-dark-card bg-white px-3 py-1.5 text-left text-sm text-gray-700 dark:text-dark-text shadow-sm transition-all duration-500 ease-in-out dark:hover:border-secondary-500 hover:border-secondary-500 hover:bg-secondary-100 hover:text-secondary-500'
             indexName={DOCS_INDEX_NAME}
           >
             {({ actionKey }) => (
               <>
                 <IconLoupe />
-                <span className='flex-auto'>Search docs...</span>
+                <span className=' flex-auto'>Search docs...</span>
                 {actionKey && (
                   <kbd className='font-sans font-semibold'>
                     <abbr title={actionKey.key} className='no-underline'>
@@ -42,7 +42,7 @@ export default function DocsNavWrapper({ setShowMenu, navigation, post }: IDocsN
               </>
             )}
           </SearchButton>
-          <nav className='flex-1 bg-white'>
+          <nav className='flex-1 dark:bg-dark-background bg-white'>
             <ul>
               {Object.values(navigation).map((navItem) => (
                 <DocsNav
diff --git a/components/navigation/EventPostItem.tsx b/components/navigation/EventPostItem.tsx
index 0bd02d60442b..9b23476b7cf8 100644
--- a/components/navigation/EventPostItem.tsx
+++ b/components/navigation/EventPostItem.tsx
@@ -1,14 +1,9 @@
-import { ArrowRightIcon } from '@heroicons/react/outline';
 import dayjs from 'dayjs';
 import React from 'react';
 
 import type { IEvent } from '@/types/event';
 import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
 
-import IconCalendar from '../icons/Calendar';
-import Community from '../icons/Community';
-import Conference from '../icons/Conference';
-import Webinar from '../icons/Webinar';
 import Heading from '../typography/Heading';
 
 interface EventPostItemProps {
@@ -28,25 +23,16 @@ function EventPostItem({ post, className = '', id }: EventPostItemProps): React.
   const localTime = dayjs().format('YYYY-MM-DD'); // store localTime
   const currentDate = `${localTime}T00:00:00.000Z`;
   const title = post.title || '';
-  let color = '';
-  let icon: React.ReactElement | null = null;
   let type = '';
 
   if (title.includes('community')) {
-    icon = <Community />;
-    color = 'text-green-800';
     type = 'COMMUNITY';
   } else if (title.includes('conference')) {
-    icon = <Conference />;
-    color = 'text-orange-800';
     type = 'CONFERENCE';
   } else if (title.includes('workshop')) {
-    icon = <Webinar />;
-    color = 'text-blue-400';
     type = 'WORKSHOP';
   }
 
-  const defaultCover = 'https://github.com/asyncapi/community/assets/40604284/01c2b8de-fa5c-44dd-81a5-70cb96df4813';
   let active = true;
   const postDate = dayjs(post.date); // Convert post.date to a dayjs object if necessary
 
@@ -57,35 +43,49 @@ function EventPostItem({ post, className = '', id }: EventPostItemProps): React.
     active = false;
   }
 
+  const eventDateLabel = active ? dayjs(postDate).format('MMMM D, YYYY') : 'View Recording';
+
   return (
     <li key={id} className={className} data-testid='EventPostItem-main'>
-      <article className='h-full rounded-lg shadow-md hover:shadow-lg'>
-        <a href={post.url} target='_blank' rel='noreferrer' data-testid='EventPostItem-link'>
-          <img
-            src={post.banner ? post.banner : defaultCover}
-            alt={post.title}
-            className='h-52 w-full rounded-t-lg object-cover'
-            data-testid='EventPostItem-img'
-          />
-          <div className='mt-2 flex h-52 flex-col justify-between p-5 ' data-testid='EventPostItem-post'>
-            <div>
-              <div className='flex items-center'>
-                {icon}
-                <p className={`text-md ml-3 font-bold ${color}`}>{type}</p>
-              </div>
-              <Heading level={HeadingLevel.h3} typeStyle={HeadingTypeStyle.bodyLg} className='mt-4'>
-                {post.title}
-              </Heading>
+      <article className='flex h-full flex-col overflow-hidden rounded-lg bg-white dark:bg-dark-card shadow-md hover:shadow-lg border border-gray-200 dark:border-gray-700'>
+        <div className='relative h-40 bg-gradient-to-br from-indigo-600 to-purple-600 p-4'>
+          <div className='absolute right-4 top-4'>
+            <span className='rounded-full bg-white px-3 py-1 text-xs font-medium text-gray-700'>
+              {type || 'Online'}
+            </span>
+          </div>
+          <div className='absolute bottom-4 left-4'>
+            <span className='text-sm font-semibold text-white'>150 attending</span>
+          </div>
+        </div>
+
+        <div className='flex flex-1 flex-col justify-between p-6'>
+          <div>
+            <Heading
+              level={HeadingLevel.h3}
+              typeStyle={HeadingTypeStyle.bodyLg}
+              className='mb-2 text-gray-900 dark:text-white'
+            >
+              {post.title}
+            </Heading>
+            <div className='flex items-center text-sm text-gray-600 dark:text-gray-400'>
+              <span data-testid='Event-span'>{eventDateLabel}</span>
             </div>
-            <div className='flex items-center'>
-              <IconCalendar />
-              <span className='ml-4 text-sm font-semibold' data-testid='Event-span'>
-                {active ? postDate.format('MMMM D, YYYY') : 'View Recording'}
-              </span>
-              <ArrowRightIcon className='ml-3 w-4' />
+            <div className='text-sm text-gray-600 dark:text-gray-400'>
+              {postDate.isValid() && dayjs(postDate).format('h:mm A [UTC]')}
             </div>
           </div>
-        </a>
+
+          <a
+            href={post.url}
+            target='_blank'
+            rel='noreferrer'
+            className='mt-4 block w-full rounded-lg bg-indigo-600 py-3 text-center font-semibold text-white transition-colors hover:bg-indigo-700'
+            data-testid='EventPostItem-link'
+          >
+            Join Our Community
+          </a>
+        </div>
       </article>
     </li>
   );
diff --git a/components/navigation/FlyoutMenu.tsx b/components/navigation/FlyoutMenu.tsx
index e712d8472b89..b86eecfaf007 100644
--- a/components/navigation/FlyoutMenu.tsx
+++ b/components/navigation/FlyoutMenu.tsx
@@ -19,7 +19,7 @@ export default function Flyout({ items = [] }: FlyoutProps) {
     >
       <div className='rounded-lg shadow-lg'>
         <div className='shadow-xs overflow-hidden rounded-lg'>
-          <div className='relative z-20 grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8 lg:grid-cols-2'>
+          <div className='relative z-20 grid gap-6 bg-white dark:bg-dark-card px-5 py-6 sm:gap-8 sm:p-8 lg:grid-cols-2'>
             <MenuBlocks items={items} />
           </div>
         </div>
diff --git a/components/navigation/MenuBlocks.tsx b/components/navigation/MenuBlocks.tsx
index b13543685bfe..a7babeae3d32 100644
--- a/components/navigation/MenuBlocks.tsx
+++ b/components/navigation/MenuBlocks.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
 
-import LinkComponent from '../link';
+import LinkComponent from '../Link';
 import Paragraph from '../typography/Paragraph';
 import Label from './Label';
 
@@ -42,24 +42,35 @@ export default function MenuBlocks({ items = [] }: MenuBlocksProps) {
           >
             <span
               data-testid='MenuBlocks-Link'
-              className={`-mx-3 mt-1 flex items-start space-x-4 rounded-lg p-3 transition duration-150 ease-in-out ${
-                router.asPath === item.href ? 'bg-secondary-100 shadow-sm' : 'hover:bg-gray-50'
+              className={`-mx-3 mt-1 flex items-start space-x-4 rounded-lg p-3 transition-all ${'duration-200 ease-in-out'} ${
+                router.asPath === item.href
+                  ? 'bg-primary-100 dark:bg-dark-background shadow-sm'
+                  : 'hover:bg-primary-100 dark:hover:bg-dark-background hover:translate-x-1'
               }`}
             >
               <div
                 className={`flex size-10 shrink-0 items-center justify-center rounded-lg ${
-                  item.className ? item.className : 'border border-gray-800 bg-secondary-100'
-                } text-gray-900 sm:size-12 ${item.comingSoon && 'opacity-50'}`}
+                  item.className
+                    ? item.className
+                    : 'border border-primary-500 dark:border-primary-500 bg-primary-100 dark:bg-primary-500/20'
+                } text-primary-600 dark:text-primary-300 sm:size-12 ${item.comingSoon && 'opacity-50'}`}
                 data-testid='MenuBlock-icon'
               >
                 <item.icon className='size-6' />
               </div>
               <div className='space-y-1 whitespace-pre-line'>
-                <Paragraph typeStyle={ParagraphTypeStyle.md} textColor='text-gray-900' fontWeight='font-semibold'>
+                <Paragraph
+                  typeStyle={ParagraphTypeStyle.md}
+                  textColor='text-gray-900 dark:text-gray-100'
+                  fontWeight='font-semibold'
+                >
                   <span className={item.comingSoon ? 'opacity-50' : ''}>{item.title}</span>{' '}
                   {item.comingSoon && <Label text='Coming soon' />} {item.beta && <Label text='Beta' />}
                 </Paragraph>
-                <Paragraph typeStyle={ParagraphTypeStyle.sm} className={item.comingSoon ? 'opacity-50' : ''}>
+                <Paragraph
+                  typeStyle={ParagraphTypeStyle.sm}
+                  className={`text-gray-600 dark:text-gray-400 ${item.comingSoon ? 'opacity-50' : ''}`}
+                >
                   {item.description}
                 </Paragraph>
               </div>
diff --git a/components/navigation/MobileNavMenu.tsx b/components/navigation/MobileNavMenu.tsx
index a8e03e928087..941fc614593a 100644
--- a/components/navigation/MobileNavMenu.tsx
+++ b/components/navigation/MobileNavMenu.tsx
@@ -4,6 +4,7 @@ import React, { useState } from 'react';
 import i18nextConfig from '@/next-i18next.config.cjs';
 
 import { SearchButton } from '../AlgoliaSearch';
+import DarkModeToggle from '../DarkModeToggle';
 import IconLanguage from '../icons/Language';
 import NavItemDropdown from '../icons/NavItemDropdown';
 import SearchIcon from '../icons/SearchIcon';
@@ -20,12 +21,12 @@ interface MenuItem {
   text: string;
 }
 
-interface MobileNavMenuProps {
+type MobileNavMenuProps = Readonly<{
   onClickClose?: () => void;
   uniqueLangs: { key: string; text: string; value: string }[];
   currentLanguage: string;
   changeLanguage: (locale: string, langPicker: boolean) => void;
-}
+}>;
 
 /**
  * @description MobileNavMenu component for displaying a responsive navigation menu on mobile devices.
@@ -53,31 +54,43 @@ export default function MobileNavMenu({
   }
 
   const { langMap } = i18nextConfig;
+  const sectionToggleButtonClass =
+    'inline-flex items-center transition-transform duration-200 hover:text-secondary-600 dark:hover:text-secondary-400';
+  const otherLinkClass =
+    'mb-3 block rounded-lg px-3 py-2 text-base font-medium leading-6 text-gray-700 dark:text-gray-300';
+  const otherLinkHoverClass =
+    'transition-all duration-150 ease-in-out hover:bg-gray-100/60 dark:hover:bg-gray-700/40 hover:translate-x-1';
+  const languageButtonClass =
+    'mb-3 ml-2 block w-full rounded-lg px-3 py-2 text-start text-sm font-medium leading-6 transition-all duration-150';
+  const languageButtonHoverClass = 'ease-in-out hover:bg-gray-100/60 dark:hover:bg-gray-700/40 hover:translate-x-1';
 
   return (
-    <div className='fixed inset-x-0 top-0 z-60 max-h-full origin-top-right overflow-y-auto py-2 transition lg:hidden'>
-      <div className='rounded-lg shadow-lg'>
-        <div className='shadow-xs divide-y-2 divide-gray-50 rounded-lg bg-white'>
-          <div className='space-y-6 px-4 pb-6 pt-4'>
+    <div className='fixed inset-x-0 top-0 z-60 max-h-full origin-top-right overflow-y-auto py-2 transition lg:hidden animate-in fade-in slide-in-from-top-5 duration-300'>
+      <div className='mx-2 rounded-2xl'>
+        <div className='shadow-xs divide-y divide-gray-100/50 dark:divide-gray-700/50 rounded-2xl bg-white/90 dark:bg-dark-card/90 backdrop-blur-xl border border-gray-200/50 dark:border-gray-700/50'>
+          <div className='space-y-6 px-5 pb-6 pt-5'>
             <div className='flex items-center justify-between'>
-              <Link href='/' className='cursor-pointer' data-testid='MobileNav-Logo'>
+              <Link
+                href='/'
+                className='cursor-pointer transition-transform hover:scale-105'
+                data-testid='MobileNav-Logo'
+              >
                 <AsyncAPILogo className='h-10 w-auto' />
               </Link>
-              <div className='justify-content -mr-2 flex flex-row items-center' data-testid='MobileNav-button'>
+              <div className='justify-content -mr-2 flex flex-row items-center gap-1' data-testid='MobileNav-button'>
                 <SearchButton
-                  className='flex items-center space-x-2 rounded-md p-2 text-left text-gray-400
-                  transition duration-150 ease-in-out hover:bg-gray-100 hover:text-gray-500
-                  focus:bg-gray-100 focus:text-gray-500 focus:outline-none'
+                  className='flex items-center rounded-lg p-2.5 text-gray-700 dark:text-gray-200 transition-all duration-200 ease-in-out hover:bg-gray-100/80 dark:hover:bg-gray-700/50 hover:scale-105 active:scale-95'
                   aria-label='Open Search'
                 >
                   <SearchIcon />
                 </SearchButton>
+                <div className='flex items-center'>
+                  <DarkModeToggle />
+                </div>
                 <button
                   onClick={onClickClose}
                   type='button'
-                  className='inline-flex items-center justify-center rounded-md p-2 text-gray-400
-                  transition duration-150 ease-in-out hover:bg-gray-100 hover:text-gray-500
-                  focus:bg-gray-100 focus:text-gray-500 focus:outline-none'
+                  className='inline-flex items-center justify-center rounded-lg p-2.5 text-gray-700 dark:text-gray-200 transition-all duration-200 ease-in-out hover:bg-gray-100/80 dark:hover:bg-gray-700/50 hover:rotate-90 active:scale-95'
                   aria-label='Close menu'
                 >
                   <svg className='size-6' stroke='currentColor' fill='none' viewBox='0 0 24 24'>
@@ -87,111 +100,147 @@ export default function MobileNavMenu({
               </div>
             </div>
           </div>
-          <div className='space-y-2 px-5 py-2' onClick={() => showMenu('learning')} data-testid='MobileNav-docs'>
-            <h4 className='flex justify-between font-medium text-gray-800'>
-              <Link href='/docs' className='flex cursor-pointer'>
+          <div className='space-y-2 px-5 py-3' data-testid='MobileNav-docs'>
+            <h4 className='flex justify-between font-semibold text-gray-800 dark:text-white text-base'>
+              <Link
+                href='/docs'
+                className='flex cursor-pointer hover:text-secondary-600 dark:hover:text-secondary-400 transition-colors'
+              >
                 Docs
               </Link>
-              <span
-                className={`inline-flex items-center transition-transform duration-200 ${
-                  open === 'learning' ? 'rotate-180' : ''
-                }`}
+              <button
+                type='button'
+                aria-expanded={open === 'learning'}
+                aria-label='Toggle Docs menu'
+                onClick={() => showMenu('learning')}
+                className={`${sectionToggleButtonClass} ${open === 'learning' ? 'rotate-180' : ''}`}
               >
                 <NavItemDropdown />
-              </span>
+              </button>
             </h4>
-            {open === 'learning' && <MenuBlocks items={learningItems} />}
+            {open === 'learning' && (
+              <div className='animate-in fade-in slide-in-from-top-2 duration-200'>
+                <MenuBlocks items={learningItems} />
+              </div>
+            )}
           </div>
-          <div className='space-y-2 px-5 py-2' onClick={() => showMenu('tooling')} data-testid='MobileNav-tools'>
-            <h4 className='flex justify-between font-medium text-gray-800'>
-              <Link href='/tools' className='flex cursor-pointer'>
+          <div className='space-y-2 px-5 py-3' data-testid='MobileNav-tools'>
+            <h4 className='flex justify-between font-semibold text-gray-800 dark:text-white text-base'>
+              <Link
+                href='/tools'
+                className='flex cursor-pointer hover:text-secondary-600 dark:hover:text-secondary-400 transition-colors'
+              >
                 Tools
               </Link>
-              <span
-                className={`inline-flex items-center transition-transform duration-200 ${
-                  open === 'tooling' ? 'rotate-180' : ''
-                }`}
+              <button
+                type='button'
+                aria-expanded={open === 'tooling'}
+                aria-label='Toggle Tools menu'
+                onClick={() => showMenu('tooling')}
+                className={`${sectionToggleButtonClass} ${open === 'tooling' ? 'rotate-180' : ''}`}
               >
                 <NavItemDropdown />
-              </span>
+              </button>
             </h4>
-            {open === 'tooling' && <MenuBlocks items={toolingItems} />}
+            {open === 'tooling' && (
+              <div className='animate-in fade-in slide-in-from-top-2 duration-200'>
+                <MenuBlocks items={toolingItems} />
+              </div>
+            )}
           </div>
-          <div className='space-y-2 px-5 py-2' onClick={() => showMenu('community')} data-testid='MobileNav-community'>
-            <h4 className='flex justify-between font-medium text-gray-800'>
-              <Link href='/community' className='flex cursor-pointer'>
+          <div className='space-y-2 px-5 py-3' data-testid='MobileNav-community'>
+            <h4 className='flex justify-between font-semibold text-gray-800 dark:text-white text-base'>
+              <Link
+                href='/community'
+                className='flex cursor-pointer hover:text-secondary-600 dark:hover:text-secondary-400 transition-colors'
+              >
                 Community
               </Link>
-              <span
-                className={`inline-flex items-center transition-transform duration-200 ${
-                  open === 'community' ? 'rotate-180' : ''
-                }`}
+              <button
+                type='button'
+                aria-expanded={open === 'community'}
+                aria-label='Toggle Community menu'
+                onClick={() => showMenu('community')}
+                className={`${sectionToggleButtonClass} ${open === 'community' ? 'rotate-180' : ''}`}
               >
                 <NavItemDropdown />
-              </span>
+              </button>
             </h4>
-            {open === 'community' && <MenuBlocks items={communityItems} />}
+            {open === 'community' && (
+              <div className='animate-in fade-in slide-in-from-top-2 duration-200'>
+                <MenuBlocks items={communityItems} />
+              </div>
+            )}
           </div>
-          <div className='space-y-2 px-5 pt-2' onClick={() => showMenu('others')} data-testid='MobileNav-others'>
+          <div className='space-y-2 px-5 py-3' data-testid='MobileNav-others'>
             <div className='grid gap-4'>
               <div>
-                <h4 className='mb-4 flex justify-between font-medium text-gray-800'>
-                  <a className='cursor-pointer'>Others</a>
-                  <span
-                    className={`inline-flex items-center transition-transform duration-200 ${
-                      open === 'others' ? 'rotate-180' : ''
-                    }`}
+                <h4 className='mb-4 flex justify-between font-semibold text-gray-800 dark:text-white text-base'>
+                  <span className='text-gray-800 dark:text-white'>Others</span>
+                  <button
+                    type='button'
+                    aria-expanded={open === 'others'}
+                    aria-label='Toggle Others menu'
+                    onClick={() => showMenu('others')}
+                    className={`${sectionToggleButtonClass} ${open === 'others' ? 'rotate-180' : ''}`}
                   >
                     <NavItemDropdown />
-                  </span>
+                  </button>
                 </h4>
-                {open === 'others' &&
-                  otherItems.map((item: MenuItem, index: number) => (
-                    <Link
-                      href={item.href}
-                      key={index}
-                      target={item.target || '_self'}
-                      rel='noopener noreferrer'
-                      className='mb-4 block rounded-lg py-1 text-base font-medium leading-6 text-gray-700
-                      transition duration-150 ease-in-out hover:bg-gray-50'
-                      data-testid='MobileNav-others'
-                    >
-                      {item.text}
-                    </Link>
-                  ))}
+                {open === 'others' && (
+                  <div className='animate-in fade-in slide-in-from-top-2 duration-200'>
+                    {otherItems.map((item: MenuItem) => (
+                      <Link
+                        href={item.href}
+                        key={item.href}
+                        target={item.target || '_self'}
+                        rel='noopener noreferrer'
+                        className={`${otherLinkClass} ${otherLinkHoverClass}`}
+                        data-testid='MobileNav-others'
+                      >
+                        {item.text}
+                      </Link>
+                    ))}
+                  </div>
+                )}
               </div>
             </div>
           </div>
-          <div className='space-y-2 px-5 py-2' onClick={() => showMenu('language')}>
+          <div className='space-y-2 px-5 py-3 pb-6'>
             <div className='grid gap-4'>
               <div>
-                <h4 className='mb-4 flex justify-between font-medium text-gray-800'>
-                  <a className='flex cursor-pointer items-center gap-x-2'>
-                    Language <IconLanguage />
-                  </a>
-                  <span
-                    className={`inline-flex items-center transition-transform duration-200 ${
-                      open === 'language' ? 'rotate-180' : ''
-                    }`}
+                <h4 className='mb-4 flex justify-between font-semibold text-gray-800 dark:text-white text-base'>
+                  <span className='flex items-center gap-x-2 text-gray-800 dark:text-white'>
+                    Language <IconLanguage className='size-5' />
+                  </span>
+                  <button
+                    type='button'
+                    aria-expanded={open === 'language'}
+                    aria-label='Toggle Language menu'
+                    onClick={() => showMenu('language')}
+                    className={`${sectionToggleButtonClass} ${open === 'language' ? 'rotate-180' : ''}`}
                   >
                     <NavItemDropdown />
-                  </span>
+                  </button>
                 </h4>
-                {open === 'language' &&
-                  uniqueLangs.map((lang) => (
-                    <button
-                      key={lang.key}
-                      onClick={() => changeLanguage(lang.value.toLowerCase(), true)}
-                      className={`mb-4 ml-2 block w-full rounded-lg py-1 text-start text-sm
-                      font-medium leading-6 text-gray-700 transition duration-150 ease-in-out
-                      hover:bg-gray-50 ${
-                        currentLanguage.toLowerCase() === lang.text.toLowerCase() ? 'text-secondary-500' : ''
-                      }`}
-                      data-testid='MobileNav-language-item'
-                    >
-                      {langMap[lang.text.toLowerCase() as keyof typeof langMap] || lang.text}
-                    </button>
-                  ))}
+                {open === 'language' && (
+                  <div className='animate-in fade-in slide-in-from-top-2 duration-200'>
+                    {uniqueLangs.map((lang) => (
+                      <button
+                        key={lang.key}
+                        onClick={() => changeLanguage(lang.value.toLowerCase(), true)}
+                        className={`${languageButtonClass} ${languageButtonHoverClass} ${
+                          currentLanguage.toLowerCase() === lang.text.toLowerCase()
+                            ? 'text-secondary-600 dark:text-secondary-400 bg-secondary-100/70 dark:bg-gray-700/50'
+                            : 'text-gray-700 dark:text-gray-300'
+                        }`}
+                        data-testid='MobileNav-language-item'
+                      >
+                        {langMap[lang.text.toLowerCase() as keyof typeof langMap] || lang.text}
+                      </button>
+                    ))}
+                  </div>
+                )}
               </div>
             </div>
           </div>
diff --git a/components/navigation/NavBar.tsx b/components/navigation/NavBar.tsx
index c87dc3a3adfc..2cd7ee8b46c1 100644
--- a/components/navigation/NavBar.tsx
+++ b/components/navigation/NavBar.tsx
@@ -1,3 +1,4 @@
+import debounce from 'lodash/debounce';
 import Link from 'next/link';
 import type { NextRouter } from 'next/router';
 import { useRouter } from 'next/router';
@@ -8,6 +9,7 @@ import { defaultLanguage, i18nPaths, languages } from '@/utils/i18n';
 
 import { SearchButton } from '../AlgoliaSearch';
 import GithubButton from '../buttons/GithubButton';
+import DarkModeToggle from '../DarkModeToggle';
 import { isMobileDevice } from '../helpers/is-mobile';
 import { useOutsideClick } from '../helpers/use-outside-click';
 import IconLoupe from '../icons/Loupe';
@@ -38,8 +40,25 @@ export default function NavBar({ className = '', hideLogo = false }: NavBarProps
   const { pathname, query, asPath } = router;
   const [open, setOpen] = useState<'learning' | 'tooling' | 'community' | null>(null);
   const [mobileMenuOpen, setMobileMenuOpen] = useState<boolean>(false);
+  const [isScrolled, setIsScrolled] = useState<boolean>(false);
   const { i18n } = useTranslation();
 
+  // Adding Scroll listener
+  useEffect(() => {
+    const handleScroll = debounce(() => {
+      const scrollTop = window.scrollY;
+
+      setIsScrolled(scrollTop > 50);
+    }, 10);
+
+    window.addEventListener('scroll', handleScroll);
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+      handleScroll.cancel();
+    };
+  }, []);
+
   /**
    * Retrieves unique language options based on the current path and i18nPaths configuration.
    *
@@ -144,111 +163,125 @@ export default function NavBar({ className = '', hideLogo = false }: NavBarProps
   }, [asPath]);
 
   return (
-    <div className={`bg-white ${className} z-50`}>
-      <div className='flex w-full items-center justify-between py-6 lg:justify-start lg:space-x-2'>
-        {!hideLogo && (
-          <div className='lg:w-auto lg:flex-1'>
-            <div className='flex'>
-              <Link href='/' className='cursor-pointer' aria-label='AsyncAPI' data-testid='Navbar-logo'>
-                <AsyncAPILogo className='w-auto' />
-              </Link>
+    <>
+      <div
+        // eslint-disable-next-line max-len
+        className={`bg-white/60 transition-all duration-500 ease-in-out lg:rounded-xl backdrop-blur-lg z-50 
+          ${isScrolled ? 'py-4 shadow-md ring-1 dark:backdrop-blur-xl dark:bg-dark-card/60 ring-black/5 lg:rounded-xl' : 'mt-0 py-4 dark:bg-dark-background rounded-none'} ${className}`}
+      >
+        {/* <div
+        className={`bg-white/60 mx-auto fixed flex left-0 right-0 top-0 w-full z-[12] items-center justify-between max-w-[76rem] select-none transition-all duration-300 ease-spring ring-1 ring-black/5 bg-white/76 backdrop-blur-lg shadow-lg lg:rounded-full lg:mt-3 translate-y-0 ${className} z-50`}
+      ></div> */}
+        <div className='flex w-full items-center justify-between py-1 lg:justify-start lg:space-x-2'>
+          {!hideLogo && (
+            <div className='lg:w-auto lg:flex-1'>
+              <div className='flex'>
+                <Link href='/' className='cursor-pointer' aria-label='AsyncAPI' data-testid='Navbar-logo'>
+                  <AsyncAPILogo className={'w-auto transition-all duration-500 ease-in-out h-8'} />
+                </Link>
+              </div>
             </div>
-          </div>
-        )}
+          )}
 
-        <div className='-my-2 -mr-2 flex flex-row items-center justify-center lg:hidden' data-testid='Navbar-search'>
-          <SearchButton
-            className='flex items-center space-x-2 rounded-sm p-2 text-left text-gray-400 transition duration-150 ease-in-out hover:bg-gray-100 hover:text-gray-500 focus:bg-gray-100 focus:text-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-900'
-            aria-label='Open Search'
-          >
-            <IconLoupe />
-          </SearchButton>
-          <button
-            onClick={() => setMobileMenuOpen(true)}
-            type='button'
-            className='inline-flex items-center justify-center rounded-sm p-2 text-gray-400 transition duration-150 ease-in-out hover:bg-gray-100 hover:text-gray-500 focus:bg-gray-100 focus:text-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-900'
-            aria-label='Open mobile menu'
+          <div
+            className='-my-2 -mr-2 flex flex-row items-center justify-center gap-1 lg:hidden'
+            data-testid='Navbar-search'
           >
-            <svg className='size-6' stroke='currentColor' fill='none' viewBox='0 0 24 24'>
-              <title>Menu</title>
-              <path strokeLinecap='round' strokeLinejoin='round' strokeWidth='2' d='M4 6h16M4 12h16M4 18h16' />
-            </svg>
-          </button>
-        </div>
-
-        <nav
-          className='hidden w-full space-x-4 lg:flex lg:items-center lg:justify-end xl:space-x-8'
-          data-testid='Navbar-main'
-        >
-          <div className='relative' onMouseLeave={() => showMenu(null)} ref={learningRef}>
-            <NavItem
-              text='Docs'
-              href='/docs'
-              onClick={() => showOnClickMenu('learning')}
-              onMouseEnter={() => showMenu('learning')}
-              hasDropdown
-              isOpen={open === 'learning'}
-            />
-
-            {open === 'learning' && <LearningPanel />}
-          </div>
-
-          <div className='relative' onMouseLeave={() => showMenu(null)} ref={toolingRef}>
-            <NavItem
-              text='Tools'
-              href='/tools'
-              onClick={() => showOnClickMenu('tooling')}
-              onMouseEnter={() => showMenu('tooling')}
-              hasDropdown
-              isOpen={open === 'tooling'}
-            />
-            {open === 'tooling' && <ToolsPanel />}
-          </div>
-
-          <div className='relative' onMouseLeave={() => showMenu(null)} ref={communityRef}>
-            <NavItem
-              text='Community'
-              href='/community'
-              onClick={() => showOnClickMenu('community')}
-              onMouseEnter={() => showMenu('community')}
-              hasDropdown
-              isOpen={open === 'community'}
-            />
-            {open === 'community' && <CommunityPanel />}
-          </div>
-
-          {otherItems.map((item, index) => (
-            <NavItem href={item.href} key={index} text={item.text} target={item.target} className={item.className} />
-          ))}
-
-          <div className='justify-content flex flex-row items-center'>
             <SearchButton
-              className='mr-2 flex items-center space-x-2 rounded-sm p-2 text-left text-gray-400 transition duration-150 ease-in-out hover:bg-gray-100 hover:text-gray-500 focus:bg-gray-100 focus:text-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-900'
+              className='flex items-center rounded-lg p-2.5 text-gray-600 dark:text-gray-300 transition-all duration-200 ease-in-out hover:bg-gray-100 dark:hover:bg-gray-800 hover:scale-105 active:scale-95'
               aria-label='Open Search'
             >
               <IconLoupe />
             </SearchButton>
-
-            {/* // Language Picker Component */}
-            <LanguageSelect
-              options={uniqueLangs}
-              onChange={(value) => {
-                changeLanguage(value.toLowerCase(), true);
-              }}
-              className=''
-              selected={i18n.language ? i18n.language : 'en'}
-            />
-
-            <GithubButton
-              text='Star on GitHub'
-              href='https://github.com/asyncapi/spec'
-              className='ml-2 py-2'
-              inNav={true}
-            />
+            <DarkModeToggle />
+            <button
+              onClick={() => setMobileMenuOpen(true)}
+              type='button'
+              className='inline-flex items-center justify-center rounded-lg p-2.5 text-gray-600 dark:text-gray-300 transition-all duration-200 ease-in-out hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none hover:scale-105 active:scale-95'
+              aria-label='Open Menu'
+            >
+              <svg className='size-6' stroke='currentColor' fill='none' viewBox='0 0 24 24'>
+                <title>Menu</title>
+                <path strokeLinecap='round' strokeLinejoin='round' strokeWidth='2' d='M4 6h16M4 12h16M4 18h16' />
+              </svg>
+            </button>
           </div>
-        </nav>
+
+          <nav
+            className='hidden w-full space-x-4 lg:flex lg:items-center lg:justify-end xl:space-x-8'
+            data-testid='Navbar-main'
+          >
+            <div className='relative' onMouseLeave={() => showMenu(null)} ref={learningRef}>
+              <NavItem
+                text='Docs'
+                href='/docs'
+                onClick={() => showOnClickMenu('learning')}
+                onMouseEnter={() => showMenu('learning')}
+                hasDropdown
+                isOpen={open === 'learning'}
+              />
+              {open === 'learning' && <LearningPanel />}
+            </div>
+
+            <div className='relative' onMouseLeave={() => showMenu(null)} ref={toolingRef}>
+              <NavItem
+                text='Tools'
+                href='/tools'
+                onClick={() => showOnClickMenu('tooling')}
+                onMouseEnter={() => showMenu('tooling')}
+                hasDropdown
+                isOpen={open === 'tooling'}
+              />
+              {open === 'tooling' && <ToolsPanel />}
+            </div>
+
+            <div className='relative' onMouseLeave={() => showMenu(null)} ref={communityRef}>
+              <NavItem
+                text='Community'
+                href='/community'
+                onClick={() => showOnClickMenu('community')}
+                onMouseEnter={() => showMenu('community')}
+                hasDropdown
+                isOpen={open === 'community'}
+              />
+              {open === 'community' && <CommunityPanel />}
+            </div>
+
+            {otherItems.map((item, index) => (
+              <NavItem href={item.href} key={index} text={item.text} target={item.target} className={item.className} />
+            ))}
+
+            <div className='justify-content flex flex-row items-center'>
+              <SearchButton
+                className='mr-2 flex items-center space-x-2 rounded-md p-2 text-left text-zinc-700 dark:text-dark-text dark:hover:text-dark-heading  text-opacity-75 transition duration-150 ease-in-out hover:bg-gray-100 dark:hover:bg-primary-500 hover:text-gray-800 focus:bg-gray-100 focus:text-gray-500 focus:outline-none'
+                aria-label='Open Search'
+              >
+                <IconLoupe />
+              </SearchButton>
+
+              {/* // Language Picker Component */}
+              <LanguageSelect
+                options={uniqueLangs}
+                onChange={(value) => {
+                  changeLanguage(value.toLowerCase(), true);
+                }}
+                className=''
+                selected={i18n.language ? i18n.language : 'en'}
+              />
+
+              <GithubButton
+                text='Star on GitHub'
+                href='https://github.com/asyncapi/spec'
+                className='ml-2 py-2'
+                inNav={true}
+              />
+              <DarkModeToggle />
+            </div>
+          </nav>
+        </div>
       </div>
 
+      {/* </div> */}
       {/* Mobile menu, show/hide based on mobile menu state. */}
       {mobileMenuOpen && (
         <MobileNavMenu
@@ -258,6 +291,6 @@ export default function NavBar({ className = '', hideLogo = false }: NavBarProps
           changeLanguage={changeLanguage}
         />
       )}
-    </div>
+    </>
   );
 }
diff --git a/components/navigation/NavItem.tsx b/components/navigation/NavItem.tsx
index 5b80df7b6f49..fb5cdd52425c 100644
--- a/components/navigation/NavItem.tsx
+++ b/components/navigation/NavItem.tsx
@@ -43,8 +43,10 @@ export default function NavItem({
         href={href}
         target={target}
         rel='noopener noreferrer'
-        className={`${className} rounded-sm font-body text-base font-semibold leading-6 text-gray-700 transition duration-150 ease-in-out hover:text-gray-900 focus:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-900 ${
-          router.pathname.startsWith(href) ? 'text-black' : 'text-gray-700'
+        className={`${className} font-body text-base sm:text-sm/6 font-semibold leading-6  border-b border-transparent dark:hover:border-white hover:border-black transition duration-150 ease-in-out focus:text-black focus:outline-none ${
+          router.pathname.startsWith(href)
+            ? 'text-black dark:text-dark-text'
+            : 'text-zinc-800 dark:text-dark-text text-opacity-85 dark:hover:text-dark-heading hover:text-black'
         }`}
       >
         {text}
@@ -57,7 +59,7 @@ export default function NavItem({
   const attrs = {
     onClick,
     onMouseEnter,
-    className: `${className} rounded-sm group inline-flex items-center space-x-2 font-body text-base leading-6 font-semibold hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-900 focus:text-gray-900 tracking-heading transition ease-in-out duration-150`
+    className: `${className} group inline-flex items-center space-x-0 font-body text-base sm:text-sm leading-6 font-semibold  focus:outline-none focus:text-black tracking-heading transition ease-in-out duration-150`
   };
 
   if (href) {
@@ -65,12 +67,11 @@ export default function NavItem({
       <Link
         href={href}
         {...attrs}
-        className={`${attrs.className} ${router.pathname.startsWith(href) ? 'text-black' : 'text-gray-700'}`}
+        className={`${attrs.className} ${router.pathname.startsWith(href) ? 'text-black dark:text-dark-text' : 'text-zinc-800 dark:text-dark-text text-opacity-85 dark:hover:text-dark-heading hover:text-black'}`}
         target={target}
         data-testid='NavItem-Link'
       >
-        <span>{text}</span>
-
+        <span className='border-b border-transparent dark:hover:border-white hover:border-black'>{text}</span>
         {hasDropdown && (
           <span
             className={`inline-flex size-5 items-center justify-center transition-transform duration-200 ${
@@ -85,7 +86,7 @@ export default function NavItem({
   }
 
   return (
-    <button type='button' {...attrs} className={`${attrs.className} text-gray-700`}>
+    <button type='button' {...attrs} className={`${attrs.className} text-gray-900 dark:text-dark-text`}>
       <span>{text}</span>
 
       {hasDropdown && (
diff --git a/components/navigation/StickyNavbar.tsx b/components/navigation/StickyNavbar.tsx
index 32fe50aa12eb..88e34db6a273 100644
--- a/components/navigation/StickyNavbar.tsx
+++ b/components/navigation/StickyNavbar.tsx
@@ -1,5 +1,6 @@
+import debounce from 'lodash/debounce';
 import type { ReactNode } from 'react';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 interface StickyNavbarProps {
   children: ReactNode;
@@ -13,8 +14,29 @@ interface StickyNavbarProps {
  * @param {string} [props.className=''] - Additional CSS classes for styling.
  */
 export default function StickyNavbar({ children, className = '' }: StickyNavbarProps) {
+  const [isScrolled, setIsScrolled] = useState<boolean>(false); // Adding Scroll listener
+
+  useEffect(() => {
+    const handleScroll = debounce(() => {
+      const scrollTop = window.scrollY;
+
+      setIsScrolled(scrollTop > 50); // Trigger after scrolling 50px
+    }, 10);
+
+    window.addEventListener('scroll', handleScroll);
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll); // Clean up
+      handleScroll.cancel();
+    };
+  }, []);
+
   return (
-    <div className={`sticky top-0 z-50 w-full border-b border-gray-300 bg-white ${className}`} data-testid='Sticky-div'>
+    <div
+      className={`sticky ${isScrolled ? 'dark:bg-transparent' : 'dark:bg-dark-background'} top-0 z-50 lg:pt-2 ${className}`}
+      style={{ transform: 'translateZ(0)', willChange: 'transform' }}
+      data-testid='Sticky-div'
+    >
       {children}
     </div>
   );
diff --git a/components/navigation/SubCategoryDocsNav.tsx b/components/navigation/SubCategoryDocsNav.tsx
index 2b72003a582a..3d205a68acde 100644
--- a/components/navigation/SubCategoryDocsNav.tsx
+++ b/components/navigation/SubCategoryDocsNav.tsx
@@ -50,8 +50,10 @@ export default function SubCategoryDocsNav({ subCategory, activeItem, onClick }:
         <DocsNavItem
           {...subCategory.item}
           activeSlug={activeItem}
-          defaultClassName={`font-body text-sm text-black leading-8 ${
-            subCategory.children ? 'hover:font-semibold' : 'hover:text-secondary-600'
+          defaultClassName={`font-body text-sm text-black dark:text-white leading-8 ${
+            subCategory.children
+              ? 'hover:font-semibold  dark:text-dark-text'
+              : 'dark:hover:text-secondary-600 hover:text-secondary-600'
           }`}
           inactiveClassName='font-regular'
           activeClassName={subCategory.children ? 'font-semibold' : 'text-secondary-600'}
@@ -66,7 +68,7 @@ export default function SubCategoryDocsNav({ subCategory, activeItem, onClick }:
                 <DocsNavItem
                   {...subItem}
                   activeSlug={activeItem}
-                  defaultClassName='font-body text-sm text-gray-700 leading-7 hover:text-secondary-600'
+                  defaultClassName='font-body text-sm text-gray-700 dark:text-dark-text leading-7 dark:hover:text-secondary-600 hover:text-secondary-600'
                   inactiveClassName='font-regular'
                   activeClassName='text-secondary-600'
                   onClick={onClick}
diff --git a/components/navigation/communityItems.tsx b/components/navigation/communityItems.tsx
index fa6b3ee05965..fa8ee8a34710 100644
--- a/components/navigation/communityItems.tsx
+++ b/components/navigation/communityItems.tsx
@@ -4,7 +4,6 @@ import IconAmbassador from '../icons/Ambassador';
 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';
@@ -66,17 +65,11 @@ const communityItems: CommunityItem[] = [
     description:
       'Just need a good first issue to start your contribution journey? or want to see what topics are hot in discussion?'
   },
-  {
-    icon: IconMeetings,
-    title: 'Events',
-    href: '/community/events',
-    description: 'See what events and meetings are organized under AsyncAPI umbrella and join one of them.'
-  },
   {
     icon: IconNewsroom,
-    title: 'Newsroom',
-    href: '/community/newsroom',
-    description: 'Get upto date with the recent activity in the initiative.'
+    title: 'Events & Updates',
+    href: '/community/events-and-updates',
+    description: 'Stay updated with AsyncAPI events, blogs, videos, and community news.'
   }
 ];
 
diff --git a/components/navigation/learningItems.tsx b/components/navigation/learningItems.tsx
index 2c58be59c6a9..b0e20a937394 100644
--- a/components/navigation/learningItems.tsx
+++ b/components/navigation/learningItems.tsx
@@ -21,56 +21,56 @@ const learningItems: LearningItem[] = [
   {
     href: '/docs/concepts',
     icon: IconRocket,
-    className: 'bg-secondary-200',
+    className: 'bg-primary-500',
     title: 'Concepts',
     description: 'Our Concepts section defines the concepts of AsyncAPI features and capabilities.'
   },
   {
     href: '/docs/tutorials',
     icon: IconGradCap,
-    className: 'bg-pink-100',
+    className: 'bg-primary-500',
     title: 'Tutorials',
     description: 'Our Tutorials section teaches beginner processes with AsyncAPI, guiding you from Point A to Point B.'
   },
   {
     href: '/docs/tools',
     icon: IconPlant,
-    className: 'bg-green-200',
+    className: 'bg-primary-500',
     title: 'Tools',
     description: 'Our Tools section documents the AsyncAPI tools ecosystem.'
   },
   {
     href: '/docs/guides',
     icon: IconGuide,
-    className: 'bg-primary-200',
+    className: 'bg-primary-500',
     title: 'Guides',
     description: "Our Guides section teaches AsyncAPI's capabilities at a high level."
   },
   {
     href: '/docs/reference',
     icon: IconPaper,
-    className: 'bg-yellow-200',
+    className: 'bg-primary-500',
     title: 'Reference',
     description: 'Our Reference section documents the AsyncAPI specification.'
   },
   {
     href: '/docs/migration',
     icon: IconMigration,
-    className: 'bg-blue-400',
+    className: 'bg-primary-500',
     title: 'Migration',
     description: 'Our migration guides on how to upgrade to newer AsyncAPI versions.'
   },
   {
     href: '/docs/community',
     icon: IconUsers,
-    className: 'bg-red-200',
+    className: 'bg-primary-500',
     title: 'Community',
     description: 'Our Community section documents the community guidelines and resources.'
   },
   {
     href: '/docs/reference/specification/v3.0.0-explorer',
     icon: IconExplorer,
-    className: 'bg-teal-200',
+    className: 'bg-primary-500',
     title: 'Specification Explorer',
     description: 'Simplifying our Specification JSON Schema like a pro.'
   }
diff --git a/components/newsroom/NewsroomBlogPosts.tsx b/components/newsroom/NewsroomBlogPosts.tsx
index 7e79c1fb5342..64f9419c4052 100644
--- a/components/newsroom/NewsroomBlogPosts.tsx
+++ b/components/newsroom/NewsroomBlogPosts.tsx
@@ -1,21 +1,12 @@
-import React, { useState } from 'react';
-import { A11y, Navigation } from 'swiper/modules';
-import { Swiper, SwiperSlide } from 'swiper/react';
+import React from 'react';
 
 import { getAllPosts } from '../../utils/api';
-import ArrowLeft from '../icons/ArrowLeft';
-import ArrowRight from '../icons/ArrowRight';
 import BlogPostItem from '../navigation/BlogPostItem';
-import { checkLastSnapIndex, useSwiperRef } from './swiper';
 
 /**
  * @description This component displays the latest blog posts.
  */
 export default function NewsroomBlogPosts() {
-  const [nextEl, nextElRef] = useSwiperRef();
-  const [prevEl, prevElRef] = useSwiperRef();
-  const [current, setCurrent] = useState<number>(0);
-
   const posts = getAllPosts()
     .blog.sort((i1, i2) => {
       const i1Date = new Date(i1.date);
@@ -26,50 +17,15 @@ export default function NewsroomBlogPosts() {
 
       return i2Date.valueOf() - i1Date.valueOf();
     })
-    .slice(0, 5);
-
-  const buttonClass = 'shadow-md rounded border mx-2 mb-2 focus:outline-none';
+    .slice(0, 3);
 
   return (
-    <div className='flex-col overflow-auto' data-testid='NewsroomBlog-main-div'>
-      <Swiper
-        modules={[Navigation, A11y]}
-        spaceBetween={8}
-        slidesPerView={1}
-        onSlideChange={(swiper) => setCurrent(swiper.snapIndex)}
-        navigation={{
-          prevEl,
-          nextEl
-        }}
-        breakpoints={{
-          640: {
-            slidesPerView: 2
-          }
-        }}
-      >
-        {posts.map((post, index) => (
-          <SwiperSlide key={index}>
-            <BlogPostItem post={post} className='min-w-full h-full px-2 pb-6' />
-          </SwiperSlide>
+    <div data-testid='NewsroomBlog-main-div'>
+      <ul className='grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3'>
+        {posts.map((post) => (
+          <BlogPostItem key={post.slug} post={post} />
         ))}
-      </Swiper>
-
-      <div className='justify-content-center md:justify-content-start ml-2 flex flex-row'>
-        <button
-          ref={prevElRef}
-          className={`${buttonClass} ml-0 px-6 py-3 ${current === 0 ? 'cursor-not-allowed border-gray-200 bg-white text-gray-200' : 'border-secondary-500  bg-secondary-100 text-secondary-500  hover:bg-secondary-500 hover:text-white'}`}
-          data-testid='Blog-Prev-button'
-        >
-          <ArrowLeft className='w-4' />
-        </button>
-        <button
-          ref={nextElRef}
-          className={`${buttonClass} px-4 py-1 ${checkLastSnapIndex(current) ? 'cursor-not-allowed border-gray-200 bg-white text-gray-200' : 'border-secondary-500  bg-secondary-100 text-secondary-500  hover:bg-secondary-500 hover:text-white'}`}
-          data-testid='Blog-Next-button'
-        >
-          <ArrowRight className='w-8' />
-        </button>
-      </div>
+      </ul>
     </div>
   );
 }
diff --git a/components/newsroom/NewsroomSection.tsx b/components/newsroom/NewsroomSection.tsx
index 7e660e69dfe4..0ecd482c6976 100644
--- a/components/newsroom/NewsroomSection.tsx
+++ b/components/newsroom/NewsroomSection.tsx
@@ -56,7 +56,7 @@ export default function NewsroomSection() {
         <div className='mt-7'>
           <Button
             text={t('newsroomSection.newsroomBtn')}
-            href='/community/newsroom'
+            href='/community/events-and-updates'
             data-testid='NewsroomSection-Link'
           />
         </div>
diff --git a/components/newsroom/NewsroomYoutube.tsx b/components/newsroom/NewsroomYoutube.tsx
index ced5fceedbe2..27162780c936 100644
--- a/components/newsroom/NewsroomYoutube.tsx
+++ b/components/newsroom/NewsroomYoutube.tsx
@@ -1,69 +1,28 @@
-import React, { useState } from 'react';
-import { A11y, Navigation } from 'swiper/modules';
-import { Swiper, SwiperSlide } from 'swiper/react';
+import React from 'react';
 
 import videoData from '../../config/newsroom_videos.json';
-import ArrowLeft from '../icons/ArrowLeft';
-import ArrowRight from '../icons/ArrowRight';
-import { checkLastSnapIndex, useSwiperRef } from './swiper';
 import YouTubeCard from './YouTubeCard';
 
-interface NewsroomYoutubeProps {
+type NewsroomYoutubeProps = Readonly<{
   className?: string;
-}
+}>;
 
 /**
- * Newsroom Youtube component displays a Swiper carousel of YouTubeCard components.
+ * Newsroom Youtube component displays a grid of YouTubeCard components.
  * @description This component displays the latest videos from the AsyncAPI YouTube channel.
  * @param {string} [props.className=''] - Additional CSS classes for styling.
  */
 export default function NewsroomYoutube({ className = '' }: NewsroomYoutubeProps) {
-  const [nextEl, nextElRef] = useSwiperRef();
-  const [prevEl, prevElRef] = useSwiperRef();
-  const [current, setCurrent] = useState<number>(0);
-
-  const buttonClass = 'shadow-md rounded border mx-2 mb-2 focus:outline-none';
+  // Only show the first 3 videos
+  const videos = videoData.slice(0, 3);
 
   return (
-    <div className={`flex-col overflow-auto ${className}`} data-testid='NewsroomYoutube-main'>
-      <Swiper
-        modules={[Navigation, A11y]}
-        spaceBetween={8}
-        slidesPerView={1}
-        onSlideChange={(swiper) => setCurrent(swiper.snapIndex)}
-        navigation={{
-          prevEl,
-          nextEl
-        }}
-        breakpoints={{
-          640: {
-            slidesPerView: 2
-          }
-        }}
-      >
-        {videoData.map((video, index) => (
-          <SwiperSlide key={index}>
-            <YouTubeCard video={video} />
-          </SwiperSlide>
+    <div className={className} data-testid='NewsroomYoutube-main'>
+      <ul className='grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3'>
+        {videos.map((video) => (
+          <YouTubeCard key={video.videoId} video={video} />
         ))}
-      </Swiper>
-
-      <div className='justify-content-center md:justify-content-start ml-2 flex flex-row'>
-        <button
-          ref={prevElRef}
-          className={`${buttonClass} ml-0 px-6 py-3 ${current === 0 ? 'cursor-not-allowed border-gray-200 bg-white text-gray-200' : 'border-secondary-500  bg-secondary-100 text-secondary-500  hover:bg-secondary-500 hover:text-white'}`}
-          data-testid='Youtube-Prev-button'
-        >
-          <ArrowLeft className='w-4' />
-        </button>
-        <button
-          ref={nextElRef}
-          className={`${buttonClass} px-4 py-1 ${checkLastSnapIndex(current) ? 'cursor-not-allowed border-gray-200 bg-white text-gray-200' : 'border-secondary-500  bg-secondary-100 text-secondary-500  hover:bg-secondary-500 hover:text-white'}`}
-          data-testid='Youtube-Next-button'
-        >
-          <ArrowRight className='w-8' />
-        </button>
-      </div>
+      </ul>
     </div>
   );
 }
diff --git a/components/newsroom/YouTubeCard.tsx b/components/newsroom/YouTubeCard.tsx
index f7d9ffa2b1b6..4de71df4187d 100644
--- a/components/newsroom/YouTubeCard.tsx
+++ b/components/newsroom/YouTubeCard.tsx
@@ -6,7 +6,6 @@ import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
 import ArrowRight from '../icons/ArrowRight';
 import Heading from '../typography/Heading';
 import Paragraph from '../typography/Paragraph';
-import TextLink from '../typography/TextLink';
 
 interface YouTubeVideo {
   image_url: string;
@@ -25,34 +24,39 @@ interface YouTubeCardProps {
  */
 export default function YouTubeCard({ video }: YouTubeCardProps) {
   return (
-    <li className={'min-w-full h-full max-w-md rounded-lg px-2 pb-6'}>
-      <article className='h-full rounded-lg'>
-        <div
-          className={
-            'flex h-full cursor-pointer flex-col divide-y divide-gray-200 overflow-hidden rounded-lg border border-gray-200 shadow-md transition-all duration-300 ease-in-out hover:shadow-lg'
-          }
-        >
-          <img data-testid='YoutubeCard-img' src={video.image_url} alt='video' className='h-60 w-full object-cover' />
+    <li className='h-full list-none'>
+      <a href={`https://youtube.com/watch?v=${video.videoId}`} target='_blank' rel='noreferrer'>
+        <article className='h-full'>
+          <div className='flex h-full cursor-pointer flex-col overflow-hidden rounded-lg border border-gray-200 bg-white shadow-md transition-all duration-300 ease-in-out hover:shadow-lg dark:border-gray-800 dark:bg-dark-background'>
+            <img data-testid='YoutubeCard-img' src={video.image_url} alt='video' className='h-36 w-full object-cover' />
 
-          <div className='flex flex-1 flex-col justify-between bg-white p-6' data-testid='YoutubeCard-main'>
-            <div>
-              <Heading level={HeadingLevel.h3} typeStyle={HeadingTypeStyle.smSemibold} className='mt-2'>
-                {video.title}
-              </Heading>
-              <Paragraph typeStyle={ParagraphTypeStyle.md} className='mt-3 break-words'>
-                {video.description}
-              </Paragraph>
-            </div>
+            <div className='flex flex-1 flex-col justify-between p-4' data-testid='YoutubeCard-main'>
+              <div>
+                <Heading
+                  level={HeadingLevel.h3}
+                  typeStyle={HeadingTypeStyle.smSemibold}
+                  className='line-clamp-2 text-sm text-gray-900 dark:text-white'
+                >
+                  {video.title}
+                </Heading>
+                <Paragraph
+                  typeStyle={ParagraphTypeStyle.sm}
+                  className='mt-2 line-clamp-2 text-xs text-gray-600 dark:text-gray-300'
+                >
+                  {video.description}
+                </Paragraph>
+              </div>
 
-            <div className='mt-6 block'>
-              <TextLink href={`https://youtube.com/watch?v=${video.videoId}`} target='_blank'>
-                Watch on Youtube
-                <ArrowRight className='inline w-6' />
-              </TextLink>
+              <div className='mt-3 block border-t border-gray-200 pt-3 dark:border-gray-700'>
+                <span className='text-xs font-semibold text-cyan-600 hover:text-cyan-700 dark:text-cyan-400 dark:hover:text-cyan-300'>
+                  Watch on Youtube
+                  <ArrowRight className='ml-1 inline w-3' />
+                </span>
+              </div>
             </div>
           </div>
-        </div>
-      </article>
+        </article>
+      </a>
     </li>
   );
 }
diff --git a/components/roadmap/GoalCardRoadmapPage.tsx b/components/roadmap/GoalCardRoadmapPage.tsx
new file mode 100644
index 000000000000..1f4c2b8a8f43
--- /dev/null
+++ b/components/roadmap/GoalCardRoadmapPage.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+type GoalCardRoadmapPageProps = Readonly<{
+  icon: React.ComponentType<{ className?: string }>;
+  title: string;
+  description: string;
+}>;
+
+/**
+ * @description GoalCardRoadmapPage component displays a goal with an icon, title, and description.
+ * Used in the roadmap page to showcase AsyncAPI's goals.
+ */
+export default function GoalCardRoadmapPage({ icon: Icon, title, description }: GoalCardRoadmapPageProps) {
+  return (
+    <div className='bg-white dark:bg-dark-background rounded-xl p-8 shadow-sm hover:shadow-md transition-shadow'>
+      <div className='mb-6'>
+        <div className='inline-flex items-center justify-center w-14 h-14 bg-secondary-200 dark:bg-secondary-700 rounded-lg'>
+          <Icon className='w-8 h-8 text-gray-900 dark:text-gray-900' />
+        </div>
+      </div>
+      <h3 className='text-xl font-bold text-gray-900 dark:text-white mb-3'>{title}</h3>
+      <p className='text-gray-600 dark:text-gray-400 leading-relaxed'>{description}</p>
+    </div>
+  );
+}
diff --git a/components/roadmap/RoadmapColumn.tsx b/components/roadmap/RoadmapColumn.tsx
index ee17b7cf8028..a9b9d3a70d3a 100644
--- a/components/roadmap/RoadmapColumn.tsx
+++ b/components/roadmap/RoadmapColumn.tsx
@@ -14,6 +14,7 @@ interface IRoadmapColumnProps {
   colorClass: string;
   items?: RoadmapItem[];
   childrenCollapsed?: boolean;
+  className?: string;
 }
 
 /**
@@ -23,21 +24,23 @@ interface IRoadmapColumnProps {
  * @param {string} props.colorClass - The color class for styling.
  * @param {array} props.items - The array of items.
  * @param {boolean} props.childrenCollapsed - Whether children items are collapsed.
+ * @param {string} props.className - Optional className for custom styling.
  */
 export default function RoadmapColumn({
   title,
   description,
   colorClass,
   items = [],
-  childrenCollapsed = false
+  childrenCollapsed = false,
+  className = ''
 }: IRoadmapColumnProps): React.ReactElement {
   return (
     <div className='mt-8 lg:mt-4'>
-      <div className='p-4 text-center' data-testid='RoadmapColumn-heading'>
-        <Heading level={HeadingLevel.h3} typeStyle={HeadingTypeStyle.smSemibold}>
+      <div className={`p-4 text-center ${className}`} data-testid='RoadmapColumn-heading'>
+        <Heading level={HeadingLevel.h3} typeStyle={HeadingTypeStyle.smSemibold} className='dark:text-white'>
           {title}
         </Heading>
-        <Paragraph typeStyle={ParagraphTypeStyle.md} className='mt-2'>
+        <Paragraph typeStyle={ParagraphTypeStyle.md} className='mt-2 dark:text-gray-300'>
           {description}
         </Paragraph>
       </div>
diff --git a/components/roadmap/RoadmapItem.tsx b/components/roadmap/RoadmapItem.tsx
index 5777347e15ce..9a5b83261772 100644
--- a/components/roadmap/RoadmapItem.tsx
+++ b/components/roadmap/RoadmapItem.tsx
@@ -28,7 +28,7 @@ export default function RoadmapItem({ item, colorClass, showConnector = true, co
   const [isCollapsed, setIsCollapsed] = useState(collapsed);
   const isCollapsible = item.solutions !== undefined;
 
-  const connectorClasses = 'border-l-2 border-dashed border-gray-300';
+  const connectorClasses = 'border-l-2 border-dashed border-gray-300 dark:border-gray-600';
   const classNames = `pt-2 ${showConnector && connectorClasses}`;
 
   return (
@@ -36,7 +36,7 @@ export default function RoadmapItem({ item, colorClass, showConnector = true, co
       <div className='flex'>
         {showConnector && (
           <div className='flex flex-col justify-center'>
-            <div className='my-2 ml-0 mr-2 h-1 w-5 border-b-2 border-dashed border-gray-300'></div>
+            <div className='my-2 ml-0 mr-2 h-1 w-5 border-b-2 border-dashed border-gray-300 dark:border-gray-600'></div>
           </div>
         )}
         <Pill
@@ -53,7 +53,12 @@ export default function RoadmapItem({ item, colorClass, showConnector = true, co
       )}
 
       {!isCollapsed && item?.implementations?.length && (
-        <RoadmapList className='ml-9 pt-3' colorClass='bg-black' items={item.implementations} collapsed={false} />
+        <RoadmapList
+          className='ml-9 pt-3'
+          colorClass='bg-black dark:bg-gray-200'
+          items={item.implementations}
+          collapsed={false}
+        />
       )}
     </li>
   );
diff --git a/components/roadmap/RoadmapPill.tsx b/components/roadmap/RoadmapPill.tsx
index df805554b50f..783c1d9275f6 100644
--- a/components/roadmap/RoadmapPill.tsx
+++ b/components/roadmap/RoadmapPill.tsx
@@ -14,7 +14,7 @@ function DoneIcon() {
       viewBox='0 0 24 24'
       strokeWidth={1.5}
       stroke='currentColor'
-      className='-mt-0.5 mr-2 inline-block size-6 text-green-600'
+      className='-mt-0.5 mr-2 inline-block size-6 text-green-600 dark:text-green-400'
     >
       <path
         strokeLinecap='round'
@@ -68,7 +68,7 @@ export default function Pill({
           ></div>
           <div
             className={
-              'flex flex-1 items-center justify-between rounded-r-md border-y border-r border-gray-200 bg-white'
+              'flex flex-1 items-center justify-between rounded-r-md border-y border-r border-gray-200 dark:border-gray-700 bg-white dark:bg-dark-card'
             }
           >
             <div className='px-4 py-2 text-sm'>
@@ -76,7 +76,7 @@ export default function Pill({
                 href={item.url}
                 rel='noopener noreferrer'
                 onClick={() => !item.url && item.description && setIsDescriptionVisible(true)}
-                className={`block text-left font-medium text-gray-900 ${item.description || item.url ? 'cursor-pointer hover:text-gray-600' : 'cursor-default'}`}
+                className={`block text-left font-medium text-gray-900 dark:text-gray-100 ${item.description || item.url ? 'cursor-pointer hover:text-gray-600 dark:hover:text-gray-400' : 'cursor-default'}`}
               >
                 {item.done && (
                   <span title='Done!'>
@@ -88,7 +88,9 @@ export default function Pill({
             </div>
             {isCollapsible && (
               <button className='mr-2' onClick={onClickCollapse} data-testid='RoadmapItem-button'>
-                <IconArrowRight className={`h-4 ${isCollapsed ? 'rotate-90' : '-rotate-90'}`} />
+                <IconArrowRight
+                  className={`h-4 text-gray-900 dark:text-white ${isCollapsed ? 'rotate-90' : '-rotate-90'}`}
+                />
               </button>
             )}
           </div>
@@ -96,7 +98,7 @@ export default function Pill({
       </div>
       {isDescriptionVisible && (
         <Modal title={item.title} onModalClose={() => setIsDescriptionVisible(false)}>
-          <div className='prose'>{item.description}</div>
+          <div className='prose dark:prose-invert'>{item.description}</div>
         </Modal>
       )}
     </>
diff --git a/components/sponsors/DiamondSponsors.tsx b/components/sponsors/DiamondSponsors.tsx
new file mode 100644
index 000000000000..734130fc8a66
--- /dev/null
+++ b/components/sponsors/DiamondSponsors.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
+
+import Container from '../layout/Container';
+import Heading from '../typography/Heading';
+import PlatinumSponsors from './PlatinumSponsors';
+
+type SponsorsProps = Readonly<{
+  className: string;
+}>;
+
+/**
+ * This component displays Silver Sponsors.
+ * @param {SponsorsProps} props - The props for Sponsors component.
+ * @param {string} props.className - Additional CSS classes for styling.
+ */
+export default function DiamondSponsors({ className }: SponsorsProps): React.ReactNode {
+  return (
+    <div
+      className={`w-screen left-1/2 right-1/2 -ml-[50vw] -mr-[50vw] bg-sky-100 dark:bg-dark-card dark:text-gray-100 ${className}`}
+    >
+      <Heading
+        level={HeadingLevel.h3}
+        typeStyle={HeadingTypeStyle.lg}
+        className='mt-10 py-10 font-heading  font-semibold'
+      >
+        Diamond Sponsors
+        <footer aria-label='Our Sponsors'>
+          <Container className='pb-6 text-center' wide as='section'>
+            <PlatinumSponsors className='mt-4' showSupportBanner={false} />
+          </Container>
+        </footer>
+      </Heading>
+    </div>
+  );
+}
diff --git a/components/sponsors/PlatinumSponsors.tsx b/components/sponsors/PlatinumSponsors.tsx
index 824156759603..63b03ec32bc3 100644
--- a/components/sponsors/PlatinumSponsors.tsx
+++ b/components/sponsors/PlatinumSponsors.tsx
@@ -16,10 +16,10 @@ interface SponsorsProps {
  */
 export default function PlatinumSponsors({ className = '', showSupportBanner = true }: SponsorsProps): React.ReactNode {
   return (
-    <div className={`text-center ${className}`}>
-      <ul className='mb-4 flex flex-wrap items-center justify-center md:px-4'>
+    <div className={`text-center  ${className} `}>
+      <ul className='mb-4 flex flex-wrap  items-center justify-center md:px-4'>
         {platinumSponsors.map((sponsor, index) => (
-          <li key={index} className='w-2/3 sm:w-1/4 md:w-1/3 lg:w-1/5' data-testid='Sponsors-list'>
+          <li key={index} className='w-2/3 sm:w-1/4  md:w-1/3 lg:w-1/5' data-testid='Sponsors-list'>
             <a
               href={sponsor.website}
               target='_blank'
@@ -28,7 +28,7 @@ export default function PlatinumSponsors({ className = '', showSupportBanner = t
               data-testid='Sponsors-link'
             >
               <SponsorImage
-                className={sponsor?.imageClass}
+                className={`${sponsor?.imageClass} rounded-lg p-2  dark:bg-dark-text bg-white`}
                 src={sponsor.imageSrc}
                 alt={sponsor.altText}
                 data-testid='Sponsors-img'
diff --git a/components/sponsors/SilverSponsors.tsx b/components/sponsors/SilverSponsors.tsx
index f1276bed8b13..059315351861 100644
--- a/components/sponsors/SilverSponsors.tsx
+++ b/components/sponsors/SilverSponsors.tsx
@@ -30,7 +30,7 @@ export default function SilverSponsors({ className = '' }: SilverSponsorsProps):
             <SponsorImage
               src={sponsor.imageSrc}
               alt={sponsor.altText}
-              className={sponsor.imageClass}
+              className={`${sponsor?.imageClass} rounded-lg p-2 dark:bg-dark-text bg-white`}
               data-testid='SilverSponsors-img'
             />
           </a>
diff --git a/components/sponsors/SilverSponsorsList.ts b/components/sponsors/SilverSponsorsList.ts
index 958467f6c666..35d1f85c49ee 100644
--- a/components/sponsors/SilverSponsorsList.ts
+++ b/components/sponsors/SilverSponsorsList.ts
@@ -6,34 +6,34 @@ export const Silversponsors: SponsorType[] = [
     website: 'https://bump.sh/asyncapi?utm_source=asyncapi&utm_medium=referral&utm_campaign=sponsor',
     altText: 'OpenAPI & AsyncAPI API docs - Bump.sh',
     imageSrc: '/img/sponsors/bumpsh.svg',
-    imageClass: 'inline-block sm:h-9'
+    imageClass: 'inline-block sm:h-20'
   },
   {
     name: 'Svix',
     website: 'https://www.svix.com/',
     altText: 'Svix',
     imageSrc: '/img/sponsors/svix_logo.svg',
-    imageClass: 'inline-block sm:h-9'
+    imageClass: 'inline-block sm:h-20'
   },
   {
     name: 'Aklivity',
     website: 'https://www.aklivity.io/',
     altText: 'Aklivity',
     imageSrc: '/img/sponsors/aklivity_logo.png',
-    imageClass: 'inline-block sm:h-9'
+    imageClass: 'inline-block sm:h-20'
   },
   {
     name: 'SmartBear',
     website: 'https://smartbear.com',
     altText: 'SmartBear',
     imageSrc: '/img/sponsors/smartbear_logo.png',
-    imageClass: 'inline-block sm:h-9'
+    imageClass: 'inline-block sm:h-20'
   },
   {
     name: 'Route4Me',
     website: 'https://route4me.com',
     altText: 'Best Route Planning and Route Optimization Software',
     imageSrc: '/img/sponsors/route4me_logo.png',
-    imageClass: 'inline-block sm:h-9'
+    imageClass: 'inline-block sm:h-20'
   }
 ];
diff --git a/components/tools/CategoryDropdown.tsx b/components/tools/CategoryDropdown.tsx
index 02d091008a0f..1bc04c0ae77f 100644
--- a/components/tools/CategoryDropdown.tsx
+++ b/components/tools/CategoryDropdown.tsx
@@ -18,7 +18,7 @@ const ToolsData = ToolsDataList as ToolsListData;
 export default function CategoryDropdown({ setopenCategory }: CategoryDropdownProps) {
   return (
     <div
-      className='absolute z-10 h-60 w-52 origin-top-right overflow-y-auto rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none lg:w-56'
+      className='absolute z-10 h-60 w-52 origin-top-right overflow-y-auto rounded-lg bg-white dark:bg-dark-card shadow-xl dark:shadow-2xl ring-1 ring-black/5 dark:ring-gray-700 focus:outline-none lg:w-56 border border-gray-200 dark:border-gray-700'
       role='menu'
       aria-orientation='vertical'
       aria-labelledby='menu-button'
@@ -33,7 +33,7 @@ export default function CategoryDropdown({ setopenCategory }: CategoryDropdownPr
                 <a
                   href={`#${categoryName}`}
                   key={index}
-                  className='block px-4 py-2 hover:bg-gray-100'
+                  className='block px-4 py-2 hover:bg-gray-100 dark:hover:bg-dark-background text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors duration-200'
                   data-testid='CategoryDropdown-link'
                 >
                   {categoryName}
diff --git a/components/tools/Checkbox.tsx b/components/tools/Checkbox.tsx
index 25b4bceb2c2a..0233ee324a15 100644
--- a/components/tools/Checkbox.tsx
+++ b/components/tools/Checkbox.tsx
@@ -24,14 +24,14 @@ const Checkbox = ({
   return (
     <div
       className={twMerge(
-        `border ${borderColor} ${bgColor} ${textColor} p-1 pb-0 rounded-2xl flex gap-1 cursor-pointer items-start ${checked ? `${checkedStateBgColor} ${checkedStateTextColor}` : ''}`
+        `border ${borderColor} dark:border-secondary-500 ${bgColor} dark:bg-gray-800 ${textColor} dark:text-secondary-400 p-1 pb-0 rounded-2xl flex gap-1 cursor-pointer items-start transition-all duration-200 hover:shadow-md ${checked ? `${checkedStateBgColor} dark:bg-secondary-700 ${checkedStateTextColor} dark:text-white` : ''}`
       )}
       onClick={handleClick}
     >
       {checked ? (
-        <img src='/img/illustrations/icons/CheckedIcon.svg' alt='checked' />
+        <img src='/img/illustrations/icons/CheckedIcon.svg' alt='checked' className='dark:invert' />
       ) : (
-        <img src='/img/illustrations/icons/UncheckedIcon.svg' alt='unchecked' />
+        <img src='/img/illustrations/icons/UncheckedIcon.svg' alt='unchecked' className='dark:invert dark:opacity-80' />
       )}
       <div className='-mt-px mb-px text-xs'>{name}</div>
     </div>
diff --git a/components/tools/Filters.tsx b/components/tools/Filters.tsx
index b3eb6f62544e..76e90c1d2235 100644
--- a/components/tools/Filters.tsx
+++ b/components/tools/Filters.tsx
@@ -15,9 +15,9 @@ import FiltersDisplay from './FiltersDisplay';
 import FiltersDropdown from './FiltersDropdown';
 import Toggle from './Toggle';
 
-interface FiltersProps {
+type FiltersProps = Readonly<{
   setOpenFilter: React.Dispatch<React.SetStateAction<boolean>>;
-}
+}>;
 
 enum OpenedFiltersDropdownType {
   NONE = '',
@@ -126,10 +126,13 @@ export default function Filters({ setOpenFilter }: FiltersProps) {
 
   return (
     <ToolFilter>
-      <div className='z-20 rounded-lg border border-gray-300 bg-white py-4 shadow-md' data-testid='Filters-div'>
+      <div
+        className='z-20 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-dark-card py-4 shadow-lg dark:shadow-xl'
+        data-testid='Filters-div'
+      >
         <div className='mx-4 flex flex-col gap-2'>
           <div className='flex items-baseline justify-between gap-2'>
-            <div className='text-sm text-gray-500'>
+            <div className='text-sm text-gray-500 dark:text-gray-400'>
               <CardData
                 heading='PRICING'
                 data={Data.properties.filters.properties.hasCommercial.description}
@@ -140,32 +143,38 @@ export default function Filters({ setOpenFilter }: FiltersProps) {
                 setRead={setReadMore}
               />
             </div>
-            <div className='mb-0 flex cursor-pointer gap-0.5 text-xs hover:underline' onClick={undoChanges}>
+            <button
+              type='button'
+              className='mb-0 flex cursor-pointer gap-0.5 text-xs hover:underline text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors'
+              onClick={undoChanges}
+            >
               Undo Changes
-            </div>
+            </button>
           </div>
           <div className='flex gap-2' data-testid='Applied-filters'>
-            <div
+            <button
+              type='button'
               className={twMerge(
-                `bg-gray-200 px-4 py-2 flex gap-1 rounded-md hover:bg-secondary-100 border hover:border-secondary-500 cursor-pointer ${checkPaid === 'free' ? 'bg-secondary-100 border-secondary-500' : ''}`
+                `bg-gray-200 dark:bg-gray-700 px-4 py-2 flex gap-1 rounded-md hover:bg-secondary-100 dark:hover:bg-secondary-900/50 border hover:border-secondary-500 dark:hover:border-secondary-400 cursor-pointer transition-all dark:text-gray-300 ${checkPaid === 'free' ? 'bg-secondary-100 dark:bg-secondary-900/50 border-secondary-500 dark:border-secondary-400' : ''}`
               )}
               onClick={() => (checkPaid === 'free' ? setCheckPaid('all') : setCheckPaid('free'))}
             >
-              <div className='text-sm'>Open Source</div>
-              <img src='/img/illustrations/icons/FreeIcon.svg' alt='Free' />
-            </div>
-            <div
-              className={`flex cursor-pointer gap-1 rounded-md border bg-gray-200 px-4 py-2 hover:border-secondary-500 hover:bg-secondary-100 ${checkPaid === 'paid' ? 'border-secondary-500 bg-secondary-100' : ''}`}
+              <span className='text-sm'>Open Source</span>
+              <img src='/img/illustrations/icons/FreeIcon.svg' alt='Free' className='dark:invert' />
+            </button>
+            <button
+              type='button'
+              className={`flex cursor-pointer gap-1 rounded-md border bg-gray-200 dark:bg-gray-700 px-4 py-2 hover:border-secondary-500 dark:hover:border-secondary-400 hover:bg-secondary-100 dark:hover:bg-secondary-900/50 transition-all dark:text-gray-300 ${checkPaid === 'paid' ? 'border-secondary-500 dark:border-secondary-400 bg-secondary-100 dark:bg-secondary-900/50' : ''}`}
               onClick={() => (checkPaid === 'paid' ? setCheckPaid('all') : setCheckPaid('paid'))}
             >
-              <div className='text-sm'>Commercial</div>
-              <img src='/img/illustrations/icons/PaidIcon.svg' alt='Paid' />
-            </div>
+              <span className='text-sm'>Commercial</span>
+              <img src='/img/illustrations/icons/PaidIcon.svg' alt='Paid' className='dark:invert' />
+            </button>
           </div>
         </div>
-        <hr className='my-4' />
+        <hr className='my-4 border-gray-200 dark:border-gray-700' />
         <div className='mx-4 flex flex-col gap-2'>
-          <div className='text-left text-sm text-gray-500'>
+          <div className='text-left text-sm text-gray-500 dark:text-gray-400'>
             <CardData
               heading='OWNERSHIP'
               data='It describes whether the tools are maintained by AsyncAPI organization or not.'
@@ -180,7 +189,7 @@ export default function Filters({ setOpenFilter }: FiltersProps) {
             <Toggle checked={checkOwner} setChecked={setCheckOwner} label='Show only AsyncAPI-owned tools' />
           </div>
         </div>
-        <hr className='my-4' />
+        <hr className='my-4 border-gray-200 dark:border-gray-700' />
         <div className='mx-4 flex flex-col gap-2' data-testid='Filters-Language-dropdown'>
           <CardData
             heading='LANGUAGE'
@@ -192,26 +201,27 @@ export default function Filters({ setOpenFilter }: FiltersProps) {
             setRead={setReadMore}
           />
           <div className='w-full'>
-            <div
+            <button
+              type='button'
               className={twMerge(
-                `px-4 py-2 flex justify-between rounded-lg border border-gray-400 w-full bg-gray-200 text-gray-700 shadow text-sm cursor-pointer ${openedFiltersDropown === OpenedFiltersDropdownType.LANGUAGE ? 'rounded-b-none' : ''}`
+                `px-4 py-2 flex justify-between rounded-lg border border-gray-400 dark:border-gray-600 w-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 shadow text-sm cursor-pointer transition-all ${openedFiltersDropown === OpenedFiltersDropdownType.LANGUAGE ? 'rounded-b-none' : ''}`
               )}
               onClick={() => toggleDropdown(OpenedFiltersDropdownType.LANGUAGE)}
             >
-              <div className='flex items-center text-dark'>
+              <span className='flex items-center text-dark dark:text-gray-300'>
                 {/* eslint-disable-next-line no-nested-ternary */}
                 {checkedLanguage.length > 0
                   ? checkedLanguage.length === 1
                     ? '1 option selected'
                     : `${checkedLanguage.length} options selected`
                   : 'Select Languages...'}
-              </div>
+              </span>
               <ArrowDown
-                className={`my-auto ${openedFiltersDropown === OpenedFiltersDropdownType.LANGUAGE ? 'rotate-180' : ''}`}
+                className={`my-auto transition-transform ${openedFiltersDropown === OpenedFiltersDropdownType.LANGUAGE ? 'rotate-180' : ''}`}
               />
-            </div>
+            </button>
             {openedFiltersDropown === OpenedFiltersDropdownType.LANGUAGE && (
-              <div className='w-auto overflow-x-auto rounded-b-lg border border-gray-400 bg-gray-200 duration-150'>
+              <div className='w-auto overflow-x-auto rounded-b-lg border border-gray-400 dark:border-gray-600 bg-gray-200 dark:bg-gray-700 duration-150'>
                 <FiltersDropdown
                   dataList={languageList}
                   checkedOptions={checkedLanguage}
@@ -222,7 +232,7 @@ export default function Filters({ setOpenFilter }: FiltersProps) {
             <FiltersDisplay checkedOptions={checkedLanguage} setCheckedOptions={setCheckedLanguage} />
           </div>
         </div>
-        <hr className='my-4' />
+        <hr className='my-4 border-gray-200 dark:border-gray-700' />
         <div className='mx-4 flex flex-col gap-2' data-testid='Filters-Technology-dropdown'>
           <CardData
             heading='TECHNOLOGY'
@@ -234,26 +244,27 @@ export default function Filters({ setOpenFilter }: FiltersProps) {
             setRead={setReadMore}
           />
           <div className='w-full'>
-            <div
+            <button
+              type='button'
               className={twMerge(
-                `px-4 py-2 flex justify-between rounded-lg border border-gray-400 w-full bg-gray-200 text-gray-700 shadow text-sm cursor-pointer ${openedFiltersDropown === OpenedFiltersDropdownType.TECHNOLOGY ? 'rounded-b-none' : ''}`
+                `px-4 py-2 flex justify-between rounded-lg border border-gray-400 dark:border-gray-600 w-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 shadow text-sm cursor-pointer transition-all ${openedFiltersDropown === OpenedFiltersDropdownType.TECHNOLOGY ? 'rounded-b-none' : ''}`
               )}
               onClick={() => toggleDropdown(OpenedFiltersDropdownType.TECHNOLOGY)}
             >
-              <div className='flex items-center text-dark'>
+              <span className='flex items-center text-dark dark:text-gray-300'>
                 {/* eslint-disable-next-line no-nested-ternary */}
                 {checkedTechnology.length > 0
                   ? checkedTechnology.length === 1
                     ? '1 option selected'
                     : `${checkedTechnology.length} options selected`
                   : 'Select Technologies...'}
-              </div>
+              </span>
               <ArrowDown
-                className={`my-auto ${openedFiltersDropown === OpenedFiltersDropdownType.TECHNOLOGY ? 'rotate-180' : ''}`}
+                className={`my-auto transition-transform ${openedFiltersDropown === OpenedFiltersDropdownType.TECHNOLOGY ? 'rotate-180' : ''}`}
               />
-            </div>
+            </button>
             {openedFiltersDropown === OpenedFiltersDropdownType.TECHNOLOGY && (
-              <div className='w-auto overflow-x-auto rounded-b-lg border border-gray-400 bg-gray-200 duration-150'>
+              <div className='w-auto overflow-x-auto rounded-b-lg border border-gray-400 dark:border-gray-600 bg-gray-200 dark:bg-gray-700 duration-150'>
                 <FiltersDropdown
                   dataList={technologyList}
                   checkedOptions={checkedTechnology}
@@ -264,7 +275,7 @@ export default function Filters({ setOpenFilter }: FiltersProps) {
             <FiltersDisplay checkedOptions={checkedTechnology} setCheckedOptions={setCheckedTechnology} />
           </div>
         </div>
-        <hr className='my-4' />
+        <hr className='my-4 border-gray-200 dark:border-gray-700' />
         <div className='mx-4 flex flex-col gap-2' data-testid='Filters-Category-dropdown'>
           <CardData
             heading='CATEGORY'
@@ -276,26 +287,27 @@ export default function Filters({ setOpenFilter }: FiltersProps) {
             setRead={setReadMore}
           />
           <div className='w-full'>
-            <div
+            <button
+              type='button'
               className={twMerge(
-                `px-4 py-2 flex justify-between rounded-lg border border-gray-400 w-full bg-gray-200 text-gray-700 shadow text-sm cursor-pointer ${openedFiltersDropown === OpenedFiltersDropdownType.CATEGORY ? 'rounded-b-none' : ''}`
+                `px-4 py-2 flex justify-between rounded-lg border border-gray-400 dark:border-gray-600 w-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 shadow text-sm cursor-pointer transition-all ${openedFiltersDropown === OpenedFiltersDropdownType.CATEGORY ? 'rounded-b-none' : ''}`
               )}
               onClick={() => toggleDropdown(OpenedFiltersDropdownType.CATEGORY)}
             >
-              <div className='flex items-center text-dark'>
+              <span className='flex items-center text-dark dark:text-gray-300'>
                 {/* eslint-disable-next-line no-nested-ternary */}
                 {checkedCategory.length > 0
                   ? checkedCategory.length === 1
                     ? '1 option selected'
                     : `${checkedCategory.length} options selected`
                   : 'Select Categories...'}
-              </div>
+              </span>
               <ArrowDown
-                className={`my-auto ${openedFiltersDropown === OpenedFiltersDropdownType.CATEGORY ? 'rotate-180' : ''}`}
+                className={`my-auto transition-transform ${openedFiltersDropown === OpenedFiltersDropdownType.CATEGORY ? 'rotate-180' : ''}`}
               />
-            </div>
+            </button>
             {openedFiltersDropown === OpenedFiltersDropdownType.CATEGORY && (
-              <div className='w-auto overflow-x-auto rounded-b-lg border border-gray-400 bg-gray-200 duration-150'>
+              <div className='w-auto overflow-x-auto rounded-b-lg border border-gray-400 dark:border-gray-600 bg-gray-200 dark:bg-gray-700 duration-150'>
                 <FiltersDropdown
                   dataList={categoryList}
                   checkedOptions={checkedCategory}
@@ -306,9 +318,9 @@ export default function Filters({ setOpenFilter }: FiltersProps) {
             <FiltersDisplay checkedOptions={checkedCategory} setCheckedOptions={setCheckedCategory} />
           </div>
         </div>
-        <hr className='my-4' />
-        <div className='mx-4 my-6 mb-0 w-auto' onClick={handleApplyFilters}>
-          <Button text='Apply Filters' className='w-full' />
+        <hr className='my-4 border-gray-200 dark:border-gray-700' />
+        <div className='mx-4 my-6 mb-0 w-auto'>
+          <Button text='Apply Filters' className='w-full' onClick={handleApplyFilters} />
         </div>
       </div>
     </ToolFilter>
diff --git a/components/tools/FiltersDisplay.tsx b/components/tools/FiltersDisplay.tsx
index 54be11a26153..f75ca7701a9f 100644
--- a/components/tools/FiltersDisplay.tsx
+++ b/components/tools/FiltersDisplay.tsx
@@ -38,16 +38,16 @@ export default function FiltersDisplay({ checkedOptions = [], setCheckedOptions
               <div
                 key={index}
                 className={twMerge(
-                  'hover:border-black border border-gray-600 text-gray-600 hover:text-black p-1 pb-0 rounded-2xl flex gap-1 items-start'
+                  'hover:border-gray-800 dark:hover:border-gray-400 border border-gray-600 dark:border-gray-500 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white p-1 pb-0 rounded-2xl flex gap-1 items-start transition-colors duration-200'
                 )}
               >
                 <div className='m-auto h-fit text-xs'>{items}</div>
                 <button
-                  className='mt-[-2px] rounded-full p-1 hover:bg-gray-100'
+                  className='mt-[-2px] rounded-full p-1 hover:bg-gray-100 dark:hover:bg-dark-background transition-colors duration-200'
                   onClick={(event) => handleClickOption(event, items, checkedOptions, setCheckedOptions)}
                   data-testid='Filters-Display-Button'
                 >
-                  <img src='/img/illustrations/icons/close-icon.svg' alt='close' width='10' />
+                  <img src='/img/illustrations/icons/close-icon.svg' alt='close' width='10' className='dark:invert' />
                 </button>
               </div>
             );
diff --git a/components/tools/Toggle.tsx b/components/tools/Toggle.tsx
index ee7066e7b900..56b6e319f268 100644
--- a/components/tools/Toggle.tsx
+++ b/components/tools/Toggle.tsx
@@ -23,10 +23,10 @@ const Toggle = ({
       />
       <div
         className={twMerge(
-          `w-11 h-6 ${bgColor} peer-focus:outline-none rounded-full peer after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all ${checked ? `after:translate-x-full after:border-white ${checkedStateBgColor}` : ''}`
+          `w-11 h-6 ${bgColor} dark:bg-gray-700 peer-focus:outline-none rounded-full peer after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 dark:after:border-gray-600 after:border after:rounded-full after:h-5 after:w-5 after:transition-all ${checked ? `after:translate-x-full after:border-white ${checkedStateBgColor} dark:bg-secondary-600` : ''}`
         )}
       ></div>
-      {label && <div className='ml-2 text-sm font-medium'>{label}</div>}
+      {label && <div className='ml-2 text-sm font-medium dark:text-gray-300'>{label}</div>}
     </label>
   );
 };
diff --git a/components/tools/ToolsCard.tsx b/components/tools/ToolsCard.tsx
index a03f01b84dac..d7dbe21e81cf 100644
--- a/components/tools/ToolsCard.tsx
+++ b/components/tools/ToolsCard.tsx
@@ -32,7 +32,7 @@ export default function ToolsCard({ toolData }: ToolsCardProp) {
     if (descriptionRef.current) {
       setIsTruncated(descriptionRef.current?.scrollHeight! > descriptionRef.current?.clientHeight!);
     }
-  }, [descriptionRef.current]);
+  }, []);
 
   let onGit = false;
 
@@ -49,13 +49,15 @@ export default function ToolsCard({ toolData }: ToolsCardProp) {
   });
 
   return (
-    <div className='flex h-auto flex-col rounded-lg border shadow-md'>
+    <div className='flex h-auto flex-col rounded-xl border border-gray-200 dark:border-gray-700 shadow-md dark:shadow-xl bg-white dark:bg-dark-card hover:shadow-xl dark:hover:shadow-2xl transition-all duration-300 hover:scale-[1.02] hover:border-gray-300 dark:hover:border-gray-600 overflow-hidden'>
       <div className='mb-6 px-6 pt-8'>
         <div className='flex flex-col gap-2'>
           <div className='flex w-full justify-between gap-4'>
-            <Heading typeStyle={HeadingTypeStyle.smSemibold}>{toolData.title}</Heading>
+            <Heading typeStyle={HeadingTypeStyle.smSemibold} className='dark:text-white'>
+              {toolData.title}
+            </Heading>
             <div
-              className='size-fit min-w-[5.3rem] rounded-md border border-green-600 bg-green-100 p-1 text-center text-xs text-green-600'
+              className='size-fit min-w-[5.3rem] rounded-lg border border-green-600 dark:border-green-500 bg-green-100 dark:bg-green-900/30 p-1 text-center text-xs text-green-700 dark:text-green-400 font-semibold shadow-sm'
               onMouseEnter={() =>
                 setTimeout(() => {
                   if (!visible.desc) setVisible({ ...visible, desc: true });
@@ -72,7 +74,7 @@ export default function ToolsCard({ toolData }: ToolsCardProp) {
               >
                 {toolData.filters?.hasCommercial === false ? 'Open Source' : 'Commercial'}
                 {visible.desc && (
-                  <span className='absolute -left-2/3 top-8 z-10 w-48 -translate-x-12 rounded border border-gray-200 bg-white px-2 py-1 text-left text-gray-700 shadow-md'>
+                  <span className='absolute -left-2/3 top-8 z-10 w-48 -translate-x-12 rounded-lg border border-gray-200 dark:border-gray-600 bg-white dark:bg-dark-card px-3 py-2 text-left text-gray-700 dark:text-gray-300 shadow-lg text-xs'>
                     {Data.properties.filters.properties.hasCommercial.description}
                   </span>
                 )}
@@ -80,7 +82,7 @@ export default function ToolsCard({ toolData }: ToolsCardProp) {
             </div>
           </div>
           <div className='relative'>
-            <Paragraph typeStyle={ParagraphTypeStyle.sm}>
+            <Paragraph typeStyle={ParagraphTypeStyle.sm} className='dark:text-gray-300'>
               <span
                 className={`w-full ${isTruncated ? 'cursor-pointer' : ''}`}
                 onMouseEnter={() =>
@@ -100,10 +102,10 @@ export default function ToolsCard({ toolData }: ToolsCardProp) {
 
             {showDescription && (
               <div
-                className='absolute top-0 z-10 w-full border border-gray-200 bg-white p-2 shadow-md'
+                className='absolute top-0 z-10 w-full border border-gray-200 dark:border-gray-600 bg-white dark:bg-dark-card p-3 shadow-xl dark:shadow-2xl rounded-lg'
                 onMouseLeave={() => setShowDescription(false)}
               >
-                <Paragraph typeStyle={ParagraphTypeStyle.sm} className=''>
+                <Paragraph typeStyle={ParagraphTypeStyle.sm} className='dark:text-gray-300'>
                   {toolData.description}
                 </Paragraph>
               </div>
@@ -111,14 +113,14 @@ export default function ToolsCard({ toolData }: ToolsCardProp) {
           </div>
         </div>
       </div>
-      <hr className='mx-6' />
+      <hr className='mx-6 border-gray-200 dark:border-gray-700' />
       <div className='grow'>
         {toolData.filters?.language || toolData?.filters?.technology?.length ? (
           <div className='my-6'>
             {toolData?.filters?.language?.length !== 0 && (
               <div className='mx-6 flex flex-col gap-2'>
                 <CardData
-                  className='text-sm'
+                  className='text-sm dark:text-gray-300'
                   heading='LANGUAGE'
                   data={Data.properties.filters.properties.language.description}
                   type='lang'
@@ -127,7 +129,7 @@ export default function ToolsCard({ toolData }: ToolsCardProp) {
                   read={readMore}
                   setRead={setReadMore}
                 />
-                <div className='flex gap-2'>
+                <div className='flex gap-2 flex-wrap'>
                   {toolData.filters?.language &&
                     toolData.filters?.language.map((item, index) => (
                       <Tag key={index} name={item.name} bgColor={item.color} borderColor={item.borderColor} />
@@ -138,7 +140,7 @@ export default function ToolsCard({ toolData }: ToolsCardProp) {
             {toolData.filters.technology?.length !== 0 && (
               <div className='mx-6 my-4 flex flex-col gap-2'>
                 <CardData
-                  className='text-sm'
+                  className='text-sm dark:text-gray-300'
                   heading='TECHNOLOGIES'
                   data={Data.properties.filters.properties.technology.description}
                   type='tech'
@@ -157,7 +159,7 @@ export default function ToolsCard({ toolData }: ToolsCardProp) {
             )}
           </div>
         ) : (
-          <div className='relative size-full p-8 text-center text-gray-700'>
+          <div className='relative size-full p-8 text-center text-gray-700 dark:text-gray-400'>
             <div className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'>
               {' '}
               No further details provided{' '}
@@ -167,59 +169,71 @@ export default function ToolsCard({ toolData }: ToolsCardProp) {
       </div>
       {(toolData?.links?.repoUrl || toolData?.links?.websiteUrl || toolData?.links?.docsUrl) && (
         <>
-          <hr className='' />
-          <div className='flex'>
+          <hr className='border-gray-200 dark:border-gray-700' />
+          <div className='flex divide-x divide-gray-200 dark:divide-gray-700'>
             {toolData.links.repoUrl &&
               (onGit ? (
                 <a
-                  className='w-full cursor-pointer border-x px-1 py-6 text-center hover:bg-gray-200'
+                  className='w-full cursor-pointer px-1 py-6 text-center hover:bg-gray-100 dark:hover:bg-dark-background transition-colors duration-200 group'
                   href={toolData.links.repoUrl}
                   target='_blank'
                   rel='noreferrer'
                   data-testid='ToolsCard-repoUrl'
                 >
-                  <div className='m-auto flex w-fit gap-2'>
-                    <img src='/img/logos/github-black.svg' alt='GitHub' className='w-5' />
-                    <div className='text-sm text-gray-700'>View Github</div>
+                  <div className='m-auto flex w-fit gap-2 items-center'>
+                    <img
+                      src='/img/logos/github-black.svg'
+                      alt='GitHub'
+                      className='w-5 dark:invert group-hover:scale-110 transition-transform duration-200'
+                    />
+                    <div className='text-sm text-gray-700 dark:text-gray-300 font-medium'>View Github</div>
                   </div>
                 </a>
               ) : (
                 <a
-                  className='w-full cursor-pointer border-x border-gray-200 px-1 py-6 text-center hover:bg-gray-200'
+                  className='w-full cursor-pointer px-1 py-6 text-center hover:bg-gray-100 dark:hover:bg-dark-background transition-colors duration-200 group'
                   href={toolData.links.repoUrl}
                   target='_blank'
                   rel='noreferrer'
                 >
-                  <div className='m-auto flex w-fit gap-2'>
-                    <div className='text-sm text-gray-700'>View Source Code</div>
+                  <div className='m-auto flex w-fit gap-2 items-center'>
+                    <div className='text-sm text-gray-700 dark:text-gray-300 font-medium'>View Source Code</div>
                   </div>
                 </a>
               ))}
             {toolData.links.websiteUrl && (
               <a
-                className='w-full cursor-pointer border-x border-gray-200 px-1 py-6 text-center hover:bg-gray-200'
+                className='w-full cursor-pointer px-1 py-6 text-center hover:bg-gray-100 dark:hover:bg-dark-background transition-colors duration-200 group'
                 href={toolData.links.websiteUrl}
                 target='_blank'
                 rel='noreferrer'
                 data-testid='ToolsCard-websiteUrl'
               >
-                <div className='m-auto flex w-fit gap-2'>
-                  <img src='/img/illustrations/icons/share.svg' alt='Share' className='w-5' />
-                  <div className='text-sm text-gray-700'>Visit Website</div>
+                <div className='m-auto flex w-fit gap-2 items-center'>
+                  <img
+                    src='/img/illustrations/icons/share.svg'
+                    alt='Share'
+                    className='w-5 dark:invert group-hover:scale-110 transition-transform duration-200'
+                  />
+                  <div className='text-sm text-gray-700 dark:text-gray-300 font-medium'>Visit Website</div>
                 </div>
               </a>
             )}
             {toolData.links.docsUrl && (
               <a
-                className='w-full cursor-pointer border-x border-gray-200 px-1 py-6 text-center hover:bg-gray-200'
+                className='w-full cursor-pointer px-1 py-6 text-center hover:bg-gray-100 dark:hover:bg-dark-background transition-colors duration-200 group'
                 href={toolData.links.docsUrl}
                 target='_blank'
                 rel='noreferrer'
                 data-testid='ToolsCard-docsUrl'
               >
-                <div className='m-auto flex w-fit gap-2'>
-                  <img src='/img/illustrations/icons/docs-icon.svg' alt='Docs' className='w-5' />
-                  <div className='text-sm text-gray-700'>Visit Docs</div>
+                <div className='m-auto flex w-fit gap-2 items-center'>
+                  <img
+                    src='/img/illustrations/icons/docs-icon.svg'
+                    alt='Docs'
+                    className='w-5 dark:invert group-hover:scale-110 transition-transform duration-200'
+                  />
+                  <div className='text-sm text-gray-700 dark:text-gray-300 font-medium'>Visit Docs</div>
                 </div>
               </a>
             )}
diff --git a/components/tools/ToolsDashboard.tsx b/components/tools/ToolsDashboard.tsx
index 8dae9bdd7afd..4711204f2a6a 100644
--- a/components/tools/ToolsDashboard.tsx
+++ b/components/tools/ToolsDashboard.tsx
@@ -176,14 +176,15 @@ export default function ToolsDashboard() {
         <div className='my-10 flex flex-wrap justify-between gap-4 lg:flex-nowrap'>
           <div className='flex h-auto w-[47%] gap-5 lg:w-1/5'>
             <div className='relative h-auto w-full' ref={filterRef as React.LegacyRef<HTMLDivElement>}>
-              <div
-                className='flex h-14 w-full cursor-pointer items-center justify-center gap-2 rounded-lg border border-gray-300 px-4 py-1 text-sm text-gray-700 shadow hover:border-gray-600 hover:shadow-md'
+              <button
+                type='button'
+                className='flex h-14 w-full cursor-pointer items-center justify-center gap-2 rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-dark-card bg-white px-4 py-1 text-sm text-gray-700 dark:text-gray-300 shadow-md dark:shadow-lg hover:border-gray-400 dark:hover:border-gray-500 hover:shadow-lg transition-all duration-300 hover:scale-[1.02]'
                 onClick={() => setOpenFilter(!openFilter)}
                 data-testid='ToolsDashboard-Filters-Click'
               >
                 <FilterIcon />
-                <div>Filter</div>
-              </div>
+                <span className='font-medium'>Filter</span>
+              </button>
               {openFilter && (
                 <button className='absolute top-16 z-20 min-w-[20rem]'>
                   <Filters setOpenFilter={setOpenFilter} />
@@ -193,14 +194,17 @@ export default function ToolsDashboard() {
           </div>
           <div className='flex h-auto w-[47%] gap-5 lg:w-1/5'>
             <div className='relative h-auto w-full' ref={categoryRef as React.LegacyRef<HTMLDivElement>}>
-              <div
-                className='flex h-14 w-full cursor-pointer items-center justify-center gap-2 rounded-lg border border-gray-300 px-4 py-1 text-sm text-gray-700 shadow hover:border-gray-600 hover:shadow-md'
+              <button
+                type='button'
+                className='flex h-14 w-full cursor-pointer items-center justify-center gap-2 rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-dark-card bg-white px-4 py-1 text-sm text-gray-700 dark:text-gray-300 shadow-md dark:shadow-lg hover:border-gray-400 dark:hover:border-gray-500 hover:shadow-lg transition-all duration-300 hover:scale-[1.02]'
                 onClick={() => setopenCategory(!openCategory)}
                 data-testid='ToolsDashboard-category'
               >
-                <div>Jump to Category</div>
-                <ArrowDown className={`my-auto ${openCategory ? 'rotate-180' : ''}`} />
-              </div>
+                <span className='font-medium'>Jump to Category</span>
+                <ArrowDown
+                  className={`my-auto transition-transform duration-300 ${openCategory ? 'rotate-180' : ''}`}
+                />
+              </button>
               {openCategory && (
                 <div className='absolute right-52 top-16 z-20'>
                   <CategoryDropdown setopenCategory={setopenCategory} />
@@ -208,10 +212,10 @@ export default function ToolsDashboard() {
               )}
             </div>
           </div>
-          <div className='flex h-14 w-full rounded-lg border border-gray-300 px-4 py-1 text-sm text-gray-700 shadow hover:border-gray-600 focus:border-gray-600 lg:w-4/5'>
-            <SearchIcon className='my-auto opacity-70' />
+          <div className='flex h-14 w-full rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-dark-card bg-white px-4 py-1 text-sm text-gray-700 dark:text-gray-300 shadow-md dark:shadow-lg hover:border-gray-400 dark:hover:border-gray-500 focus-within:border-gray-500 dark:focus-within:border-gray-400 focus-within:shadow-lg transition-all duration-300 lg:w-4/5'>
+            <SearchIcon className='my-auto opacity-70 dark:opacity-80' />
             <input
-              className='w-11/12 flex-1 border-none outline-none focus:ring-0'
+              className='w-11/12 flex-1 border-none outline-none focus:ring-0 bg-transparent dark:text-white dark:placeholder-gray-400'
               placeholder='Search by name'
               type='text'
               value={searchName}
@@ -219,28 +223,35 @@ export default function ToolsDashboard() {
             />
             {searchName && (
               <button
-                className='my-auto h-fit rounded-full p-2 hover:bg-gray-100'
+                className='my-auto h-fit rounded-full p-2 hover:bg-gray-100 dark:hover:bg-dark-background transition-colors duration-200'
                 onClick={() => setSearchName('')}
                 aria-label='Clear search'
               >
-                <img src='/img/illustrations/icons/close-icon.svg' alt='close' width='10' />
+                <img src='/img/illustrations/icons/close-icon.svg' alt='close' width='10' className='dark:invert' />
               </button>
             )}
           </div>
         </div>
         {isFiltered && (
-          <div className='mt-4 flex cursor-pointer items-center text-gray-600 hover:text-black' onClick={clearFilters}>
+          <button
+            type='button'
+            className='mt-4 flex cursor-pointer items-center text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors duration-200'
+            onClick={clearFilters}
+          >
             <Cross />
-            <span className='ml-3'>Clear Filters</span>
-          </div>
+            <span className='ml-3 font-medium'>Clear Filters</span>
+          </button>
         )}
         <div className='mt-0'>
           {checkToolsList ? (
             <ToolsList toolsListData={toolsList} />
           ) : (
             <div className='p-4'>
-              <img src='/img/illustrations/not-found.webp' alt='not found' className='m-auto w-1/2' />
-              <div className='text-center text-lg'> Sorry, we don&apos;t have tools according to your needs. </div>
+              <img src='/img/illustrations/not-found.webp' alt='not found' className='m-auto w-1/2 dark:opacity-80' />
+              <div className='text-center text-lg dark:text-gray-300'>
+                {' '}
+                Sorry, we don&apos;t have tools according to your needs.{' '}
+              </div>
             </div>
           )}
         </div>
diff --git a/components/tools/ToolsList.tsx b/components/tools/ToolsList.tsx
index 5ce95974d722..d00da927bfa0 100644
--- a/components/tools/ToolsList.tsx
+++ b/components/tools/ToolsList.tsx
@@ -24,12 +24,19 @@ export default function ToolsList({ toolsListData }: ToolsListProp) {
       {Object.keys(toolsListData).map((categoryName, index) => {
         if (toolsListData[categoryName].toolsList.length > 0) {
           return (
-            <div className='my-8' key={index} id={categoryName} ref={toolsListData[categoryName].elementRef}>
-              <Heading typeStyle={HeadingTypeStyle.mdSemibold} className='my-2'>
-                {categoryName}
-              </Heading>
-              <Paragraph typeStyle={ParagraphTypeStyle.md}>{toolsListData[categoryName].description}</Paragraph>
-              <hr className='my-8' />
+            <div className='my-12' key={index} id={categoryName} ref={toolsListData[categoryName].elementRef}>
+              <div className='mb-4'>
+                <Heading
+                  typeStyle={HeadingTypeStyle.mdSemibold}
+                  className='my-2 text-gray-900 dark:text-white font-bold'
+                >
+                  {categoryName}
+                </Heading>
+                <Paragraph typeStyle={ParagraphTypeStyle.md} className='text-gray-700 dark:text-gray-300'>
+                  {toolsListData[categoryName].description}
+                </Paragraph>
+              </div>
+              <hr className='my-6 border-gray-200 dark:border-gray-700' />
               <div className='flex grid-cols-3 flex-col gap-8 lg:grid'>
                 {toolsListData[categoryName].toolsList.map((tool, toolIndex) => (
                   <ToolsCard key={toolIndex} toolData={tool} />
diff --git a/components/typography/Heading.tsx b/components/typography/Heading.tsx
index 1c16402340b2..57dae41e3185 100644
--- a/components/typography/Heading.tsx
+++ b/components/typography/Heading.tsx
@@ -30,7 +30,7 @@ export interface HeadingProps {
 export default function Heading({
   typeStyle = HeadingTypeStyle.lg,
   level = HeadingLevel.h2,
-  textColor = 'text-primary-800',
+  textColor = 'text-primary-800 dark:text-white',
   className = '',
   children,
   id
@@ -40,6 +40,9 @@ export default function Heading({
   let classNames = '';
 
   switch (typeStyle) {
+    case HeadingTypeStyle.xxl:
+      classNames = `font-heading text-heading-lg md:text-heading-xxl font-bold tracking-heading  ${className || ''}`;
+      break;
     case HeadingTypeStyle.xl:
       classNames = `font-heading text-heading-md font-bold tracking-heading md:text-heading-xl ${className || ''}`;
       break;
@@ -64,6 +67,9 @@ export default function Heading({
     case HeadingTypeStyle.xsSemibold:
       classNames = `font-heading text-heading-xs font-semibold tracking-heading ${className || ''}`;
       break;
+    case HeadingTypeStyle.bodyLlg:
+      classNames = `font-heading text-body-llg tracking-body font-regular ${className || ''}`;
+      break;
     case HeadingTypeStyle.bodyLg:
       classNames = `font-heading text-body-lg tracking-body font-regular ${className || ''}`;
       break;
diff --git a/components/typography/Paragraph.tsx b/components/typography/Paragraph.tsx
index 17f8eadcce88..223067400f68 100644
--- a/components/typography/Paragraph.tsx
+++ b/components/typography/Paragraph.tsx
@@ -27,7 +27,7 @@ export interface ParagraphProps {
  */
 export default function Paragraph({
   typeStyle = ParagraphTypeStyle.lg,
-  textColor = 'text-gray-700',
+  textColor = 'text-gray-700 dark:text-gray-300',
   fontWeight = '',
   className = '',
   children
diff --git a/components/typography/TextLink.tsx b/components/typography/TextLink.tsx
index c8f2bb4a6281..16a0497031ef 100644
--- a/components/typography/TextLink.tsx
+++ b/components/typography/TextLink.tsx
@@ -21,7 +21,7 @@ export interface TextLinkProps {
 export default function TextLink({ href, className = '', target = '_blank', children, id }: TextLinkProps) {
   // eslint-disable-next-line max-len
   const classNames = twMerge(
-    `text-secondary-500 underline hover:text-gray-800 font-medium transition ease-in-out duration-300 ${className || ''}`
+    `text-gray-900 dark:text-dark-text hover:underline hover:text-gray-800 dark:hover:text-dark-heading font-medium transition ease-in-out duration-300 ${className || ''}`
   );
 
   return (
diff --git a/config/community-toolings-showcase.json b/config/community-toolings-showcase.json
new file mode 100644
index 000000000000..3714b2b23fd6
--- /dev/null
+++ b/config/community-toolings-showcase.json
@@ -0,0 +1,65 @@
+{
+  "go-asyncapi": {
+    "name": "go-asyncapi",
+    "displayName": "Go AsyncAPI",
+    "description": "This library helps to create AsyncAPI spec from your Go message structures. It uses reflection to translate Go structures in JSON Schema definitions and arrange them in AsyncAPI schema.",
+    "language": "Go",
+    "link": "https://github.com/swaggest/go-asyncapi",
+    "color": "border-cyan-400 text-cyan-600 dark:text-cyan-400 hover:bg-cyan-50 dark:hover:bg-cyan-900/20",
+    "badge": "Open Source"
+  },
+  "faststream": {
+    "name": "faststream",
+    "displayName": "FastStream",
+    "description": "A powerful and easy-to-use Python framework for building asynchronous services interacting with event streams such as Apache Kafka, RabbitMQ and NATS.",
+    "language": "Python",
+    "link": "https://faststream.ag2.ai",
+    "color": "border-cyan-400 text-cyan-600 dark:text-cyan-400 hover:bg-cyan-50 dark:hover:bg-cyan-900/20",
+    "badge": "Open Source"
+  },
+  "modelina": {
+    "name": "modelina",
+    "displayName": "AsyncAPI Modelina",
+    "description": "Generate payload models into Java, TypeScript, Go, etc, you name it, from AsyncAPI documents. This tool gives you full control over the models through high customization.",
+    "language": "TypeScript",
+    "link": "https://modelina.org",
+    "color": "border-cyan-400 text-cyan-600 dark:text-cyan-400 hover:bg-cyan-50 dark:hover:bg-cyan-900/20",
+    "badge": "Open Source"
+  },
+  "converter": {
+    "name": "converter",
+    "displayName": "Converter",
+    "description": "Converts old versions of AsyncAPI files into the latest version.",
+    "language": "TypeScript",
+    "link": "https://www.asyncapi.com/tools/converter",
+    "color": "border-green-400 text-green-600 dark:text-green-400 hover:bg-green-50 dark:hover:bg-green-900/20",
+    "badge": "Open Source"
+  },
+  "java-asyncapi": {
+    "name": "java-asyncapi",
+    "displayName": "Java AsyncAPI",
+    "description": "This tool stores modules, which simplifies interacting with AsyncAPI in jvm ecosystem.",
+    "language": "Java",
+    "link": "https://github.com/asyncapi/jasyncapi",
+    "color": "border-cyan-400 text-cyan-600 dark:text-cyan-400 hover:bg-cyan-50 dark:hover:bg-cyan-900/20",
+    "badge": "Open Source"
+  },
+  "kotlin-asyncapi": {
+    "name": "kotlin-asyncapi",
+    "displayName": "Kotlin AsyncAPI",
+    "description": "The Kotlin AsyncAPI project aims to provide convenience tools for generating and serving AsyncAPI documentation. The core of this project is a Kotlin DSL for building the specification in a typesafe way.",
+    "language": "Kotlin",
+    "link": "https://github.com/OpenFolder/kotlin-asyncapi",
+    "color": "border-cyan-400 text-cyan-600 dark:text-cyan-400 hover:bg-cyan-50 dark:hover:bg-cyan-900/20",
+    "badge": "Open Source"
+  },
+  "saunter": {
+    "name": "saunter",
+    "displayName": "Saunter",
+    "description": "Saunter is an AsyncAPI documentation generator for dotnet. Generates (and hosts) an AsyncAPI schema document from your code.",
+    "language": "C#",
+    "link": "https://github.com/tehmantra/saunter",
+    "color": "border-pink-500 text-pink-600 dark:text-pink-400 hover:bg-pink-50 dark:hover:bg-pink-900/20",
+    "badge": "Open Source"
+  }
+}
diff --git a/mdx-components.tsx b/mdx-components.tsx
index f628e70ea02e..1030d3892c1d 100644
--- a/mdx-components.tsx
+++ b/mdx-components.tsx
@@ -1,4 +1,5 @@
 import type { MDXComponents } from 'mdx/types';
+import { useId } from 'react';
 
 import { mdxComponents } from '@/components/MDX/MDX';
 
@@ -8,9 +9,11 @@ import { mdxComponents } from '@/components/MDX/MDX';
 // components from other libraries, and more.
 
 export function useMDXComponents(components: MDXComponents): MDXComponents {
+  const reactId = useId();
+
   return {
     // Allows customizing built-in components, e.g. to add styling.
-    ...mdxComponents,
+    ...mdxComponents(reactId),
     ...components
   };
 }
diff --git a/pages/[lang]/index.tsx b/pages/[lang]/index.tsx
index 9a054784b8ff..3ca359a9be2d 100644
--- a/pages/[lang]/index.tsx
+++ b/pages/[lang]/index.tsx
@@ -1,30 +1,21 @@
 import { useTranslation } from 'next-i18next';
 import React from 'react';
 
+import LinuxBanner from '@/components/campaigns/LinuxBanner';
 import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
 import { getStaticPaths, makeStaticProps } from '@/utils/getStatic';
 
 import Button from '../../components/buttons/Button';
 import GoogleCalendarButton from '../../components/buttons/GoogleCalendarButton';
 import ICSFileButton from '../../components/buttons/ICSFileButton';
-import SubscribeButton from '../../components/buttons/SubscribeButton';
-import Calendar from '../../components/Calendar';
 import Head from '../../components/Head';
 import Hero from '../../components/Hero';
 import Container from '../../components/layout/Container';
-import AdidasLogo from '../../components/logos/Adidas';
-import AxwayLogo from '../../components/logos/Axway';
-import SalesforceLogo from '../../components/logos/Salesforce';
-import SapLogo from '../../components/logos/SAP';
-import SlackLogo from '../../components/logos/Slack';
 import NewsletterSubscribe from '../../components/NewsletterSubscribe';
-import NewsroomSection from '../../components/newsroom/NewsroomSection';
-import Slack from '../../components/slack';
 import GoldSponsors from '../../components/sponsors/GoldSponsors';
 import PlatinumSponsors from '../../components/sponsors/PlatinumSponsors';
 import SilverSponsors from '../../components/sponsors/SilverSponsors';
 import SupportUs from '../../components/SupportUs/SupportUs';
-import Testimonial from '../../components/Testimonial';
 import Heading from '../../components/typography/Heading';
 import Paragraph from '../../components/typography/Paragraph';
 import TextLink from '../../components/typography/TextLink';
@@ -43,104 +34,49 @@ export default function HomePage() {
     <>
       <Head title='AsyncAPI Initiative for event-driven APIs' />
       <main id='main-content' className='scroll-mt-5'>
+        <LinuxBanner className='mt-[1px] pt-2 lg:py-1 ' />
         <Container wide>
           <Hero className='mb-24' />
         </Container>
 
-        <Container className='pb-12 text-center' wide as='section'>
-          <Heading level={HeadingLevel.h3} typeStyle={HeadingTypeStyle.lg} className='mb-4'>
-            {t('adopters.title')}
-          </Heading>
-          <Paragraph className='mb-20 mt-2 md:mx-auto md:w-2/3'>
-            {t('adopters.description')}
-            <TextLink href='https://github.com/asyncapi/website/issues/new' target='_blank'>
-              {t('adopters.linkText')}
-            </TextLink>
-          </Paragraph>
-          <ul className='md:grid md:grid-cols-2 md:gap-8 lg:grid-cols-5'>
-            <li className='flex justify-center'>
-              <AdidasLogo className='h-8 text-gray-400 hover:text-black' />
-            </li>
-            <li className='flex justify-center'>
-              <AxwayLogo className='group mt-12 h-14 text-gray-400 hover:text-black md:-mt-5 lg:-mt-5' />
-            </li>
-            <li className='flex justify-center'>
-              <SlackLogo className='group mt-12 h-10 text-gray-400 hover:text-black md:mt-2 lg:-mt-1' />
-            </li>
-            <li className='flex justify-center'>
-              <SalesforceLogo className='mt-12 h-16 text-gray-400 md:mt-2 lg:-mt-4' />
-            </li>
-            <li className='flex justify-center'>
-              <SapLogo className='mt-12 h-12 text-gray-400 md:mt-2 lg:-mt-2' />
-            </li>
-          </ul>
-        </Container>
-
-        <div className='mt-8 bg-dark py-12'>
+        <div className='mt-8 dark:bg-dark-card bg-dark py-12'>
           <Container wide as='section'>
             <NewsletterSubscribe dark />
           </Container>
         </div>
 
-        <Container className='py-12 text-center' wide as='section'>
+        <Container className='py-12 text-left' wide as='section'>
           <Heading level={HeadingLevel.h3} typeStyle={HeadingTypeStyle.lg} className='mb-4'>
             {t('community.title')}
           </Heading>
-          <Paragraph className='mt-2 md:mx-auto md:w-1/2'>{t('community.subtitle')}</Paragraph>
-          <div className='py-2 lg:py-12'>
-            <Container wide>
-              <div className='lg:flex'>
-                <div className='mt-10 lg:mt-0 lg:w-1/2'>
-                  <Slack />
-                </div>
-                <section className='lg:ml-12 lg:w-1/2 lg:max-w-xl lg:text-left'>
-                  <div className='mt-5'>
-                    <Heading level={HeadingLevel.h4} typeStyle={HeadingTypeStyle.mdSemibold}>
-                      {t('community.slackCTATitle')}
-                    </Heading>
-                    <Paragraph className='mt-2'>{t('community.slackCTADesc')}</Paragraph>
-                  </div>
-                  <div className='mt-5 flex justify-center lg:justify-start'>
-                    <Button className='w-full md:w-auto' text={t('community.slackCTABtn')} href='/slack-invite' />
-                  </div>
-                </section>
-              </div>
-
-              <div className='mt-12 lg:flex lg:flex-row-reverse'>
-                <section className='mt-10 lg:mt-0 lg:flex-1'>
-                  <Calendar size={2} />
-                </section>
-                <section className='lg:mr-12 lg:max-w-xl lg:text-left'>
-                  <div className='mt-5 lg:mr-12'>
-                    <Heading level={HeadingLevel.h3} typeStyle={HeadingTypeStyle.mdSemibold}>
-                      {t('community.meetingTitle')}
-                    </Heading>
-                    <Paragraph className='mt-2'>
-                      {t('community.meetingDesc')}
+          <Paragraph className='mt-2 text-left md:mx-auto dark:text-dark-text '>{t('community.subtitle')}</Paragraph>
+          <div className='mt-5 flex justify-center lg:justify-start'>
+            <Button
+              className='w-full text-center sm:w-auto whitespace-nowrap'
+              text={t('community.slackCTABtn')}
+              href='/slack-invite'
+            />
+          </div>
+          <div className='mt-8'>
+            <img src='/img/social/slack.webp' alt='Community Slack' className='rounded-lg shadow-md' />
+          </div>
+        </Container>
 
-                      <TextLink href='/community/meetings'>{t('community.meetingLink')}</TextLink>
-                    </Paragraph>
-                    <ul className='mt-5 justify-center md:flex'>
-                      <li>
-                        <GoogleCalendarButton href='https://calendar.google.com/calendar/u/3?cid=Y19xOXRzZWlnbG9tZHNqNm5qdWh2YnB0czExY0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t' />
-                      </li>
-                      <li>
-                        <SubscribeButton href='/community/meetings' className='mt-2 md:ml-2 md:mt-0' />
-                      </li>
-                      <li>
-                        <ICSFileButton
-                          href='https://calendar.google.com/calendar/ical/c_q9tseiglomdsj6njuhvbpts11c%40group.calendar.google.com/public/basic.ics'
-                          className='mt-2 md:ml-2 md:mt-0'
-                        />
-                      </li>
-                    </ul>
-                  </div>
-                </section>
-              </div>
-            </Container>
-            <Container wide>
-              <NewsroomSection />
-            </Container>
+        <Container className='mt-8 pb-20 text-center' wide as='section'>
+          <Heading level={HeadingLevel.h3} typeStyle={HeadingTypeStyle.lg} className='mb-4'>
+            {t('events.title')}
+          </Heading>
+          <Paragraph className='mx-auto mt-2 dark:text-dark-text  max-w-prose'>{t('events.description')}</Paragraph>
+          <Paragraph className='mx-auto mb-6 underline text-sky-400 max-w-prose'>{t('events.meetingTitle')}</Paragraph>
+          <div className='flex flex-col items-center justify-center gap-2 md:flex-row'>
+            <GoogleCalendarButton
+              href='https://calendar.google.com/calendar/u/3?cid=Y19xOXRzZWlnbG9tZHNqNm5qdWh2YnB0czExY0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t'
+              className='mt-2 md:ml-2 md:mt-0'
+            />
+            <ICSFileButton
+              href='https://calendar.google.com/calendar/ical/c_q9tseiglomdsj6njuhvbpts11c%40group.calendar.google.com/public/basic.ics'
+              className='mt-2 md:ml-2 md:mt-0'
+            />
           </div>
         </Container>
 
@@ -170,7 +106,7 @@ export default function HomePage() {
             <Heading level={HeadingLevel.h3} typeStyle={HeadingTypeStyle.mdSemibold} className='mb-4'>
               {t('sponsors.sponsorCTATitle')}
             </Heading>
-            <Paragraph className='mt-2 md:mx-auto md:w-1/2'>
+            <Paragraph className='mt-2 dark:text-dark-text md:mx-auto md:w-1/2'>
               {t('sponsors.sponsorCTADesc')}
               <TextLink href='https://opencollective.com/asyncapi' target='_blank'>
                 {t('sponsors.sponsorCTALink')}
@@ -182,7 +118,7 @@ export default function HomePage() {
           <Heading level={HeadingLevel.h3} typeStyle={HeadingTypeStyle.lg} className='mb-4'>
             {t('sponsors.supportedByTitle')}
           </Heading>
-          <Paragraph className='mx-auto mt-3 max-w-2xl pb-4 sm:mt-4'>
+          <Paragraph className='mx-auto mt-3 max-w-2xl pb-4 dark:text-dark-text sm:mt-4'>
             {t('sponsors.supportedByPretext')}
             <TextLink href='mailto:info@asyncapi.com' target='_blank'>
               {t('sponsors.supportedByLink')}
@@ -191,41 +127,6 @@ export default function HomePage() {
           </Paragraph>
           <SupportUs className='mt-4' showSupportBanner={false} />
         </Container>
-        <Container className='mt-8 pb-20 text-center' wide as='section'>
-          <Heading level={HeadingLevel.h3} typeStyle={HeadingTypeStyle.lg} className='mb-4'>
-            {t('testimonials.title')}
-          </Heading>
-          <ul className='mx-auto max-w-screen-xl md:grid md:grid-cols-2 md:px-6 lg:px-8'>
-            <Testimonial
-              className='md:pr-10 lg:pr-16'
-              text='Microservices underline the need for event-based communication in distributed architectures. AsyncAPI brings the richness of the REST API ecosystem to asynchronous APIs.'
-              authorAvatar='/img/testimonials/matt-mclarty.jpg'
-              authorName='Matt McLarty'
-              authorDescription='Global Leader of API Strategy at MuleSoft'
-            />
-            <Testimonial
-              className='md:pl-10 lg:pl-16'
-              text='Event-driven APIs need love too! AsyncAPI brings the many benefits of a machine/human-readable specification to these nuanced approaches.'
-              authorAvatar='/img/testimonials/bill-doerrfeld.jpg'
-              authorName='Bill Doerrfeld'
-              authorDescription='Editor in Chief at Nordic APIs'
-            />
-            <Testimonial
-              className='md:pr-10 lg:pr-16'
-              text="Developers need to be able to quickly and consistently create event-driven applications that provide business value and react to customer needs in realtime. I can't count how many times I've heard developers ask for OpenAPI/Swagger style tools for the asynchronous and event-driven world, and that is exactly what the AsyncAPI initiative is making a reality."
-              authorAvatar='/img/testimonials/jonathan-schabowsky.jpg'
-              authorName='Jonathan Schabowsky'
-              authorDescription='Sr. Architect, Office of the CTO at Solace'
-            />
-            <Testimonial
-              className='md:pl-10 lg:pl-16'
-              text='We’ve been focusing on event-driven APIs since 2014 and thank the AsyncAPI contributors every day for driving the community towards common standards.'
-              authorAvatar='/img/testimonials/eric-horesnyi.jpg'
-              authorName='Eric Horesnyi'
-              authorDescription='CEO at Streamdata.io'
-            />
-          </ul>
-        </Container>
       </main>
     </>
   );
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 1eefaecb9b39..4f8e8bc5c5bf 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -30,11 +30,12 @@ function MyApp({ Component, pageProps, router }: AppProps) {
           <StickyNavbar>
             <NavBar className='mx-auto block max-w-screen-xl px-4 sm:px-6 lg:px-8' />
           </StickyNavbar>
+
           <Layout>
             <Component {...pageProps} />
             <ScrollButton />
           </Layout>
-          <div className='mt-auto'>
+          <div className='mt-auto dark:bg-dark-background'>
             <Footer />
           </div>
         </div>
diff --git a/pages/_document.tsx b/pages/_document.tsx
index fecd327edff1..1b8cb71f5e04 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -17,6 +17,24 @@ class MyDocument extends Document {
     return (
       <Html lang={currentLocale as string}>
         <Head>
+          {/* Blocking script to apply dark mode before React hydrates - prevents flash */}
+          <script
+            dangerouslySetInnerHTML={{
+              __html: `
+                (function() {
+                  try {
+                    var theme = localStorage.getItem('theme');
+                    var systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+                    var shouldUseDark = theme === 'dark' || (!theme && systemPrefersDark);
+                    if (shouldUseDark) {
+                      document.documentElement.classList.add('dark');
+                    }
+                    document.documentElement.classList.add('transitions-enabled');
+                  } catch (e) {}
+                })();
+              `
+            }}
+          />
           {/* Load Work Sans font */}
           <link rel='preconnect' href='https://fonts.googleapis.com' />
           <link rel='preconnect' href='https://fonts.gstatic.com' crossOrigin='anonymous' />
diff --git a/pages/blog/index.tsx b/pages/blog/index.tsx
index f1d5dce33b60..31acc45e5d6e 100644
--- a/pages/blog/index.tsx
+++ b/pages/blog/index.tsx
@@ -1,12 +1,14 @@
 import { useRouter } from 'next/router';
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 
-import type { Filter as FilterType } from '@/components/helpers/applyFilter';
 import Empty from '@/components/illustrations/Empty';
+import Container from '@/components/layout/Container';
 import GenericLayout from '@/components/layout/GenericLayout';
 import Loader from '@/components/Loader';
 import BlogPostItem from '@/components/navigation/BlogPostItem';
 import Filter from '@/components/navigation/Filter';
+import NewsletterSubscribe from '@/components/NewsletterSubscribe';
+import PaginationComponent from '@/components/Pagination';
 import Heading from '@/components/typography/Heading';
 import Paragraph from '@/components/typography/Paragraph';
 import TextLink from '@/components/typography/TextLink';
@@ -36,9 +38,20 @@ export default function BlogIndexPage() {
       : []
   );
   const [isClient, setIsClient] = useState(false);
+  const [activeTab, setActiveTab] = useState<string>('All Posts');
+  const [currentPage, setCurrentPage] = useState(1);
+  const [postsPerPage, setPostsPerPage] = useState(9);
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const onFilter = useCallback((data: IBlogPost[], _query: FilterType) => setPosts(data), []);
+  const onFilter = useCallback(
+    (data: IBlogPost[]) => {
+      setPosts(data);
+      // Reset tab filter to "All Posts" when dropdown filters are applied
+      if (Object.keys(router.query).length > 0) {
+        setActiveTab('All Posts');
+      }
+    },
+    [router.query]
+  );
   const toFilter = [
     {
       name: 'type'
@@ -55,6 +68,7 @@ export default function BlogIndexPage() {
     router.push(`${router.pathname}`, undefined, {
       shallow: true
     });
+    setActiveTab('All Posts');
   };
   const showClearFilters = Object.keys(router.query).length > 0;
 
@@ -63,77 +77,180 @@ export default function BlogIndexPage() {
 
   useEffect(() => {
     setIsClient(true);
+
+    const updatePostsPerPage = () => {
+      if (window.innerWidth < 640) {
+        setPostsPerPage(5);
+      } else {
+        setPostsPerPage(9);
+      }
+    };
+
+    updatePostsPerPage();
+    window.addEventListener('resize', updatePostsPerPage);
+
+    return () => window.removeEventListener('resize', updatePostsPerPage);
   }, []);
 
+  // Filter posts by active tab (only if no dropdown filters are active)
+  const hasDropdownFilters = Object.keys(router.query).length > 0;
+  const filteredByTab = posts.filter((post) => {
+    // If dropdown filters are active, show all posts (dropdown takes priority)
+    if (hasDropdownFilters) return true;
+    // Otherwise, apply tab filter
+    if (activeTab === 'All Posts') return true;
+
+    return post.type.toLowerCase() === activeTab.toLowerCase();
+  });
+
+  // Calculate pagination
+  const totalPages = Math.ceil(filteredByTab.length / postsPerPage);
+  const indexOfLastPost = currentPage * postsPerPage;
+  const indexOfFirstPost = indexOfLastPost - postsPerPage;
+  const currentPosts = filteredByTab.slice(indexOfFirstPost, indexOfLastPost);
+
+  // Reset to page 1 when changing tabs, filters, or posts per page
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [activeTab, posts, postsPerPage]);
+
+  // Reset tab to "All Posts" when dropdown filters change
+  useEffect(() => {
+    if (hasDropdownFilters) {
+      setActiveTab('All Posts');
+    }
+  }, [router.query, hasDropdownFilters]);
+
+  const tabs = ['All Posts', 'Community', 'Conference', 'Communication', 'Engineering', 'Strategy'];
+
   return (
     <GenericLayout title='Blog' description={description} image={image} wide>
       <div className='relative px-4 pb-20 pt-8 sm:px-6 lg:px-8 lg:pb-28 lg:pt-12' id='main-content'>
-        <div className='absolute inset-0'>
-          <div className='h-1/3 bg-white sm:h-2/3'></div>
-        </div>
         <div className='relative mx-auto max-w-7xl'>
-          <div className='text-center'>
-            <Heading level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.lg}>
+          <div className='text-center px-4'>
+            <Heading
+              level={HeadingLevel.h1}
+              typeStyle={HeadingTypeStyle.xxl}
+              className='text-gray-900 dark:text-white text-3xl sm:text-4xl md:text-5xl lg:text-6xl'
+            >
               Welcome to our blog!
             </Heading>
-            <Paragraph className='mx-auto mt-3 max-w-2xl sm:mt-4'>
+            <Paragraph className='mx-auto mt-3 max-w-2xl text-gray-600 dark:text-gray-300 sm:mt-4 text-base sm:text-lg'>
               Find the latest and greatest stories from our community
             </Paragraph>
-            <Paragraph typeStyle={ParagraphTypeStyle.md} className='mx-auto mt-4 max-w-2xl'>
-              Want to publish a blog post? We love community stories.{' '}
-              <TextLink href='https://github.com/asyncapi/website/issues/new?template=blog.md' target='_blank'>
-                Submit yours!
+            <Paragraph
+              typeStyle={ParagraphTypeStyle.md}
+              className='mx-auto mt-3 max-w-2xl text-gray-600 dark:text-gray-300 text-sm sm:text-base'
+            >
+              Stay in touch! Get blog posts delivered directly to your{' '}
+              <TextLink
+                href='/newsletter'
+                className='text-primary-400 dark:text-primary-400 hover:text-primary-500 dark:hover:text-primary-300'
+              >
+                email
               </TextLink>
+              .
             </Paragraph>
-            <Paragraph typeStyle={ParagraphTypeStyle.md} className='mx-auto mt-1 max-w-2xl'>
-              We have an
-              <img
-                className='ml-1 text-primary-500 hover:text-primary-300'
-                style={{ display: 'inline' }}
-                src='/img/logos/rss.svg'
-                alt='RSS feed'
-                height='18px'
-                width='18px'
+          </div>
+          {/* Filters Section */}
+          <div className='mx-auto mt-8 max-w-7xl'>
+            <div className='flex flex-col gap-3 md:flex-row md:justify-center md:items-center'>
+              <Filter
+                data={navItems || []}
+                onFilter={onFilter}
+                className='mx-px w-full md:w-auto md:text-sm'
+                checks={toFilter}
               />
-              <a
-                href='/rss.xml'
-                className='ml-1 text-secondary-500 underline hover:text-gray-800 font-medium transition ease-in-out duration-300'
-              >
-                RSS Feed
-              </a>
-              {', too!'}
-            </Paragraph>
+              {showClearFilters && (
+                <button
+                  type='button'
+                  className='bg-none text-md rounded-md border border-gray-200 dark:border-gray-700 px-4 py-2 font-semibold tracking-heading text-gray-800 dark:text-gray-200 shadow-none transition-all duration-500 ease-in-out hover:text-gray-700 dark:hover:text-gray-300 w-full md:w-auto'
+                  onClick={clearFilters}
+                >
+                  <span className='inline-block'>Clear filters</span>
+                </button>
+              )}
+            </div>
           </div>
-          <div className='mx:64 mt-12 md:flex md:justify-center lg:justify-center'>
-            <Filter
-              data={navItems || []}
-              onFilter={onFilter}
-              className='md: mx-px mt-1 w-full md:mt-0 md:w-1/5 md:text-sm'
-              checks={toFilter}
-            />
-            {showClearFilters && (
-              <button
-                type='button'
-                className='bg-none text-md mt-1 rounded-md border border-gray-200 px-4 py-2 font-semibold tracking-heading text-gray-800 shadow-none transition-all duration-500 ease-in-out hover:text-gray-700 md:mt-0 md:py-0'
-                onClick={clearFilters}
+
+          {/* Category Tabs - Hidden on mobile */}
+          <div className='mt-6 px-4 hidden md:block'>
+            <div className='flex justify-center'>
+              <div
+                className={`inline-flex rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-dark-card p-1 ${hasDropdownFilters ? 'opacity-50' : ''}`}
               >
-                <span className='inline-block'>Clear filters</span>
-              </button>
-            )}
+                {tabs.map((tab) => (
+                  <button
+                    key={tab}
+                    onClick={() => !hasDropdownFilters && setActiveTab(tab)}
+                    disabled={hasDropdownFilters}
+                    className={`rounded-md px-3 py-2 text-sm font-medium transition-all duration-200 
+                      whitespace-nowrap ${
+                        activeTab === tab && !hasDropdownFilters
+                          ? 'bg-primary-500 text-white shadow-sm'
+                          : 'text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white'
+                      } ${hasDropdownFilters ? 'cursor-not-allowed' : 'cursor-pointer'}`}
+                  >
+                    {tab}
+                  </button>
+                ))}
+              </div>
+            </div>
           </div>
+
           <div>
-            {Object.keys(posts).length === 0 && (
+            {currentPosts.length === 0 && (
               <div className='mt-16 flex flex-col items-center justify-center'>
                 <Empty />
-                <p className='mx-auto mt-3 max-w-2xl text-xl leading-7 text-gray-500'>No post matches your filter</p>
+                <p className='mx-auto mt-3 max-w-2xl text-xl leading-7 text-gray-500 dark:text-gray-400'>
+                  No post matches your filter
+                </p>
               </div>
             )}
-            {Object.keys(posts).length > 0 && isClient && (
-              <ul className='mx-auto mt-12 grid max-w-lg gap-5 lg:max-w-none lg:grid-cols-3'>
-                {posts.map((post, index) => (
-                  <BlogPostItem key={index} post={post} />
-                ))}
-              </ul>
+            {currentPosts.length > 0 && isClient && (
+              <>
+                <ul className='mx-auto mt-12 grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 max-w-7xl'>
+                  {currentPosts.map((post, index) => (
+                    <BlogPostItem key={index} post={post} />
+                  ))}
+                </ul>
+
+                {/* Pagination */}
+                {totalPages > 1 && (
+                  <div className='mt-12 px-4'>
+                    {/* Mobile Pagination */}
+                    <div className='flex sm:hidden items-center justify-between gap-2'>
+                      <button
+                        onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
+                        disabled={currentPage === 1}
+                        className='flex-1 rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-dark-card px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-dark-background disabled:opacity-50 disabled:cursor-not-allowed'
+                      >
+                        Previous
+                      </button>
+                      <span className='text-sm text-gray-600 dark:text-gray-400 whitespace-nowrap'>
+                        Page {currentPage} of {totalPages}
+                      </span>
+                      <button
+                        onClick={() => setCurrentPage((prev) => Math.min(prev + 1, totalPages))}
+                        disabled={currentPage === totalPages}
+                        className='flex-1 rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-dark-card px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-dark-background disabled:opacity-50 disabled:cursor-not-allowed'
+                      >
+                        Next
+                      </button>
+                    </div>
+
+                    {/* Desktop/Tablet Pagination */}
+                    <div className='hidden sm:block'>
+                      <PaginationComponent
+                        currentPage={currentPage}
+                        totalPages={totalPages}
+                        onPageChange={setCurrentPage}
+                        variant='compact'
+                      />
+                    </div>
+                  </div>
+                )}
+              </>
             )}
             {Object.keys(posts).length > 0 && !isClient && (
               <div className='h-screen w-full'>
@@ -143,6 +260,13 @@ export default function BlogIndexPage() {
           </div>
         </div>
       </div>
+
+      {/* Newsletter Section */}
+      <div className='mt-8 bg-dark rounded-3xl py-12'>
+        <Container wide>
+          <NewsletterSubscribe dark />
+        </Container>
+      </div>
     </GenericLayout>
   );
 }
diff --git a/pages/casestudies/[id].tsx b/pages/casestudies/[id].tsx
index 9803be78ac1f..dfb562cdcaa8 100644
--- a/pages/casestudies/[id].tsx
+++ b/pages/casestudies/[id].tsx
@@ -2,7 +2,7 @@ import Link from 'next/link';
 import type { MDXRemoteSerializeResult } from 'next-mdx-remote';
 import { MDXRemote } from 'next-mdx-remote';
 import { serialize } from 'next-mdx-remote/serialize';
-import React from 'react';
+import React, { useId } from 'react';
 
 import { readYamlFile } from '@/components/helpers/read-yaml-file';
 import type { ICaseStudy } from '@/types/post';
@@ -160,7 +160,8 @@ const Index: React.FC<IndexProps> = ({
   additionalResources
 }) => {
   const image = '/img/social/website-card.jpg';
-  const allComponents = mdxComponents;
+  const reactId = useId();
+  const allComponents = mdxComponents(reactId);
   const contacts = casestudy.company.contact;
 
   const content = generateCaseStudyContent({
@@ -197,7 +198,7 @@ const Index: React.FC<IndexProps> = ({
         <CaseTOC
           toc={content}
           cssBreakingPoint='lg'
-          className='sticky top-20 mt-4 max-h-screen overflow-y-auto bg-blue-100 p-4 lg:top-24 lg:-mr-14 lg:mt-2 lg:max-h-(screen-16) lg:min-w-[265px] lg:max-w-72 lg:flex-1 lg:border-l lg:border-gray-200 lg:bg-transparent lg:pb-8 lg:pt-0'
+          className='sticky top-20 mt-4 max-h-screen overflow-y-auto bg-blue-100 p-4 lg:top-24 lg:-mr-14 lg:mt-2 lg:max-h-(screen-16) lg:min-w-[265px] lg:max-w-72 lg:flex-1 lg:border-l lg:border-gray-200 lg:dark:border-gray-700 lg:bg-transparent lg:pb-8 lg:pt-0'
         />
         <div className='case-study px-4 sm:px-6 lg:max-w-[812px] lg:flex-1 xl:max-w-5xl xl:px-0'>
           <div className='mt-10 flex flex-col items-center justify-between md:mt-20 md:flex-row'>
@@ -211,7 +212,7 @@ const Index: React.FC<IndexProps> = ({
                     <Heading typeStyle={HeadingTypeStyle.bodyLg}>
                       <Link
                         href={item.link}
-                        className='text-md font-medium leading-5 text-gray-900 hover:underline'
+                        className='text-md font-medium leading-5 text-gray-900 dark:text-gray-300 hover:underline'
                         target='_blank'
                       >
                         <span>
diff --git a/pages/casestudies/index.tsx b/pages/casestudies/index.tsx
index dace5cb0423f..ae8a756ce6bc 100644
--- a/pages/casestudies/index.tsx
+++ b/pages/casestudies/index.tsx
@@ -1,152 +1,307 @@
-import React from 'react';
+import Link from 'next/link';
+import React, { useState } from 'react';
+import { A11y, Navigation, Pagination as SwiperPagination } from 'swiper/modules';
+import { Swiper, SwiperSlide } from 'swiper/react';
 
-import type { ICaseStudies } from '@/types/post';
 import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
-import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
 
-import CaseStudyCard from '../../components/CaseStudyCard';
+import Button from '../../components/buttons/Button';
+import Container from '../../components/layout/Container';
 import GenericLayout from '../../components/layout/GenericLayout';
+import Pagination from '../../components/Pagination';
 import Heading from '../../components/typography/Heading';
 import Paragraph from '../../components/typography/Paragraph';
-import TextLink from '../../components/typography/TextLink';
+import AdoptersList from '../../config/adopters.json';
 import CaseStudiesList from '../../config/case-studies.json';
-import UsecasesList from '../../config/usecases.json';
 
 interface Resource {
-  type: string;
-  url: string;
+  title: string;
+  link: string;
 }
 
 interface Adopter {
-  name: string;
-  description: string;
+  companyName: string;
+  useCase: string;
   resources: Resource[];
 }
 
+const ITEMS_PER_PAGE = 5;
+
 /**
- * @description Renders the Case Studies page.
+ * @description Renders the Case Studies page featuring:
+ * - Featured case studies displayed in a horizontal card carousel (Swiper)
+ * - Paginated table of companies using AsyncAPI with their use cases
+ * - Responsive design with mobile navigation controls
  */
-export default function Casestudies() {
-  const description: string = 'Learn about different case studies based on AsyncAPI spec and related tools.';
-  const image: string = '/img/social/case-studies.webp';
-  const title: string = 'Case Studies';
+export default function CaseStudies() {
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const adopters = AdoptersList as Adopter[];
+  const totalPages = Math.ceil(adopters.length / ITEMS_PER_PAGE);
 
-  const AdoptersList = Object.values(UsecasesList.data) as Adopter[];
+  const paginatedAdopters = adopters.slice((currentPage - 1) * ITEMS_PER_PAGE, currentPage * ITEMS_PER_PAGE);
 
   return (
-    <GenericLayout title={title} description={description} image={image} wide>
-      <div
-        className='relative mx-auto max-w-xl px-4 py-10 sm:px-6 lg:max-w-screen-xl lg:px-8'
-        data-testid='CaseStudy-main'
-      >
-        <div className='grid lg:grid-cols-9 lg:gap-8 lg:text-center'>
-          <div className='col-span-5 col-start-3'>
-            <Heading level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.lg}>
-              {title}
+    <GenericLayout
+      title='Real Stories, Real Impact'
+      description='Discover how leading companies use AsyncAPI to transform their API architecture, streamline development, and accelerate innovation.'
+      image='/img/social/case-studies.webp'
+      wide
+    >
+      {/* Hero Section */}
+      <section className='relative bg-white dark:bg-dark-background py-12 sm:py-16 lg:py-20'>
+        <Container wide>
+          <div className='text-center max-w-4xl mx-auto'>
+            <div className='inline-block mb-4'>
+              <span className='bg-secondary-100 dark:bg-primary-500/20 text-secondary-600 dark:text-primary-300 px-3 py-1 rounded-full text-sm font-semibold'>
+                Case Studies
+              </span>
+            </div>
+
+            <Heading level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.xl} className='mb-6'>
+              Real Stories, Real Impact
             </Heading>
-            <Paragraph typeStyle={ParagraphTypeStyle.md} className='my-4 max-w-4xl'>
-              The best way to learn how to use AsyncAPI is not only through documentation that usually is focused on
-              recommendations and best practices. It is also good to confront with real-life case studies that explain
-              how people really use AsyncAPI and what are their flows.
-            </Paragraph>
-            <Paragraph typeStyle={ParagraphTypeStyle.md} className='my-4 max-w-4xl'>
-              Feel free to submit your case study. We have a template for you. For more details
-              <TextLink href='https://github.com/asyncapi/website/blob/master/README.md#case-studies' target='_blank'>
-                read our FAQ
-              </TextLink>
-              .
+
+            <Paragraph className='text-lg text-gray-600 dark:text-gray-400 mb-8 max-w-3xl mx-auto'>
+              Discover how leading companies use AsyncAPI to transform their API architecture, streamline development,
+              and accelerate innovation.
             </Paragraph>
-          </div>
-        </div>
-        <div data-testid='CaseStudy-card'>
-          <CaseStudyCard studies={CaseStudiesList as ICaseStudies} />
-        </div>
-
-        <div className='adopters'>
-          <div className='mt-8 grid lg:grid-cols-9 lg:gap-8 lg:text-center'>
-            <div className='col-span-5 col-start-3'>
-              <Heading level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.lg}>
-                Adopters
-              </Heading>
-              <Paragraph typeStyle={ParagraphTypeStyle.md} className='my-4 max-w-4xl'>
-                Feel free to{' '}
-                <a className='underline' href='https://github.com/asyncapi/website/blob/master/config/usecases.yaml'>
-                  submit a pull request
-                </a>{' '}
-                with information about how your company uses AsyncAPI. We know that writing an official case study might
-                be time consuming and requires too much internal paper work. Let&apos;s make sure we can at least
-                capture a use case that is already a great learning information for the community.
-              </Paragraph>
-              <Paragraph typeStyle={ParagraphTypeStyle.md} className='my-4 max-w-4xl'>
-                {UsecasesList.description}
-              </Paragraph>
+
+            <div className='flex flex-col sm:flex-row gap-4 justify-center items-center'>
+              <Button
+                text='Explore Case Studies'
+                href='#case-studies'
+                className='w-full sm:w-auto bg-primary-500 hover:bg-primary-600 text-white'
+              />
+              <Button
+                text='Explore Use Cases'
+                href='#use-cases'
+                className='w-full sm:w-auto bg-transparent border-2 border-secondary-500 text-secondary-500 hover:bg-secondary-50 hover:bg-secondary-500/10'
+              />
             </div>
           </div>
-        </div>
-
-        {/* Desktop Table View */}
-        <div className='hidden md:block overflow-x-auto'>
-          <table className='my-8 w-full border-collapse border table-auto'>
-            <thead>
-              <tr>
-                <th className='border p-2 font-bold'>Company name</th>
-                <th className='border-2 p-2 font-bold'>Use Case</th>
-                <th className='border-2 p-2 font-bold'>Resources</th>
-              </tr>
-            </thead>
-            <tbody>
-              {AdoptersList.map((entry: Adopter, index: number) => (
-                <tr key={index} data-testid='Adopters'>
-                  <td className='border-2 p-2'>{entry.name}</td>
-                  <td className='border-2 p-2'>{entry.description}</td>
-                  <td className='border-2 p-2'>
-                    <ul className='space-y-1'>
-                      {entry.resources.map((resource: Resource, resourceIndex: number) => (
-                        <li key={resourceIndex}>
-                          <a className='text-cyan-500 underline hover:text-cyan-600' href={resource.url}>
-                            {resource.type}
-                          </a>
-                        </li>
-                      ))}
-                    </ul>
-                  </td>
-                </tr>
+        </Container>
+      </section>
+
+      {/* Featured Case Studies Cards - Horizontal Carousel */}
+      <section id='case-studies' className='bg-secondary-100 rounded-lg dark:bg-dark-card py-12 sm:py-16 lg:py-20'>
+        <Container wide>
+          <div className='relative px-12'>
+            <Swiper
+              modules={[Navigation, SwiperPagination, A11y]}
+              spaceBetween={20}
+              slidesPerView={1}
+              navigation={{
+                prevEl: '.featured-swiper-button-prev',
+                nextEl: '.featured-swiper-button-next'
+              }}
+              pagination={{
+                clickable: true,
+                dynamicBullets: true
+              }}
+              breakpoints={{
+                640: {
+                  slidesPerView: 2,
+                  spaceBetween: 20
+                },
+                1024: {
+                  slidesPerView: 3,
+                  spaceBetween: 20
+                }
+              }}
+              className='featured-case-studies-swiper'
+            >
+              {CaseStudiesList.map((study) => (
+                <SwiperSlide key={study.id}>
+                  <Link href={`/casestudies/${study.id}`} className='group block h-full'>
+                    <div className='h-full bg-white dark:bg-dark-background border border-gray-200 dark:border-gray-700 rounded-2xl p-8 hover:shadow-xl transition-all duration-300 hover:-translate-y-1 min-h-[320px] flex flex-col'>
+                      {/* Company Logo */}
+                      <div className='flex items-center justify-center h-24 mb-8'>
+                        <img
+                          src={study.company.logo}
+                          alt={study.company.name}
+                          className='max-h-20 max-w-full object-contain'
+                        />
+                      </div>
+
+                      {/* Description */}
+                      <Paragraph className='text-gray-600 dark:text-gray-400 text-sm mb-8 line-clamp-4 flex-1'>
+                        {study.company.description}
+                      </Paragraph>
+
+                      {/* CTA Button */}
+                      <Button
+                        text='Read case study →'
+                        className='w-full bg-primary-500 hover:bg-primary-600 text-white group-hover:bg-primary-600'
+                      />
+                    </div>
+                  </Link>
+                </SwiperSlide>
               ))}
-            </tbody>
-          </table>
-        </div>
-
-        {/* Mobile Card View */}
-        <div className='md:hidden my-8 space-y-4'>
-          {AdoptersList.map((entry: Adopter, index: number) => (
-            <div
-              key={index}
-              className='border border-gray-300 rounded-lg p-4 bg-white shadow-sm'
-              data-testid='Adopters'
+            </Swiper>
+
+            {/* Custom Navigation Buttons - Only show on mobile/tablet when needed */}
+            <button
+              className='featured-swiper-button-prev absolute left-2 top-1/2 -translate-y-1/2 z-10 flex lg:hidden items-center justify-center text-primary-500 dark:text-primary-400 hover:text-primary-600 dark:hover:text-primary-300 transition-colors duration-200 disabled:opacity-30 disabled:cursor-not-allowed'
+              aria-label='Previous slide'
+            >
+              <svg
+                xmlns='http://www.w3.org/2000/svg'
+                fill='none'
+                viewBox='0 0 24 24'
+                strokeWidth={3}
+                stroke='currentColor'
+                className='w-8 h-8'
+              >
+                <path strokeLinecap='round' strokeLinejoin='round' d='M15.75 19.5L8.25 12l7.5-7.5' />
+              </svg>
+            </button>
+            <button
+              className='featured-swiper-button-next absolute right-2 top-1/2 -translate-y-1/2 z-10 flex lg:hidden items-center justify-center text-primary-500 dark:text-primary-400 hover:text-primary-600 dark:hover:text-primary-300 transition-colors duration-200 disabled:opacity-30 disabled:cursor-not-allowed'
+              aria-label='Next slide'
             >
-              <div className='mb-3'>
-                <h3 className='font-bold text-lg text-gray-900'>{entry.name}</h3>
+              <svg
+                xmlns='http://www.w3.org/2000/svg'
+                fill='none'
+                viewBox='0 0 24 24'
+                strokeWidth={3}
+                stroke='currentColor'
+                className='w-8 h-8'
+              >
+                <path strokeLinecap='round' strokeLinejoin='round' d='M8.25 4.5l7.5 7.5-7.5 7.5' />
+              </svg>
+            </button>
+          </div>
+        </Container>
+      </section>
+
+      {/* Trusted by Industry Leaders - Table Layout */}
+      <section id='use-cases' className='bg-white dark:bg-dark-background py-12 sm:py-16'>
+        <Container wide>
+          <div className='text-center mb-8'>
+            <Heading level={HeadingLevel.h2} typeStyle={HeadingTypeStyle.lg} className='mb-4'>
+              Trusted by Industry Leaders
+            </Heading>
+            <Paragraph className='text-gray-700 dark:text-gray-400 max-w-3xl mx-auto'>
+              See how different companies leverage AsyncAPI to solve complex integration challenges and drive digital
+              transformation.
+            </Paragraph>
+          </div>
+
+          {/* Table Header - Hidden on mobile, visible on tablet+ */}
+          <div className='hidden sm:block bg-primary-100 dark:bg-primary-500/60 rounded-t-xl px-6 py-4'>
+            <div className='grid grid-cols-12 gap-4'>
+              <div className='col-span-12 sm:col-span-2'>
+                <Heading
+                  level={HeadingLevel.h6}
+                  typeStyle={HeadingTypeStyle.xs}
+                  className='text-gray-700 dark:text-gray-300 font-semibold'
+                >
+                  Company
+                </Heading>
               </div>
-              <div className='mb-3'>
-                <h4 className='font-semibold text-sm text-gray-700 mb-1'>Use Case:</h4>
-                <p className='text-gray-600 text-sm'>{entry.description}</p>
+              <div className='col-span-12 sm:col-span-7'>
+                <Heading
+                  level={HeadingLevel.h6}
+                  typeStyle={HeadingTypeStyle.xs}
+                  className='text-gray-700 dark:text-gray-300 font-semibold'
+                >
+                  Use Case
+                </Heading>
               </div>
-              <div>
-                <h4 className='font-semibold text-sm text-gray-700 mb-2'>Resources:</h4>
-                <ul className='space-y-1'>
-                  {entry.resources.map((resource: Resource, resourceIndex: number) => (
-                    <li key={resourceIndex}>
-                      <a className='text-cyan-500 underline hover:text-cyan-600 text-sm' href={resource.url}>
-                        {resource.type}
-                      </a>
-                    </li>
-                  ))}
-                </ul>
+              <div className='col-span-12 sm:col-span-3 text-left sm:text-center'>
+                <Heading
+                  level={HeadingLevel.h6}
+                  typeStyle={HeadingTypeStyle.xs}
+                  className='text-gray-700 dark:text-gray-300 font-semibold'
+                >
+                  Resources
+                </Heading>
               </div>
             </div>
-          ))}
-        </div>
-      </div>
+          </div>
+
+          {/* Table Rows */}
+          <div className='space-y-4 mt-4'>
+            {paginatedAdopters.map((adopter, index) => (
+              <div
+                key={`${adopter.companyName}-${index}`}
+                className='border-2 border-primary-500/50 dark:border-primary-500/50 rounded-xl px-6 py-6 bg-white dark:bg-dark-card transition-all duration-300 hover:border-primary-500 dark:hover:border-primary-400 hover:shadow-2xl hover:-translate-y-1 hover:bg-primary-50/50 dark:hover:bg-primary-900/10 cursor-pointer'
+              >
+                <div className='grid grid-cols-12 gap-4 items-center'>
+                  {/* Company Name */}
+                  <div className='col-span-12 sm:col-span-2'>
+                    <Heading
+                      level={HeadingLevel.h6}
+                      typeStyle={HeadingTypeStyle.xs}
+                      className='font-semibold text-gray-900 dark:text-white'
+                    >
+                      {adopter.companyName}
+                    </Heading>
+                  </div>
+
+                  {/* Use Case */}
+                  <div className='col-span-12 sm:col-span-7'>
+                    <Paragraph className='text-sm text-gray-700 dark:text-gray-400'>{adopter.useCase}</Paragraph>
+                  </div>
+
+                  {/* Resources Button */}
+                  <div className='col-span-12 sm:col-span-3 flex justify-start sm:justify-center'>
+                    <Link href={adopter.resources[0]?.link || '#'} target='_blank' rel='noopener noreferrer'>
+                      <Button
+                        text='Learn More'
+                        className='bg-primary-500 hover:bg-primary-600 text-white px-6 py-2 w-full sm:w-auto'
+                      />
+                    </Link>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {/* Pagination */}
+          <div className='mt-6'>
+            <Pagination
+              currentPage={currentPage}
+              totalPages={totalPages}
+              onPageChange={setCurrentPage}
+              variant='default'
+            />
+          </div>
+        </Container>
+      </section>
+
+      {/* CTA Section with Gradient */}
+      <section
+        className='relative overflow-hidden py-12 sm:py-16 rounded-xl mx-4 sm:mx-6 lg:mx-8 mb-12'
+        style={{ background: 'linear-gradient(90deg, #8B5CF6 0%, #7C3AED 50%, #22D3EE 100%)' }}
+      >
+        <Container wide className='relative z-10'>
+          <div className='text-center max-w-3xl mx-auto'>
+            <Heading level={HeadingLevel.h2} typeStyle={HeadingTypeStyle.lg} className='text-white mb-6'>
+              Ready to Share Your Success Story?
+            </Heading>
+
+            <Paragraph className='text-white/90 text-lg mb-8'>
+              Join the growing community of companies transforming their API architecture with AsyncAPI.
+            </Paragraph>
+
+            <div className='flex flex-col sm:flex-row gap-4 justify-center'>
+              <Button
+                text='Share Your Case'
+                href='https://github.com/asyncapi/website/blob/master/README.md#case-studies'
+                target='_blank'
+                className='w-full sm:w-auto bg-white text-primary-600 hover:bg-gray-100'
+              />
+              <Button
+                text='Join Our Community'
+                href='https://asyncapi.slack.com/join/shared_invite/zt-3clk6rmc0-Cujl2fChHYnHDUwFKRlQCw'
+                className='w-full sm:w-auto bg-transparent border-2 border-white text-white hover:bg-white/10'
+              />
+            </div>
+          </div>
+        </Container>
+      </section>
     </GenericLayout>
   );
 }
diff --git a/pages/community/ambassadors/index.tsx b/pages/community/ambassadors/index.tsx
index c4450ddb22c8..daef90dc5b32 100644
--- a/pages/community/ambassadors/index.tsx
+++ b/pages/community/ambassadors/index.tsx
@@ -1,16 +1,27 @@
 import { sortBy } from 'lodash';
 import Link from 'next/link';
-import React from 'react';
+import React, { useState } from 'react';
 
 import type { Ambassador } from '@/types/pages/community/Community';
-import { HeadingTypeStyle } from '@/types/typography/Heading';
+import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
 
 import Button from '../../../components/buttons/Button';
-import IconGithub from '../../../components/icons/Github';
-import IconLinkedIn from '../../../components/icons/LinkedIn';
-import IconTwitter from '../../../components/icons/Twitter';
+import { AMBASSADORS_CONFIG, COMMUNITY_URLS, SOCIAL_MEDIA_BASE_URLS } from '../../../components/footer/FooterList';
+import IconBook from '../../../components/icons/Book';
+import IconClipboard from '../../../components/icons/Clipboard';
+import IconCode from '../../../components/icons/Code';
+import IconDocument from '../../../components/icons/Document';
+import IconLightbulb from '../../../components/icons/LightBulb';
+import IconMicrophone from '../../../components/icons/Microphone';
+import IconPlay from '../../../components/icons/Play';
+import IconStar from '../../../components/icons/Star';
+import IconTerminal from '../../../components/icons/Terminal';
+import IconUsersGroup from '../../../components/icons/UsersGroup';
+import IconVideo from '../../../components/icons/Video';
+import Container from '../../../components/layout/Container';
 import GenericLayout from '../../../components/layout/GenericLayout';
 import NewsletterSubscribe from '../../../components/NewsletterSubscribe';
+import PaginationComponent from '../../../components/Pagination';
 import Heading from '../../../components/typography/Heading';
 import ambassadorList from '../../../config/ambassador_lists.json';
 import ambassadors from '../../../config/AMBASSADORS_MEMBERS.json';
@@ -25,20 +36,31 @@ export function addAdditionalUserInfo(user: Ambassador) {
   };
 
   if (userData.github) {
-    userData.githubUrl = `https://www.github.com/${userData.github}`;
+    userData.img = `${SOCIAL_MEDIA_BASE_URLS.GITHUB}/${userData.github}.png`;
   }
-  if (userData.linkedin) {
-    userData.linkedinUrl = `https://www.linkedin.com/in/${userData.linkedin}`;
-  }
-  if (userData.twitter) {
-    userData.twitterUrl = `https://www.twitter.com/${userData.twitter}`;
-  }
-
-  userData.img = `${userData.githubUrl}.png`;
 
   return userData;
 }
 
+/**
+ * @description Get the appropriate icon component based on the contribution title
+ * @param {string} title - The contribution title
+ */
+function getContributionIcon(title: string) {
+  const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
+    'Written content': IconDocument,
+    'Video content': IconVideo,
+    'Live streams': IconPlay,
+    'Give talks': IconMicrophone,
+    'Interactive Learning': IconLightbulb,
+    'Build real-life usecases example': IconTerminal,
+    'AsyncAPI Contributions': IconStar,
+    'Gather Use-Cases': IconClipboard
+  };
+
+  return iconMap[title] || IconDocument;
+}
+
 /**
  * @description The main page for the AsyncAPI Ambassador Program.
  */
@@ -49,193 +71,369 @@ export default function Index() {
     ['name']
   );
 
-  const ambassadorProgramUrl =
-    'https://github.com/asyncapi/community/blob/master/docs/020-governance-and-policies/AMBASSADOR_PROGRAM.md';
+  const [currentPage, setCurrentPage] = useState(1);
+  const postsPerPage = AMBASSADORS_CONFIG.POSTS_PER_PAGE;
+  const indexOfLastPost = currentPage * postsPerPage;
+  const indexOfFirstPost = indexOfLastPost - postsPerPage;
+  const currentAmbassadors = asyncapiAmbassadors.slice(indexOfFirstPost, indexOfLastPost);
+  const totalPages = Math.ceil(asyncapiAmbassadors.length / postsPerPage);
 
   return (
     <GenericLayout title='AsyncAPI Ambassador Program' description='The AsyncAPI Ambassador Program' image={image} wide>
-      <div className='flex flex-col items-center justify-between lg:flex-row' data-testid='Ambassadors-main'>
-        <div className='w-full text-center lg:w-[45%] lg:text-left' data-testid='Ambassadors-content'>
-          <h1 className='mt-10 text-3xl font-semibold md:text-4xl lg:text-5xl' data-testid='Ambassadors-title'>
-            Teachers. Champions. <span className='countdown-text-gradient'>Ambassadors!</span>
-          </h1>
-          <Heading typeStyle={HeadingTypeStyle.bodyLg} textColor='text-gray-700' className='mt-5 text-slate-500'>
-            Passionate about event-driven architectures or message-driven APIs? Become an AsyncAPI Ambassador and help
-            the OSS community build the future of APIs.
-          </Heading>
-          <div data-testid='Ambassadors-button'>
-            <Button
-              className='mt-10 block text-center focus:outline-none md:inline-block'
-              text='Become an AsyncAPI Ambassador'
-              href={ambassadorProgramUrl}
-              target='_blank'
-            />
+      <div className='bg-white dark:bg-dark-background py-12 sm:py-16 lg:py-20'>
+        <div className='mx-auto max-w-7xl px-4 sm:px-6 lg:px-8'>
+          <div className='grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center'>
+            {/* Left Column - Text Content */}
+            <div>
+              <span className='inline-block rounded-full border border-secondary-300 dark:border-secondary-600 bg-white dark:bg-dark-card px-4 py-2 text-sm font-semibold text-secondary-500 dark:text-secondary-400 mb-6'>
+                Community
+              </span>
+              <h1
+                className='text-5xl sm:text-6xl lg:text-7xl font-bold tracking-tight text-gray-900 dark:text-white mb-6'
+                data-testid='Ambassadors-title'
+              >
+                Teachers.
+                <br />
+                Champions.
+                <br />
+                <span className='countdown-text-gradient'>Ambassadors.</span>
+              </h1>
+              <p className='text-lg text-gray-600 dark:text-gray-400 mb-8 max-w-xl'>
+                Passionate about AsyncAPI? Join our global community of ambassadors who drive innovation, education, and
+                adoption of event-driven architectures.
+              </p>
+              <div data-testid='Ambassadors-button'>
+                <Button
+                  className='inline-block text-center hover:bg-primary-600 focus:outline-none text-base font-semibold'
+                  text='Become an Ambassador'
+                  href={COMMUNITY_URLS.GITHUB.AMBASSADOR_PROGRAM}
+                  target='_blank'
+                />
+              </div>
+            </div>
+
+            {/* Right Column - Feature Cards */}
+            <div className='relative hidden lg:block'>
+              <div className='grid grid-cols-2 gap-4'>
+                {/* Educational Content Card - Purple/Pink */}
+                <div
+                  className='rounded-2xl p-6 text-white shadow-xl transform rotate-3 hover:rotate-6 transition-transform duration-300'
+                  style={{ background: 'linear-gradient(135deg, #a855f7 0%, #ec4899 100%)' }}
+                >
+                  <div className='mb-4'>
+                    <IconBook className='w-8 h-8 text-white' />
+                  </div>
+                  <h3 className='text-lg font-semibold mb-2 text-white'>Educational Content</h3>
+                  <p className='text-sm opacity-90 text-white'>Creating tutorials and guides</p>
+                </div>
+
+                {/* Video Tutorials Card - Blue/Cyan */}
+                <div
+                  className='rounded-2xl p-6 text-white shadow-xl transform -rotate-2 hover:-rotate-1 transition-transform duration-300 mt-8'
+                  style={{ background: 'linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%)' }}
+                >
+                  <div className='mb-4'>
+                    <IconVideo className='w-8 h-8 text-white' />
+                  </div>
+                  <h3 className='text-lg font-semibold mb-2 text-white'>Video Tutorials</h3>
+                  <p className='text-sm opacity-90 text-white'>Sharing knowledge through video</p>
+                </div>
+
+                {/* Community Building Card - Green/Emerald */}
+                <div
+                  className='rounded-2xl p-6 text-white shadow-xl transform rotate-1 hover:rotate-3 transition-transform duration-300 -mt-4'
+                  style={{ background: 'linear-gradient(135deg, #22c55e 0%, #10b981 100%)' }}
+                >
+                  <div className='mb-4'>
+                    <IconUsersGroup className='w-8 h-8 text-white' />
+                  </div>
+                  <h3 className='text-lg font-semibold mb-2 text-white'>Community Building</h3>
+                  <p className='text-sm opacity-90 text-white'>Growing local communities</p>
+                </div>
+
+                {/* Open Source Card - Orange/Red */}
+                <div
+                  className='rounded-2xl p-6 text-white shadow-xl transform -rotate-3 hover:-rotate-1 transition-transform duration-300'
+                  style={{ background: 'linear-gradient(135deg, #f97316 0%, #ef4444 100%)' }}
+                >
+                  <div className='mb-4'>
+                    <IconCode className='w-8 h-8 text-white' />
+                  </div>
+                  <h3 className='text-lg font-semibold mb-2 text-white'>Open Source</h3>
+                  <p className='text-sm opacity-90 text-white'>Contributing to projects</p>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
-        <div className='hidden w-1/2 lg:block'>
-          <img src='/img/homepage/ambassador-cover.svg' alt='ambassador-cover' className='w-full' />
-        </div>
       </div>
-      <div className='mt-20'>
-        <div className='aspect-h-9 aspect-w-16 bg-center'>
-          <iframe
-            src='https://www.youtube.com/embed/3rg_7hIb9PQ'
-            allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
-            data-testid='Ambassadors-Iframe'
-          ></iframe>
+
+      <div className='bg-secondary-100 rounded-3xl dark:bg-dark-card py-20 sm:py-28'>
+        <div className='mx-auto max-w-7xl px-4 sm:px-6 lg:px-8'>
+          <div className='relative rounded-3xl overflow-hidden shadow-2xl bg-gray-900' data-testid='Ambassadors-video'>
+            <div className='relative w-full' style={{ paddingBottom: '56.25%' }}>
+              <iframe
+                src={`https://www.youtube.com/embed/${AMBASSADORS_CONFIG.YOUTUBE_VIDEO_ID}`}
+                allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
+                className='absolute top-0 left-0 w-full h-full'
+                data-testid='Ambassadors-Iframe'
+              ></iframe>
+            </div>
+            <div className='absolute inset-0 flex items-center justify-center pointer-events-none'>
+              <div className='bg-gray-900/30 backdrop-blur-sm rounded-lg px-6 py-3'>
+                <p className='text-white text-sm sm:text-base font-semibold'>Watch our Ambassador Program overview</p>
+              </div>
+            </div>
+          </div>
         </div>
-        <div className='flex justify-center'>
-          <div className='mt-10 text-center lg:w-[55%]' data-testid='Ambassadors-contributions'>
-            <Heading typeStyle={HeadingTypeStyle.lg}>AsyncAPI Ambassador Contributions</Heading>
-            <Heading typeStyle={HeadingTypeStyle.bodyLg} textColor='text-gray-700' className='mt-5 text-slate-500'>
-              AsyncAPI Ambassadors are passionate about APIs and AsyncAPI. They share their interest, expertise, and
-              excitement within their communities to help others build better software.
+      </div>
+
+      <div className='bg-white dark:bg-dark-background py-16 sm:py-20'>
+        <div className='mx-auto max-w-7xl px-4 sm:px-6 lg:px-8'>
+          <div className='text-center mb-12' data-testid='Ambassadors-contributions'>
+            <Heading level={HeadingLevel.h2} typeStyle={HeadingTypeStyle.lg} className='text-gray-900 dark:text-white'>
+              AsyncAPI Ambassador Contributions
+            </Heading>
+            <Heading
+              level={HeadingLevel.h3}
+              typeStyle={HeadingTypeStyle.bodyLg}
+              className='mt-4 mx-auto max-w-3xl text-gray-600 dark:text-gray-400'
+            >
+              Our ambassadors are passionate about APIs and AsyncAPI. They share their knowledge, expertise, and
+              excitement within their communities to help others build the future of APIs.
             </Heading>
           </div>
+
+          <div className='grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4' data-testid='Ambassadors-list'>
+            {ambassadorList.contents.map((link) => {
+              const IconComponent = getContributionIcon(link.title);
+
+              return (
+                <div
+                  key={link.title}
+                  className='flex flex-col items-center text-center p-6 rounded-2xl bg-white dark:bg-dark-card border border-gray-200 dark:border-gray-700 hover:shadow-lg  transition-shadow '
+                >
+                  <div className='rounded-full bg-secondary-100 dark:bg-secondary-900/30 p-4 mb-4'>
+                    <div className='h-12 w-12 flex items-center justify-center'>
+                      <IconComponent className='h-8 w-8 text-primary-500' />
+                    </div>
+                  </div>
+                  <Heading
+                    level={HeadingLevel.h4}
+                    typeStyle={HeadingTypeStyle.sm}
+                    className='mb-2 text-gray-900 dark:text-white font-semibold'
+                  >
+                    {link.title}
+                  </Heading>
+                  <p className='text-sm text-gray-600 dark:text-gray-400'>{link.details}</p>
+                </div>
+              );
+            })}
+          </div>
         </div>
-        <ul className='mt-10 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4'>
-          {ambassadorList.contents.map((link) => (
-            <li key={link.title} className='flex flex-col items-center justify-start' data-testid='Ambassadors-list'>
-              <img src={link.icon} alt={link.title} className='mt-20 w-[200px]' />
-              <Heading typeStyle={HeadingTypeStyle.xs} className='mt-5'>
-                {link.title}
-              </Heading>
-              <p className='text-center text-sm'>{link.details}</p>
-            </li>
-          ))}
-        </ul>
       </div>
-      <div className='mt-20 text-center'>
-        <Heading typeStyle={HeadingTypeStyle.lg}>Join these AsyncAPI Ambassadors</Heading>
-        <Heading typeStyle={HeadingTypeStyle.bodyLg} textColor='text-gray-700' className='mt-5 text-slate-500'>
-          Learn and share knowledge with community members
-        </Heading>
-        <div
-          className='mt-10 grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3'
-          data-testid='Ambassadors-members-main'
-        >
-          {asyncapiAmbassadors.map((ambassador: Ambassador, index: number) => (
-            <div
-              key={index}
-              className='mt-6 flex flex-col justify-between rounded-md border pb-2 text-left'
-              data-testid='Ambassadors-members'
+      <div className='bg-secondary-100 dark:bg-dark-card rounded-3xl py-16 sm:py-20'>
+        <div className='mx-auto max-w-7xl px-4 sm:px-6 lg:px-8'>
+          <div className='text-center mb-12'>
+            <Heading level={HeadingLevel.h2} typeStyle={HeadingTypeStyle.lg} className='text-gray-900 dark:text-white'>
+              Meet Our AsyncAPI Ambassadors
+            </Heading>
+            <Heading
+              level={HeadingLevel.h3}
+              typeStyle={HeadingTypeStyle.bodyLg}
+              className='mt-4 mx-auto max-w-3xl text-gray-600 dark:text-gray-400'
             >
-              <div>
-                <div className='flex justify-between p-2' data-testid='Ambassadors-members-details'>
-                  <div>{ambassador.name}</div>
-                  <div data-testid='Ambassadors-members-country'>{ambassador.country}</div>
-                </div>
+              Learn and grow alongside community members who are passionate about AsyncAPI and event-driven
+              architectures.
+            </Heading>
+          </div>
+
+          <div className='grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3' data-testid='Ambassadors-members-main'>
+            {currentAmbassadors.map((ambassador: Ambassador) => (
+              <div
+                key={ambassador.github}
+                className='group relative bg-white dark:bg-dark-background rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1'
+                data-testid='Ambassadors-members'
+              >
                 <Link href={`ambassadors/${ambassador.github}`} as={`ambassadors/${ambassador.github}`}>
-                  <div className='p-2 cursor-pointer'>
-                    <div className='h-auto w-full rounded-md bg-center' data-testid='Ambassadors-members-img'>
-                      <img
-                        src={ambassador.img}
-                        alt={ambassador.name}
-                        className='h-auto w-full rounded-lg object-contain'
-                      />
+                  <div className='relative'>
+                    {ambassador.country && (
+                      <div className='absolute top-4 right-4 z-10 bg-white dark:bg-gray-800 rounded-full text-3xl w-12 h-12 flex items-center justify-center shadow-lg'>
+                        {ambassador.country}
+                      </div>
+                    )}
+                    <div className='aspect-w-3 aspect-h-4 bg-gradient-to-br from-primary-400 to-primary-600'>
+                      <img src={ambassador.img} alt={ambassador.name} className='w-full h-full object-cover' />
                     </div>
-                    <div className='mt-2 w-full rounded-lg border p-2 text-sm'>{ambassador.title}</div>
                   </div>
                 </Link>
-              </div>
-              <div className='flex h-full flex-col justify-between'>
-                <div className='p-2 text-sm'>{ambassador.bio}</div>
-                <div className='flex border-t p-2 gap-4' data-testid='Ambassadors-members-socials'>
-                  {ambassador.twitterUrl && (
-                    <a
-                      href={ambassador.twitterUrl}
-                      target='_blank'
-                      rel='noreferrer'
-                      className='text-gray-500 hover:text-black transition-colors'
-                      data-testid='Ambassadors-members-twitter'
-                      aria-label={`Twitter profile of ${ambassador.name}`}
-                    >
-                      <IconTwitter className='h-5 w-5 fill-current' />
-                    </a>
-                  )}
-                  <a
-                    href={ambassador.githubUrl}
-                    target='_blank'
-                    rel='noreferrer'
-                    className='text-gray-500 hover:text-black transition-colors'
-                    aria-label={`GitHub profile of ${ambassador.name}`}
-                  >
-                    <IconGithub className='h-5 w-5 fill-current' />
-                  </a>
-                  <a
-                    href={ambassador.linkedinUrl}
-                    target='_blank'
-                    rel='noreferrer'
-                    className='text-gray-500 hover:text-[#0077b5] transition-colors'
-                    aria-label={`LinkedIn profile of ${ambassador.name}`}
-                  >
-                    <IconLinkedIn className='h-5 w-5 fill-current' />
-                  </a>
+
+                <div className='p-6'>
+                  <div className='flex items-start justify-between mb-3'>
+                    <div>
+                      <h3 className='text-lg font-bold text-gray-900 dark:text-white'>{ambassador.name}</h3>
+                      <p className='text-sm text-primary-600 dark:text-primary-400 font-medium'>{ambassador.title}</p>
+                    </div>
+                  </div>
+
+                  <p className='text-sm text-gray-600 dark:text-gray-400 mb-4'>{ambassador.company}</p>
+
+                  <div className='pt-4 border-t border-gray-200 dark:border-gray-700'>
+                    <p className='text-xs text-gray-500 dark:text-gray-500 mb-3'>Socials</p>
+                    <div className='flex items-center gap-3' data-testid='Ambassadors-members-socials'>
+                      {ambassador.twitter && (
+                        <a
+                          href={`${SOCIAL_MEDIA_BASE_URLS.TWITTER}/${ambassador.twitter}`}
+                          target='_blank'
+                          rel='noreferrer'
+                          className='text-gray-600 dark:text-gray-400 hover:!text-primary-500 dark:hover:!text-primary-500 transition-colors duration-200'
+                          data-testid='Ambassadors-members-twitter'
+                        >
+                          <svg
+                            className='h-5 w-5 transition-colors duration-200'
+                            fill='currentColor'
+                            viewBox='0 0 20 20'
+                          >
+                            <path d='M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84' />
+                          </svg>
+                        </a>
+                      )}
+                      {ambassador.github && (
+                        <a
+                          href={`${SOCIAL_MEDIA_BASE_URLS.GITHUB}/${ambassador.github}`}
+                          target='_blank'
+                          rel='noreferrer'
+                          className='text-gray-600 dark:text-gray-400 hover:!text-primary-500 dark:hover:!text-primary-500 transition-colors duration-200'
+                        >
+                          <svg
+                            className='h-5 w-5 transition-colors duration-200'
+                            fill='currentColor'
+                            viewBox='0 0 20 20'
+                          >
+                            <path
+                              fillRule='evenodd'
+                              d='M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z'
+                              clipRule='evenodd'
+                            />
+                          </svg>
+                        </a>
+                      )}
+                      {ambassador.linkedin && (
+                        <a
+                          href={`${SOCIAL_MEDIA_BASE_URLS.LINKEDIN}/${ambassador.linkedin}`}
+                          target='_blank'
+                          rel='noreferrer'
+                          className='text-gray-600 dark:text-gray-400 hover:!text-primary-500 dark:hover:!text-primary-500 transition-colors duration-200'
+                        >
+                          <svg
+                            className='h-5 w-5 transition-colors duration-200'
+                            fill='currentColor'
+                            viewBox='0 0 20 20'
+                          >
+                            <path d='M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z' />
+                          </svg>
+                        </a>
+                      )}
+                    </div>
+                  </div>
                 </div>
               </div>
-            </div>
-          ))}
+            ))}
+          </div>
+
+          {/* Pagination */}
+          <div className='mt-12'>
+            <PaginationComponent
+              currentPage={currentPage}
+              totalPages={totalPages}
+              onPageChange={setCurrentPage}
+              variant='simple'
+              showGoToPage={false}
+            />
+          </div>
         </div>
       </div>
-      <div className='mt-20'>
-        <div className='flex justify-center'>
-          <div className='mt-10 text-center lg:w-[55%]' data-testid='Events-token'>
-            <Heading typeStyle={HeadingTypeStyle.lg}>Tokens of our appreciation</Heading>
-            <Heading typeStyle={HeadingTypeStyle.bodyLg} textColor='text-gray-700' className='mt-5 text-slate-500'>
+      <div className='bg-white dark:bg-dark-background py-16 sm:py-20'>
+        <div className='mx-auto max-w-7xl px-4 sm:px-6 lg:px-8'>
+          <div className='text-center mb-12' data-testid='Events-token'>
+            <Heading level={HeadingLevel.h2} typeStyle={HeadingTypeStyle.lg} className='text-gray-900 dark:text-white'>
+              Tokens of our appreciation
+            </Heading>
+            <Heading
+              level={HeadingLevel.h3}
+              typeStyle={HeadingTypeStyle.bodyLg}
+              className='mt-4 mx-auto max-w-3xl text-gray-600 dark:text-gray-400'
+            >
               We appreciate your commitment and passion for sharing your knowledge with your communities. Let us support
               you!
             </Heading>
           </div>
-        </div>
-        <div className='mt-10'>
-          <ul className='grid grid-cols-1 gap-5 sm:grid-cols-3 lg:grid-cols-4'>
+
+          <div className='grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4'>
             {ambassadorList.tokens.map((token) => (
-              <li key={token.title} className='mt-4 flex rounded-lg bg-white p-3 shadow-lg'>
-                <div>
-                  <div className='flex size-[30px] flex-col items-center justify-center rounded-full bg-pink-200'>
-                    <span className='text-sm'>{token.emoji}</span>
-                  </div>
-                </div>
-                <div className='ml-[10px]'>
-                  <Heading typeStyle={HeadingTypeStyle.xs}>{token.title}</Heading>
-                  <p className='mt-[5px] text-xs text-slate-600'>{token.details}</p>
+              <div
+                key={token.title}
+                className='flex flex-col items-center text-center p-8 rounded-3xl bg-white dark:bg-dark-card border border-gray-200 dark:border-gray-700 shadow-sm hover:shadow-lg transition-all duration-300'
+              >
+                <div className='rounded-full bg-secondary-100 dark:bg-secondary-900/30 p-4 mb-6'>
+                  <div className='h-16 w-16 flex items-center justify-center text-5xl'>{token.emoji}</div>
                 </div>
-              </li>
+                <Heading
+                  level={HeadingLevel.h4}
+                  typeStyle={HeadingTypeStyle.sm}
+                  className='mb-3 text-gray-900 dark:text-white font-bold'
+                >
+                  {token.title}
+                </Heading>
+                <p className='text-sm text-gray-600 dark:text-gray-400 leading-relaxed'>{token.details}</p>
+              </div>
             ))}
-          </ul>
+          </div>
         </div>
-        <div
-          className='mt-20 h-auto w-full rounded-lg bg-dark bg-mapCover bg-cover bg-center p-4 bg-blend-soft-light'
-          data-testid='Events-ambassadors'
+      </div>
+
+      <div className='relative py-20 sm:py-24 overflow-hidden' data-testid='Events-ambassadors'>
+        <section
+          className='relative overflow-hidden py-12 sm:py-16 rounded-xl mx-4 sm:mx-6 lg:mx-8 mb-12'
+          style={{ background: 'linear-gradient(90deg, #8B5CF6 0%, #7C3AED 50%, #22D3EE 100%)' }}
         >
-          <div className='flex justify-center'>
-            <div className='p-4 text-center text-white lg:w-[65%]'>
-              <Heading typeStyle={HeadingTypeStyle.lg}>Become an AsyncAPI Ambassador</Heading>
-              <Heading typeStyle={HeadingTypeStyle.bodyLg}>
-                The AsyncAPI Ambassador program is now open for applications! If you&apos;re selected, you&apos;ll join
-                AsyncAPI&apos;s mission of helping community members all over the world, build the future of
-                Event-Driven APIs.
-              </Heading>
-              <div className='md:item-center w-full md:flex md:justify-between'>
-                <Button
-                  className='mt-5 block text-center focus:outline-none md:mt-10 md:inline-block md:w-[48%]'
-                  text='Become an Ambassador now'
-                  href={ambassadorProgramUrl}
-                  target='_blank'
-                />
-                <Button
-                  bgClassName='bg-transparent border border-primary-600 hover:bg-primary-400'
-                  className='mt-5 block text-center focus:outline-none md:mt-10 md:inline-block md:w-[48%]'
-                  text='Learn more'
-                  href='https://www.asyncapi.com/blog/asyncapi-ambassador-program'
-                  target='_blank'
-                />
-              </div>
+          <div className='relative mx-auto max-w-4xl px-4 sm:px-6 lg:px-8 text-center'>
+            <Heading level={HeadingLevel.h2} typeStyle={HeadingTypeStyle.lg} className='text-white mb-6 font-bold'>
+              Become an AsyncAPI Ambassador
+            </Heading>
+            <Heading
+              level={HeadingLevel.h3}
+              typeStyle={HeadingTypeStyle.bodyLg}
+              className='text-white/95 mb-10 leading-relaxed'
+            >
+              The AsyncAPI Ambassador program is now open for applications! If you&apos;re selected, you&apos;ll join
+              AsyncAPI&apos;s mission of helping community members all over the world, build the future of Event-Driven
+              APIs.
+            </Heading>
+            <div className='flex flex-col sm:flex-row items-center justify-center gap-4'>
+              <Button
+                className='w-full sm:w-auto bg-white text-primary-600 hover:bg-gray-50 focus:outline-none font-semibold shadow-lg'
+                text='Become an Ambassador Now'
+                href={COMMUNITY_URLS.GITHUB.AMBASSADOR_ORGANIZATION}
+                target='_blank'
+              />
+              <Button
+                bgClassName='bg-transparent border-2 border-white hover:bg-white/20'
+                className='w-full sm:w-auto text-white focus:outline-none font-semibold'
+                text='Learn More'
+                href={COMMUNITY_URLS.BLOG.AMBASSADOR_PROGRAM}
+                target='_blank'
+              />
             </div>
           </div>
-        </div>
+        </section>
+      </div>
+
+      <div className='mt-8 bg-dark rounded-3xl py-12'>
+        <Container wide>
+          <NewsletterSubscribe dark />
+        </Container>
       </div>
-      <NewsletterSubscribe className='mt-20 text-center' />
     </GenericLayout>
   );
 }
diff --git a/pages/community/board.tsx b/pages/community/board.tsx
index cdf5eef6d8f5..3fd94ba40c99 100644
--- a/pages/community/board.tsx
+++ b/pages/community/board.tsx
@@ -9,16 +9,16 @@ export default function Board() {
     <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'>
+          <h3 className='text-primary-800 dark:text-white 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'>
+          <p className='my-4 text-base text-gray-500 dark:text-gray-400 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'
+              className='text-blue-500 dark:text-blue-400 hover:text-blue-400 dark:hover:text-blue-300'
               target='_blank'
               rel='noopener noreferrer'
             >
@@ -28,10 +28,10 @@ export default function Board() {
           </p>
         </div>
         <div>
-          <h3 className='text-primary-800 mb-2 font-semibold lg:text-center lg:text-2xl'>
+          <h3 className='text-primary-800 dark:text-white 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'>
+          <p className='my-4 text-base text-gray-500 dark:text-gray-400 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
@@ -39,7 +39,7 @@ export default function Board() {
             <TextLink
               href='https://github.com/asyncapi/community/blob/master/docs/020-governance-and-policies/GOVERNANCE.md'
               target='_blank'
-              className='font-normal text-base text-blue-500 no-underline hover:text-sky-400'
+              className='font-normal text-base text-blue-500 dark:text-blue-400 no-underline hover:text-sky-400 dark:hover:text-sky-300'
             >
               governance file
             </TextLink>
@@ -47,16 +47,16 @@ export default function Board() {
           </p>
         </div>
         <div>
-          <h3 className='text-primary-800 mb-2 font-semibold lg:text-center lg:text-2xl'>
+          <h3 className='text-primary-800 dark:text-white 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{' '}
+          <p className='my-4 text-base text-gray-500 dark:text-gray-400 lg:text-center'>
+            GB members guide AsyncAPI&apos;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/docs/020-governance-and-policies/GOVERNANCE.md#duties-and-responsibilities'
-              className='text-blue-500 hover:text-blue-400'
+              className='text-blue-500 dark:text-blue-400 hover:text-blue-400 dark:hover:text-blue-300'
               target='_blank'
               rel='noopener noreferrer'
             >
diff --git a/pages/community/dashboard.tsx b/pages/community/dashboard.tsx
index bfec4d96cc18..3721448d00f4 100644
--- a/pages/community/dashboard.tsx
+++ b/pages/community/dashboard.tsx
@@ -14,26 +14,31 @@ export default function Dashboard() {
     <GenericLayout title='AsyncAPI - Dashboard' description={'description'} image={'image'} wide>
       <title>AsyncAPI - Dashboard</title>
 
-      <div className='pt-8'>
+      <div className='pt-8 pb-12 bg-white dark:bg-dark-background min-h-screen'>
         <Header />
-        <div className='mt-8 flex w-full flex-col  gap-6  md:flex-row'>
+        <div className='mt-10 flex w-full flex-col gap-8 md:flex-row md:items-stretch'>
           <Table
             title={
-              <div className='flex gap-3'>
-                <img data-tooltip-target='tooltip-default' src='/img/illustrations/icons/fire.svg' alt='Tooltip' />
+              <div className='flex items-center gap-3'>
+                <img
+                  data-tooltip-target='tooltip-default'
+                  src='/img/illustrations/icons/fire.svg'
+                  alt='Tooltip'
+                  className='w-5 h-5 dark:invert dark:opacity-90'
+                />
                 <div
                   id='tooltip-default'
                   role='tooltip'
-                  className='tooltip invisible absolute z-10 inline-block rounded-lg bg-gray-900 px-3 py-2 text-sm font-medium text-white opacity-0 shadow-sm transition-opacity duration-300 dark:bg-gray-700'
+                  className='tooltip invisible absolute z-10 inline-block rounded-lg bg-gray-900 dark:bg-gray-700 px-3 py-2 text-sm font-medium text-white opacity-0 shadow-sm transition-opacity duration-300'
                 >
                   Tooltip content
                   <div className='tooltip-arrow' data-popper-arrow></div>
                 </div>
-                <span>Hot Topics</span>
+                <span className='dark:text-white font-semibold'>Hot Topics</span>
               </div>
             }
             data={data.hotDiscussions}
-            className='lg:w-1/3'
+            className='lg:w-1/3 flex-1'
             listClassName='lg:grid-cols-1'
           />
           <GoodFirstIssues issues={data.goodFirstIssues} />
diff --git a/pages/community/events-and-updates.tsx b/pages/community/events-and-updates.tsx
new file mode 100644
index 000000000000..0c12e73c1fdd
--- /dev/null
+++ b/pages/community/events-and-updates.tsx
@@ -0,0 +1,246 @@
+import React from 'react';
+
+import Button from '@/components/buttons/Button';
+import GoogleCalendarButton from '@/components/buttons/GoogleCalendarButton';
+import ICSFileButton from '@/components/buttons/ICSFileButton';
+import SubscribeButton from '@/components/buttons/SubscribeButton';
+import Calendar from '@/components/Calendar';
+import FeatureCard from '@/components/community/FeatureCard';
+import { COMMUNITY_URLS } from '@/components/footer/FooterList';
+import IconCalendar from '@/components/icons/Calendar';
+import IconNewsroom from '@/components/icons/Newsroom';
+import IconUsersGroup from '@/components/icons/UsersGroup';
+import IconVideo from '@/components/icons/Video';
+import Container from '@/components/layout/Container';
+import GenericLayout from '@/components/layout/GenericLayout';
+import NewsletterSubscribe from '@/components/NewsletterSubscribe';
+import NewsroomBlogPosts from '@/components/newsroom/NewsroomBlogPosts';
+import NewsroomYoutube from '@/components/newsroom/NewsroomYoutube';
+import Heading from '@/components/typography/Heading';
+import Paragraph from '@/components/typography/Paragraph';
+import TextLink from '@/components/typography/TextLink';
+import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
+import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
+import { makeStaticProps } from '@/utils/getStatic';
+
+const getStaticProps = makeStaticProps(['landing-page', 'footer', 'common']);
+
+export { getStaticProps };
+
+/**
+ * @description Events & Updates page combining both newsroom and events functionality
+ */
+export default function EventsAndUpdates() {
+  const description = 'Stay updated with AsyncAPI events, blogs, videos, and community news';
+  const image = '/img/social/community-events.webp';
+
+  return (
+    <GenericLayout title='Events & Updates' description={description} image={image} wide>
+      {/* Hero Section */}
+      <div className='relative overflow-hidden bg-gradient-to-br from-purple-50 via-blue-50 to-pink-50'>
+        {/* Decorative gradient orbs */}
+        <div className='absolute left-0 top-0 size-[500px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-gradient-to-br from-blue-200/40 to-purple-200/40 blur-3xl' />
+        <div className='absolute bottom-0 left-0 size-[400px] -translate-x-1/3 translate-y-1/3 rounded-full bg-gradient-to-tr from-purple-200/30 to-pink-200/30 blur-3xl' />
+        <div className='absolute right-0 top-0 size-[450px] translate-x-1/3 -translate-y-1/4 rounded-full bg-gradient-to-bl from-purple-200/40 to-blue-200/40 blur-3xl' />
+        <div className='absolute bottom-0 right-0 size-[300px] translate-x-1/4 translate-y-1/2 rounded-full bg-gradient-to-tl from-purple-300/30 to-pink-200/30 blur-3xl' />
+
+        <Container wide className='relative z-10 py-20 text-center' data-testid='EventsAndUpdates-Hero'>
+          <div className='mx-auto max-w-4xl'>
+            <div className='mb-6 inline-block rounded-full bg-cyan-100 px-5 py-2 text-sm font-medium text-cyan-600'>
+              Find out what&apos;s New
+            </div>
+            <Heading level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.xl} className='mb-6 text-gray-900'>
+              Events & Updates
+            </Heading>
+            <Paragraph
+              typeStyle={ParagraphTypeStyle.lg}
+              className='mx-auto mb-10 max-w-2xl dark:text-gray-400 text-gray-700'
+            >
+              Join thousands of developers, creators, and innovators building the future of event-driven architectures.
+              Your journey starts here—connect, learn, and grow with us.
+            </Paragraph>
+            <div className='flex flex-col items-center justify-center gap-4 sm:flex-row'>
+              <Button
+                text='Join Our Community'
+                href='/community'
+                className='rounded-lg bg-indigo-600 px-8 py-3 font-semibold text-white shadow-lg hover:bg-indigo-700'
+                bgClassName='bg-indigo-600 hover:bg-indigo-700'
+              />
+              <Button
+                text='Watch intro video +'
+                href={COMMUNITY_URLS.YOUTUBE.BASE}
+                target='_blank'
+                className='rounded-lg border-2 border-cyan-500 bg-transparent px-8 py-3 font-semibold text-cyan-600 hover:bg-cyan-50'
+                bgClassName='bg-transparent hover:bg-cyan-50 border-2 border-cyan-500'
+              />
+            </div>
+          </div>
+        </Container>
+      </div>
+
+      {/* Everything You Need Section */}
+      <div className='bg-white dark:bg-dark-background'>
+        <Container wide className='py-20' data-testid='EventsAndUpdates-Features'>
+          <div className='text-center'>
+            <Heading level={HeadingLevel.h2} typeStyle={HeadingTypeStyle.lg} className='mb-4'>
+              Everything You Need
+            </Heading>
+            <Paragraph
+              typeStyle={ParagraphTypeStyle.md}
+              className='mx-auto mb-12 max-w-2xl text-gray-600 dark:text-gray-400'
+            >
+              Discover, connect, and grow with our comprehensive community platform
+            </Paragraph>
+          </div>
+          <div className='grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-4'>
+            <FeatureCard
+              icon={<IconCalendar />}
+              title='Live Events'
+              description='Join workshops, meetups, and conferences from anywhere in the world'
+            />
+            <FeatureCard
+              icon={<IconNewsroom />}
+              title='Latest Updates'
+              description='Stay informed with news, releases, and community highlights'
+            />
+            <FeatureCard
+              icon={<IconVideo className='size-8' />}
+              title='Video Library'
+              description='Access recordings, tutorials, and live streams on demand'
+            />
+            <FeatureCard
+              icon={<IconUsersGroup className='size-8' />}
+              title='Global Community'
+              description='Connect with developers and contributors worldwide'
+            />
+          </div>
+        </Container>
+      </div>
+
+      {/* Upcoming Events Section */}
+      <div className='bg-secondary-200 rounded-3xl dark:bg-dark-card'>
+        <Container wide className='py-20'>
+          <div className='text-center'>
+            <Heading
+              level={HeadingLevel.h2}
+              typeStyle={HeadingTypeStyle.lg}
+              className='mb-4 text-gray-900 dark:text-dark-heading'
+            >
+              Upcoming Events
+            </Heading>
+            <Paragraph
+              typeStyle={ParagraphTypeStyle.md}
+              className='mx-auto mb-12 max-w-2xl dark:text-gray-400 text-gray-600'
+            >
+              Don&apos;t miss out on these amazing community gatherings
+            </Paragraph>
+          </div>
+
+          <div className='mt-12  lg:flex lg:flex-row-reverse lg:items-center lg:gap-12'>
+            <section className='mt-10 lg:mt-0 lg:flex-1'>
+              <Calendar size={2} />
+            </section>
+            <section className='mt-10 lg:mt-0 lg:max-w-xl lg:text-left'>
+              <div>
+                <Heading
+                  level={HeadingLevel.h3}
+                  typeStyle={HeadingTypeStyle.mdSemibold}
+                  className='text-gray-900 dark:text-dark-heading'
+                >
+                  Join AsyncAPI meetings
+                </Heading>
+                <Paragraph typeStyle={ParagraphTypeStyle.md} className='mt-4 dark:text-gray-400 text-gray-600'>
+                  We meet every week to discuss the future of AsyncAPI and event-driven architectures. Join us to share
+                  your ideas, ask questions, and connect with the community.{' '}
+                  <TextLink
+                    href='/community/meetings'
+                    className='text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-300'
+                  >
+                    Learn more about our meetings
+                  </TextLink>
+                </Paragraph>
+                <ul className='mt-8 flex flex-wrap justify-center gap-3 lg:justify-start'>
+                  <li>
+                    <GoogleCalendarButton href='https://calendar.google.com/calendar/u/3?cid=Y19xOXRzZWlnbG9tZHNqNm5qdWh2YnB0czExY0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t' />
+                  </li>
+                  <li>
+                    <SubscribeButton href='/community/meetings' />
+                  </li>
+                  <li>
+                    <ICSFileButton href='https://calendar.google.com/calendar/ical/c_q9tseiglomdsj6njuhvbpts11c%40group.calendar.google.com/public/basic.ics' />
+                  </li>
+                </ul>
+              </div>
+            </section>
+          </div>
+        </Container>
+      </div>
+
+      {/* From the Blogs Section */}
+      <div className='bg-white dark:bg-dark-background'>
+        <Container wide className='py-20' data-testid='EventsAndUpdates-Blogs'>
+          <div className='mb-12 flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center'>
+            <div>
+              <Heading
+                level={HeadingLevel.h2}
+                typeStyle={HeadingTypeStyle.lg}
+                className='mb-2 text-gray-900 dark:text-white'
+              >
+                From the Blogs
+              </Heading>
+              <Paragraph typeStyle={ParagraphTypeStyle.md} className='text-gray-600 dark:text-gray-300'>
+                Stay connected with the pulse of our community
+              </Paragraph>
+            </div>
+            <Button
+              text='Read All Posts'
+              href='/blog'
+              className='rounded-lg bg-indigo-600 px-8 py-3 font-semibold text-white shadow-lg hover:bg-indigo-700'
+              bgClassName='bg-indigo-600 hover:bg-indigo-700'
+            />
+          </div>
+          <div className='mt-12'>
+            <NewsroomBlogPosts />
+          </div>
+        </Container>
+      </div>
+
+      {/* Videos & Live Streams Section */}
+      <div className='bg-secondary-200 rounded-3xl dark:bg-dark-card'>
+        <Container wide className='py-20' data-testid='EventsAndUpdates-Videos'>
+          <div className='mb-12 flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center'>
+            <div>
+              <Heading
+                level={HeadingLevel.h2}
+                typeStyle={HeadingTypeStyle.lg}
+                className='mb-2 text-gray-900 dark:text-dark-heading'
+              >
+                Videos & Live Streams
+              </Heading>
+              <Paragraph typeStyle={ParagraphTypeStyle.md} className='text-gray-800 dark:text-dark-heading'>
+                Learn, engage, and stay updated with our video content
+              </Paragraph>
+            </div>
+            <Button
+              text='Check Out all Videos'
+              href={COMMUNITY_URLS.YOUTUBE.BASE}
+              target='_blank'
+              className='rounded-lg bg-indigo-600 px-8 py-3 font-semibold text-white shadow-lg hover:bg-indigo-700'
+              bgClassName='bg-indigo-600 hover:bg-indigo-700'
+            />
+          </div>
+          <div className='mt-12'>
+            <NewsroomYoutube />
+          </div>
+        </Container>
+      </div>
+
+      {/* Newsletter Section */}
+      <div className='mt-8 bg-dark py-12'>
+        <Container wide>
+          <NewsletterSubscribe dark />
+        </Container>
+      </div>
+    </GenericLayout>
+  );
+}
diff --git a/pages/community/index.tsx b/pages/community/index.tsx
index bd2c516b60f5..1108ee123abf 100644
--- a/pages/community/index.tsx
+++ b/pages/community/index.tsx
@@ -1,28 +1,19 @@
-import type { Dayjs } from 'dayjs';
-import dayjs from 'dayjs';
-import localizedFormat from 'dayjs/plugin/localizedFormat';
+import Link from 'next/link';
 import React from 'react';
 
-import { CardType } from '@/types/components/community/CardPropsType';
 import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
+import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
 
-import Card from '../../components/community/Card';
 import Header from '../../components/community/Header';
 import Hero from '../../components/community/Hero';
-import HomeCards from '../../components/community/HomeCard';
+import ToolingsShowcase from '../../components/community/ToolingsShowcase';
+import IconArrowRightStroke from '../../components/icons/ArrowRightStroke';
+import IconBadgeCheckmark from '../../components/icons/BadgeCheckmark';
+import IconExternalLink from '../../components/icons/ExternalLink';
 import GenericLayout from '../../components/layout/GenericLayout';
 import NewsletterSubscribe from '../../components/NewsletterSubscribe';
 import Heading from '../../components/typography/Heading';
-import eventsData from '../../config/meetings.json';
-import { getEvents } from '../../utils/staticHelpers';
-
-dayjs.extend(localizedFormat);
-
-interface Event {
-  title: string;
-  date: Dayjs;
-  url: string;
-}
+import Paragraph from '../../components/typography/Paragraph';
 
 /**
  * @description This component displays the Community Index Page.
@@ -41,177 +32,278 @@ export default function CommunityIndexPage() {
         <Header />
       </div>
       <Hero />
-      <div className='gh-img mt-10 h-auto w-full object-contain md:mt-0'>
-        <img className='gh-img object-contain' src='/img/homepage/discuss-page.webp' alt='github-discussion' />
-      </div>
-      <div className='mt-20 flex flex-col items-center justify-center text-center'>
-        <Heading level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.xl}>
-          Home of #CommunityOps
-        </Heading>
-        <div>
-          <Heading
-            level={HeadingLevel.h2}
-            typeStyle={HeadingTypeStyle.bodyLg}
-            textColor='text-gray-700'
-            className='text-slate-500'
-          >
-            Join the conversation with over 10k+ developers from literally everywhere.
-          </Heading>
+
+      {/* CTA Section - Contribute & Committee */}
+      <div className='mt-10 md:mt-0 bg-secondary-100 dark:bg-dark-card rounded-3xl py-20 px-6 md:px-12'>
+        <div className='max-w-7xl mx-auto flex flex-col lg:flex-row items-center gap-12 lg:gap-16'>
+          {/* Left Content */}
+          <div className='flex-1 space-y-12'>
+            {/* Contribute to Hot Issues */}
+            <div className='space-y-4'>
+              <Heading
+                level={HeadingLevel.h2}
+                typeStyle={HeadingTypeStyle.lg}
+                className='text-gray-900 dark:text-dark-heading font-bold'
+              >
+                Contribute To Hot Issues
+              </Heading>
+              <Paragraph typeStyle={ParagraphTypeStyle.md} className='text-gray-700 dark:text-gray-300'>
+                Discover over 100s of interesting issues, suitable for new and existing contributors.
+              </Paragraph>
+              <a
+                href='https://github.com/search?q=is%3Aissue+is%3Aopen+org%3Aasyncapi+label%3A%22good+first+issue%22&type=issues'
+                target='_blank'
+                rel='noopener noreferrer'
+                className='inline-flex items-center px-6 py-3 text-secondary-500 dark:text-secondary-400 border-2 border-secondary-500 dark:border-secondary-400 rounded-lg hover:bg-secondary-500 hover:text-white dark:hover:bg-secondary-500 dark:hover:text-white transition-all font-medium group'
+              >
+                <IconExternalLink className='w-5 h-5 mr-2 transform group-hover:translate-x-1 transition-transform' />
+                View on GitHub
+              </a>
+            </div>
+
+            {/* Become a Committee Member */}
+            <div className='space-y-4'>
+              <Heading
+                level={HeadingLevel.h2}
+                typeStyle={HeadingTypeStyle.lg}
+                className='text-gray-900 dark:text-dark-heading font-bold'
+              >
+                Become a Committee Member
+              </Heading>
+              <Paragraph typeStyle={ParagraphTypeStyle.md} className='text-gray-700 dark:text-gray-300'>
+                Learn how to become a Technical Steering Committee (TSC) member and see our current members.
+              </Paragraph>
+              <Link
+                href='/community/tsc'
+                className='inline-flex items-center px-6 py-3 text-secondary-500 dark:text-secondary-400 border-2 border-secondary-500 dark:border-secondary-400 rounded-lg hover:bg-secondary-500 hover:text-white dark:hover:bg-secondary-500 dark:hover:text-white transition-all font-medium group'
+              >
+                <IconArrowRightStroke className='w-5 h-5 mr-2 transform group-hover:translate-x-1 transition-transform' />
+                Learn More
+              </Link>
+            </div>
+          </div>
+
+          {/* Right Preview Image */}
+          <div className='flex-1 w-full lg:max-w-2xl'>
+            <div className='relative bg-white dark:bg-dark-card rounded-lg shadow-2xl dark:shadow-primary-500/20 overflow-hidden border border-gray-200 dark:border-gray-700'>
+              <img
+                src='/img/social/communitypage.webp'
+                alt='AsyncAPI GitHub Community Preview'
+                className='w-full h-auto'
+              />
+            </div>
+          </div>
         </div>
       </div>
-      <div data-testid='CommunityIndex-HomeCard'>
-        <HomeCards
-          headline='Thanking our AsyncAPI Ambassadors'
-          title='Ambassador Programs'
-          description="Launch OSS community programs that your community is proud to
-            participate in. Let's build thriving OSS communities together!"
-          btnText='Become an ambassador'
-          link='/community/ambassadors'
-          className='bg-ambassador'
-        />
-      </div>
-      <div className='mt-20 w-full md:flex md:justify-between'>
-        <div className='text-white md:w-1/2' data-testid='CommunityIndex-IssuesCard'>
-          <Card
-            taglineBg='bg-pink-100'
-            bg='bg-code-editor-dark'
-            heading='Explore and Contribute to Hot Issues'
-            description='Discover over 100s of interesting issues, suitable for new and existing contributors.'
-            tagline='Issues'
-            icon='🔥'
-            btnText='Explore issues'
-            btnBg='fill-pink-200 text-pink-200'
-            link='/community/dashboard'
-          />
-        </div>
-        <div
-          className='mt-10 flex flex-col justify-between md:mt-0 md:w-[45%]'
-          data-testid='CommunityIndex-SmallsCards'
-        >
-          <div data-testid='CommunityIndex-Newsroom-Card'>
-            <Card
-              icon='📣'
-              tagline='Newsroom'
-              type={CardType.SMALL}
-              heading='Never Get Left Behind'
-              description='Do you want to get the latest news with recent activities happening in the community?'
-              bg='bg-white'
-              link='/community/newsroom'
-            />
+
+      {/* AsyncAPI Slack Section */}
+      <div className='mt-20 py-20 px-6 md:px-12'>
+        <div className='max-w-7xl mx-auto flex flex-col lg:flex-row items-center gap-12 lg:gap-16'>
+          {/* Left Content */}
+          <div className='flex-1 space-y-6'>
+            <Heading
+              level={HeadingLevel.h1}
+              typeStyle={HeadingTypeStyle.xl}
+              className='text-gray-900 dark:text-dark-heading font-bold'
+            >
+              AsyncAPI Slack
+            </Heading>
+            <Paragraph typeStyle={ParagraphTypeStyle.lg} className='text-gray-700 dark:text-gray-300 leading-relaxed'>
+              AsyncAPI&apos;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.
+            </Paragraph>
+            <a
+              href='https://asyncapi.com/slack-invite'
+              target='_blank'
+              rel='noopener noreferrer'
+              className='inline-flex items-center px-8 py-4 bg-primary-500 hover:bg-primary-600 dark:bg-primary-500 dark:hover:bg-primary-600 text-white rounded-lg transition-all font-semibold text-lg shadow-lg hover:shadow-xl transform hover:-translate-y-0.5'
+            >
+              Join the Slack Community
+            </a>
           </div>
-          <div className='mt-10 md:mt-0' data-testid='CommunityIndex-Toolings-Card'>
-            <Card
-              icon='🧰'
-              tagline='Toolings'
-              type={CardType.SMALL}
-              heading='Check out our collection of Toolings'
-              description='Discover various AsyncAPI tools to optimize your journey! These tools are made by the community, for the community.'
-              bg='bg-pink-200'
-              link='/tools'
-            />
+
+          {/* Right Slack Screenshot */}
+          <div className='flex-1 w-full lg:max-w-2xl'>
+            <div className='relative rounded-lg shadow-2xl dark:shadow-primary-500/20 overflow-hidden'>
+              <img
+                src='/img/social/slack-ss.webp'
+                alt='AsyncAPI Slack Community Screenshot'
+                className='w-full h-auto'
+              />
+            </div>
           </div>
         </div>
       </div>
-      <div className='relative size-full'>
-        <HomeCards
-          headline='Community heartbeat'
-          title='AsyncAPI Community Meetings & Events'
-          description='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.'
-          className='bg-eventCover'
-          btnText='Explore more events'
-          link='/community/events'
-        />
-        <div className='absolute right-0 top-0 mt-[100px] hidden w-[500px] justify-end md:block'>
-          <ul>
-            {getEvents(eventsData, 3).map((event: Event, index: number) => {
-              return (
-                <li key={index} className='mt-2 w-full rounded-l-md bg-white p-2 md:p-10'>
-                  <a href={event.url} className='flex'>
-                    <div className='inline-flex h-12 min-w-12 flex-row rounded-full bg-pink-500 font-bold text-white'>
-                      <span className='flex-1 self-center text-center'>{event.date.format('D')}</span>
-                    </div>
-                    <div className='ml-4 text-left'>
-                      <h1 className='text-md md:text-lg'>{event.title}</h1>
-                      <span className='text-xs text-gray-500 md:text-sm'>
-                        {event.date.format('LLLL')} UTC
-                        {event.date.format('Z')}
-                      </span>
-                    </div>
-                  </a>
-                </li>
-              );
-            })}
-          </ul>
+
+      {/* Community Meetings & Events Section */}
+      <div className='mt-20 bg-primary-100 dark:bg-dark-card rounded-3xl py-20 px-6 md:px-12'>
+        <div className='max-w-7xl mx-auto'>
+          {/* Top Content */}
+          <div className='mb-12'>
+            <Heading
+              level={HeadingLevel.h2}
+              typeStyle={HeadingTypeStyle.lg}
+              className='text-gray-900 dark:text-dark-heading font-bold mb-6'
+            >
+              AsyncAPI Community Meetings & Events
+            </Heading>
+            <Paragraph
+              typeStyle={ParagraphTypeStyle.lg}
+              className='text-gray-700 dark:text-gray-300 leading-relaxed mb-6 max-w-4xl'
+            >
+              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.
+            </Paragraph>
+            <Link
+              href='/community/events-and-updates'
+              className='inline-flex items-center px-8 py-4 bg-primary-500 hover:bg-primary-600 dark:bg-primary-500 dark:hover:bg-primary-600 text-white rounded-lg transition-all font-semibold text-lg shadow-lg hover:shadow-xl transform hover:-translate-y-0.5'
+            >
+              Explore Events
+            </Link>
+          </div>
+
+          {/* Bottom Slack Events Screenshot */}
+          <div className='mt-12 flex justify-center'>
+            <div className='relative rounded-lg shadow-2xl dark:shadow-primary-500/20 overflow-hidden bg-white dark:bg-gray-800 max-w-4xl w-full'>
+              <img
+                src='/img/social/community-3.webp'
+                alt='AsyncAPI Community Events and Meetings'
+                className='w-full h-auto'
+              />
+            </div>
+          </div>
         </div>
       </div>
-      <div className='mt-10 flex flex-col sm:flex-row'>
-        <div className='m-5' data-testid='CommunityCards-Goals'>
-          <Card
-            type={CardType.SMALL}
-            tagline='Goals'
-            icon='🎯'
-            heading='2024 AsyncAPI Community Goals'
-            description='Help us improve our 2024 AsyncAPI community building and maintenance goals.'
-            bg='bg-white'
-            link='https://github.com/orgs/asyncapi/discussions/948'
-          />
-        </div>
-        <div className='m-5' data-testid='CommunityCards-TSC'>
-          <Card
-            type={CardType.SMALL}
-            tagline='TSC'
-            icon='🚀'
-            heading='Meet Folks Redefining the Initiative'
-            description='Learn how to become a Technical Steering Committee (TSC) member and see our current members.'
-            bg='bg-white'
-            link='/community/tsc'
-          />
+
+      {/* Ambassador Programs Section */}
+      <div className='mt-20 py-12 px-6 md:px-12 bg-gray-50 dark:bg-dark-background'>
+        <div className='max-w-6xl mx-auto flex flex-col lg:flex-row items-center gap-8 lg:gap-12'>
+          {/* Left Content */}
+          <div className='flex-1 space-y-4'>
+            <Heading
+              level={HeadingLevel.h2}
+              typeStyle={HeadingTypeStyle.lg}
+              className='text-gray-900 dark:text-dark-heading font-bold'
+            >
+              Ambassador Programs
+            </Heading>
+            <Paragraph typeStyle={ParagraphTypeStyle.md} className='text-gray-700 dark:text-gray-300 leading-relaxed'>
+              Launch OSS community programs that your community is proud to participate in. Let&apos;s build thriving
+              OSS communities together!
+            </Paragraph>
+            <Link
+              href='/community/ambassadors'
+              className='inline-flex items-center px-6 py-3 bg-primary-500 hover:bg-primary-600 dark:bg-primary-500 dark:hover:bg-primary-600 text-white rounded-lg transition-all font-medium shadow-lg hover:shadow-xl transform hover:-translate-y-0.5'
+            >
+              Become an Ambassador
+            </Link>
+          </div>
+
+          {/* Right Image */}
+          <div className='flex-shrink-0'>
+            <div className='relative w-72 lg:w-96 rounded-xl overflow-hidden shadow-2xl dark:shadow-primary-500/20'>
+              <img src='/img/social/woman.jpg' alt='AsyncAPI Ambassador' className='w-full h-auto object-cover' />
+            </div>
+          </div>
         </div>
       </div>
-      <div className='' data-testid='CommunityCards-Slack'>
-        <HomeCards
-          headline='All community info, tracked'
-          title='AsyncAPI Slack'
-          description="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."
-          btnText='Join AsyncAPI slack'
-          link='https://asyncapi.com/slack-invite'
-          className='bg-channelCover'
-        />
-      </div>
-      <div className='mt-10 flex justify-center'>
-        <div className='m-5 w-full max-w-6xl rounded-lg bg-gray-100 p-8 shadow-md'>
-          <div className='w-full'>
-            <Card
-              type={CardType.SMALL}
-              tagline='Finance'
-              icon='💰'
-              heading='Track Initiative Spending with Budget Analysis'
-              description="Explore our transparent finance section for a detailed analysis of our project's budget.
-               See how we track expenses and gain insights into funds allocation."
-              bg='bg-white'
-              link='/finance'
-            />
+
+      {/* Our Goals, Financials, and Merchandising Section */}
+      <div className='mt-20 py-20 px-6 md:px-12'>
+        <div className='max-w-7xl mx-auto'>
+          {/* Section Title */}
+          <Heading
+            level={HeadingLevel.h1}
+            typeStyle={HeadingTypeStyle.lg}
+            className='text-gray-900 dark:text-dark-heading font-bold mb-12 text-center lg:text-left'
+          >
+            Our Goals, Financials, and Merchandising
+          </Heading>
+
+          {/* Cards Grid */}
+          <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8'>
+            {/* Community Goal Card */}
+            <a
+              href='https://github.com/orgs/asyncapi/discussions/948'
+              target='_blank'
+              rel='noopener noreferrer'
+              className='relative group bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/20 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all border border-purple-200 dark:border-purple-700 hover:scale-[1.02] cursor-pointer'
+            >
+              <div className='absolute top-6 right-6'>
+                <IconExternalLink className='w-8 h-8 text-purple-400 dark:text-purple-300 group-hover:text-purple-500 dark:group-hover:text-purple-200 transition-colors' />
+              </div>
+              <div className='mb-6'>
+                <IconBadgeCheckmark className='w-12 h-12 text-purple-600 dark:text-purple-400' />
+              </div>
+              <Heading
+                level={HeadingLevel.h3}
+                typeStyle={HeadingTypeStyle.md}
+                className='text-purple-900 dark:text-purple-100 font-bold mb-3'
+              >
+                Community Goal
+              </Heading>
+              <Paragraph typeStyle={ParagraphTypeStyle.sm} className='text-purple-800 dark:text-purple-200'>
+                Help us improve our 2024 AsyncAPI community building and maintenance goals.
+              </Paragraph>
+            </a>
+
+            {/* Swags & Goodies Card */}
+            <a
+              href='https://www.store.asyncapi.com/'
+              target='_blank'
+              rel='noopener noreferrer'
+              className='relative group bg-gradient-to-br from-pink-50 to-pink-100 dark:from-pink-900/20 dark:to-pink-800/20 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all border border-pink-200 dark:border-pink-700 hover:scale-[1.02] cursor-pointer'
+            >
+              <div className='absolute top-6 right-6'>
+                <IconExternalLink className='w-8 h-8 text-pink-400 dark:text-pink-300 group-hover:text-pink-500 dark:group-hover:text-pink-200 transition-colors' />
+              </div>
+              <div className='mb-6'>
+                <IconBadgeCheckmark className='w-12 h-12 text-pink-600 dark:text-pink-400' />
+              </div>
+              <Heading
+                level={HeadingLevel.h3}
+                typeStyle={HeadingTypeStyle.md}
+                className='text-pink-900 dark:text-pink-100 font-bold mb-3'
+              >
+                Swags & Goodies
+              </Heading>
+              <Paragraph typeStyle={ParagraphTypeStyle.sm} className='text-pink-800 dark:text-pink-200'>
+                Explore our swag collection of AsyncAPI-themed t-shirts and goodies.
+              </Paragraph>
+            </a>
+
+            {/* Finance Card */}
+            <Link
+              href='/finance'
+              className='relative group bg-gradient-to-br from-cyan-50 to-cyan-100 dark:from-cyan-900/20 dark:to-cyan-800/20 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all border border-cyan-200 dark:border-cyan-700 hover:scale-[1.02] cursor-pointer block'
+            >
+              <div className='absolute top-6 right-6'>
+                <IconExternalLink className='w-8 h-8 text-cyan-400 dark:text-cyan-300 group-hover:text-cyan-500 dark:group-hover:text-cyan-200 transition-colors' />
+              </div>
+              <div className='mb-6'>
+                <IconBadgeCheckmark className='w-12 h-12 text-cyan-600 dark:text-cyan-400' />
+              </div>
+              <Heading
+                level={HeadingLevel.h3}
+                typeStyle={HeadingTypeStyle.md}
+                className='text-cyan-900 dark:text-cyan-100 font-bold mb-3'
+              >
+                Finance
+              </Heading>
+              <Paragraph typeStyle={ParagraphTypeStyle.sm} className='text-cyan-800 dark:text-cyan-200'>
+                Explore our transparent finance section for a detailed analysis of our project&apos;s budget. See how we
+                track expenses and gain insights into funds allocation.
+              </Paragraph>
+            </Link>
           </div>
         </div>
-        {/* <div className='m-5'>
-          <Card
-            type={CardType.SMALL}
-            tagline='Store'
-            icon='🛒'
-            heading='Swags and Goodies'
-            description='Explore our swag collection of AsyncAPI-themed t-shirts and goodies.'
-            link='https://www.asyncapi.com'
-            bg='bg-primary-200'
-          />
-        </div> */}
       </div>
-      <div className='mt-8 rounded-lg bg-dark py-12 md:mt-20' data-testid='CommunityCard-subscribe'>
+
+      {/* Toolings Showcase Section */}
+      <ToolingsShowcase />
+
+      {/* Newsletter Subscribe Section */}
+      <div className='mt-20 rounded-lg bg-dark py-12 md:mt-20' data-testid='CommunityCard-subscribe'>
         <NewsletterSubscribe dark />
       </div>
     </GenericLayout>
diff --git a/pages/community/tsc.tsx b/pages/community/tsc.tsx
index e8cb1f1563bd..a341204661d0 100644
--- a/pages/community/tsc.tsx
+++ b/pages/community/tsc.tsx
@@ -1,65 +1,323 @@
-import CommunityLayout, { Membership } from '@/components/layout/CommunityLayout';
-import TextLink from '@/components/typography/TextLink';
+import { sortBy } from 'lodash';
+import { useEffect, useState } from 'react';
+
+import type { Tsc } from '@/types/pages/community/Community';
+
+import Button from '../../components/buttons/Button';
+import TSCMemberCard from '../../components/community/TSCMemberCard';
+import { COMMUNITY_URLS } from '../../components/footer/FooterList';
+import IconArrowRight from '../../components/icons/ArrowRight';
+import IconDocument from '../../components/icons/Document';
+import IconUsersGroup from '../../components/icons/UsersGroup';
+import GenericLayout from '../../components/layout/GenericLayout';
+import NewsletterSubscribe from '../../components/NewsletterSubscribe';
+import PaginationComponent from '../../components/Pagination';
+import tscBoardList from '../../config/TSC_BOARD_MEMBERS.json';
+
+/**
+ * @description Add additional user information to the user object having TSC data
+ * @param {any} user - The user object having TSC data
+ */
+function addAdditionalUserInfo(user: any): Tsc {
+  const userData: any = {
+    ...user
+  };
+
+  if (!userData.name) {
+    userData.name = userData.github;
+  }
+
+  return userData;
+}
 
 /**
  * @description This function returns the TSC component.
  */
 export default function TSC() {
+  const image = '/img/social/community-tsc.webp';
+  const tscMembers = sortBy(
+    tscBoardList.map((user) => addAdditionalUserInfo(user)),
+    ['name']
+  ).filter((user) => user.isTscMember);
+
+  const [currentPage, setCurrentPage] = useState(1);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [filterType, setFilterType] = useState<'all' | 'maintainer' | 'available' | 'company'>('all');
+  const membersPerPage = 9;
+
+  const filteredMembers = tscMembers.filter((member) => {
+    const matchesSearch =
+      member.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      member.github?.toLowerCase().includes(searchTerm.toLowerCase());
+
+    const matchesFilter =
+      filterType === 'all' ||
+      (filterType === 'maintainer' && member.repos && member.repos.length > 0) ||
+      (filterType === 'available' && member.availableForHire) ||
+      (filterType === 'company' && member.company);
+
+    return matchesSearch && matchesFilter;
+  });
+
+  const totalPages = Math.ceil(filteredMembers.length / membersPerPage);
+  const indexOfLastMember = currentPage * membersPerPage;
+  const indexOfFirstMember = indexOfLastMember - membersPerPage;
+  const currentMembers = filteredMembers.slice(indexOfFirstMember, indexOfLastMember);
+
+  useEffect(() => {
+    if (totalPages === 0 || currentPage > totalPages) {
+      setCurrentPage(1);
+    }
+  }, [searchTerm, filterType, filteredMembers.length, totalPages, currentPage]);
+
   return (
-    <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>
+    <GenericLayout
+      title='Technical Steering Committee'
+      description='Meet the current AsyncAPI TSC members and learn how you can become one.'
+      image={image}
+      wide
+    >
+      {/* Hero Section */}
+      <div className='bg-white dark:bg-dark-background py-12 sm:py-16 lg:py-20'>
+        <div className='mx-auto max-w-7xl px-4 sm:px-6 lg:px-8'>
+          <div className='text-center'>
+            <h1 className='text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-gray-900 dark:text-white mb-6'>
+              Technical Steering Committee
+            </h1>
+            <p className='mx-auto max-w-3xl text-lg text-gray-600 dark:text-gray-400 mb-10'>
+              Meet the dedicated maintainers and contributors who guide the AsyncAPI Initiative forward, making
+              strategic decisions that shape the future of event-driven architecture.
+            </p>
+            <div className='flex flex-col sm:flex-row gap-4 justify-center items-center'>
+              <Button
+                text='Learn How to Join'
+                href={COMMUNITY_URLS.GITHUB.TSC_MEMBERSHIP}
+                target='_blank'
+                className='hover:bg-primary-600 focus:outline-none'
+                icon={<IconArrowRight className='-mb-1 size-5' />}
+              />
+              <Button
+                text='View Members'
+                bgClassName='bg-white hover:bg-gray-100 dark:bg-dark-card dark:hover:bg-gray-800'
+                textClassName='text-secondary-500 dark:text-secondary-400'
+                className='border border-secondary-500 dark:border-secondary-400'
+                href='#current-members'
+                icon={<span className='text-secondary-500 dark:text-secondary-400 text-xl'>+</span>}
+              />
+            </div>
+          </div>
         </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/docs/020-governance-and-policies/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>
+
+      {/* Stats Section */}
+      <div className='bg-white dark:bg-dark-background py-12'>
+        <div className='mx-auto max-w-7xl px-4 sm:px-6 lg:px-8'>
+          <div className='rounded-3xl py-20 px-8 bg-secondary-200 dark:bg-dark-card'>
+            <div className='grid grid-cols-1 md:grid-cols-2 gap-12 text-center text-gray-900 dark:text-white'>
+              <div className='flex flex-col items-center'>
+                <div className='bg-white/40 dark:bg-white/10 rounded-full p-4 mb-4'>
+                  <IconUsersGroup className='w-12 h-12 text-gray-900 dark:text-white' />
+                </div>
+                <div className='text-5xl font-bold mb-2'>10+</div>
+                <div className='text-xl font-medium opacity-90'>Active members</div>
+              </div>
+              <div className='flex flex-col items-center'>
+                <div className='bg-white/40 dark:bg-white/10 rounded-full p-4 mb-4'>
+                  <IconUsersGroup className='w-12 h-12 text-gray-900 dark:text-white' />
+                </div>
+                <div className='text-5xl font-bold mb-2'>100%</div>
+                <div className='text-xl font-medium opacity-90'>Open Source</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Info Cards Section */}
+      <div className='bg-white dark:bg-dark-background py-16 sm:py-20'>
+        <div className='mx-auto max-w-7xl px-4 sm:px-6 lg:px-8'>
+          <div className='grid grid-cols-1 md:grid-cols-3 gap-8'>
+            {/* What is TSC Card */}
+            <div className='bg-white dark:bg-dark-card rounded-2xl p-8 border border-gray-200 dark:border-gray-700 shadow-md hover:shadow-xl transition-shadow'>
+              <div className='flex items-center justify-center w-14 h-14 rounded-full bg-purple-100 dark:bg-purple-900/30 mb-6'>
+                <IconUsersGroup className='w-8 h-8 text-purple-600 dark:text-purple-400' />
+              </div>
+              <h3 className='text-xl font-bold text-gray-900 dark:text-white mb-4'>What is TSC?</h3>
+              <p className='text-gray-600 dark:text-gray-400 leading-relaxed'>
+                The Technical Steering Committee (TSC) is responsible for the oversight of the AsyncAPI Initiative.
+                Maintainers take committee seats decisions on the direction of the project, including releases,
+                contribution policies, and other strategic matters.
+              </p>
+            </div>
+
+            {/* How to Become a Member Card */}
+            <div className='bg-white dark:bg-dark-card rounded-2xl p-8 border border-gray-200 dark:border-gray-700 shadow-md hover:shadow-xl transition-shadow'>
+              <div className='flex items-center justify-center w-14 h-14 rounded-full bg-purple-100 dark:bg-purple-900/30 mb-6'>
+                <IconArrowRight className='w-8 h-8 text-purple-600 dark:text-purple-400' />
+              </div>
+              <h3 className='text-xl font-bold text-gray-900 dark:text-white mb-4'>How to become a member?</h3>
+              <p className='text-gray-600 dark:text-gray-400 leading-relaxed'>
+                Anybody can become a maintainer of the TSC. All you have to do is become a maintainer of one of the
+                AsyncAPI projects. To become a maintainer, you need to be nominated by a TSC member and then other
+                maintainers will make a vote.
+              </p>
+            </div>
+
+            {/* Our Governance Model Card */}
+            <div className='bg-white dark:bg-dark-card rounded-2xl p-8 border border-gray-200 dark:border-gray-700 shadow-md hover:shadow-xl transition-shadow'>
+              <div className='flex items-center justify-center w-14 h-14 rounded-full bg-pink-100 dark:bg-pink-900/30 mb-6'>
+                <IconDocument className='w-8 h-8 text-pink-600 dark:text-pink-400' />
+              </div>
+              <h3 className='text-xl font-bold text-gray-900 dark:text-white mb-4'>Our governance model</h3>
+              <p className='text-gray-600 dark:text-gray-400 leading-relaxed'>
+                AsyncAPI Initiative runs under an Open Governance Model with its technical project and community assets
+                under a neutral home, with an independent board of directors representing a cross-section.
+              </p>
+            </div>
+          </div>
         </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/docs/020-governance-and-policies/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.
+      </div>
+
+      {/* Newsletter Subscription Section */}
+      <div className='bg-white dark:bg-dark-background py-12'>
+        <div className='mx-auto max-w-7xl px-4 sm:px-6 lg:px-8'>
+          <div
+            className='rounded-3xl p-8 sm:p-12 shadow-xl'
+            style={{ background: 'linear-gradient(90deg, #5B4EFF 0%, #06b6d4 100%)' }}
+          >
+            <NewsletterSubscribe
+              type='TSC Voting'
+              title='Get notified when TSC is voting'
+              subtitle="You'll receive an email whenever someone requests the TSC to vote"
+              className='text-white'
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Current TSC Members Section */}
+      <div id='current-members' className='bg-white dark:bg-dark-background py-16 sm:py-20'>
+        <div className='mx-auto max-w-7xl px-4 sm:px-6 lg:px-8'>
+          <div className='text-center mb-12'>
+            <h2 className='text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-4'>Current TSC Members</h2>
+            <p className='text-gray-600 dark:text-gray-400 text-lg'>Meet our dedicated technical steering committee</p>
+          </div>
+
+          {/* Search and Filters */}
+          <div className='mb-8 flex flex-col sm:flex-row gap-2 items-center justify-between'>
+            <div className='w-full sm:w-auto sm:flex-1 max-w-md'>
+              <input
+                type='text'
+                placeholder='Search members by name or GitHub handle...'
+                value={searchTerm}
+                onChange={(e) => {
+                  setSearchTerm(e.target.value);
+                  setCurrentPage(1);
+                }}
+                className='w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-dark-card text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500 focus:border-transparent'
+              />
+            </div>
+            <div className='flex gap-2 flex-wrap'>
+              <button
+                onClick={() => {
+                  setFilterType('all');
+                  setCurrentPage(1);
+                }}
+                className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
+                  filterType === 'all'
+                    ? 'bg-primary-500 text-white'
+                    : 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
+                }`}
+              >
+                All
+              </button>
+              <button
+                onClick={() => {
+                  setFilterType('maintainer');
+                  setCurrentPage(1);
+                }}
+                className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
+                  filterType === 'maintainer'
+                    ? 'bg-primary-500 text-white'
+                    : 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
+                }`}
+              >
+                Maintainer
+              </button>
+              <button
+                onClick={() => {
+                  setFilterType('available');
+                  setCurrentPage(1);
+                }}
+                className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
+                  filterType === 'available'
+                    ? 'bg-primary-500 text-white'
+                    : 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
+                }`}
+              >
+                Available to hire
+              </button>
+              <button
+                onClick={() => {
+                  setFilterType('company');
+                  setCurrentPage(1);
+                }}
+                className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
+                  filterType === 'company'
+                    ? 'bg-primary-500 text-white'
+                    : 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
+                }`}
+              >
+                Company
+              </button>
+            </div>
+          </div>
+
+          <p className='text-center text-gray-600 dark:text-gray-400 mb-8'>
+            Showing {filteredMembers.length} of {tscMembers.length} members
           </p>
+
+          {/* Members Grid */}
+          {filteredMembers.length === 0 ? (
+            <div className='text-center py-12'>
+              <p className='text-gray-600 dark:text-gray-400 text-lg'>No members found for this filter</p>
+            </div>
+          ) : (
+            <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-12'>
+              {currentMembers.map((member) => (
+                <TSCMemberCard key={member.github} member={member} />
+              ))}
+            </div>
+          )}
+
+          {/* Pagination */}
+          <PaginationComponent
+            currentPage={currentPage}
+            totalPages={totalPages}
+            onPageChange={setCurrentPage}
+            variant='compact'
+          />
+        </div>
+      </div>
+
+      {/* Want to Join TSC CTA */}
+      <div className='bg-white dark:bg-dark-background py-12'>
+        <div className='mx-auto max-w-7xl px-4 sm:px-6 lg:px-8'>
+          <div
+            className='rounded-3xl p-8 sm:p-12 shadow-xl text-center'
+            style={{ background: 'linear-gradient(90deg, #8B5CF6 0%, #7C3AED 50%, #22D3EE 100%)' }}
+          >
+            <h2 className='text-3xl sm:text-4xl font-bold text-white mb-4'>Want to join TSC?</h2>
+            <p className='text-lg text-white/90 mb-8'>Join our community and help shape the future of AsyncAPI</p>
+            <Button
+              text='Get Started'
+              href={COMMUNITY_URLS.GITHUB.CONTRIBUTING}
+              target='_blank'
+              className='text-center bg-white text-primary-600 hover:bg-gray-100 focus:outline-none'
+            />
+          </div>
         </div>
       </div>
-    </CommunityLayout>
+    </GenericLayout>
   );
 }
diff --git a/pages/finance.tsx b/pages/finance.tsx
index a6e6bf59050d..59751761deac 100644
--- a/pages/finance.tsx
+++ b/pages/finance.tsx
@@ -55,5 +55,9 @@ export default function FinancialSummary() {
 
   const shouldUseContainer = windowWidth > 1700;
 
-  return <div>{shouldUseContainer ? <Container wide>{renderComponents()}</Container> : renderComponents()}</div>;
+  return (
+    <div className='dark:bg-dark-background'>
+      {shouldUseContainer ? <Container wide>{renderComponents()}</Container> : renderComponents()}
+    </div>
+  );
 }
diff --git a/pages/roadmap.tsx b/pages/roadmap.tsx
index 00a5e805c336..8a9fbe4f2824 100644
--- a/pages/roadmap.tsx
+++ b/pages/roadmap.tsx
@@ -2,11 +2,17 @@
 import React from 'react';
 import YouTubeEmbed from 'react-youtube-embed';
 
+import { ButtonIconPosition } from '@/types/components/buttons/ButtonPropsType';
 import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
-import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
 
+import Button from '../components/buttons/Button';
+import IconCode from '../components/icons/Code';
+import IconGear from '../components/icons/Gear';
+import IconLightning from '../components/icons/Lightning';
+import IconPlus from '../components/icons/Plus';
 import InlineHelp from '../components/InlineHelp';
 import GenericLayout from '../components/layout/GenericLayout';
+import GoalCardRoadmapPage from '../components/roadmap/GoalCardRoadmapPage';
 import RoadmapColumn from '../components/roadmap/RoadmapColumn';
 import type { RoadmapItem } from '../components/roadmap/types';
 import Heading from '../components/typography/Heading';
@@ -493,136 +499,118 @@ export default function RoadmapPage() {
 
   return (
     <GenericLayout title='Vision & Roadmap' description={description} image={image} wide>
-      <div className='overflow-hidden py-12'>
-        <div className='relative mx-auto max-w-xl px-4 sm:px-6 lg:max-w-screen-xl lg:px-8'>
-          <div className='relative'>
-            <div className='lg:mx-auto lg:w-2/3 lg:text-center'>
-              <Paragraph
-                typeStyle={ParagraphTypeStyle.md}
-                textColor='text-secondary-500'
-                className='text-center font-bold uppercase'
-              >
-                Vision
-              </Paragraph>
-              <Heading level={HeadingLevel.h1} className='text-center'>
-                AsyncAPI becomes the #1 API specification for defining and developing APIs.{' '}
-                <span className='block text-secondary-500 underline'>Any kind of APIs.</span>
-              </Heading>
-              <Paragraph className='mt-10 lg:pr-4'>
-                It all starts with a vision. <strong>This is where we want to see AsyncAPI by 2026.</strong> To make
-                this vision a reality, we've set some goals below that will help us to get there.
-              </Paragraph>
-              <Paragraph className='mt-4 lg:pr-4'>
-                {/* eslint-disable-next-line react/no-unescaped-entities */}
-                These goals are not necessarily everything we'll have to do to get to that vision but instead, they are
-                manageable objectives we can already anticipate.{' '}
-                <strong>Together, vision and goals set the direction of the project.</strong>
-              </Paragraph>
+      <div className='overflow-hidden'>
+        {/* Hero Section */}
+        <div className='bg-white dark:bg-dark-background py-16 sm:py-20'>
+          <div className='mx-auto max-w-7xl px-4 sm:px-6 lg:px-8'>
+            <div className='text-center'>
+              <span className='inline-block rounded-full border border-secondary-300 dark:border-secondary-600 bg-white dark:bg-dark-card px-4 py-2 text-sm font-semibold text-secondary-500 dark:text-secondary-400 mb-6'>
+                VISION 2026
+              </span>
+              <h1 className='text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-gray-900 dark:text-white mb-6'>
+                AsyncAPI: The #1 API Specification
+                <br />
+                for All APIs
+              </h1>
+              <div className='mb-8'>
+                <TextLink
+                  href='#'
+                  className='text-xl sm:text-2xl font-semibold text-secondary-500 dark:text-secondary-400 underline hover:text-secondary-600 dark:hover:text-secondary-300'
+                >
+                  Any kind of APIs
+                </TextLink>
+              </div>
+              <p className='mx-auto max-w-3xl text-lg text-gray-600 dark:text-gray-400'>
+                We envision AsyncAPI leading the way by 2026. To achieve this, we've set clear, actionable goals to
+                guide our journey. While not exhaustive, these objectives provide a roadmap for progress.{' '}
+                <strong>Vision and goals shape the project's future.</strong>
+              </p>
             </div>
+          </div>
+        </div>
 
-            <div className='relative mt-20'>
-              <div className='grid lg:grid-cols-3 lg:gap-8'>
-                <div>
-                  <div className='mb-2 lg:my-0 lg:text-center'>
-                    <Paragraph
-                      typeStyle={ParagraphTypeStyle.md}
-                      textColor='text-secondary-500'
-                      className='mr-2 inline-block p-1.5 font-bold uppercase lg:mb-2 lg:mr-0 lg:block lg:bg-transparent lg:p-0'
-                    >
-                      Goal
-                    </Paragraph>
-                    <Heading typeStyle={HeadingTypeStyle.mdSemibold}>
-                      AsyncAPI unifies all the API specifications
-                    </Heading>
-                  </div>
-                  <Paragraph typeStyle={ParagraphTypeStyle.md} className='my-4 lg:text-center'>
-                    Nobody does only event-driven architectures. Most people complement them with REST (OpenAPI),
-                    GraphQL, and/or RPC APIs.{' '}
-                    <strong>
-                      We want people to use the AsyncAPI specification and tooling together with their existing OpenAPI,
-                      GraphQL, and gRPC definitions.
-                    </strong>{' '}
-                    For that purpose, our specification and tools will need to understand and leverage many other
-                    specifications and tools.
-                  </Paragraph>
-                  <Paragraph typeStyle={ParagraphTypeStyle.md} className='my-4 lg:text-center'>
-                    This is not about reinventing the wheel or creating yet another spec to solve the same problems but
-                    to integrate with the existing tools and specs instead.
-                  </Paragraph>
-                </div>
-                <div>
-                  <div className='mb-2 mt-6 lg:my-0 lg:text-center'>
-                    <Paragraph
-                      typeStyle={ParagraphTypeStyle.md}
-                      textColor='text-secondary-500'
-                      className='mr-2 inline-block p-1.5 font-bold uppercase lg:mb-2 lg:mr-0 lg:block lg:bg-transparent lg:p-0'
-                    >
-                      Goal
-                    </Paragraph>
-                    <Heading typeStyle={HeadingTypeStyle.mdSemibold}>API development experience is seamless</Heading>
-                  </div>
-                  <Paragraph typeStyle={ParagraphTypeStyle.md} className='my-4 lg:text-center'>
-                    We want to make the development experience super seamless, from idea to production.{' '}
-                    <strong>
-                      Users should be able to create their first API within minutes without prior knowledge of AsyncAPI,
-                      the communication protocol, or anything else that's not business logic.
-                    </strong>
-                  </Paragraph>
-                  <Paragraph typeStyle={ParagraphTypeStyle.md} className='my-4 lg:text-center'>
-                    Furthermore, making sure production behavior and documentation are always aligned, independently of
-                    the programming language or framework of choice.
-                  </Paragraph>
-                </div>
-                <div>
-                  <div className='mb-2 mt-6 lg:my-0 lg:text-center'>
-                    <Paragraph
-                      typeStyle={ParagraphTypeStyle.md}
-                      textColor='text-secondary-500'
-                      className='mr-2 inline-block p-1.5 font-bold uppercase lg:mb-2 lg:mr-0 lg:block lg:bg-transparent lg:p-0'
-                    >
-                      Goal
-                    </Paragraph>
-                    <Heading typeStyle={HeadingTypeStyle.mdSemibold}>The AsyncAPI community grows 400%</Heading>
-                  </div>
-                  <Paragraph typeStyle={ParagraphTypeStyle.md} className='my-4 lg:text-center'>
-                    We are aware that our goals are ambitious.{' '}
-                    <strong>
-                      None of the other goals are possible if we don't have a huge community supporting us. AsyncAPI is
-                      and must continue being a community-driven initiative. Now more than ever.
-                    </strong>
-                  </Paragraph>
-                  <Paragraph typeStyle={ParagraphTypeStyle.md} className='my-4 lg:text-center'>
-                    We need people to contribute code, ideas, docs, articles, presentations, and more. The sponsors base
-                    should also grow along with the community size and the donated money should serve to give back to
-                    the community.
-                  </Paragraph>
-                </div>
-              </div>
+        {/* Our Goals Section */}
+        <div className='bg-secondary-100 rounded-2xl dark:bg-dark-card py-16 sm:py-20'>
+          <div className='mx-auto max-w-7xl px-4 sm:px-6 lg:px-8'>
+            <h2 className='text-3xl sm:text-4xl font-bold text-center text-gray-900 dark:text-white mb-12'>
+              Our Goals
+            </h2>
+            <div className='grid grid-cols-1 md:grid-cols-3 gap-8'>
+              <GoalCardRoadmapPage
+                icon={IconCode}
+                title='Unified API Specifications'
+                description='AsyncAPI seamlessly integrates with OpenAPI, GraphQL, and gRPC—no need to reinvent the wheel. Our docs embrace, not replace, existing specifications.'
+              />
+              <GoalCardRoadmapPage
+                icon={IconLightning}
+                title='Effortless API Development'
+                description='Build your first API in minutes—no prior AsyncAPI knowledge needed. Just add a goal as frictionless user experience. Your idea to production, across all frameworks.'
+              />
+              <GoalCardRoadmapPage
+                icon={IconGear}
+                title='400% Community Growth'
+                description={
+                  'AsyncAPI thrives on community. Expanding contributions, sponsorships, and engagement ensures continued success. ' +
+                  "Let's grow together."
+                }
+              />
             </div>
+          </div>
+        </div>
 
-            <div className='lg:mx-auto lg:w-2/3 lg:text-center'>
-              <Paragraph className='mt-10 lg:pr-4'>
-                We'll be regularly setting outcomes or key results that will allow us to accomplish the goals above. You
-                can find a categorization of the outcomes in the roadmap below. They are split by priority and some of
-                them show the related features.
-              </Paragraph>
-              <Paragraph className='mb-14 mt-4 lg:pr-4'>
-                Please bear in mind <strong>this is an outcome-based roadmap</strong>. We don't maintain a long-term
-                release plan. If you want to find more specific and actionable items, head to the related repository
-                issues or start an issue/discussion at
-                <TextLink target='_blank' href='https://github.com/asyncapi/community'>
-                  github.com/asyncapi/community
-                </TextLink>
-                .
-              </Paragraph>
+        {/* Outcomes Section */}
+        <div className='bg-white dark:bg-dark-background py-16 sm:py-20'>
+          <div className='mx-auto max-w-7xl px-4 sm:px-6 lg:px-8'>
+            <div className='text-center mb-12'>
+              <h2 className='text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-4'>
+                Outcomes we want to achieve
+              </h2>
+              <p className='mx-auto max-w-3xl text-lg text-gray-600 dark:text-gray-400'>
+                At AsyncAPI, we focus on outcomes over rigid timelines. We prioritize meaningful results that drive our
+                goals forward. Our roadmap categorizes these outcomes by priority, highlighting related features.
+              </p>
+            </div>
+
+            <div className='grid grid-cols-1 md:grid-cols-2 gap-8 mt-12 mb-16'>
+              {/* Outcome-Based Approach */}
+              <div className='bg-secondary-100 dark:bg-dark-card rounded-xl p-8'>
+                <h3 className='text-2xl font-bold text-gray-900 dark:text-white mb-4'>Outcome-Based Approach</h3>
+                <p className='text-gray-600 dark:text-gray-400 leading-relaxed'>
+                  We focus on impact, not rigid timelines. Instead of a long-term release plan, we prioritize meaningful
+                  results.
+                </p>
+              </div>
 
-              <Heading level={HeadingLevel.h3} typeStyle={HeadingTypeStyle.lg} className='mt-10 text-center'>
-                Roadmap
-              </Heading>
-              <Paragraph className='mx-auto mt-4 max-w-3xl text-center'>The outcomes we want to achieve</Paragraph>
+              {/* Get Involved */}
+              <div className='bg-secondary-100 dark:bg-dark-card rounded-xl p-8'>
+                <h3 className='text-2xl font-bold text-gray-900 dark:text-white mb-4'>Get Involved !</h3>
+                <p className='text-gray-600 dark:text-gray-400 leading-relaxed mb-6'>
+                  Want to dive deeper? Check out our repository discussions or start an issue.
+                </p>
+                <Button
+                  text='Join Our Community'
+                  href='https://github.com/asyncapi/community'
+                  target='_blank'
+                  className='hover:bg-primary-600'
+                  icon={<IconPlus className='w-5 h-5' />}
+                  iconPosition={ButtonIconPosition.RIGHT}
+                />
+              </div>
             </div>
+          </div>
+        </div>
+
+        {/* Roadmap Graph Section */}
+        <div className='relative mx-auto max-w-xl px-4 sm:px-6 lg:max-w-screen-xl lg:px-8 py-12'>
+          <div className='relative'>
+            <Heading level={HeadingLevel.h3} typeStyle={HeadingTypeStyle.lg} className='mt-10 text-center'>
+              Roadmap
+            </Heading>
+            <Paragraph className='mx-auto mt-4 dark:text-gray-300 max-w-3xl text-center'>
+              The outcomes we want to achieve
+            </Paragraph>
 
-            <div className='mx-auto mt-10 max-w-3xl text-sm font-semibold uppercase text-gray-800 lg:flex lg:justify-center'>
+            <div className='mx-auto mt-10 max-w-3xl text-sm font-semibold uppercase text-gray-800 dark:text-gray-300 lg:flex lg:justify-center'>
               <div className='mb-2 flex justify-center'>
                 <div className='my-1 mr-2 w-5 rounded bg-green-300'></div>
                 <div className='my-1 mr-2 w-5 rounded bg-yellow-200'></div>
@@ -644,7 +632,7 @@ export default function RoadmapPage() {
                 </div>
               </div>
               <div className='mb-2 flex justify-center'>
-                <div className='my-1 mr-2 w-5 rounded bg-black'></div>
+                <div className='my-1 mr-2 w-5 rounded bg-black dark:bg-gray-200'></div>
                 <div className='mr-4'>
                   Implementation{' '}
                   <InlineHelp text='Related repos, issues, or pull requests implementing the solution. They may implement the solution partially or totally.' />
@@ -673,7 +661,7 @@ export default function RoadmapPage() {
               />
             </div>
 
-            <Paragraph className='mx-auto mb-4 mt-12 text-center lg:w-1/2'>
+            <Paragraph className='mx-auto mb-4 mt-12 text-center dark:text-gray-300 lg:w-1/2'>
               If you want to know more about the format of this roadmap, watch this recording from one of our SIG
               meetings:
             </Paragraph>
diff --git a/pages/tools/index.tsx b/pages/tools/index.tsx
index f9c64927064c..96993f1e8ae7 100644
--- a/pages/tools/index.tsx
+++ b/pages/tools/index.tsx
@@ -3,6 +3,9 @@ import React from 'react';
 import ToolsDashboard from '@/components/tools/ToolsDashboard';
 import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
 
+import IconCommunityDriven from '../../components/icons/CommunityDriven';
+import IconOpenSource from '../../components/icons/OpenSource';
+import IconProductionReady from '../../components/icons/ProductionReady';
 import GenericLayout from '../../components/layout/GenericLayout';
 import Heading from '../../components/typography/Heading';
 import Paragraph from '../../components/typography/Paragraph';
@@ -17,26 +20,84 @@ export default function ToolsIndex() {
   const image = '/img/social/tools-dashboard-card.webp';
 
   return (
-    <div>
+    <div className='bg-white dark:bg-dark-background min-h-screen transition-colors duration-300'>
       <GenericLayout title='Tools' description={description} image={image}>
-        <div>
-          <div className='mt-12 text-center'>
-            <Heading level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.lg}>
-              AsyncAPI Tools Dashboard
-            </Heading>
-            <Paragraph className='mx-auto my-3 max-w-2xl sm:mt-4'>
-              Discover various AsyncAPI tools to optimize your journey! These tools are made by the community, for the
-              community. Have an AsyncAPI tool you want to be featured on this list? Then follow the procedure given in
-              the
-              <TextLink
-                href='https://www.asyncapi.com/docs/community/040-guides/add-new-asyncapi-tool-to-website '
-                target='_blank'
-              >
-                Tool Documentation
-              </TextLink>{' '}
-              file, and show up your AsyncAPI Tool card in the website.
-            </Paragraph>
+        <div className='px-4 sm:px-6 lg:px-8'>
+          {/* Hero Section */}
+          <div className='relative mt-16 mb-12 text-center overflow-hidden'>
+            {/* Background decorative elements */}
+            <div className='absolute inset-0 -z-10 overflow-hidden'>
+              {/* Gradient orbs */}
+              <div className='absolute top-0 left-1/4 w-96 h-96 bg-primary-500/10 dark:bg-primary-500/5 rounded-full blur-3xl'></div>
+              <div className='absolute top-10 right-1/4 w-80 h-80 bg-secondary-500/10 dark:bg-secondary-500/5 rounded-full blur-3xl'></div>
+
+              {/* Grid pattern */}
+              <div className='absolute inset-0 bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] dark:bg-[linear-gradient(to_right,#ffffff05_1px,transparent_1px),linear-gradient(to_bottom,#ffffff05_1px,transparent_1px)] bg-[size:4rem_4rem]'></div>
+            </div>
+
+            {/* Content */}
+            <div className='relative'>
+              {/* Icon/Badge */}
+              <div className='mb-6 inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gradient-to-r from-primary-100 to-secondary-100 dark:from-primary-900/30 dark:to-secondary-900/30 border border-primary-200 dark:border-primary-800'>
+                <svg
+                  className='w-5 h-5 text-primary-600 dark:text-primary-400'
+                  fill='none'
+                  viewBox='0 0 24 24'
+                  stroke='currentColor'
+                >
+                  <path
+                    strokeLinecap='round'
+                    strokeLinejoin='round'
+                    strokeWidth={2}
+                    d='M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z'
+                  />
+                </svg>
+                <span className='text-sm font-semibold text-gray-700 dark:text-gray-300'>Community Tools</span>
+              </div>
+
+              <div className='mb-8'>
+                <Heading
+                  level={HeadingLevel.h1}
+                  typeStyle={HeadingTypeStyle.lg}
+                  className='text-gray-900 dark:text-white mb-4 font-bold'
+                >
+                  AsyncAPI Tools Dashboard
+                </Heading>
+                <div className='w-24 h-1 bg-gradient-to-r from-primary-500 to-secondary-500 mx-auto rounded-full shadow-lg shadow-primary-500/50'></div>
+              </div>
+
+              <Paragraph className='mx-auto my-6 max-w-3xl text-gray-700 dark:text-gray-300 text-lg leading-relaxed px-4'>
+                Discover various AsyncAPI tools to optimize your journey! These tools are made by the community, for the
+                community. Have an AsyncAPI tool you want to be featured on this list? Then follow the procedure given
+                in the{' '}
+                <TextLink
+                  href='https://github.com/asyncapi/community/blob/master/new-tool-documentation.md'
+                  target='_blank'
+                  className='text-gray-900 dark:text-white font-semibold hover:text-gray-600 dark:hover:text-gray-300 underline-offset-4 underline decoration-2 decoration-primary-500 dark:decoration-primary-400 transition-colors duration-200'
+                >
+                  Tool Documentation
+                </TextLink>{' '}
+                file, and show up your AsyncAPI Tool card in the website.
+              </Paragraph>
+
+              {/* Stats or Feature badges */}
+              <div className='mt-10 flex flex-wrap justify-center gap-6 text-sm'>
+                <div className='flex items-center gap-2 px-4 py-2 rounded-lg bg-white/50 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700 backdrop-blur-sm'>
+                  <IconOpenSource className='w-5 h-5 text-green-600 dark:text-green-400' />
+                  <span className='font-medium text-gray-700 dark:text-gray-300'>Open Source</span>
+                </div>
+                <div className='flex items-center gap-2 px-4 py-2 rounded-lg bg-white/50 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700 backdrop-blur-sm'>
+                  <IconCommunityDriven className='w-5 h-5 text-blue-600 dark:text-blue-400' />
+                  <span className='font-medium text-gray-700 dark:text-gray-300'>Community Driven</span>
+                </div>
+                <div className='flex items-center gap-2 px-4 py-2 rounded-lg bg-white/50 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700 backdrop-blur-sm'>
+                  <IconProductionReady className='w-5 h-5 text-purple-600 dark:text-purple-400' />
+                  <span className='font-medium text-gray-700 dark:text-gray-300'>Production Ready</span>
+                </div>
+              </div>
+            </div>
           </div>
+
           <ToolFilter>
             <ToolsDashboard />
           </ToolFilter>
diff --git a/public/_redirects b/public/_redirects
index b340fc021b35..ea3ae0095ef2 100644
--- a/public/_redirects
+++ b/public/_redirects
@@ -70,6 +70,7 @@ https://www.asyncapi.io/* https://www.asyncapi.com/:splat 301!
 
 # Additional redirection
 /community/meetings /community/events 301!
+/community/events /community/events-and-updates 301!
 /cheatsheet https://github.com/asyncapi/website/tree/master/cheatsheet 302!
 
 # Short URLs
diff --git a/public/img/social/community-3.webp b/public/img/social/community-3.webp
new file mode 100644
index 000000000000..4fff56f95227
Binary files /dev/null and b/public/img/social/community-3.webp differ
diff --git a/public/img/social/communitypage.webp b/public/img/social/communitypage.webp
new file mode 100644
index 000000000000..8503584c2b51
Binary files /dev/null and b/public/img/social/communitypage.webp differ
diff --git a/public/img/social/slack-ss.webp b/public/img/social/slack-ss.webp
new file mode 100644
index 000000000000..83b43fd52f98
Binary files /dev/null and b/public/img/social/slack-ss.webp differ
diff --git a/public/img/social/slack.webp b/public/img/social/slack.webp
new file mode 100644
index 000000000000..4fd336be1e3f
Binary files /dev/null and b/public/img/social/slack.webp differ
diff --git a/public/img/social/woman.jpg b/public/img/social/woman.jpg
new file mode 100644
index 000000000000..4d0e73896b2e
Binary files /dev/null and b/public/img/social/woman.jpg differ
diff --git a/public/img/sponsors/aklivity_logo.png b/public/img/sponsors/aklivity_logo.png
index 723612a7360d..5b9afb942a1a 100644
Binary files a/public/img/sponsors/aklivity_logo.png and b/public/img/sponsors/aklivity_logo.png differ
diff --git a/public/img/sponsors/smartbear_logo.png b/public/img/sponsors/smartbear_logo.png
index 2ceb0b4c5316..f258a6e44976 100644
Binary files a/public/img/sponsors/smartbear_logo.png and b/public/img/sponsors/smartbear_logo.png differ
diff --git a/public/locales/de/landing-page.json b/public/locales/de/landing-page.json
index ab75bdab207f..093b83575ade 100644
--- a/public/locales/de/landing-page.json
+++ b/public/locales/de/landing-page.json
@@ -1,11 +1,12 @@
 {
     "main": {
         "header": "Aufbau der Zukunft der",
-        "subHeader": "Ereignisgesteuerte Architekturen (EDA)",
+        "subHeader": "Ereignisgesteuerte",
+        "extraSubHeader": "Architekturen (EDA)",
         "body_pretext": "Open-Source-Tools zur einfachen Erstellung und Wartung Ihrer ereignisgesteuerten Architektur. Alle basieren auf der AsyncAPI-Spezifikation, der ",
         "body_boldtext": "Industriestandard",
         "body_posttext": " zur Definition asynchroner APIs.",
-        "docs_btn": "Lesen Sie die Dokumente",
+        "community_btn": "sluit je aan bij onze gemeenschap",
         "search_btn": "Schnellsuche...",
         "slogan_text": "Wir sind stolz darauf, Teil der",
         "slogan_link": "Linux Foundation"
@@ -41,6 +42,10 @@
         "much-more.description": "Wir haben viele verschiedene Tools und laden Sie ein, unsere Ideen zu erkunden und neue Ideen für AsyncAPI vorzuschlagen.",
         "much-more.links.whyasyncapi-muchmore-github-link": "GitHub-Diskussionen anzeigen"
     },
+    "sneakpeek": {
+        "title": "Ein Einblick in den echten Prozess",
+        "description": "Eines unserer Hauptziele ist es, den aktuellen Stand der ereignisgesteuerten Architektur (EDA) zu verbessern."
+    },
     "adopters": {
         "title": "Von den weltweit führenden Marken übernommen",
         "description": "Diese Marken verwenden AsyncAPI bereits in der Produktion. Nutzt Ihr Unternehmen AsyncAPI und möchte in diese Liste aufgenommen werden?",
@@ -68,7 +73,9 @@
         "supportedByLink": "Kontaktieren Sie uns per E-Mail",
         "supportedByPosttext": " für weitere Informationen."
     },
-    "testimonials": {
-        "title": "Was die Experten sagen"
+    "events": {
+        "title": "Unsere Gemeinschafts-Events",
+        "description":"AsyncAPI organiseert wekelijks verschillende bijeenkomsten. Deze richten zich op verschillende onderwerpen, soms puur technisch en soms over community-building. Kies er een en doe mee!",
+        "meetingTitle":"Lees meer over onze bijeenkomsten."
     }
 }
\ No newline at end of file
diff --git a/public/locales/en/landing-page.json b/public/locales/en/landing-page.json
index ae14df4c0145..20800c478e1f 100644
--- a/public/locales/en/landing-page.json
+++ b/public/locales/en/landing-page.json
@@ -1,18 +1,19 @@
 {
     "main": {
         "header": "Building the future of",
-        "subHeader": "Event-Driven Architectures (EDA)",
+        "subHeader": "Event-Driven",
+        "extraSubHeader": "Architectures (EDA)",
         "body_pretext": "Open-Source tools to easily build and maintain your event-driven architecture. All powered by the AsyncAPI specification, the ",
         "body_boldtext": "industry standard",
         "body_posttext": " for defining asynchronous APIs.",
-        "docs_btn": "Read the docs",
+        "community_btn": "Join our community",
         "search_btn": "Quick search...",
         "slogan_text": "Proud to be part of the",
         "slogan_link": "Linux Foundation"
     },
     "features": {
-        "title": "Why AsyncAPI?",
-        "description": "Improving the current state of Event-Driven Architectures (EDA)",
+        "title": "What You Can use AsyncAPI For",
+        "description": "One of our main goals is to improve the current state of Event Driven Architecture (EDA))",
 
         "specification.name": "Specification",
         "specification.description": "Allows you to define the interfaces of asynchronous APIs and is protocol agnostic.",
@@ -41,6 +42,10 @@
         "much-more.description": "We have many different tools and welcome you to explore our ideas and propose new ideas to AsyncAPI.",
         "much-more.links.whyasyncapi-muchmore-github-link": "View GitHub Discussions"
     },
+    "sneakpeek": {
+        "title": "Sneak Peek Into The Real Process",
+        "description": "One of our main goals is to improve the current state of Event Driven Architecture (EDA))"
+    },
     "adopters": {
         "title": "Adopted by the world leading brands",
         "description": "These brands are already using AsyncAPI in production. Is your company using AsyncAPI and wants to be included in this list?",
@@ -48,10 +53,10 @@
     },
     "community": {
         "title": "Join our great community!",
-        "subtitle": "We're a community of great people who are passionate about AsyncAPI and event-driven architectures.",
+        "subtitle": "We're a group of amazing folks who share a great passion for AsyncAPI and event-driven architectures. We extend a warm welcome to anyone who wants to join our Slack workspace. Whether you have questions about using AsyncAPI, want to be a part of our community or simply want to say hello 👋, we'd love to have you! 🙂",
         "slackCTATitle": "Join our Slack workspace",
         "slackCTADesc": "We welcome everyone to join our Slack workspace. If you have a question on how to use AsyncAPI, want to contribute, or simply want to say hello 👋, you're welcome to join us. We're nice people 🙂",
-        "slackCTABtn": "Join us!",
+        "slackCTABtn": "Join us on Slack!",
         "meetingTitle": "Join our public meetings",
         "meetingDesc": "AsyncAPI hosts different meetings every week. They are focused on different topics, sometimes purely technical and sometimes about community building. Pick one and join us!",
         "meetingLink": "Learn more about our meetings."
@@ -68,7 +73,9 @@
         "supportedByLink": "Email us",
         "supportedByPosttext": " for more info."
     },
-    "testimonials": {
-        "title": "What the experts are saying"
+    "events": {
+        "title": "Our Community Events",
+        "description":"AsyncAPI hosts different meetings every week. They are focused on different topics, sometimes purely technical and sometimes about community building. Pick one and join us!",
+        "meetingTitle":"Learn more about our meetings."
     }
 }
\ No newline at end of file
diff --git a/public/locales/zh_cn/common.json b/public/locales/zh_cn/common.json
deleted file mode 100644
index 51b4005ee52a..000000000000
--- a/public/locales/zh_cn/common.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-    "newsletterCTA": {
-        "title": "订阅我们的新闻通讯以接收有关 AsyncAPI 的新闻。",
-        "subtitle": "我们承诺只发送有用内容，没有垃圾邮件。 ✌️",
-        "nameInput": "你的名字",
-        "emailInput": "你的邮箱",
-        "subscribeBtn": "订阅",
-        "successTitle": "感谢你的订阅！",
-        "errorTitle": "发生了错误",
-        "errorSubtitle": "订阅失败，请通过提交错误报告告知我们",
-        "errorLinkText": "这里"
-    },
-    "newsroomSection": {
-        "title": "最新新闻和博客",
-        "description": "欢迎来到我们的新闻室。在这里，您将获得有关我们博客、文章、公告和 YouTube 直播的最新信息。让我们跟上组织最近的活动。",
-        "newsroomBtn": "访问新闻室",
-        "newsroomFeaturedPost": "特色博客文章"
-    },
-    "googleCalendarBtn": "添加到 Google 日历",
-    "subscribeBtn": "订阅",
-    "icsFileBtn": "下载 ICS 文件",
-    "githubButton": "在 Github 上查看",
-    "calendar": {
-        "title": "即将举行的活动",
-        "viewCalendarBtn": "查看日历",
-        "noMeetingsMessage": "接下来几天没有安排会议。您可以通过点击下面的按钮查看即将举行的活动。"
-    }
-}
diff --git a/public/locales/zh_cn/landing-page.json b/public/locales/zh_cn/landing-page.json
deleted file mode 100644
index 8d1a55b3e9cf..000000000000
--- a/public/locales/zh_cn/landing-page.json
+++ /dev/null
@@ -1,74 +0,0 @@
-{
-    "main": {
-       "header": "构建未来的",
-        "subHeader": "事件驱动架构（EDA）",
-        "body_pretext": "开源工具，让你轻松构建和维护事件驱动架构。所有这些都基于 AsyncAPI 规范，",
-        "body_boldtext": "行业标准",
-        "body_posttext": "，用于定义异步 API。",
-        "docs_btn": "阅读文档",
-        "search_btn": "快速搜索...",
-        "slogan_text": "自豪地成为",
-        "slogan_link": "Linux 基金会的一部分"
-    },
-    "features": {
-        "title": "为什么选择 AsyncAPI？",
-        "description": "改善事件驱动架构（EDA）的现状",
-
-        "specification.name": "规范",
-        "specification.description": "允许你定义异步 API 的接口，并且与协议无关。",
-        "specification.links.whyasyncapi-spec-documentation-link": "文档",
-
-        "document-apis.name": "API 文档",
-        "document-apis.description": "使用我们的工具在构建阶段、服务器端或客户端生成文档。",
-        "document-apis.links.whyasyncapi-apis-htmltemplate-link": "HTML 模板",
-        "document-apis.links.whyasyncapi-apis-reactcomponents-link": "React 组件",
-
-        "code-generation.name": "代码生成",
-        "code-generation.description": "从你的 AsyncAPI 文件中生成文档、代码（TypeScript、Java、C# 等）以及更多内容。",
-        "code-generation.links.whyasyncapi-generation-generator-link": "代码生成器",
-        "code-generation.links.whyasyncapi-generation-modelina-link": "Modelina",
-
-        "community.name": "社区",
-        "community.description": "我们是一个由热爱 AsyncAPI 和事件驱动架构的优秀成员组成的社区。",
-        "community.links.whyasyncapi-community-slack-link": "加入我们的 Slack 工作区",
-
-        "open-governance.name": "开放式治理",
-        "open-governance.description": "我们的开源项目隶属于 Linux 基金会，并采用开放式治理模式运作。",
-        "open-governance.links.whyasyncapi-governance-more-link": "了解更多关于开放式治理",
-        "open-governance.links.whyasyncapi-governance-tsc-link": "TSC 成员",
-
-        "much-more.name": "还有更多……",
-        "much-more.description": "我们拥有许多不同的工具，欢迎你探索我们的想法，并为 AsyncAPI 提出新的创意。",
-        "much-more.links.whyasyncapi-muchmore-github-link": "查看 GitHub 讨论"
-    },
-    "adopters": {
-        "title": "被全球领先品牌采用",
-        "description": "这些品牌已经在生产环境中使用 AsyncAPI。贵公司是否也在使用 AsyncAPI，并希望加入此列表？",
-        "linkText": "在这里告诉我们！"
-    },
-    "community": {
-        "title": "加入我们优秀的社区！",
-        "subtitle": "我们是一个由对 AsyncAPI 和事件驱动架构充满热情的优秀成员组成的社区。",
-        "slackCTATitle": "加入我们的 Slack 工作空间",
-        "slackCTADesc": "我们欢迎所有人加入我们的 Slack 工作空间。如果你对如何使用 AsyncAPI 有疑问、想参与贡献，或只是想打个招呼 👋，都非常欢迎加入我们。我们都是友善的人 🙂",
-        "slackCTABtn": "加入我们！",
-        "meetingTitle": "参加我们的公开会议",
-        "meetingDesc": "AsyncAPI 每周都会举办不同的会议。这些会议专注于不同主题，有时是纯技术内容，有时是关于社区建设。选择一个你感兴趣的会议并加入我们吧！",
-        "meetingLink": "了解更多会议信息。"
-    },
-    "sponsors": {
-        "platinumTitle": "白金赞助商",
-        "goldTitle": "黄金赞助商",
-        "silverTitle": "白银赞助商",
-        "sponsorCTATitle": "想赞助我们吗？",
-        "sponsorCTADesc": "这些优秀的组织已经在支持 AsyncAPI。想成为赞助商吗？",
-        "sponsorCTALink": "支持我们！",
-        "supportedByTitle": "合作支持",
-        "supportedByPretext": "以下公司通过免费提供产品来支持我们。你也想支持我们吗？",
-        "supportedByLink": "给我们发邮件",
-        "supportedByPosttext": " 获取更多信息。"
-        },
-    "testimonials": {
-        "title": "专业人士观点"
-    }
-}
\ No newline at end of file
diff --git a/public/locales/zh_cn/tools.json b/public/locales/zh_cn/tools.json
deleted file mode 100644
index e57d59e6e2fb..000000000000
--- a/public/locales/zh_cn/tools.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
-    "cli": {
-        "title": "在命令行中轻松使用 AsyncAPI",
-        "description": "使用我们的 CLI 工具创建、验证并探索你的 AsyncAPI 文件。",
-        "installationTitle": "安装与使用",
-        "installationDescription": "通过选择我们的命令，即可在几秒内开始使用 AsyncAPI CLI。",
-        "docsButton": "查看文档",
-        "installingTitle": "安装中",
-        "exampleTitle": "示例",
-        "exampleDescription": "创建一个新的 AsyncAPI 文件",
-        "featuresTitle": "功能特点",
-        "featuresDescription": "使用 AsyncAPI CLI 工具帮助你创建、开发和维护 AsyncAPI 文件。",
-        "features": {
-           "new-files.name": "新建文件",
-            "new-files.description": "使用 CLI 工具快速创建新的 AsyncAPI 文件。可从多种模板中选择（MQTT、WebSockets、Kafka 等）。",
-            "validate.name": "验证",
-            "validate.description": "使用 CLI 验证你的 AsyncAPI 文档。快速获得反馈，确保文档格式正确。",
-            "open-studio.name": "打开 Studio",
-            "open-studio.description_pretext": "本地已有 AsyncAPI 文件？运行",
-            "open-studio.description_posttext": "即可在几秒内打开我们的 Studio。",
-            "open-source.name": "开源",
-            "open-source.description": "我们的所有工具都是开源的，欢迎贡献新命令或帮助改进现有工具。"
-        }
-    }
-}
\ No newline at end of file
diff --git a/styles/globals.css b/styles/globals.css
index fdd372ee9a48..fcfaa76d742d 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -17,6 +17,44 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   scroll-behavior: smooth;
+  background-color: white;
+}
+
+html.dark,
+html.dark body {
+  background-color: #121825; /* dark-background color */
+}
+
+/* Disable transitions on initial load to prevent flash */
+html:not(.transitions-enabled) *,
+html:not(.transitions-enabled) *::before,
+html:not(.transitions-enabled) *::after {
+  transition: none !important;
+}
+
+/* Smooth theme transitions - only enabled after page loads */
+html.transitions-enabled [class*="bg-"],
+html.transitions-enabled [class*="text-"],
+html.transitions-enabled [class*="border-"],
+html.transitions-enabled svg,
+html.transitions-enabled path,
+html.transitions-enabled circle,
+html.transitions-enabled rect,
+html.transitions-enabled line,
+html.transitions-enabled polyline,
+html.transitions-enabled polygon {
+  transition-property: background-color, border-color, color, fill, stroke;
+  transition-duration: 0.15s;
+  transition-timing-function: ease-out;
+}
+
+/* Respect user motion preferences */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    transition: none !important;
+  }
 }
 
 li>p {
@@ -145,6 +183,15 @@ abbr[title] {
   transition: 0.2s;
 }
 
+.dark .orbit {
+  border-color: rgba(168, 126, 252, 0.3);
+}
+
+.orbit > div {
+  cursor: pointer;
+}
+
+
 .orbit > div > img {
   border-radius: 100%;
 }
@@ -315,6 +362,11 @@ abbr[title] {
   background: linear-gradient(225deg, #2dccfd 9.35%, #ad20e2 88.41%);
 }
 
+.dark .gh-img {
+  border-color: rgba(168, 126, 252, 0.2);
+  box-shadow: 5px 20px 18px 10px rgba(136, 81, 251, 0.1);
+}
+
 .community-pattern {
   background: url('/img/homepage/circular-pattern.png');
   width: 100%;
@@ -345,4 +397,111 @@ abbr[title] {
 
 select {
   cursor:pointer;
-}
\ No newline at end of file
+}
+.dark .gradient-border {
+  border: 2px solid transparent;
+  border-image: linear-gradient(225deg, #AD20E2 0%, #2DCCFD 100%);
+  border-image-slice: 1;
+  border-radius: 16px; 
+}
+
+/* Line clamp utilities for text truncation */
+.line-clamp-3 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+
+.line-clamp-4 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+}
+
+.line-clamp-6 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 6;
+}
+
+/* Smooth gradient animation for CTA section */
+@keyframes gradient-shift {
+  0%, 100% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+}
+
+.animate-gradient {
+  background-size: 200% 200%;
+  animation: gradient-shift 15s ease infinite;
+}
+
+/* Custom Swiper Styles for Featured Case Studies */
+.featured-case-studies-swiper {
+  padding: 20px 0 60px 0;
+}
+
+.featured-case-studies-swiper .swiper-pagination {
+  bottom: 20px;
+}
+
+.featured-case-studies-swiper .swiper-pagination-bullet {
+  background: #8851FB;
+  opacity: 0.5;
+  width: 10px;
+  height: 10px;
+}
+
+.featured-case-studies-swiper .swiper-pagination-bullet-active {
+  opacity: 1;
+  width: 24px;
+  border-radius: 5px;
+}
+
+.featured-case-studies-swiper .swiper-slide {
+  height: auto;
+  display: flex;
+}
+
+/* Dark mode pagination bullets */
+.dark .featured-case-studies-swiper .swiper-pagination-bullet {
+  background: #A87EFC;
+}
+
+/* Custom Swiper Styles for Use Cases Carousel */
+.case-studies-swiper {
+  padding: 20px 0 60px 0;
+}
+
+.case-studies-swiper .swiper-pagination {
+  bottom: 20px;
+}
+
+.case-studies-swiper .swiper-pagination-bullet {
+  background: #8851FB;
+  opacity: 0.5;
+  width: 10px;
+  height: 10px;
+}
+
+.case-studies-swiper .swiper-pagination-bullet-active {
+  opacity: 1;
+  width: 24px;
+  border-radius: 5px;
+}
+
+.case-studies-swiper .swiper-slide {
+  height: auto;
+  display: flex;
+}
+
+/* Dark mode pagination bullets */
+.dark .case-studies-swiper .swiper-pagination-bullet {
+  background: #A87EFC;
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 6b9430ac5ff6..178d521ebc72 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -64,6 +64,7 @@ const colorGray: Record<string, string> = {
 };
 
 const config: Config = {
+  darkMode: 'class',
   content: [
     './pages/**/*.{js,ts,jsx,tsx,mdx}',
     './components/**/*.{js,ts,jsx,tsx,mdx}',
@@ -124,7 +125,19 @@ const config: Config = {
         },
         violet: '#8054F2',
         darkGunMetal: '#212526',
-        linkedin: '#0077b5'
+        linkedin: '#0077b5',
+        'dark-background': '#121825',
+        'dark-card': '#131E35',
+        'dark-footer': '#090F1D',
+        'dark-text': '#B8B9C0',
+        'dark-heading': '#FFFFFF',
+        foreground: '#F8FAFC',
+        prim: '#00CFFF' /* Vibrant cyan */,
+        sec: '#D633FF' /* Electric purple */,
+        accent: '#FFD166' /* Warm amber */,
+        border: '#1E293B' /* Navy border */,
+        muted: '#0F172A' /* Dark navy muted */,
+        'muted-foreground': '#94A3B8' /* Gray-blue text */
       },
       scale: {
         25: '.25'
@@ -197,9 +210,11 @@ const config: Config = {
         'heading-md': ['24px', '1.375'],
         'heading-lg': ['36px', '1.375'],
         'heading-xl': ['64px', '1.375'],
+        'heading-xxl': ['88px', '1.375'],
         'body-sm': ['14px', '1.625'],
         'body-md': ['16px', '1.625'],
-        'body-lg': ['18px', '1.625']
+        'body-lg': ['18px', '1.625'],
+        'body-llg': ['22px', '1.625']
       },
       screens: {
         xs: '475px'
diff --git a/types/components/navigation/BlogPostType.ts b/types/components/navigation/BlogPostType.ts
index b56b89402cec..10cff9b76b60 100644
--- a/types/components/navigation/BlogPostType.ts
+++ b/types/components/navigation/BlogPostType.ts
@@ -2,5 +2,8 @@ export enum BlogPostType {
   Video = 'video',
   Marketing = 'marketing',
   Strategy = 'strategy',
-  Communication = 'communication'
+  Communication = 'communication',
+  Conference = 'conference',
+  Engineering = 'engineering',
+  Community = 'community'
 }
diff --git a/types/pages/community/Community.ts b/types/pages/community/Community.ts
index 846c10293729..9e1460232e13 100644
--- a/types/pages/community/Community.ts
+++ b/types/pages/community/Community.ts
@@ -27,18 +27,17 @@ export interface Ambassador {
   company: string;
   contributions: Contribution[];
   country?: string;
-  githubUrl?: string;
-  linkedinUrl?: string;
-  twitterUrl?: string;
-  avatarUrl?: string;
   isTscMember?: boolean;
   isBoardMember?: boolean;
   isBoardChair?: boolean;
+  githubUrl?: string;
+  twitterUrl?: string;
+  linkedinUrl?: string;
+  avatarUrl?: string;
 };
 
 export interface Tsc {
   name: string;
-  avatarUrl?: string;
   isTscMember: boolean;
   availableForHire?: boolean;
   github: string;
@@ -47,7 +46,10 @@ export interface Tsc {
   twitter?: string;
   company?: string;
   repos: any;
-  githubID: number
   isBoardMember?: boolean;
   isBoardChair?: boolean;
+  githubUrl?: string;
+  twitterUrl?: string;
+  linkedinUrl?: string;
+  avatarUrl?: string;
 };
diff --git a/types/typography/Heading.ts b/types/typography/Heading.ts
index 529d873148a4..4b0f9e4deb2c 100644
--- a/types/typography/Heading.ts
+++ b/types/typography/Heading.ts
@@ -8,6 +8,7 @@ export enum HeadingLevel {
 }
 
 export enum HeadingTypeStyle {
+    xxl= 'heading-xxl',
     xl = 'heading-xl',
     lg = 'heading-lg',
     md = 'heading-md',
@@ -19,4 +20,5 @@ export enum HeadingTypeStyle {
     bodyLg = 'body-lg',
     bodyMd = 'body-md',
     bodySm = 'body-sm',
+    bodyLlg = 'body-llg',
 }