diff --git a/README.md b/README.md
index c8c520172d..587c65afd9 100644
--- a/README.md
+++ b/README.md
@@ -56,6 +56,9 @@ the watch mode for both nextra and the theme in separated terminals.
 
 <div>
  <a href="https://speakeasyapi.dev/docs?utm_source=github&utm_campaign=nextra&utm_content=logolink">
-   <img src="/docs/pages/showcase/speakeasy.png" alt="Speakeasy" width="256">
+   <img src="/docs/pages/showcase/speakeasy.png" alt="Speakeasy preview" width="256">
+ </a>
+ <a href="https://xyflow.com?utm_source=github&utm_campaign=nextra&utm_content=logolink">
+   <img src="/docs/pages/showcase/xyflow.jpg" alt="xyflow preview" width="256">
  </a>
 </div>
diff --git a/docs/pages/_meta.ts b/docs/pages/_meta.ts
index bafe054055..a6f350cde4 100644
--- a/docs/pages/_meta.ts
+++ b/docs/pages/_meta.ts
@@ -11,21 +11,6 @@ export default {
     type: 'page',
     title: 'Documentation'
   },
-  showcase: {
-    type: 'page',
-    title: 'Showcase',
-    theme: {
-      typesetting: 'article',
-      layout: 'full'
-    }
-  },
-  about: {
-    type: 'page',
-    title: 'About',
-    theme: {
-      typesetting: 'article'
-    }
-  },
   version: {
     type: 'menu',
     title: 'Version',
@@ -37,7 +22,31 @@ export default {
       }
     }
   },
-  '404': {
+  about: {
+    type: 'page',
+    title: 'About',
+    theme: {
+      typesetting: 'article'
+    }
+  },
+  showcase: {
+    type: 'page',
+    title: 'Showcase',
+    theme: {
+      typesetting: 'article',
+      layout: 'full',
+      timestamp: false
+    }
+  },
+  sponsors: {
+    type: 'page',
+    title: 'Sponsors',
+    theme: {
+      typesetting: 'article',
+      timestamp: false
+    }
+  },
+  404: {
     type: 'page',
     theme: {
       timestamp: false,
diff --git a/docs/pages/about.mdx b/docs/pages/about.mdx
index 77b9960be3..f5837372af 100644
--- a/docs/pages/about.mdx
+++ b/docs/pages/about.mdx
@@ -1,5 +1,3 @@
-import { Cards } from 'nextra/components'
-
 # About Nextra
 
 Nextra was initially created by [Vercel](https://vercel.com) members
@@ -62,16 +60,3 @@ product.
 ## License
 
 The Nextra project and themes are licensed under the MIT license.
-
-## Sponsors
-
-<Cards num={2}>
-  <Cards.Card
-    title="Speakeasy"
-    href="https://speakeasyapi.dev/docs?utm_source=nextra.site&utm_campaign=nextra&utm_content=logolink"
-    target="_blank"
-    arrow
-  >
-    <>![Speakeasy](./showcase/speakeasy.png)</>
-  </Cards.Card>
-</Cards>
diff --git a/docs/pages/showcase.mdx b/docs/pages/showcase.mdx
index c71267a8c4..c299929e11 100644
--- a/docs/pages/showcase.mdx
+++ b/docs/pages/showcase.mdx
@@ -4,199 +4,179 @@ title: Showcase
 
 import { Cards } from 'nextra/components'
 
-{<h1 className="mt-10 mb-4 text-center text-[2.5rem] font-bold tracking-tight">Showcase</h1>}
+<h1 className="mb-4 mt-10 text-center text-[2.5rem] font-bold tracking-tight">
+  {'Showcase'}
+</h1>
 
-{<p className="mb-16 text-center text-lg text-gray-500 dark:text-gray-400">Open
-source projects powered by Nextra</p>}
+<p className="mb-16 text-center text-lg text-gray-500 dark:text-gray-400">
+  {'Open source projects powered by Nextra'}
+</p>
 
 <Cards>
-  <ShowcaseCard title="The Graph" href="https://thegraph.com/docs/en">
+  <Card title="Speakeasy" href="https://speakeasyapi.dev/docs">
+    <>![Speakeasy preview](./showcase/speakeasy.png)</>
+  </Card>
+  <Card title="React Flow" href="https://reactflow.dev">
+    <>![React Flow preview](./showcase/react-flow.jpg)</>
+  </Card>
+  <Card title="Svelte Flow" href="https://svelteflow.dev">
+    <>![Svelte Flow preview](./showcase/svelte-flow.jpg)</>
+  </Card>
+  <Card title="The Graph" href="https://thegraph.com/docs/en">
     <>![The Graph preview](./showcase/thegraph.jpeg)</>
-  </ShowcaseCard>
-  <ShowcaseCard title="GraphQL" href="https://graphql.org">
+  </Card>
+  <Card title="GraphQL" href="https://graphql.org">
     <>![GraphQL preview](./showcase/graphql.png)</>
-  </ShowcaseCard>
-  <ShowcaseCard title="SWR" href="https://swr.vercel.app">
+  </Card>
+  <Card title="SWR" href="https://swr.vercel.app">
     <>![SWR preview](./showcase/swr.png)</>
-  </ShowcaseCard>
-  <ShowcaseCard title="COBE" href="https://cobe.vercel.app">
+  </Card>
+  <Card title="COBE" href="https://cobe.vercel.app">
     <>![COBE preview](./showcase/cobe.png)</>
-  </ShowcaseCard>
-  <ShowcaseCard
+  </Card>
+  <Card
     title="JavaScript Patterns"
     href="https://javascriptpatterns.vercel.app"
   >
     <>![JavaScript Patterns preview](./showcase/javascript-patterns.jpg)</>
-  </ShowcaseCard>
-  <ShowcaseCard
+  </Card>
+  <Card
     title="CodeSandbox"
     href="https://codesandbox.io/docs/learn/introduction/overview"
   >
     <>![CodeSandbox preview](./showcase/codesandbox.jpg)</>
-  </ShowcaseCard>
-  <ShowcaseCard title="DocsGPT" href="https://docs.docsgpt.co.uk">
+  </Card>
+  <Card title="DocsGPT" href="https://docs.docsgpt.co.uk">
     <>![DocsGPT preview](./showcase/docsgpt.png)</>
-  </ShowcaseCard>
-  <ShowcaseCard title="CloudQuery" href="https://cloudquery.io">
+  </Card>
+  <Card title="CloudQuery" href="https://cloudquery.io">
     <>![CloudQuery preview](./showcase/cloudquery.svg)</>
-  </ShowcaseCard>
-  <ShowcaseCard title="Edge Runtime" href="https://edge-runtime.vercel.app">
+  </Card>
+  <Card title="Edge Runtime" href="https://edge-runtime.vercel.app">
     <>![Edge Runtime preview](./showcase/edge-runtime.jpeg)</>
-  </ShowcaseCard>
-  <ShowcaseCard
-    title="Livepeer"
-    href="https://docs.livepeer.org/guides/overview"
-  >
+  </Card>
+  <Card title="Livepeer" href="https://docs.livepeer.org/guides/overview">
     <>![Livepeer preview](./showcase/livepeer.png)</>
-  </ShowcaseCard>
-  <ShowcaseCard title="Sound.xyz" href="https://docs.sound.xyz">
+  </Card>
+  <Card title="Sound.xyz" href="https://docs.sound.xyz">
     <>![Sound.xyz preview](./showcase/sound.xyz.png)</>
-  </ShowcaseCard>
-  <ShowcaseCard title="Speakeasy" href="https://speakeasyapi.dev/docs">
-    <>![Speakeasy preview](./showcase/speakeasy.png)</>
-  </ShowcaseCard>
-  <ShowcaseCard title="Panda" href="https://panda-css.com">
+  </Card>
+  <Card title="Panda" href="https://panda-css.com">
     <>![Panda preview](./showcase/panda.png)</>
-  </ShowcaseCard>
-  <ShowcaseCard title="Kuma UI" href="https://kuma-ui.com">
+  </Card>
+  <Card title="Kuma UI" href="https://kuma-ui.com">
     <>![Kuma UI preview](./showcase/kuma-ui.png)</>
-  </ShowcaseCard>
-  <ShowcaseCard title="Langfuse" href="https://langfuse.com">
+  </Card>
+  <Card title="Langfuse" href="https://langfuse.com">
     <>
       ![Langfuse Open Source LLM Engineering Platform](./showcase/langfuse.png)
     </>
-  </ShowcaseCard>
-  <ShowcaseCard title="The Guild Blog" href="https://the-guild.dev">
+  </Card>
+  <Card title="The Guild Blog" href="https://the-guild.dev">
     <>![The Guild Blog preview](./showcase/the-guild.png)</>
-  </ShowcaseCard>
-  <ShowcaseCard title="GraphQL Hive" href="https://the-guild.dev/graphql/hive">
+  </Card>
+  <Card title="GraphQL Hive" href="https://the-guild.dev/graphql/hive">
     <>![GraphQL Hive preview](./showcase/graphql-hive.png)</>
-  </ShowcaseCard>
-  <ShowcaseCard
-    title="GraphQL Yoga"
-    href="https://the-guild.dev/graphql/yoga-server"
-  >
+  </Card>
+  <Card title="GraphQL Yoga" href="https://the-guild.dev/graphql/yoga-server">
     <>![GraphQL Yoga preview](./showcase/graphql-yoga.png)</>
-  </ShowcaseCard>
-  <ShowcaseCard
-    title="GraphQL Envelop"
-    href="https://the-guild.dev/graphql/envelop"
-  >
+  </Card>
+  <Card title="GraphQL Envelop" href="https://the-guild.dev/graphql/envelop">
     <>![GraphQL Envelop preview](./showcase/graphql-envelop.png)</>
-  </ShowcaseCard>
-  <ShowcaseCard
+  </Card>
+  <Card
     title="GraphQL Inspector"
     href="https://the-guild.dev/graphql/inspector"
   >
     <>![GraphQL Inspector preview](./showcase/graphql-inspector.png)</>
-  </ShowcaseCard>
-  <ShowcaseCard
+  </Card>
+  <Card
     title="GraphQL Code Generator"
     href="https://the-guild.dev/graphql/codegen"
   >
     <>![GraphQL Code Generator preview](./showcase/graphql-codegen.png)</>
-  </ShowcaseCard>
-  <ShowcaseCard title="GraphQL Mesh" href="https://the-guild.dev/graphql/mesh">
+  </Card>
+  <Card title="GraphQL Mesh" href="https://the-guild.dev/graphql/mesh">
     <>![GraphQL Mesh preview](./showcase/graphql-mesh.png)</>
-  </ShowcaseCard>
-  <ShowcaseCard
-    title="GraphQL Tools"
-    href="https://the-guild.dev/graphql/tools"
-  >
+  </Card>
+  <Card title="GraphQL Tools" href="https://the-guild.dev/graphql/tools">
     <>![GraphQL Tools preview](./showcase/graphql-tools.png)</>
-  </ShowcaseCard>
-  <ShowcaseCard
-    title="GraphQL Modules"
-    href="https://the-guild.dev/graphql/modules"
-  >
+  </Card>
+  <Card title="GraphQL Modules" href="https://the-guild.dev/graphql/modules">
     <>![GraphQL Modules preview](./showcase/graphql-modules.png)</>
-  </ShowcaseCard>
-  <ShowcaseCard
-    title="GraphQL ESLint"
-    href="https://the-guild.dev/graphql/eslint"
-  >
+  </Card>
+  <Card title="GraphQL ESLint" href="https://the-guild.dev/graphql/eslint">
     <>![GraphQL ESLint preview](./showcase/graphql-eslint.png)</>
-  </ShowcaseCard>
-  <ShowcaseCard
-    title="GraphQL Config"
-    href="https://the-guild.dev/graphql/config"
-  >
+  </Card>
+  <Card title="GraphQL Config" href="https://the-guild.dev/graphql/config">
     <>![GraphQL Config preview](./showcase/graphql-config.png)</>
-  </ShowcaseCard>
-  <ShowcaseCard
-    title="GraphQL Scalars"
-    href="https://the-guild.dev/graphql/scalars"
-  >
+  </Card>
+  <Card title="GraphQL Scalars" href="https://the-guild.dev/graphql/scalars">
     <>![GraphQL Scalars preview](./showcase/graphql-scalars.png)</>
-  </ShowcaseCard>
-  <ShowcaseCard
-    title="GraphQL Shield"
-    href="https://the-guild.dev/graphql/shield"
-  >
+  </Card>
+  <Card title="GraphQL Shield" href="https://the-guild.dev/graphql/shield">
     <>![GraphQL Shield preview](./showcase/graphql-shield.png)</>
-  </ShowcaseCard>
-  <ShowcaseCard
-    title="GraphQL SOFA"
-    href="https://the-guild.dev/graphql/sofa-api"
-  >
+  </Card>
+  <Card title="GraphQL SOFA" href="https://the-guild.dev/graphql/sofa-api">
     <>![GraphQL SOFA preview](./showcase/graphql-sofa.png)</>
-  </ShowcaseCard>
-  <ShowcaseCard
+  </Card>
+  <Card
     title="Apollo Angular"
     href="https://the-guild.dev/graphql/apollo-angular"
   >
     <>![Apollo Angular preview](./showcase/apollo-angular.png)</>
-  </ShowcaseCard>
-  <ShowcaseCard title="KitQL" href="https://kitql.dev">
+  </Card>
+  <Card title="KitQL" href="https://kitql.dev">
     <>![KitQL preview](./showcase/kitql.png)</>
-  </ShowcaseCard>
-  <ShowcaseCard title="GraphQL SSE" href="https://the-guild.dev/graphql/sse">
+  </Card>
+  <Card title="GraphQL SSE" href="https://the-guild.dev/graphql/sse">
     <>![GraphQL SSE preview](./showcase/graphql-sse.png)</>
-  </ShowcaseCard>
-  <ShowcaseCard title="GraphQL WS" href="https://the-guild.dev/graphql/ws">
+  </Card>
+  <Card title="GraphQL WS" href="https://the-guild.dev/graphql/ws">
     <>![GraphQL WS preview](./showcase/graphql-ws.png)</>
-  </ShowcaseCard>
-  <ShowcaseCard title="feTS" href="https://the-guild.dev/openapi/fets">
+  </Card>
+  <Card title="feTS" href="https://the-guild.dev/openapi/fets">
     <>![feTS preview](./showcase/fets.png)</>
-  </ShowcaseCard>
-  <ShowcaseCard
+  </Card>
+  <Card
     title="JavaScript Code Challenges"
     href="https://jscodechallenges.vercel.app"
   >
     <>![JavaScript Code Challenges preview](./showcase/jscodechallenges.png)</>
-  </ShowcaseCard>
-  <ShowcaseCard title="React Cosmos" href="https://reactcosmos.org">
+  </Card>
+  <Card title="React Cosmos" href="https://reactcosmos.org">
     <>![React Cosmos preview](./showcase/react-cosmos.png)</>
-  </ShowcaseCard>
-  <ShowcaseCard title="Typia" href="https://typia.io">
+  </Card>
+  <Card title="Typia" href="https://typia.io">
     <>![Typia preview](./showcase/typia.png)</>
-  </ShowcaseCard>
-  <ShowcaseCard title="Nestia" href="https://nestia.io">
+  </Card>
+  <Card title="Nestia" href="https://nestia.io">
     <>![Nestia preview](./showcase/nestia.png)</>
-  </ShowcaseCard>
-  <ShowcaseCard title="Safe" href="https://docs.safe.global">
+  </Card>
+  <Card title="Safe" href="https://docs.safe.global">
     <>![Safe preview](./showcase/safe-core.png)</>
-  </ShowcaseCard>
-  <ShowcaseCard title="Auth.js" href="https://authjs.dev">
+  </Card>
+  <Card title="Auth.js" href="https://authjs.dev">
     <>![Auth.js preview](./showcase/authjs.png)</>
-  </ShowcaseCard>
-  <ShowcaseCard title="imgix" href="https://docs.imgix.com">
+  </Card>
+  <Card title="imgix" href="https://docs.imgix.com">
     <>![imgix preview](./showcase/imgix.png)</>
-  </ShowcaseCard>
-  <ShowcaseCard title="AnythingLLM" href="https://anythingllm.com/">
+  </Card>
+  <Card title="AnythingLLM" href="https://anythingllm.com/">
     <>![AnythingLLM preview](./showcase/anythingllm.png)</>
-  </ShowcaseCard>
+  </Card>
 </Cards>
 
-export const ShowcaseCard = Object.assign(
+export const Card = Object.assign(
   // Copy card component and add default props
   Cards.Card.bind(),
   {
-    displayName: 'ShowcaseCard',
+    displayName: 'Card',
     defaultProps: {
       image: true,
       arrow: true,
-      target: '_blank'
+      target: '_blank',
+      rel: 'noreferrer'
     }
   }
 )
diff --git a/docs/pages/showcase/react-flow.jpg b/docs/pages/showcase/react-flow.jpg
new file mode 100644
index 0000000000..c085ea5227
Binary files /dev/null and b/docs/pages/showcase/react-flow.jpg differ
diff --git a/docs/pages/showcase/svelte-flow.jpg b/docs/pages/showcase/svelte-flow.jpg
new file mode 100644
index 0000000000..42d88a98a2
Binary files /dev/null and b/docs/pages/showcase/svelte-flow.jpg differ
diff --git a/docs/pages/showcase/xyflow.jpg b/docs/pages/showcase/xyflow.jpg
new file mode 100644
index 0000000000..f145289660
Binary files /dev/null and b/docs/pages/showcase/xyflow.jpg differ
diff --git a/docs/pages/sponsors.mdx b/docs/pages/sponsors.mdx
new file mode 100644
index 0000000000..817b684812
--- /dev/null
+++ b/docs/pages/sponsors.mdx
@@ -0,0 +1,38 @@
+import { Button, Cards } from 'nextra/components'
+import { Card } from './showcase.mdx'
+
+<h1 className="mb-4 mt-10 text-center text-[2.5rem] font-bold tracking-tight">
+  {'Sponsors'}
+</h1>
+
+<p className="text-center text-lg text-gray-500 dark:text-gray-400">
+  {'Your sponsorship means a lot to open source projects, including Nextra'}
+</p>
+
+<Button
+  className="mx-auto mb-16 mt-6 block w-fit px-6 hover:!no-underline"
+  variant="outline"
+  href="https://github.com/sponsors/dimaMachina"
+  as="a"
+  target="_blank"
+  rel="noreferrer"
+>
+  {'Support Nextra'}
+</Button>
+
+{/* <h2 className="text-center">Organization Sponsors</h2> */}
+
+<Cards num={2} className="hover:[&_a]:!no-underline">
+  <Card
+    title="Speakeasy"
+    href="https://speakeasyapi.dev/docs?utm_source=nextra.site&utm_campaign=nextra&utm_content=logolink"
+  >
+    <>![Speakeasy preview](./showcase/speakeasy.png)</>
+  </Card>
+  <Card
+    title="xyflow"
+    href="https://xyflow.com?utm_source=nextra.site&utm_campaign=nextra&utm_content=logolink"
+  >
+    <>![xyflow preview](./showcase/xyflow.jpg)</>
+  </Card>
+</Cards>
diff --git a/packages/nextra-theme-docs/src/mdx-components.tsx b/packages/nextra-theme-docs/src/mdx-components.tsx
index d9d4586299..6552e921e4 100644
--- a/packages/nextra-theme-docs/src/mdx-components.tsx
+++ b/packages/nextra-theme-docs/src/mdx-components.tsx
@@ -75,7 +75,8 @@ const createHeading = (
                   h4: '_mt-8 _text-xl',
                   h5: '_mt-8 _text-lg',
                   h6: '_mt-8 _text-base'
-                }[Tag]
+                }[Tag],
+                className
               )
         }
         {...props}