diff --git a/packages/docusaurus-playground/src/pages/index.mdx b/packages/docusaurus-playground/src/pages/index.mdx
index 7bc5666..1a15b06 100644
--- a/packages/docusaurus-playground/src/pages/index.mdx
+++ b/packages/docusaurus-playground/src/pages/index.mdx
@@ -17,6 +17,7 @@ import {
   Roadmap,
   SectionHeader,
   TimelineItem,
+  ShowcaseCard,
 } from '../components/mdx'
 
 <Hero size="large">
@@ -253,3 +254,89 @@ import {
     </Grid.Item>
   </Grid>
 </Box>
+
+<Box top={{ xs: 144, lg: 216 }}>
+  <CallToActionSection
+    title="User Endorsements"
+  />
+</Box>
+<Box top={{ xs: 64, lg: 100 }}>
+  <Showcase
+    id="showcase"
+    items={[
+      {
+        name: 'Status',
+        logo: '/showcase/status-mark-black.svg',
+        logoDark: '/showcase/status-mark-white.svg',
+        description:
+          `"Waku v2 has been instrumental in helping us scale the Status application securely while maintaining the decentralised nature of our network. The Waku team has been invaluable in providing practical solutions during the development of the Waku v2 protocol, enabling us to deliver essential Status Communities features.”`,
+      },
+      {
+        name: 'Railgun',
+        logo: '/showcase/railgun-mark-black.svg',
+        logoDark: '/showcase/railgun-mark-white.svg',
+        description:
+          <>"RAILGUN contributors selected Waku to run its relayer network as an early-stage but promising product of the privacy-centric <a href="https://status.im" target="_blank">status.im</a> ecosystem. We have not been disappointed. The developers are extremely professional and responsive, and continue to strive to understand and meet our needs as a communication layer for relaying private transactions."</>,
+      },
+      {
+        name: 'The Graph',
+        logo: '/showcase/the-graph-mark-black.svg',
+        logoDark: '/showcase/the-graph-mark-white.svg',
+        description:
+          `"Our experience with Waku has been transformative, proving to be a valuable tool that reveals the potential of peer-to-peer communication technologies. We are excited to continue using Waku's advanced features and contribute to the growth of Graphcast and the broader Graph ecosystem."`,
+      }
+    ]}
+  />
+
+  <CallToActionButton href="https://docs.waku.org/" variant="outlined">Build on Waku</CallToActionButton>
+</Box>
+
+<Box top={{ xs: 144, lg: 216 }}>
+  <CallToActionSection title="User Endorsements" />
+</Box>
+<Box top={{ xs: 64, lg: 100 }}>
+  <Grid
+    xs={{ cols: 2, wrap: true, gap: '1.5rem 1em' }}
+    lg={{ cols: 3, gap: '1rem' }}
+  >
+    <Grid.Item xs={1}>
+      <ShowcaseCard
+        name="Status"
+        logoSrc="/showcase/status-mark-black.svg"
+        logoSrcDark="/showcase/status-mark-white.svg"
+        description={`"Waku v2 has been instrumental in helping us scale the Status application securely while maintaining the decentralised nature of our network. The Waku team has been invaluable in providing practical solutions during the development of the Waku v2 protocol, enabling us to deliver essential Status Communities features.”`}
+      />
+    </Grid.Item>
+    <Grid.Item xs={1}>
+      <ShowcaseCard
+        name="Railgun"
+        logoSrc="/showcase/railgun-mark-black.svg"
+        logoSrcDark="/showcase/railgun-mark-white.svg"
+        description={
+          <>
+            "RAILGUN contributors selected Waku to run its relayer network as an
+            early-stage but promising product of the privacy-centric{' '}
+            <a href="https://status.im" target="_blank">
+              status.im
+            </a>{' '}
+            ecosystem. We have not been disappointed. The developers are
+            extremely professional and responsive, and continue to strive to
+            understand and meet our needs as a communication layer for relaying
+            private transactions."
+          </>
+        }
+      />
+    </Grid.Item>
+    <Grid.Item xs={1}>
+      <ShowcaseCard
+        name="The Graph"
+        logoSrc="/showcase/the-graph-mark-black.svg"
+        logoSrcDark="/showcase/the-graph-mark-white.svg"
+        description={`"Our experience with Waku has been transformative, proving to be a valuable tool that reveals the potential of peer-to-peer communication technologies. We are excited to continue using Waku's advanced features and contribute to the growth of Graphcast and the broader Graph ecosystem."`}
+      />
+    </Grid.Item>
+  </Grid>
+  <CallToActionButton href="https://docs.waku.org/" variant="outlined">
+    Build on Waku
+  </CallToActionButton>
+</Box>
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/Showcase/Showcase.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/Showcase/Showcase.scss
index 2f88216..d2a38c2 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/Showcase/Showcase.scss
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/Showcase/Showcase.scss
@@ -1,51 +1,2 @@
-@use '../../../css/utils';
-@use '../../../css/lsd';
-
 .mdx-showcase {
-  width: 100%;
-  overflow: hidden;
-  display: grid;
-  grid-template-columns: repeat(var(--columns), 1fr);
-  gap: 1rem;
-}
-
-.mdx-showcase__item {
-  border-top: 1px solid rgb(var(--lsd-border-primary));
-}
-
-.mdx-showcase__item-inner {
-  padding: 24px 8px;
-}
-
-.mdx-showcase__item-logo {
-}
-
-.mdx-showcase__item-name {
-  margin-top: 1rem;
-}
-
-.mdx-showcase__item-description {
-  border-top: 1px solid rgb(var(--lsd-border-primary));
-  margin-top: 24px;
-  padding-top: 16px;
-}
-
-@include utils.responsive('lg', 'down') {
-  .mdx-showcase {
-    grid-template-columns: repeat(2, 1fr);
-    gap: 1.5rem 1rem;
-  }
-
-  .mdx-showcase__item-name {
-    @include lsd.typography('h6');
-  }
-
-  .mdx-showcase__item-description {
-    margin-top: 1rem;
-  }
-
-  .mdx-showcase__item-logo {
-    width: 34px;
-    height: auto;
-  }
 }
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/Showcase/Showcase.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/Showcase/Showcase.tsx
index 5c9f5e4..19f4d4b 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/Showcase/Showcase.tsx
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/Showcase/Showcase.tsx
@@ -1,71 +1,31 @@
-import { Typography } from '@acid-info/lsd-react'
-import ThemedImage from '@theme/ThemedImage'
 import clsx from 'clsx'
 import React from 'react'
-import { makeStyle } from '../../../lib/makeStyle'
+import { Grid, GridProps, ShowcaseCard, ShowcaseCardProps } from '..'
 import './Showcase.scss'
 
-export type ShowcaseItem = {
-  name: React.ReactNode
-  logo?: string
-  logoDark?: string
-  description: React.ReactNode
-}
-
-export type ShowcaseProps = Omit<
-  React.HTMLAttributes<HTMLDivElement>,
-  'title'
-> & {
-  items: ShowcaseItem[]
-  columns?: number
+export type ShowcaseProps = GridProps & {
+  items: ShowcaseCardProps[]
 }
 
 export const Showcase: React.FC<ShowcaseProps> = ({
   items = [],
-  columns = 4,
-  style = {},
   className,
-  children,
   ...props
 }) => {
   return (
-    <div
+    <Grid
       className={clsx(className, 'mdx-showcase')}
-      style={makeStyle({ ...style }, { columns })}
+      xs={{ cols: 2, wrap: true, gap: '1.5rem 1em' }}
+      lg={{ cols: 3, gap: '1rem' }}
       {...props}
     >
       {items.map((item, index) => {
         return (
-          <div key={index} className="mdx-showcase__item">
-            <div key={index} className="mdx-showcase__item-inner">
-              {item?.logo && item?.logoDark && (
-                <ThemedImage
-                  sources={{
-                    dark: item.logoDark,
-                    light: item.logo,
-                  }}
-                  alt={typeof item.name === 'string' ? item.name : 'image'}
-                  className="mdx-showcase__item-logo"
-                />
-              )}
-              <Typography
-                variant="h3"
-                component="h2"
-                className="mdx-showcase__item-name"
-              >
-                {item.name}
-              </Typography>
-              <Typography
-                variant="subtitle1"
-                component="p"
-                className="mdx-showcase__item-description"
-              >
-                {item.description}
-              </Typography>
-            </div>
-          </div>
+          <Grid.Item key={index} className="mdx-showcase__item" xs={1}>
+            <ShowcaseCard {...item} />
+          </Grid.Item>
         )
       })}
-    </div>
+    </Grid>
   )
 }
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.scss
new file mode 100644
index 0000000..408ab2c
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.scss
@@ -0,0 +1,43 @@
+@use '../../../css/utils';
+@use '../../../css/lsd';
+
+.mdx-showcase-card {
+  border-top: 1px solid rgb(var(--lsd-border-primary));
+}
+
+.mdx-showcase-card__inner {
+  padding: 24px 8px;
+}
+
+.mdx-showcase-card__logo {
+}
+
+.mdx-showcase-card__name {
+  margin-top: 1rem;
+}
+
+.mdx-showcase-card__description {
+  border-top: 1px solid rgb(var(--lsd-border-primary));
+  margin-top: 24px;
+  padding-top: 16px;
+}
+
+@include utils.responsive('lg', 'down') {
+  .mdx-showcase {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1.5rem 1rem;
+  }
+
+  .mdx-showcase-card__name {
+    @include lsd.typography('h6');
+  }
+
+  .mdx-showcase-card__description {
+    margin-top: 1rem;
+  }
+
+  .mdx-showcase-card__logo {
+    width: 34px;
+    height: auto;
+  }
+}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.tsx
new file mode 100644
index 0000000..864160c
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.tsx
@@ -0,0 +1,56 @@
+import { Typography } from '@acid-info/lsd-react'
+import ThemedImage from '@theme/ThemedImage'
+import clsx from 'clsx'
+import React from 'react'
+import './ShowcaseCard.scss'
+
+export type ShowcaseCardProps = Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  'title'
+> & {
+  logoSrc?: string
+  logoSrcDark?: string
+  name: React.ReactNode
+  description: React.ReactNode
+}
+
+export const ShowcaseCard: React.FC<ShowcaseCardProps> = ({
+  name,
+  logoSrc,
+  logoSrcDark,
+  description,
+  className,
+  children,
+  ...props
+}) => {
+  return (
+    <div className={clsx(className, 'mdx-showcase-card')} {...props}>
+      <div className="mdx-showcase-card__inner">
+        {(logoSrc || logoSrcDark) && (
+          <ThemedImage
+            sources={{
+              dark: logoSrcDark ?? logoSrc ?? '',
+              light: logoSrc ?? logoSrcDark ?? '',
+            }}
+            alt={typeof name === 'string' ? name : ''}
+            className="mdx-showcase-card__logo"
+          />
+        )}
+        <Typography
+          variant="h3"
+          component="h2"
+          className="mdx-showcase-card__name"
+        >
+          {name}
+        </Typography>
+        <Typography
+          variant="subtitle1"
+          component="p"
+          className="mdx-showcase-card__description"
+        >
+          {description}
+        </Typography>
+      </div>
+    </div>
+  )
+}
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/index.ts
new file mode 100644
index 0000000..866f04e
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/index.ts
@@ -0,0 +1 @@
+export * from './ShowcaseCard'
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts
index db9e93f..2fbe625 100644
--- a/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts
+++ b/packages/logos-docusaurus-theme/src/client/components/mdx/index.ts
@@ -18,5 +18,6 @@ export * from './Roadmap'
 export * from './ScrollToBottom'
 export * from './SectionHeader'
 export * from './Showcase'
+export * from './ShowcaseCard'
 export * from './SocialCard'
 export * from './TimelineItem'