diff --git a/components/CaseStudyCard.tsx b/components/CaseStudyCard.tsx
index 241e9b5aa84b..1642b8244506 100644
--- a/components/CaseStudyCard.tsx
+++ b/components/CaseStudyCard.tsx
@@ -19,7 +19,7 @@ export default function CaseStudyCard({ studies = [] }: ICaseStudyCardProps) {
   return (
     <div className='flex flex-wrap pt-10 lg:grid lg:grid-cols-3 lg:gap-8 lg:text-center'>
       {studies.map((study, index) => (
-        <a key={index} href={`casestudies/${study.id}`}>
+        <a key={index} href={`${study.id}`}>
           <div
             className='max-w-sm overflow-hidden rounded-md border border-gray-200 bg-white p-4'
             data-testid='CaseStudyCard-main'
diff --git a/components/Head.tsx b/components/Head.tsx
index e44f4cfac195..5681a6bb5c51 100644
--- a/components/Head.tsx
+++ b/components/Head.tsx
@@ -30,7 +30,7 @@ export default function HeadComponent({
   rssTitle = 'RSS Feed for AsyncAPI Initiative Blog',
   rssLink = '/rss.xml'
 }: IHeadProps) {
-  const url = process.env.DEPLOY_PRIME_URL || process.env.DEPLOY_URL || 'http://localhost:3000';
+  const url = process.env.NEXT_PUBLIC_DEPLOY_PRIME_URL || process.env.NEXT_PUBLIC_DEPLOY_URL || 'http://localhost:3000';
   const appContext = useContext(AppContext);
   const { path = '' } = appContext || {};
   let currImage = image;
diff --git a/components/MDX/MDX.tsx b/components/MDX/MDX.tsx
index 747345045045..f9846fd6ec86 100644
--- a/components/MDX/MDX.tsx
+++ b/components/MDX/MDX.tsx
@@ -39,7 +39,7 @@ import Profiles from '../Profiles';
 import Remember from '../Remember';
 import Sponsors from '../sponsors/Sponsors';
 import Warning from '../Warning';
-import { Table, TableCell, TableHeader, TableRow } from './MDXTable';
+import { Table, TableBody, TableCell, TableHeader, TableRow, Thead } from './MDXTable';
 
 let mermaidInitialized = false;
 
@@ -175,164 +175,161 @@ function Text({ content = '', className = '' }) {
 /**
  * @description This function returns MDX components.
  */
-export function getMDXComponents() {
-  return {
-    h1: (props: React.HTMLProps<HTMLHeadingElement>) => (
-      <h1
-        {...props}
-        className={`${props.className || ''} my-4 font-heading text-2xl font-semibold tracking-heading text-gray-900 antialiased`}
-      />
-    ),
-    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`}
-      />
-    ),
-    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`}
-      />
-    ),
-    h4: (props: React.HTMLProps<HTMLHeadingElement>) => (
-      <h4
-        {...props}
-        className={`${props.className || ''} text-md my-4 font-heading font-medium text-gray-900 antialiased`}
-      />
-    ),
-    h5: (props: React.HTMLProps<HTMLHeadingElement>) => (
-      <h5 {...props} className={`${props.className || ''} text-md my-4 font-heading font-bold antialiased`} />
-    ),
-    h6: (props: React.HTMLProps<HTMLHeadingElement>) => (
-      <h6
-        {...props}
-        className={`${props.className || ''} my-4 font-heading text-sm font-bold uppercase text-gray-900 antialiased`}
-      />
-    ),
-    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`}
-      />
-    ),
-    p: (props: React.HTMLProps<HTMLParagraphElement>) => (
-      <p {...props} className={`${props.className || ''} my-4 font-body font-regular text-gray-700 antialiased`} />
-    ),
-    strong: (props: React.HTMLProps<HTMLSpanElement>) => (
-      <strong
-        {...props}
-        className={`${props.className || ''} my-4 font-body font-semibold text-gray-800 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`}
-      />
-    ),
-    ul: (props: React.HTMLProps<HTMLUListElement>) => (
-      <ul
-        {...props}
-        className={`${props.className || ''} font-normal my-4 ml-4 list-disc font-body 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`}
-        type='1'
-      />
-    ),
-    li: (props: React.HTMLProps<HTMLLIElement>) => (
-      <li
-        {...props}
-        className={`${props.className || ''} my-3 font-body font-regular tracking-tight text-gray-700 antialiased`}
-      />
-    ),
-    button: Button as React.ComponentType<React.ButtonHTMLAttributes<HTMLButtonElement>>,
-    table: (props: React.HTMLProps<HTMLTableElement>) => (
-      <div className={`${props.className || ''} flex flex-col`}>
-        <div className='my-2 overflow-x-auto py-2 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8'>
-          <div className='inline-block w-full overflow-auto border-b border-gray-200 align-middle shadow sm:rounded-lg'>
-            <table {...props} className={`${props.className || ''} w-full`} />
-          </div>
+const getMDXComponents = {
+  h1: (props: React.HTMLProps<HTMLHeadingElement>) => (
+    <h1
+      {...props}
+      className={`${props.className || ''} my-4 font-heading text-2xl font-semibold tracking-heading text-gray-900 antialiased`}
+    />
+  ),
+  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`}
+    />
+  ),
+  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`}
+    />
+  ),
+  h4: (props: React.HTMLProps<HTMLHeadingElement>) => (
+    <h4
+      {...props}
+      className={`${props.className || ''} text-md my-4 font-heading font-medium text-gray-900 antialiased`}
+    />
+  ),
+  h5: (props: React.HTMLProps<HTMLHeadingElement>) => (
+    <h5 {...props} className={`${props.className || ''} text-md my-4 font-heading font-bold antialiased`} />
+  ),
+  h6: (props: React.HTMLProps<HTMLHeadingElement>) => (
+    <h6
+      {...props}
+      className={`${props.className || ''} my-4 font-heading text-sm font-bold uppercase text-gray-900 antialiased`}
+    />
+  ),
+  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`}
+    />
+  ),
+  p: (props: React.HTMLProps<HTMLParagraphElement>) => (
+    <p {...props} className={`${props.className || ''} my-4 font-body font-regular text-gray-700 antialiased`} />
+  ),
+  strong: (props: React.HTMLProps<HTMLSpanElement>) => (
+    <strong {...props} className={`${props.className || ''} my-4 font-body font-semibold text-gray-800 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`}
+    />
+  ),
+  ul: (props: React.HTMLProps<HTMLUListElement>) => (
+    <ul
+      {...props}
+      className={`${props.className || ''} font-normal my-4 ml-4 list-disc font-body 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`}
+      type='1'
+    />
+  ),
+  li: (props: React.HTMLProps<HTMLLIElement>) => (
+    <li
+      {...props}
+      className={`${props.className || ''} my-3 font-body font-regular tracking-tight text-gray-700 antialiased`}
+    />
+  ),
+  button: Button as React.ComponentType<React.ButtonHTMLAttributes<HTMLButtonElement>>,
+  table: (props: React.HTMLProps<HTMLTableElement>) => (
+    <div className={`${props.className || ''} flex flex-col`}>
+      <div className='my-2 overflow-x-auto py-2 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8'>
+        <div className='inline-block w-full overflow-auto border-b border-gray-200 align-middle shadow sm:rounded-lg'>
+          <table {...props} className={`${props.className || ''} w-full`} />
         </div>
       </div>
-    ),
-    th: (props: React.HTMLProps<HTMLTableCellElement>) => (
-      <th
-        {...props}
-        className={`${props.className || ''} border-b border-gray-200 bg-gray-100 px-6 py-3 text-left font-body text-xs font-medium uppercase leading-4 tracking-wider text-gray-900`}
-      />
-    ),
-    tr: (props: React.HTMLProps<HTMLTableRowElement>) => (
-      <tr {...props} className={`${props.className || ''} bg-white`} />
-    ),
-    td: (props: React.HTMLProps<HTMLTableCellElement>) => (
-      <td
-        {...props}
-        className={`${props.className || ''} border-b border-gray-200 px-6 py-4 text-sm leading-5 tracking-tight text-gray-700`}
-      />
-    ),
-    pre: (props: React.HTMLProps<HTMLPreElement>) => CodeComponent((props.children as React.ReactElement)?.props),
-    code: (props: React.HTMLProps<HTMLElement>) => (
-      <code
-        {...props}
-        className={`${props.className || ''} rounded bg-gray-200 px-1 py-0.5 font-mono text-sm text-gray-800`}
-      />
-    ),
-    hr: (props: React.HTMLProps<HTMLHRElement>) => <hr {...props} className={`${props.className || ''} my-8`} />,
-    Link: (props: React.HTMLProps<HTMLHRElement>) => (
-      <Link
-        href={props.href || '/'}
-        className='border-b border-secondary-400 font-body font-semibold text-gray-900 antialiased transition duration-300 ease-in-out hover:border-secondary-500'
-      >
-        {props.children}
-      </Link>
-    ),
-    Tr: TableRow,
-    Td: TableCell,
-    Th: TableHeader,
-    Table,
-    Asyncapi3ChannelComparison,
-    Asyncapi3IdAndAddressComparison,
-    Asyncapi3MetaComparison,
-    Asyncapi3OperationComparison,
-    Asyncapi3ParameterComparison,
-    Asyncapi3SchemaFormatComparison,
-    Asyncapi3ServerComparison,
-    CodeBlock,
-    ChapterSuggestions,
-    YouTube,
-    Remember,
-    Text,
-    Warning,
-    Sponsors,
-    FAQ,
-    Caption,
-    Row,
-    Column,
-    Figure,
-    DocsCards,
-    GeneratorInstallation,
-    NewsletterSubscribe,
-    TwitterTimelineEmbed,
-    TwitterShareButton,
-    TwitterFollowButton,
-    TwitterHashtagButton,
-    TwitterMentionButton,
-    TwitterTweetEmbed,
-    TwitterMomentShare,
-    TwitterDMButton,
-    TwitterVideoEmbed,
-    TwitterOnAirButton,
-    Profiles,
-    Visualizer
-  };
-}
+    </div>
+  ),
+  th: (props: React.HTMLProps<HTMLTableCellElement>) => (
+    <th
+      {...props}
+      className={`${props.className || ''} border-b border-gray-200 bg-gray-100 px-6 py-3 text-left font-body text-xs font-medium uppercase leading-4 tracking-wider text-gray-900`}
+    />
+  ),
+  tr: (props: React.HTMLProps<HTMLTableRowElement>) => (
+    <tr {...props} className={`${props.className || ''} bg-white`} />
+  ),
+  td: (props: React.HTMLProps<HTMLTableCellElement>) => (
+    <td
+      {...props}
+      className={`${props.className || ''} border-b border-gray-200 px-6 py-4 text-sm leading-5 tracking-tight text-gray-700`}
+    />
+  ),
+  pre: (props: React.HTMLProps<HTMLPreElement>) => CodeComponent((props.children as React.ReactElement)?.props),
+  code: (props: React.HTMLProps<HTMLElement>) => (
+    <code
+      {...props}
+      className={`${props.className || ''} rounded bg-gray-200 px-1 py-0.5 font-mono text-sm text-gray-800`}
+    />
+  ),
+  hr: (props: React.HTMLProps<HTMLHRElement>) => <hr {...props} className={`${props.className || ''} my-8`} />,
+  Link: (props: React.HTMLProps<HTMLHRElement>) => (
+    <Link
+      href={props.href || '/'}
+      className='border-b border-secondary-400 font-body font-semibold text-gray-900 antialiased transition duration-300 ease-in-out hover:border-secondary-500'
+    >
+      {props.children}
+    </Link>
+  ),
+  Tr: TableRow,
+  Td: TableCell,
+  Th: TableHeader,
+  Tbody: TableBody,
+  Thead,
+  Table,
+  Asyncapi3ChannelComparison,
+  Asyncapi3IdAndAddressComparison,
+  Asyncapi3MetaComparison,
+  Asyncapi3OperationComparison,
+  Asyncapi3ParameterComparison,
+  Asyncapi3SchemaFormatComparison,
+  Asyncapi3ServerComparison,
+  CodeBlock,
+  ChapterSuggestions,
+  YouTube,
+  Remember,
+  Text,
+  Warning,
+  Sponsors,
+  Caption,
+  Row,
+  Column,
+  Figure,
+  FAQ,
+  DocsCards,
+  GeneratorInstallation,
+  NewsletterSubscribe,
+  TwitterTimelineEmbed,
+  TwitterShareButton,
+  TwitterFollowButton,
+  TwitterHashtagButton,
+  TwitterMentionButton,
+  TwitterTweetEmbed,
+  TwitterMomentShare,
+  TwitterDMButton,
+  TwitterVideoEmbed,
+  TwitterOnAirButton,
+  Profiles,
+  Visualizer
+};
 
-const mdxComponents = getMDXComponents();
+export const mdxComponents = getMDXComponents;
 
 interface MDXProviderProps {
   children: React.ReactNode;
diff --git a/components/MDX/MDXTable.tsx b/components/MDX/MDXTable.tsx
index 7022d367a9f2..93857163fbbf 100644
--- a/components/MDX/MDXTable.tsx
+++ b/components/MDX/MDXTable.tsx
@@ -57,3 +57,23 @@ export function TableHeader(props: React.HTMLProps<HTMLTableCellElement>) {
     />
   );
 }
+
+/**
+ * Renders the body of a table.
+ *
+ * @param props - The HTML props for the `<tbody>` element.
+ * @returns The rendered `<tbody>` element.
+ */
+export function TableBody(props: React.HTMLProps<HTMLTableSectionElement>) {
+  return <tbody {...props} className={`${props.className || ''}`} />;
+}
+
+/**
+ * Renders the body of a table.
+ *
+ * @param props - The HTML props for the `<tbody>` element.
+ * @returns The rendered `<tbody>` element.
+ */
+export function Thead(props: React.HTMLProps<HTMLTableSectionElement>) {
+  return <thead {...props} className={`${props.className || ''}`} />;
+}
diff --git a/components/NewsletterSubscribe.tsx b/components/NewsletterSubscribe.tsx
index db7b0a6407df..b4bad37ed2d6 100644
--- a/components/NewsletterSubscribe.tsx
+++ b/components/NewsletterSubscribe.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
 
 import IconCircularLoader from '@/components/icons/CircularLoader';
@@ -5,7 +6,6 @@ import { ButtonType } from '@/types/components/buttons/ButtonPropsType';
 import { InputTypes } from '@/types/components/InputBoxPropsType';
 import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
 
-import { useTranslation } from '../utils/i18n';
 import Button from './buttons/Button';
 import InputBox from './InputBox';
 import Loader from './Loader';
diff --git a/components/dashboard/Header.tsx b/components/dashboard/Header.tsx
index 3ea654073160..e80f13966705 100644
--- a/components/dashboard/Header.tsx
+++ b/components/dashboard/Header.tsx
@@ -27,7 +27,7 @@ export default function Header() {
           href='https://github.com/asyncapi?type=source#-contribute-to-asyncapi'
           target='_blank'
         />
-        <GithubButton className='lg:mt-0' />
+        <GithubButton text='View on Github' className='lg:mt-0' />
         <SlackButton className='lg:mt-0' />
       </div>
     </div>
diff --git a/components/link.tsx b/components/link.tsx
index d415f090ab2e..40415ceccdde 100644
--- a/components/link.tsx
+++ b/components/link.tsx
@@ -1,8 +1,7 @@
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 
-import { defaultLanguage, languages } from '../utils/i18n';
-import i18nPaths from '../utils/i18nPaths';
+import { defaultLanguage, i18nPaths, languages } from '@/utils/i18n';
 
 interface LinkComponentProps {
   children: React.ReactNode;
diff --git a/components/navigation/NavBar.tsx b/components/navigation/NavBar.tsx
index ae8371702033..e76330c41cff 100644
--- a/components/navigation/NavBar.tsx
+++ b/components/navigation/NavBar.tsx
@@ -1,10 +1,11 @@
 import Link from 'next/link';
 import type { NextRouter } from 'next/router';
 import { useRouter } from 'next/router';
+import { useTranslation } from 'next-i18next';
 import { useEffect, useState } from 'react';
 
-import { defaultLanguage, languages, useTranslation } from '../../utils/i18n';
-import i18nPaths from '../../utils/i18nPaths';
+import { defaultLanguage, i18nPaths, languages } from '@/utils/i18n';
+
 import { SearchButton } from '../AlgoliaSearch';
 import GithubButton from '../buttons/GithubButton';
 import { isMobileDevice } from '../helpers/is-mobile';
diff --git a/components/newsroom/FeaturedBlogPost.tsx b/components/newsroom/FeaturedBlogPost.tsx
index 5b969ec69ea0..515d0d0a2f66 100644
--- a/components/newsroom/FeaturedBlogPost.tsx
+++ b/components/newsroom/FeaturedBlogPost.tsx
@@ -66,7 +66,7 @@ export default function FeaturedBlogPost({ post, className = '' }: FeaturedBlogP
                     {post.type}
                   </span>
                 </Paragraph>
-                <Link href={post.slug}>
+                <div>
                   <span className='block' data-testid='FeaturedBlog-title'>
                     <Heading level={HeadingLevel.h3} typeStyle={HeadingTypeStyle.smSemibold} className='mt-2'>
                       {post.title}
@@ -75,7 +75,7 @@ export default function FeaturedBlogPost({ post, className = '' }: FeaturedBlogP
                       <TextTruncate element='span' line={2} text={post.excerpt} />
                     </Paragraph>
                   </span>
-                </Link>
+                </div>
               </div>
               <div className='mt-6 flex items-center'>
                 <div className='relative shrink-0' data-testid='FeaturedBlog-Authorimg'>
diff --git a/markdown/blog/asyncapi-and-apicurio-for-asynchronous-apis.md b/markdown/blog/asyncapi-and-apicurio-for-asynchronous-apis.md
index d0531a2afc9e..5e04177cb871 100644
--- a/markdown/blog/asyncapi-and-apicurio-for-asynchronous-apis.md
+++ b/markdown/blog/asyncapi-and-apicurio-for-asynchronous-apis.md
@@ -58,7 +58,7 @@ In practice, the definition can become quite long. Consider the below example fr
     defaultContentType: application/json
 
     channels:
-      smartylighting.streetlights.1.0.event.{streetlightId}.lighting.measured:
+      smartylighting.streetlights.1.0.event.\{streetlightId\}.lighting.measured:
         description: The topic on which measured values may be produced and consumed.
         parameters:
           streetlightId:
@@ -161,7 +161,7 @@ For example, it is possible to add a key for Kafka messages:
 
     ...
     channels:
-      smartylighting.streetlights.1.0.event.{streetlightId}.lighting.measured:
+      smartylighting.streetlights.1.0.event.\{streetlightId\}.lighting.measured:
         description: The topic on which measured values may be produced and consumed.
         parameters:
           streetlightId:
@@ -219,4 +219,4 @@ Many other official projects of the AsyncAPI team are still in the alpha or beta
 
 If you want to dive a bit deeper, I recommend having a look at the recording of the AsyncAPI conference in November 2021. There were many interesting talks on how AsyncAPI can be used in projects and with other tools. For more details on how to use schemas, schema registries, and API registries with AsyncAPI, listen to my conference talk below.
 
-<YouTube id="37X4Hbu0bSQ" />
+<YouTube id="37X4Hbu0bSQ" />
\ No newline at end of file
diff --git a/markdown/blog/event-streaming-an-additional-architectural-style-to-suplement-api-design.md b/markdown/blog/event-streaming-an-additional-architectural-style-to-suplement-api-design.md
index 853b66d2b6ab..f05c50d66c6b 100644
--- a/markdown/blog/event-streaming-an-additional-architectural-style-to-suplement-api-design.md
+++ b/markdown/blog/event-streaming-an-additional-architectural-style-to-suplement-api-design.md
@@ -21,9 +21,9 @@ The growth and adoption of web-based APIs is key to the transformational technol
 To illustrate, assume we have a project management API with the following interactions:
 
 1. Create a project (e.g. POST /projects)
-1. Create a new task (e.g. POST /projects/{projectId}/tasks)
-1. Assign the task to someone on our team (e.g. POST /tasks/{taskId}/assignees)
-1. The assignee marks the task as complete (e.g. PUT /tasks/{taskId})
+1. Create a new task (e.g. POST /projects/\{projectId\}/tasks)
+1. Assign the task to someone on our team (e.g. POST /tasks/\{taskId\}/assignees)
+1. The assignee marks the task as complete (e.g. PUT /tasks/\{taskId\})
 
 An API following this design works if design of the user interface closely mirrors those endpoints. But suppose an additional application requirement is to ‘automatically’ update a task’s status when marked complete by another user. With a request/response web-API, an option is to incessantly poll a status API on the chance a status might have changed. This is both cumbersome and error-prone.
 Instead of polling, we can introduce an __event-driven architecture__.
@@ -74,4 +74,3 @@ As API designers, we must strive to use all available tools to offer a better de
 1. How will my API consumers benefit from the addition of these events and how do they take advantage of them?
 
 Let’s shift our approach from strictly request-response to thinking in terms of how our APIs can not only offer endpoints for requests, but events that enable the API to push to other services. The result will be increased innovation and more transformative APIs both within and across our LOBs.
-
diff --git a/markdown/blog/status-update-27-20.md b/markdown/blog/status-update-27-20.md
index dc22dcaced38..e57ac3523723 100644
--- a/markdown/blog/status-update-27-20.md
+++ b/markdown/blog/status-update-27-20.md
@@ -74,7 +74,7 @@ We are getting a bit tired of Nunjucks and how hard it is to debug and read the
 
 The last meeting took place on Tuesday, 23rd of June, 4PM UTC. Meeting notes are available [here](https://github.com/asyncapi/asyncapi/issues/394).
 
-<Youtube id="LDanOihP9i4" />
+<YouTube id="LDanOihP9i4" />
 
 The next meeting is scheduled for next Tuesday, 7th of July, 8AM UTC. 
 
diff --git a/markdown/blog/websocket-part2.md b/markdown/blog/websocket-part2.md
index 3014381da1e5..d1903580ad85 100644
--- a/markdown/blog/websocket-part2.md
+++ b/markdown/blog/websocket-part2.md
@@ -811,4 +811,4 @@ components:
         pattern: '[A-Z\s]+\/[A-Z\s]+'
 ~~~
 
-Stay tuned for more articles around WebSocket and AsyncAPI. Share your feedback and connect with the AsyncAPI community in our [Slack workspace](https://www.asyncapi.com/slack-invite/).
+Stay tuned for more articles around WebSocket and AsyncAPI. Share your feedback and connect with the AsyncAPI community in our [Slack workspace](https://www.asyncapi.com/slack-invite/).
\ No newline at end of file
diff --git a/markdown/docs/tools/cli/context.md b/markdown/docs/tools/cli/context.md
index 30803782e556..890ae53ef315 100644
--- a/markdown/docs/tools/cli/context.md
+++ b/markdown/docs/tools/cli/context.md
@@ -153,4 +153,4 @@ Example of a context file for [Event Driven Flight status notification service](
 
 ## More context related CLI options
 
-All commands for managing contexts are available under `asyncapi config context` [CLI commands group](usage#asyncapi-config-context).
+All commands for managing contexts are available under `asyncapi config context` [CLI commands group](usage#asyncapi-config-context).
\ No newline at end of file
diff --git a/mdx-components.tsx b/mdx-components.tsx
new file mode 100644
index 000000000000..f628e70ea02e
--- /dev/null
+++ b/mdx-components.tsx
@@ -0,0 +1,16 @@
+import type { MDXComponents } from 'mdx/types';
+
+import { mdxComponents } from '@/components/MDX/MDX';
+
+// This file allows you to provide custom React components
+// to be used in MDX files. You can import and use any
+// React component you want, including inline styles,
+// components from other libraries, and more.
+
+export function useMDXComponents(components: MDXComponents): MDXComponents {
+  return {
+    // Allows customizing built-in components, e.g. to add styling.
+    ...mdxComponents,
+    ...components
+  };
+}
diff --git a/next-i18next-static-site.config.js b/next-i18next-static-site.config.js
deleted file mode 100644
index 4742aa6756d6..000000000000
--- a/next-i18next-static-site.config.js
+++ /dev/null
@@ -1,8 +0,0 @@
-module.exports = {
-  i18n: {
-    languages: ['en', 'de'],
-    defaultLanguage: 'en',
-    namespaces: ['landing-page', 'common', 'tools'],
-    defaultNamespace: 'landing-page'
-  }
-};
diff --git a/next-i18next.config.js b/next-i18next.config.js
new file mode 100644
index 000000000000..2848266d6554
--- /dev/null
+++ b/next-i18next.config.js
@@ -0,0 +1,10 @@
+module.exports = {
+    i18n: {
+      locales: ['en', 'de'],
+      defaultLocale : 'en',
+      namespaces: ['landing-page', 'common', 'tools'],
+      defaultNamespace: 'landing-page',
+      react: { useSuspense: false },// this line
+    },
+  
+  };
diff --git a/next.config.mjs b/next.config.mjs
index 6b3d6dabffa2..52d52fcc41c3 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -27,6 +27,7 @@ const nextConfig = {
 
 const mdxConfig = withMDX({
   extension: /\.mdx?$/,
+  providerImportSource: "@mdx-js/react",
   options: {
     remarkPlugins: [frontmatter, gemoji, headingId, slug, images, a11yEmoji, remarkGfm],
     rehypePlugins: []
diff --git a/package-lock.json b/package-lock.json
index 14183711e3d7..768c59507b2a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -37,7 +37,7 @@
         "fuse.js": "^7.0.0",
         "googleapis": "^133.0.0",
         "gray-matter": "^4.0.3",
-        "i18next": "^23.8.2",
+        "i18next": "^23.12.2",
         "jgexml": "^0.4.4",
         "js-cookie": "^3.0.5",
         "json-schema": "^0.4.0",
@@ -48,6 +48,8 @@
         "mermaid": "9.3.0",
         "moment": "^2.30.1",
         "next": "14.1.1",
+        "next-i18next": "^15.3.0",
+        "next-language-detector": "^1.1.0",
         "next-mdx-remote": "^4.4.1",
         "node-fetch": "^3.3.2",
         "node-fetch-2": "npm:node-fetch@^2.7.0",
@@ -57,7 +59,6 @@
         "react-dom": "^18",
         "react-ga": "^3.3.1",
         "react-gtm-module": "^2.0.11",
-        "react-i18next": "^14.0.5",
         "react-scrollspy": "^3.4.3",
         "react-syntax-highlighter": "^15.5.0",
         "react-text-truncate": "^0.19.0",
@@ -7623,6 +7624,15 @@
         "@types/unist": "*"
       }
     },
+    "node_modules/@types/hoist-non-react-statics": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz",
+      "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==",
+      "dependencies": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "node_modules/@types/html-minifier-terser": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -15238,6 +15248,19 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/html-entities": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.5.2.tgz",
@@ -15285,6 +15308,7 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
       "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "peer": true,
       "dependencies": {
         "void-elements": "3.1.0"
       }
@@ -15404,9 +15428,9 @@
       }
     },
     "node_modules/i18next": {
-      "version": "23.11.5",
-      "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.11.5.tgz",
-      "integrity": "sha512-41pvpVbW9rhZPk5xjCX2TPJi2861LEig/YRhUkY+1FQ2IQPS0bKUDYnEqY8XPPbB48h1uIwLnP9iiEfuSl20CA==",
+      "version": "23.14.0",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.14.0.tgz",
+      "integrity": "sha512-Y5GL4OdA8IU2geRrt2+Uc1iIhsjICdHZzT9tNwQ3TVqdNzgxHToGCKf/TPRP80vTCAP6svg2WbbJL+Gx5MFQVA==",
       "funding": [
         {
           "type": "individual",
@@ -15425,6 +15449,19 @@
         "@babel/runtime": "^7.23.2"
       }
     },
+    "node_modules/i18next-browser-languagedetector": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-7.2.0.tgz",
+      "integrity": "sha512-U00DbDtFIYD3wkWsr2aVGfXGAj2TgnELzOX9qv8bT0aJtvPV9CRO77h+vgmHFBMe7LAxdwvT/7VkCWGya6L3tA==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2"
+      }
+    },
+    "node_modules/i18next-fs-backend": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/i18next-fs-backend/-/i18next-fs-backend-2.3.2.tgz",
+      "integrity": "sha512-LIwUlkqDZnUI8lnUxBnEj8K/FrHQTT/Sc+1rvDm9E8YvvY5YxzoEAASNx+W5M9DfD5s77lI5vSAFWeTp26B/3Q=="
+    },
     "node_modules/iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -21053,6 +21090,76 @@
         }
       }
     },
+    "node_modules/next-i18next": {
+      "version": "15.3.1",
+      "resolved": "https://registry.npmjs.org/next-i18next/-/next-i18next-15.3.1.tgz",
+      "integrity": "sha512-+pa2pZJb7B6k5PKW3TLVMmAodqkNaOBWVYlpWX56mgcEJz0UMW+MKSdKM9Z72CHp6Bp48g7OWwDnLqxXNp/84w==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://locize.com/i18next.html"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        },
+        {
+          "type": "individual",
+          "url": "https://locize.com"
+        }
+      ],
+      "dependencies": {
+        "@babel/runtime": "^7.23.2",
+        "@types/hoist-non-react-statics": "^3.3.4",
+        "core-js": "^3",
+        "hoist-non-react-statics": "^3.3.2",
+        "i18next-fs-backend": "^2.3.2"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "i18next": ">= 23.7.13",
+        "next": ">= 12.0.0",
+        "react": ">= 17.0.2",
+        "react-i18next": ">= 13.5.0"
+      }
+    },
+    "node_modules/next-i18next/node_modules/core-js": {
+      "version": "3.38.1",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.38.1.tgz",
+      "integrity": "sha512-OP35aUorbU3Zvlx7pjsFdu1rGNnD4pgw/CWoYzRY3t2EzoVT7shKHY1dlAy3f41cGIO7ZDPQimhGFTlEYkG/Hw==",
+      "hasInstallScript": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
+    "node_modules/next-language-detector": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/next-language-detector/-/next-language-detector-1.1.0.tgz",
+      "integrity": "sha512-TLXMSqweKrrIID0a+PxotItN8MBwIurso3oyz9Odq1VPv3/sdrSpfam2V2eoF462+ibjtSW/P0Xs7gFmeA4Ktw==",
+      "dependencies": {
+        "@babel/runtime": "7.16.7",
+        "i18next-browser-languagedetector": "7.2.0"
+      }
+    },
+    "node_modules/next-language-detector/node_modules/@babel/runtime": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.7.tgz",
+      "integrity": "sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==",
+      "dependencies": {
+        "regenerator-runtime": "^0.13.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/next-language-detector/node_modules/regenerator-runtime": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+    },
     "node_modules/next-mdx-remote": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/next-mdx-remote/-/next-mdx-remote-4.4.1.tgz",
@@ -24707,6 +24814,7 @@
       "version": "14.1.2",
       "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-14.1.2.tgz",
       "integrity": "sha512-FSIcJy6oauJbGEXfhUgVeLzvWBhIBIS+/9c6Lj4niwKZyGaGb4V4vUbATXSlsHJDXXB+ociNxqFNiFuV1gmoqg==",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.23.9",
         "html-parse-stringify": "^3.0.1"
@@ -29835,6 +29943,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
       "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
diff --git a/package.json b/package.json
index fde5349b991c..b8fe84a48daa 100644
--- a/package.json
+++ b/package.json
@@ -71,7 +71,7 @@
     "fuse.js": "^7.0.0",
     "googleapis": "^133.0.0",
     "gray-matter": "^4.0.3",
-    "i18next": "^23.8.2",
+    "i18next": "^23.12.2",
     "jgexml": "^0.4.4",
     "js-cookie": "^3.0.5",
     "json-schema": "^0.4.0",
@@ -82,6 +82,8 @@
     "mermaid": "9.3.0",
     "moment": "^2.30.1",
     "next": "14.1.1",
+    "next-i18next": "^15.3.0",
+    "next-language-detector": "^1.1.0",
     "next-mdx-remote": "^4.4.1",
     "node-fetch": "^3.3.2",
     "node-fetch-2": "npm:node-fetch@^2.7.0",
@@ -91,7 +93,6 @@
     "react-dom": "^18",
     "react-ga": "^3.3.1",
     "react-gtm-module": "^2.0.11",
-    "react-i18next": "^14.0.5",
     "react-scrollspy": "^3.4.3",
     "react-syntax-highlighter": "^15.5.0",
     "react-text-truncate": "^0.19.0",
diff --git a/pages/[lang]/index.tsx b/pages/[lang]/index.tsx
index 20e7e90db7e3..ad5fe83ba6c9 100644
--- a/pages/[lang]/index.tsx
+++ b/pages/[lang]/index.tsx
@@ -1,6 +1,8 @@
+import { useTranslation } from 'next-i18next';
 import React from 'react';
 
 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';
@@ -26,7 +28,10 @@ import Testimonial from '../../components/Testimonial';
 import Heading from '../../components/typography/Heading';
 import Paragraph from '../../components/typography/Paragraph';
 import TextLink from '../../components/typography/TextLink';
-import { getAllLanguageSlugs, getLanguage, useTranslation } from '../../utils/i18n';
+
+const getStaticProps = makeStaticProps(['landing-page', 'footer', 'common']);
+
+export { getStaticPaths, getStaticProps };
 
 /**
  * @description The HomePage is the landing page of the website.
@@ -230,26 +235,3 @@ export default function HomePage() {
  * @description This function generates all language slugs for the landing page.
  * @returns {object} The paths object containing all language slugs.
  */
-export async function getStaticPaths() {
-  const paths = getAllLanguageSlugs();
-
-  return {
-    paths,
-    fallback: false
-  };
-}
-
-/**
- * @description This function fetches the language content for the landing page.
- * @param {object} params The language parameter.
- * @returns {object} The language content for the landing page.
- */
-export async function getStaticProps({ params }: any) {
-  const language = getLanguage(params.lang);
-
-  return {
-    props: {
-      language
-    }
-  };
-}
diff --git a/pages/[lang]/tools/cli.tsx b/pages/[lang]/tools/cli.tsx
index 8e3434b9fc68..ebd496a37a93 100644
--- a/pages/[lang]/tools/cli.tsx
+++ b/pages/[lang]/tools/cli.tsx
@@ -4,6 +4,8 @@ import React from 'react';
 
 import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
 import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
+import { getStaticPaths, makeStaticProps } from '@/utils/getStatic';
+import { useTranslation } from '@/utils/i18n';
 
 import Button from '../../../components/buttons/Button';
 import GithubButton from '../../../components/buttons/GithubButton';
@@ -11,7 +13,10 @@ import CodeBlock from '../../../components/editor/CodeBlock';
 import GenericLayout from '../../../components/layout/GenericLayout';
 import Heading from '../../../components/typography/Heading';
 import Paragraph from '../../../components/typography/Paragraph';
-import { getAllLanguageSlugs, getLanguage, useTranslation } from '../../../utils/i18n';
+
+const getStaticProps = makeStaticProps(['tools', 'common']);
+
+export { getStaticPaths, getStaticProps };
 
 interface Feature {
   name: string;
@@ -80,6 +85,7 @@ export default function CliPage() {
     return (
       <div className='mt-8'>
         <GithubButton
+          text='View on Github'
           className='mt-2 block w-full sm:w-auto md:mt-0 md:inline-block'
           href='https://www.github.com/asyncapi/cli'
         />
@@ -235,31 +241,3 @@ export default function CliPage() {
     </GenericLayout>
   );
 }
-
-/**
- * @description Get the language for the CLI page.
- * @returns { paths: { params: { lang: string } }[]; fallback: boolean }
- */
-export async function getStaticPaths() {
-  const paths = getAllLanguageSlugs();
-
-  return {
-    paths,
-    fallback: false
-  };
-}
-
-/**
- * @description Get the language for the CLI page.
- * @param { params: { lang: string } }
- * @returns { props: { language: string } }
- */
-export async function getStaticProps({ params }: any) {
-  const language = getLanguage(params.lang);
-
-  return {
-    props: {
-      language
-    }
-  };
-}
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 2f39eeb319c8..1eefaecb9b39 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -2,6 +2,7 @@ import '../styles/globals.css';
 
 import type { AppProps } from 'next/app';
 import Head from 'next/head';
+import { appWithTranslation } from 'next-i18next';
 import React from 'react';
 
 import AlgoliaSearch from '@/components/AlgoliaSearch';
@@ -9,51 +10,38 @@ import ScrollButton from '@/components/buttons/ScrollButton';
 import Banner from '@/components/campaigns/Banner';
 import Footer from '@/components/footer/Footer';
 import Layout from '@/components/layout/Layout';
-import { MDXProvider } from '@/components/MDX/MDX';
 import NavBar from '@/components/navigation/NavBar';
 import StickyNavbar from '@/components/navigation/StickyNavbar';
 import AppContext from '@/context/AppContext';
-import { defaultLanguage, defaultNamespace, I18nProvider, languages, namespaces } from '@/utils/i18n';
-import loadLocales from '@/utils/locales';
 
 /**
  * @description The MyApp component is the root component for the application.
  */
 function MyApp({ Component, pageProps, router }: AppProps) {
-  const i18n = {
-    languages,
-    defaultLanguage,
-    namespaces,
-    defaultNamespace,
-    locales: loadLocales()
-  };
-
   return (
-    <I18nProvider i18n={i18n}>
-      <AppContext.Provider value={{ path: router.asPath }}>
-        <Head>
-          <script async defer src='https://buttons.github.io/buttons.js'></script>
-        </Head>
-        <MDXProvider>
-          <AlgoliaSearch>
-            <div className='flex min-h-screen flex-col'>
-              <Banner />
-              <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'>
-                <Footer />
-              </div>
-            </div>
-          </AlgoliaSearch>
-        </MDXProvider>
-      </AppContext.Provider>
-    </I18nProvider>
+    <AppContext.Provider value={{ path: router.asPath }}>
+      {/* <MDXProvider components={mdxComponents}> */}
+      <Head>
+        <script async defer src='https://buttons.github.io/buttons.js'></script>
+      </Head>
+      <AlgoliaSearch>
+        <div className='flex min-h-screen flex-col'>
+          <Banner />
+          <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'>
+            <Footer />
+          </div>
+        </div>
+      </AlgoliaSearch>
+      {/* </MDXProvider> */}
+    </AppContext.Provider>
   );
 }
 
-export default MyApp;
+export default appWithTranslation(MyApp);
diff --git a/pages/_document.tsx b/pages/_document.tsx
index 76bceeecc8e6..80484623fe7b 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -1,5 +1,7 @@
 import Document, { Head, Html, Main, NextScript } from 'next/document';
 
+import i18nextConfig from '../next-i18next.config';
+
 class MyDocument extends Document {
   static async getInitialProps(ctx: any) {
     const initialProps = await Document.getInitialProps(ctx);
@@ -8,8 +10,11 @@ class MyDocument extends Document {
   }
 
   render() {
+    // eslint-disable-next-line no-underscore-dangle
+    const currentLocale = this.props.__NEXT_DATA__.query.locale || i18nextConfig.i18n.defaultLocale;
+
     return (
-      <Html lang='en'>
+      <Html lang={currentLocale as string}>
         <Head>
           {/* Load Work Sans font */}
           <link rel='preconnect' href='https://fonts.googleapis.com' />
diff --git a/pages/casestudies/[id].tsx b/pages/casestudies/[id].tsx
index d418e038629d..d200869dc276 100644
--- a/pages/casestudies/[id].tsx
+++ b/pages/casestudies/[id].tsx
@@ -6,13 +6,11 @@ import { serialize } from 'next-mdx-remote/serialize';
 import { readYamlFile } from '@/components/helpers/read-yaml-file';
 import type { ICaseStudy } from '@/types/post';
 import { HeadingTypeStyle } from '@/types/typography/Heading';
-import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
 
 import CaseTOC from '../../components/CaseTOC';
 import GenericLayout from '../../components/layout/GenericLayout';
-import { getMDXComponents } from '../../components/MDX/MDX';
+import { mdxComponents } from '../../components/MDX/MDX';
 import Heading from '../../components/typography/Heading';
-import Paragraph from '../../components/typography/Paragraph';
 import CaseStudiesList from '../../config/case-studies.json';
 import { generateCaseStudyContent } from '../../utils/staticHelpers';
 
@@ -67,9 +65,9 @@ const renderContent = (
           {item.title}
         </Heading>
         {item.content && (
-          <Paragraph typeStyle={ParagraphTypeStyle.md} className='my-4'>
+          <div className='my-4'>
             <MDXRemote {...item.content} components={allComponents} />
-          </Paragraph>
+          </div>
         )}
         {item.items && (
           <div className='mt-4 items-center'>
@@ -161,7 +159,7 @@ const Index: React.FC<IndexProps> = ({
   additionalResources
 }) => {
   const image = '/img/social/website-card.png';
-  const allComponents = getMDXComponents();
+  const allComponents = mdxComponents;
   const contacts = casestudy.company.contact;
 
   const content = generateCaseStudyContent({
diff --git a/pages/index.tsx b/pages/index.tsx
index f04a906e5ea5..906ed8c65cfe 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,13 +1,14 @@
-import Head from '@/components/Head';
 import AsyncAPIColorIcon from '@/components/icons/AsyncAPIColorIcon';
 import Loader from '@/components/Loader';
-import { languageDetection } from '@/utils/i18n';
+
+import Head from '../components/Head';
+import { Redirect } from '../utils/redirect';
 
 /**
  * @description This is the home page which is the first page that loads when the user visits the website.
  */
 export default function HomePage() {
-  languageDetection();
+  Redirect();
 
   return (
     <>
diff --git a/pages/tools/cli.tsx b/pages/tools/cli.tsx
index a4a017605274..c9f0cae53129 100644
--- a/pages/tools/cli.tsx
+++ b/pages/tools/cli.tsx
@@ -50,6 +50,7 @@ function renderButtons(): JSX.Element {
   return (
     <div className='mt-8'>
       <GithubButton
+        text='View on Github'
         className='mt-2 block w-full sm:w-auto md:mt-0 md:inline-block'
         href='https://www.github.com/asyncapi/cli'
       />
diff --git a/pages/tools/generator.tsx b/pages/tools/generator.tsx
index 7e1fe25ba445..813250bc8b09 100644
--- a/pages/tools/generator.tsx
+++ b/pages/tools/generator.tsx
@@ -24,7 +24,11 @@ function renderButtons(): JSX.Element {
         icon={<IconRocket className="inline-block w-6 h-6 -mt-1" />}
         className="w-full mb-2 sm:w-auto sm:mb-0 sm:mr-2"
       /> */}
-      <GithubButton className='w-full sm:w-auto' href='https://www.github.com/asyncapi/generator' />
+      <GithubButton
+        text='View on Github'
+        className='w-full sm:w-auto'
+        href='https://www.github.com/asyncapi/generator'
+      />
       <Button
         text='View Docs'
         href='/docs/tools/generator'
diff --git a/pages/tools/github-actions.tsx b/pages/tools/github-actions.tsx
index ae6043721834..c6b7b582dd7a 100644
--- a/pages/tools/github-actions.tsx
+++ b/pages/tools/github-actions.tsx
@@ -19,7 +19,11 @@ function renderButtons(): JSX.Element {
         icon={<IconRocket className="inline-block w-6 h-6 -mt-1" />}
         className="w-full mb-2 sm:w-auto sm:mb-0 sm:mr-2"
       /> */}
-      <GithubButton className='w-full sm:w-auto' href='https://www.github.com/asyncapi/github-action-for-generator' />
+      <GithubButton
+        text='View on Github'
+        className='w-full sm:w-auto'
+        href='https://www.github.com/asyncapi/github-action-for-generator'
+      />
     </div>
   );
 }
diff --git a/pages/tools/modelina.tsx b/pages/tools/modelina.tsx
index 43423e1e5d57..70ab2953b0b6 100644
--- a/pages/tools/modelina.tsx
+++ b/pages/tools/modelina.tsx
@@ -125,6 +125,7 @@ export default function ModelinaPlaygroundPage() {
               </CodeBlock>
               <div className='flex justify-center gap-x-2 lg:justify-start'>
                 <GithubButton
+                  text='View on Github'
                   className='mt-2 block md:mt-0 md:inline-block'
                   href='https://www.github.com/asyncapi/modelina'
                 />
diff --git a/pages/tools/parsers.tsx b/pages/tools/parsers.tsx
index ee65ebc7c8f0..d3d83558823e 100644
--- a/pages/tools/parsers.tsx
+++ b/pages/tools/parsers.tsx
@@ -56,7 +56,11 @@ function renderButtons(): JSX.Element {
         icon={<IconRocket className="inline-block w-6 h-6 -mt-1" />}
         className="w-full mb-2 sm:w-auto sm:mb-0 sm:mr-2"
       /> */}
-      <GithubButton className='w-full sm:w-auto' href='https://www.github.com/asyncapi/parser-js' />
+      <GithubButton
+        text='View on Github'
+        className='w-full sm:w-auto'
+        href='https://www.github.com/asyncapi/parser-js'
+      />
     </div>
   );
 }
diff --git a/locales/de/common.json b/public/locales/de/common.json
similarity index 100%
rename from locales/de/common.json
rename to public/locales/de/common.json
diff --git a/locales/de/landing-page.json b/public/locales/de/landing-page.json
similarity index 100%
rename from locales/de/landing-page.json
rename to public/locales/de/landing-page.json
diff --git a/locales/de/tools.json b/public/locales/de/tools.json
similarity index 100%
rename from locales/de/tools.json
rename to public/locales/de/tools.json
diff --git a/locales/en/common.json b/public/locales/en/common.json
similarity index 100%
rename from locales/en/common.json
rename to public/locales/en/common.json
diff --git a/locales/en/landing-page.json b/public/locales/en/landing-page.json
similarity index 100%
rename from locales/en/landing-page.json
rename to public/locales/en/landing-page.json
diff --git a/locales/en/tools.json b/public/locales/en/tools.json
similarity index 100%
rename from locales/en/tools.json
rename to public/locales/en/tools.json
diff --git a/utils/browserLanguageDetector.ts b/utils/browserLanguageDetector.ts
deleted file mode 100644
index d4012e4b5ddc..000000000000
--- a/utils/browserLanguageDetector.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { i18n } from '../next-i18next-static-site.config';
-
-/**
- * Converts languages like 'en-US' to 'en'.
- * @param {string} code - The language code to convert.
- * @returns {string} The converted base language code.
- */
-const convertLanguageCode = (code: string): string => {
-  const baseLanguageCode = code.split('-')[0];
-  return baseLanguageCode;
-};
-
-/**
- * Detects the browser language based on user settings.
- * @returns {string} The detected language code.
- */
-function browserLanguageDetector(): string {
-  // Fetch the language stored inside localStorage
-  const localStorageLanguage = localStorage.getItem('i18nLang');
-
-  if (localStorageLanguage) {
-    return localStorageLanguage;
-  }
-
-  // Load available languages from i18n object
-  const availableLanguages: string[] = i18n.languages;
-
-  // Load user's default languages from browser settings
-  const browserDefaultLanguages: readonly string[] = navigator.languages;
-
-  const convertedLanguages: string[] = browserDefaultLanguages.map((code) =>
-    convertLanguageCode(code)
-  );
-
-  // Check if the top priority language is available inside i18n object
-  for (let i = 0; i < convertedLanguages.length; i++) {
-    if (availableLanguages.includes(convertedLanguages[i])) {
-      return convertedLanguages[i];
-    }
-  }
-  // Default to 'en' in all other cases
-  return 'en';
-}
-
-export default browserLanguageDetector;
diff --git a/utils/getStatic.ts b/utils/getStatic.ts
new file mode 100644
index 000000000000..9b76ba9d4e53
--- /dev/null
+++ b/utils/getStatic.ts
@@ -0,0 +1,57 @@
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+
+import i18nextConfig from '../next-i18next.config';
+
+console.log(i18nextConfig.i18n.locales);
+
+/**
+ * Retrieves the internationalization paths for the supported locales.
+ * @returns An array of paths for each supported locale.
+ */
+export const getI18nPaths = () =>
+    i18nextConfig.i18n.locales.map((lng) => ({
+        params: {
+            lang: lng
+        }
+    }));
+
+/**
+ * Retrieves the static paths for Next.js.
+ * @returns An object containing the fallback value and an array of paths.
+ */
+export const getStaticPaths = () => ({
+    fallback: false,
+    paths: getI18nPaths()
+});
+
+/**
+ * Retrieves the internationalization props for a given context and namespaces.
+ * @param ctx - The context object containing the locale parameter.
+ * @param ns - An array of namespaces to be loaded.
+ * @returns An object containing the internationalization props.
+ */
+export async function getI18nProps(ctx:any, ns = ['common']) {
+    const locale = ctx?.params?.lang;
+
+    console.log(locale, 'here');
+    const props = {
+        ...(await serverSideTranslations(locale, ns))
+    };
+
+    return props;
+}
+
+/**
+ * Creates static props for Next.js based on the given namespaces.
+ * @param ns - An object containing the namespaces to be loaded.
+ * @returns A function that retrieves the static props.
+ */
+export function makeStaticProps(ns = {}) {
+    return async function getStaticProps(ctx:any) {
+        console.log(ctx, 'ctx');
+
+        return {
+            props: await getI18nProps(ctx, ns as any)
+        };
+    };
+}
diff --git a/utils/i18n.ts b/utils/i18n.ts
new file mode 100644
index 000000000000..899fafde6055
--- /dev/null
+++ b/utils/i18n.ts
@@ -0,0 +1,21 @@
+import { useTranslation } from 'next-i18next';
+
+interface I18nPaths {
+  [key: string]: string[];
+}
+
+export const i18nPaths: I18nPaths = {
+  en: [
+    '', // Homepage Route
+    '/tools/cli'
+  ],
+  de: [
+    '', // Homepage Route
+    '/tools/cli'
+  ]
+};
+
+export const languages = ['en', 'de'];
+export const defaultLanguage = 'en';
+
+export { useTranslation };
diff --git a/utils/i18n.tsx b/utils/i18n.tsx
deleted file mode 100644
index 34f3c7900d4f..000000000000
--- a/utils/i18n.tsx
+++ /dev/null
@@ -1,211 +0,0 @@
-import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
-import i18next, { i18n, Module } from 'i18next';
-import {
-  initReactI18next,
-  useTranslation,
-  withTranslation,
-  Translation,
-  Trans,
-} from 'react-i18next';
-import nextI18nextStaticSiteConfig from '../next-i18next-static-site.config';
-
-// Translation exports from react-i18next
-export { useTranslation, withTranslation, Translation, Trans };
-
-interface Config {
-  languages: string[];
-  defaultLanguage: string;
-  namespaces: string[];
-  defaultNamespace: string;
-  allowHydration: boolean;
-  cookieName: string;
-}
-
-const defaultConfig = {
-  allowHydration: true,
-  languages: ['en'],
-  defaultLanguage: 'en',
-  namespaces: ['common'],
-  defaultNamespace: 'common',
-  cookieName: 'lang',
-  cookieOptions: { expires: 365, path: '/' },
-};
-
-const config: Config = {
-  ...defaultConfig,
-  languages: nextI18nextStaticSiteConfig.i18n.languages,
-  defaultLanguage: nextI18nextStaticSiteConfig.i18n.defaultLanguage,
-  namespaces: nextI18nextStaticSiteConfig.i18n.namespaces,
-  defaultNamespace: nextI18nextStaticSiteConfig.i18n.defaultNamespace,
-};
-
-export const languages = config.languages;
-export const defaultLanguage = config.defaultLanguage;
-export const namespaces = config.namespaces;
-export const defaultNamespace = config.defaultNamespace;
-export const defaultNamespace2 = config.defaultNamespace;
-export const cookieName = config.cookieName;
-
-/**
- * Creates an i18next instance with the provided locales and language.
- * @param {Object} locales - The locales object containing translations for different languages and namespaces.
- * @param {string} language - The language code representing the desired language.
- * @returns {Object} - The initialized i18next instance.
- */
-const createI18nextInstance = (locales: any, language: string): i18n => {
-  // i18n plugins to load
-  const plugins = [
-    //
-    initReactI18next,
-  ];
-
-  plugins.map((plugin: Module) => i18next.use(plugin));
-  plugins.map((plugin: Module) => i18next.use(plugin)); // @fix: remove in future - https://github.com/vercel/next.js/issues/53688
-
-  i18next.init({
-    resources: locales,
-    cleanCode: true,
-    lng: language,
-    supportedLngs: config.languages,
-    fallbackLng: language ? language : config.defaultLanguage,
-    ns: config.namespaces, // String or array of namespaces to load
-    defaultNS: config.defaultNamespace, // Default namespace used if not passed to translation function
-    interpolation: {
-      escapeValue: false, // Not needed for react as it escapes by default
-    },
-    react: {
-      useSuspense: false, // Not compatible with SSR
-    },
-    load: 'languageOnly', // Remove if you want to use localization (en-US, en-GB)
-  });
-
-  return i18next;
-};
-
-let globalI18nextInstance: any = null;
-
-/**
- * Returns a singleton instance of the i18next object with the specified language and locales.
- * If the instance doesn't exist, it creates a new one; otherwise, it changes the language of the existing instance.
- * @param {string} language - The language code representing the desired language.
- * @param {Object} locales - The locales object containing translations for different languages and namespaces.
- * @returns {Object} - The i18next instance.
- */
-export const i18nextInstance = (language: string, locales: object): i18n => {
-  if (!globalI18nextInstance) {
-    globalI18nextInstance = createI18nextInstance(locales, language);
-
-    return globalI18nextInstance;
-  } else {
-    globalI18nextInstance.changeLanguage(language);
-
-    return globalI18nextInstance;
-  }
-};
-
-// Prevent rerender
-let loaded = false;
-
-/**
- * A React component that provides i18n functionality to the child components.
- * @param {Object} props - The props object containing the i18n options and child components.
- * @returns {JSX.Element|null} - The child components wrapped in the i18n provider, or null if hydration is not allowed.
- */
-export const I18nProvider = (props: any) => {
-  const [hydration, setHydration] = useState(false);
-
-  const options: any = { ...config, ...props.i18n };
-
-  if (!props.i18n?.locales) {
-    throw new Error('locales object was not passed into I18nProvider');
-  }
-
-  const router = useRouter();
-  const { asPath, query } = router;
-
-  // Detect the current language
-  const slug = asPath.split('/')[1];
-  const langSlug = config.languages.includes(slug) && slug;
-  const language = (
-    query.lang ||
-    langSlug ||
-    config.defaultLanguage
-  ).toString();
-
-  // Load only once, otherwise there will be an re-render infinite loop
-  if (!loaded) {
-    i18nextInstance(language, props.i18n.locales);
-  }
-
-  const { i18n } = useTranslation();
-
-  useEffect(() => {
-    // Overwrite the current store
-    i18n.services.resourceStore.data = props.i18n.locales;
-
-    // Required to display the updated translations
-    i18n.changeLanguage(language);
-  }, [i18n, language, props.i18n.locales]);
-
-  useEffect(() => {
-    loaded = true;
-    i18n.changeLanguage(language);
-  }, [i18n, language]);
-
-  useEffect(() => {
-    const hasWindow = typeof window !== 'undefined';
-    if (hasWindow && options.allowHydration) {
-      setHydration(true);
-    }
-  }, [options.allowHydration]);
-
-  return hydration ? props.children : null;
-};
-
-/**
- * Retrieves all language slugs for use in Next.js dynamic routing.
- * @returns {Object[]} - An array of objects, each containing the "params" property with the "lang" parameter for each language.
- */
-export function getAllLanguageSlugs() {
-  return config.languages.map((lang: string) => {
-    return { params: { lang: lang } };
-  });
-}
-
-/**
- * Retrieves the valid language code based on the provided language.
- * If the provided language is not valid, returns the default language.
- * @param {string} lang - The language code to check for validity.
- * @returns {string} - The valid language code.
- */
-export function getLanguage(lang: string) {
-  return config.languages.includes(lang) ? lang : config.defaultLanguage;
-}
-
-/**
- * Detects the user's preferred language based on cookies and browser settings.
- * If a preferred language is found, redirects the user to the corresponding language page.
- */
-export const languageDetection = () => {
-  const router = useRouter();
-
-  useEffect(() => {
-    let browserLocale: string | undefined =
-      (navigator.languages && navigator.languages.length
-        ? navigator.languages[0]
-        : navigator.language) || undefined;
-
-    if (browserLocale) {
-      browserLocale = browserLocale.slice(0, 2);
-    }
-
-    if (browserLocale && languages.includes(browserLocale)) {
-      router.push('/' + browserLocale);
-    } else {
-      router.push('/' + defaultLanguage);
-    }
-  }, [router, defaultLanguage]);
-
-  return null;
-};
diff --git a/utils/i18nPaths.ts b/utils/i18nPaths.ts
deleted file mode 100644
index 7a0c937c049b..000000000000
--- a/utils/i18nPaths.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-interface I18nPaths {
-  [key: string]: string[];
-}
-
-const i18nPaths: I18nPaths = {
-  en: [
-    "", // Homepage Route
-    "/tools/cli"
-  ],
-  de: [
-    "", // Homepage Route
-    "/tools/cli"
-  ]
-};
-
-export default i18nPaths;
\ No newline at end of file
diff --git a/utils/languageDetector.ts b/utils/languageDetector.ts
new file mode 100644
index 000000000000..e3db95e0f17d
--- /dev/null
+++ b/utils/languageDetector.ts
@@ -0,0 +1,8 @@
+import languageDetector from 'next-language-detector';
+
+import i18nextConfig from '../next-i18next.config';
+
+export default languageDetector({
+  supportedLngs: i18nextConfig.i18n.locales,
+  fallbackLng: i18nextConfig.i18n.defaultLocale
+});
diff --git a/utils/locales.ts b/utils/locales.ts
deleted file mode 100644
index 00a34a0e9df0..000000000000
--- a/utils/locales.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { languages, namespaces } from './i18n';
-
-/**
- * Loads all locales.
- * @returns {object} - Returns an object containing all locales.
- */
-function loadLocales(): Record<string, Record<string, any>> {
-  // Load all locales, required for next-i18n-static-site
-  const locales: Record<string, Record<string, any>> = {};
-  languages.map((language) => {
-    locales[language] = {};
-    namespaces.map((namespace) => {
-      locales[language][
-        namespace
-      ] = require(`./../locales/${language}/${namespace}.json`);
-    });
-  });
-  return locales;
-}
-
-export default loadLocales;
diff --git a/utils/redirect.ts b/utils/redirect.ts
new file mode 100644
index 000000000000..d4419d0f6e22
--- /dev/null
+++ b/utils/redirect.ts
@@ -0,0 +1,52 @@
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
+
+import languageDetector from './languageDetector';
+
+/**
+ * Custom hook that redirects the user to a specified URL or the current URL with a language prefix.
+ * @param to - The URL to redirect to. If not provided, the current URL will be used.
+ * @returns null
+ */
+export function useRedirect(to: string | undefined): any {
+    const router = useRouter();
+
+    const toUrl = to || router.asPath;
+
+    // language detection
+    useEffect(() => {
+        const detectedLng = languageDetector.detect();
+
+        if (toUrl.startsWith(`/${detectedLng}`) && router.route === '/404') { // prevent endless loop
+            router.replace(`/${detectedLng}${router.route}`);
+
+            return;
+        }
+
+        languageDetector.cache!(detectedLng!);
+        router.replace(`/${detectedLng}${toUrl}`);
+    });
+
+    return null;
+};
+
+/**
+ * Component that redirects the user to the current URL with a language prefix.
+ * @returns null
+ */
+export const Redirect = () => {
+    useRedirect(undefined);
+
+    return null;
+};
+
+/**
+ * Higher-order function that returns a component that redirects the user to a specified URL with a language prefix.
+ * @param to - The URL to redirect to.
+ * @returns A component that redirects the user to the specified URL.
+ */
+export const getRedirect = (to: string) => () => {
+    useRedirect(to);
+
+    return null;
+};
diff --git a/utils/staticHelpers.ts b/utils/staticHelpers.ts
index e8280fa88d41..ecc22f628472 100644
--- a/utils/staticHelpers.ts
+++ b/utils/staticHelpers.ts
@@ -18,14 +18,14 @@ export function getEvents(events: IEvent[], size?: number) {
 
   if (size) {
     return meetingsWithDates
-      .filter((meeting: any) => meeting.date > moment(new Date().toDateString()))
+      .filter((meeting: any) => meeting.date > moment(new Date()))
       .slice(0, size || meetingsWithDates.length);
   }
 
   const sortedMeetings: any = [];
 
   for (const meeting of meetingsWithDates) {
-    if (meeting.date > moment(new Date().toDateString())) {
+    if (meeting.date > moment(new Date())) {
       sortedMeetings.push(meeting);
     }
   }
@@ -35,7 +35,7 @@ export function getEvents(events: IEvent[], size?: number) {
   });
 
   for (const meeting of meetingsWithDates) {
-    if (meeting.date < moment(new Date().toDateString())) {
+    if (meeting.date < moment(new Date())) {
       sortedMeetings.push(meeting);
     }
   }