diff --git a/docs/platforms/community.png b/docs/platforms/community.png
new file mode 100644
index 00000000000000..584d6a9b935e9d
Binary files /dev/null and b/docs/platforms/community.png differ
diff --git a/docs/platforms/index.mdx b/docs/platforms/index.mdx
index f6afdcb57fa571..2211c96d30bfdb 100644
--- a/docs/platforms/index.mdx
+++ b/docs/platforms/index.mdx
@@ -20,32 +20,27 @@ We also <Link to="https://sentry.zendesk.com/hc/en-us/articles/23961784367387">d
 
 </Note>
 
-## Platforms
-
-<PlatformGrid />
-
-## Community Supported
+<PlatformFilter />
+
+{/* dirty hack to avoid having a dedicated component for this illustration*/}
+<style jsx>{`
+  .community-image-container img {
+    max-width: 450px;
+    height: auto;
+    border: none !important;
+    box-shadow: none !important;
+    margin-top: 3rem;
+  }
+`}</style>
+<div className="community-image-container">
+  ![Community Supported](./community.png)
+</div>
+
+## SDKs Supported by Our Community
 
 These SDKs are maintained and supported by [the Sentry community](https://open.sentry.io/). While generally our community does a great job at responding to issues, it's important to understand that Sentry staff cannot help you with issues using a community-supported SDK.
 
-- Clojure
-  - [_sentry-clj_](https://github.com/getsentry/sentry-clj)
-  - [_raven-clj_](https://github.com/sethtrain/raven-clj#alternatives)
-- [_Cloudflare Workers_](https://github.com/robertcepa/toucan-js)
-- [_ColdFusion_](https://github.com/coldbox-modules/sentry)
-- [_Crystal_](https://github.com/Sija/raven.cr)
-- [_Defold_](https://github.com/indiesoftby/defold-sentinel)
-- [_Grails_](https://github.com/agorapulse/grails-sentry)
-- [_Hono_](https://github.com/honojs/middleware/tree/main/packages/sentry)
-- [_Kubernetes_](https://github.com/alekitto/sentry-kubernetes)
-- [_Lua_](https://github.com/cloudflare/raven-lua)
-- [_Nuxt 2_](https://github.com/nuxt-community/sentry-module)
-- [_OCaml_](https://github.com/brendanlong/sentry-ocaml)
-- [_Scrapy_](https://github.com/llonchj/scrapy-sentry)
-- [_Serverless Framework Node_](https://github.com/arabold/serverless-sentry-plugin)
-- [_Strapi_](https://github.com/strapi/strapi/tree/master/packages/plugins/sentry)
-- [_Terraform_](https://github.com/jianyuan/terraform-provider-sentry)
-- [_WordPress_](https://github.com/stayallive/wp-sentry)
+<CommunitySupportedPlatforms />
 
 ## Other Platforms
 
diff --git a/src/components/communitySupportedPlatforms/icons/clojure.png b/src/components/communitySupportedPlatforms/icons/clojure.png
new file mode 100644
index 00000000000000..6b4b697f99a5ca
Binary files /dev/null and b/src/components/communitySupportedPlatforms/icons/clojure.png differ
diff --git a/src/components/communitySupportedPlatforms/icons/cloudflare.png b/src/components/communitySupportedPlatforms/icons/cloudflare.png
new file mode 100644
index 00000000000000..d49f18e7e87d6e
Binary files /dev/null and b/src/components/communitySupportedPlatforms/icons/cloudflare.png differ
diff --git a/src/components/communitySupportedPlatforms/icons/coldfusion.png b/src/components/communitySupportedPlatforms/icons/coldfusion.png
new file mode 100644
index 00000000000000..ab023114c5e2df
Binary files /dev/null and b/src/components/communitySupportedPlatforms/icons/coldfusion.png differ
diff --git a/src/components/communitySupportedPlatforms/icons/crystal.png b/src/components/communitySupportedPlatforms/icons/crystal.png
new file mode 100644
index 00000000000000..62112e34979873
Binary files /dev/null and b/src/components/communitySupportedPlatforms/icons/crystal.png differ
diff --git a/src/components/communitySupportedPlatforms/icons/defold.png b/src/components/communitySupportedPlatforms/icons/defold.png
new file mode 100644
index 00000000000000..b20f6d553e36ac
Binary files /dev/null and b/src/components/communitySupportedPlatforms/icons/defold.png differ
diff --git a/src/components/communitySupportedPlatforms/icons/grails.png b/src/components/communitySupportedPlatforms/icons/grails.png
new file mode 100644
index 00000000000000..95f1fa9c3040c2
Binary files /dev/null and b/src/components/communitySupportedPlatforms/icons/grails.png differ
diff --git a/src/components/communitySupportedPlatforms/icons/hono.png b/src/components/communitySupportedPlatforms/icons/hono.png
new file mode 100644
index 00000000000000..caf061b51eaee5
Binary files /dev/null and b/src/components/communitySupportedPlatforms/icons/hono.png differ
diff --git a/src/components/communitySupportedPlatforms/icons/kubernetes.png b/src/components/communitySupportedPlatforms/icons/kubernetes.png
new file mode 100644
index 00000000000000..4181cf2e5afa2d
Binary files /dev/null and b/src/components/communitySupportedPlatforms/icons/kubernetes.png differ
diff --git a/src/components/communitySupportedPlatforms/icons/lua.png b/src/components/communitySupportedPlatforms/icons/lua.png
new file mode 100644
index 00000000000000..3ce9dac4da8b36
Binary files /dev/null and b/src/components/communitySupportedPlatforms/icons/lua.png differ
diff --git a/src/components/communitySupportedPlatforms/icons/nuxt.png b/src/components/communitySupportedPlatforms/icons/nuxt.png
new file mode 100644
index 00000000000000..28d1a611ecb932
Binary files /dev/null and b/src/components/communitySupportedPlatforms/icons/nuxt.png differ
diff --git a/src/components/communitySupportedPlatforms/icons/ocaml.png b/src/components/communitySupportedPlatforms/icons/ocaml.png
new file mode 100644
index 00000000000000..5f7593eec7eff4
Binary files /dev/null and b/src/components/communitySupportedPlatforms/icons/ocaml.png differ
diff --git a/src/components/communitySupportedPlatforms/icons/scrapy.png b/src/components/communitySupportedPlatforms/icons/scrapy.png
new file mode 100644
index 00000000000000..1fe288db98c5cf
Binary files /dev/null and b/src/components/communitySupportedPlatforms/icons/scrapy.png differ
diff --git a/src/components/communitySupportedPlatforms/icons/serverless.png b/src/components/communitySupportedPlatforms/icons/serverless.png
new file mode 100644
index 00000000000000..cbeb8a563e80af
Binary files /dev/null and b/src/components/communitySupportedPlatforms/icons/serverless.png differ
diff --git a/src/components/communitySupportedPlatforms/icons/strapi.png b/src/components/communitySupportedPlatforms/icons/strapi.png
new file mode 100644
index 00000000000000..07ffbbb406f36b
Binary files /dev/null and b/src/components/communitySupportedPlatforms/icons/strapi.png differ
diff --git a/src/components/communitySupportedPlatforms/icons/terraform.png b/src/components/communitySupportedPlatforms/icons/terraform.png
new file mode 100644
index 00000000000000..2508452b6fd0ec
Binary files /dev/null and b/src/components/communitySupportedPlatforms/icons/terraform.png differ
diff --git a/src/components/communitySupportedPlatforms/icons/wordpress.png b/src/components/communitySupportedPlatforms/icons/wordpress.png
new file mode 100644
index 00000000000000..e3e3b1a3ff7882
Binary files /dev/null and b/src/components/communitySupportedPlatforms/icons/wordpress.png differ
diff --git a/src/components/communitySupportedPlatforms/index.tsx b/src/components/communitySupportedPlatforms/index.tsx
new file mode 100644
index 00000000000000..2cc2417b7d2ed9
--- /dev/null
+++ b/src/components/communitySupportedPlatforms/index.tsx
@@ -0,0 +1,140 @@
+import Image from 'next/image';
+import Link from 'next/link';
+
+import {ExternalLink} from '../externalLink';
+
+import clojure from './icons/clojure.png';
+import cloudflare from './icons/cloudflare.png';
+import coldfusion from './icons/coldfusion.png';
+import crystal from './icons/crystal.png';
+import defold from './icons/defold.png';
+import grails from './icons/grails.png';
+import hono from './icons/hono.png';
+import kubernetes from './icons/kubernetes.png';
+import lua from './icons/lua.png';
+import nuxt from './icons/nuxt.png';
+import ocaml from './icons/ocaml.png';
+import scrapy from './icons/scrapy.png';
+import serverless from './icons/serverless.png';
+import strapi from './icons/strapi.png';
+import terraform from './icons/terraform.png';
+import wordpress from './icons/wordpress.png';
+
+const CommunityPlatforms = [
+  {
+    name: 'Clojure (Sentry Clj)',
+    url: 'https://github.com/getsentry/sentry-clj',
+    icon: clojure,
+  },
+  {
+    name: 'Clojure (Raven Clj)',
+    url: 'https://github.com/sethtrain/raven-clj#alternatives',
+    icon: clojure,
+  },
+  {
+    name: 'Cloudflare Workers',
+    url: 'https://github.com/robertcepa/toucan-js',
+    icon: cloudflare,
+  },
+  {
+    name: 'ColdFusion',
+    url: 'https://github.com/coldbox-modules/sentry',
+    icon: coldfusion,
+  },
+  {
+    name: 'Crystal',
+    url: 'https://github.com/Sija/raven.cr',
+    icon: crystal,
+  },
+  {
+    name: 'Defold',
+    url: 'https://github.com/indiesoftby/defold-sentinel',
+    icon: defold,
+  },
+  {
+    name: 'Grails',
+    url: 'https://github.com/agorapulse/grails-sentry',
+    icon: grails,
+  },
+  {
+    name: 'Hono',
+    url: 'https://github.com/honojs/middleware/tree/main/packages/sentry',
+    icon: hono,
+  },
+  {
+    name: 'Kubernetes',
+    url: 'https://github.com/alekitto/sentry-kubernetes',
+    icon: kubernetes,
+  },
+  {
+    name: 'Lua',
+    url: 'https://github.com/cloudflare/raven-lua',
+    icon: lua,
+  },
+  {
+    name: 'Nuxt 2',
+    url: 'https://github.com/nuxt-community/sentry-module',
+    icon: nuxt,
+  },
+  {
+    name: 'OCaml',
+    url: 'https://github.com/brendanlong/sentry-ocaml',
+    icon: ocaml,
+  },
+  {
+    name: 'Scrapy',
+    url: 'https://github.com/llonchj/scrapy-sentry',
+    icon: scrapy,
+  },
+  {
+    name: 'Serverless Framework',
+    url: 'https://github.com/arabold/serverless-sentry-plugin',
+    icon: serverless,
+  },
+  {
+    name: 'Strapi',
+    url: 'https://github.com/strapi/strapi/tree/master/packages/plugins/sentry',
+    icon: strapi,
+  },
+  {
+    name: 'Terraform',
+    url: 'https://github.com/jianyuan/terraform-provider-sentry',
+    icon: terraform,
+  },
+  {
+    name: 'WordPress',
+    url: 'https://github.com/stayallive/wp-sentry',
+    icon: wordpress,
+  },
+];
+
+export function CommunitySupportedPlatforms() {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      {CommunityPlatforms.map(platform => (
+        <Link
+          href={platform.url}
+          key={platform.name}
+          style={{
+            textDecoration: 'none',
+            color: 'var(--foreground) !important',
+          }}
+        >
+          <div className="flex gap-2 items-center">
+            <Image
+              src={platform.icon.src}
+              width={20}
+              height={20}
+              alt={platform.name}
+              className="!border-none !shadow-none"
+            />
+            <div className="flex space-x-1">
+              <span className="text-[var(--accent)]">{platform.name}</span>
+              <ExternalLink href={platform.url} />
+            </div>
+          </div>
+        </Link>
+      ))}
+    </div>
+  );
+}
diff --git a/src/components/home.tsx b/src/components/home.tsx
index 43efab32057de5..dd64f065e0ed9a 100644
--- a/src/components/home.tsx
+++ b/src/components/home.tsx
@@ -2,7 +2,6 @@ import Image from 'next/image';
 
 import {Banner} from 'sentry-docs/components/banner';
 import {SentryWordmarkLogo} from 'sentry-docs/components/wordmarkLogo';
-import {extractPlatforms, getDocsRootNode} from 'sentry-docs/docTree';
 import PlugImage from 'sentry-docs/imgs/api.png';
 import ChatBubble from 'sentry-docs/imgs/chat-bubble.png';
 import TerminalImage from 'sentry-docs/imgs/cli.png';
@@ -19,17 +18,7 @@ import {Header} from './header';
 import {NavLink, NavLinkProps} from './navlink';
 import {PlatformFilter} from './platformFilter';
 
-export async function Home() {
-  const rootNode = await getDocsRootNode();
-  // this regex deals with names like .NET that would otherwise be sorted at the top
-  const leadingNonAlphaRegex = /^[^\w]/;
-  // sort the platforms alphabetically
-  const sortedPlatforms = extractPlatforms(rootNode).sort((a, b) =>
-    (a.title ?? a.name)
-      .replace(leadingNonAlphaRegex, '')
-      .localeCompare((b.title ?? b.name).replace(leadingNonAlphaRegex, ''))
-  );
-
+export function Home() {
   return (
     <div className="tw-app">
       <Header pathname="/" searchPlatforms={[]} />
@@ -57,7 +46,7 @@ export async function Home() {
           </div>
         </div>
 
-        <PlatformFilter platforms={sortedPlatforms} />
+        <PlatformFilter />
         <h2 className="text-2xl mt-16 mb-6 font-medium">Get to know us</h2>
         <div className="flex flex-wrap gap-6">
           <Card
diff --git a/src/components/platformFilter/client.tsx b/src/components/platformFilter/client.tsx
new file mode 100644
index 00000000000000..def128c55b3a23
--- /dev/null
+++ b/src/components/platformFilter/client.tsx
@@ -0,0 +1,196 @@
+'use client';
+import {useMemo, useState} from 'react';
+import * as Collapsible from '@radix-ui/react-collapsible';
+import {TriangleRightIcon} from '@radix-ui/react-icons';
+import classNames from 'classnames';
+import {matchSorter} from 'match-sorter';
+import Link from 'next/link';
+
+import {type Platform} from 'sentry-docs/types';
+import {splitToChunks, uniqByReference} from 'sentry-docs/utils';
+
+import styles from './style.module.scss';
+
+import {PlatformIcon} from '../platformIcon';
+
+export function PlatformFilterClient({platforms}: {platforms: Platform[]}) {
+  const platformsAndGuides = platforms
+    .map(p => [
+      p,
+      p.guides.map(g => ({...g, platform: p})),
+      p.integrations.map(integ => ({...integ, platform: p})),
+    ])
+    .flat(2);
+  const [filter, setFilter] = useState('');
+
+  const matches = useMemo(() => {
+    if (!filter) {
+      return platformsAndGuides;
+    }
+    // any of these fields can be used to match the search value
+    const keys = ['title', 'aliases', 'name', 'sdk', 'keywords'];
+    const matches_ = matchSorter(platformsAndGuides, filter, {keys});
+    return matches_;
+  }, [filter, platformsAndGuides]);
+
+  const platformColumns: Platform[][] = splitToChunks(
+    3,
+    uniqByReference(matches.map(x => (x.type === 'platform' ? x : x.platform))).map(p => {
+      return {
+        ...p,
+        guides: matches
+          .filter(m => m.type === 'guide' && m.platform.key === p.key)
+          .map(m => p.guides.find(g => g.key === m.key)!)
+          .filter(Boolean),
+        integrations: p.integrations.filter(i => matches.some(m => m.key === i.key)),
+      };
+    })
+  );
+
+  return (
+    <div>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 py-8 md:items-end">
+        <div className="lg:col-span-2 space-y-2">
+          <h2 className="text-2xl font-medium">SDKs Supported by Sentry</h2>
+          <p className="m-0">If you use it, we probably support it.</p>
+        </div>
+        <div className="w-full flex justify-end">
+          <input
+            placeholder="Search SDKs"
+            className={`${styles.input}`}
+            value={filter}
+            onChange={e => setFilter(e.target.value)}
+          />
+        </div>
+      </div>
+      {matches.length > 0 && (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {platformColumns.map((column, i) => (
+            <div key={i} className={`flex flex-col gap-4 ${styles.platform}`}>
+              {column.map(platform =>
+                platform.guides.length === 0 && platform.integrations.length === 0 ? (
+                  <Link
+                    href={platform.url}
+                    key={platform.key}
+                    style={{
+                      textDecoration: 'none',
+                      color: 'var(--foreground) !important',
+                    }}
+                  >
+                    <div className={styles.StandalonePlatform}>
+                      <PlatformIcon
+                        size={20}
+                        platform={platform.icon ?? platform.key}
+                        format="lg"
+                        className={`${styles.PlatformIcon} !border-none !shadow-none`}
+                      />
+                      {platform.title}
+                    </div>
+                  </Link>
+                ) : (
+                  <PlatformWithGuides
+                    key={platform.key}
+                    platform={platform}
+                    // force expand if the filter is long enough to have few results
+                    forceExpand={filter.length >= 2}
+                  />
+                )
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+      {!matches.length && (
+        <div className="col-span-3 text-center text-gray-600">No SDKs found</div>
+      )}
+    </div>
+  );
+}
+
+function PlatformWithGuides({
+  platform,
+  forceExpand,
+}: {
+  forceExpand: boolean;
+  platform: Platform;
+}) {
+  const [expanded, setExpanded] = useState(false);
+  return (
+    <Collapsible.Root
+      className={styles.CollapsibleRoot}
+      open={forceExpand || expanded}
+      onOpenChange={setExpanded}
+    >
+      <Collapsible.Trigger asChild className={classNames(styles.CollapsibleTrigger)}>
+        <div>
+          <div className={styles.PlatformTitle} key={platform.key}>
+            <PlatformIcon
+              size={20}
+              platform={platform.icon ?? platform.key}
+              format="lg"
+              className={`${styles.PlatformIcon} !border-none !shadow-none`}
+            />
+            {platform.title}
+          </div>
+          <button className={styles.ChevronButton}>
+            <TriangleRightIcon
+              className={styles.CollapsibleChevron}
+              aria-hidden
+              width="20"
+              height="20"
+            />
+          </button>
+        </div>
+      </Collapsible.Trigger>
+      <Collapsible.Content
+        className={classNames(styles.CollapsibleContent)}
+        // scrollable if there are more than 8 (arbitrary limit) guides
+        data-scrollable={platform.guides.length >= 8 || platform.integrations.length >= 8}
+      >
+        {[platform, ...platform.guides].map((guide, i) => (
+          <Link
+            href={guide.url}
+            style={{textDecoration: 'none', color: 'var(--foreground) !important'}}
+            key={guide.key}
+          >
+            <div
+              className={styles.Guide}
+              style={{
+                animationDelay: `${i * 5}ms`,
+              }}
+            >
+              <PlatformIcon
+                size={20}
+                platform={guide.icon ?? guide.key}
+                format="lg"
+                className={styles.PlatformIcon}
+              />
+              {guide.title}
+            </div>
+          </Link>
+        ))}
+        {platform.guides.length === 0 &&
+          platform.integrations.map((integ, i) => {
+            return (
+              <Link href={integ.url} key={integ.key}>
+                <div
+                  className={styles.Guide}
+                  style={{
+                    animationDelay: `${i * 5}ms`,
+                  }}
+                >
+                  <PlatformIcon
+                    size={20}
+                    format="lg"
+                    platform={integ.icon}
+                    className={styles.Platform}
+                  />
+                  {integ.name}
+                </div>
+              </Link>
+            );
+          })}
+      </Collapsible.Content>
+    </Collapsible.Root>
+  );
+}
diff --git a/src/components/platformFilter/index.tsx b/src/components/platformFilter/index.tsx
index 08f8f6029a747a..c0505be50ba32d 100644
--- a/src/components/platformFilter/index.tsx
+++ b/src/components/platformFilter/index.tsx
@@ -1,185 +1,16 @@
-'use client';
-import {useMemo, useState} from 'react';
-import * as Collapsible from '@radix-ui/react-collapsible';
-import {TriangleRightIcon} from '@radix-ui/react-icons';
-import classNames from 'classnames';
-import {matchSorter} from 'match-sorter';
-import Link from 'next/link';
-
-import {type Platform} from 'sentry-docs/types';
-import {splitToChunks, uniqByReference} from 'sentry-docs/utils';
-
-import styles from './style.module.scss';
-
-import {PlatformIcon} from '../platformIcon';
-
-export function PlatformFilter({platforms}: {platforms: Platform[]}) {
-  const platformsAndGuides = platforms
-    .map(p => [
-      p,
-      p.guides.map(g => ({...g, platform: p})),
-      p.integrations.map(integ => ({...integ, platform: p})),
-    ])
-    .flat(2);
-  const [filter, setFilter] = useState('');
-
-  const matches = useMemo(() => {
-    if (!filter) {
-      return platformsAndGuides;
-    }
-    // any of these fields can be used to match the search value
-    const keys = ['title', 'aliases', 'name', 'sdk', 'keywords'];
-    const matches_ = matchSorter(platformsAndGuides, filter, {keys});
-    return matches_;
-  }, [filter, platformsAndGuides]);
-
-  const platformColumns: Platform[][] = splitToChunks(
-    3,
-    uniqByReference(matches.map(x => (x.type === 'platform' ? x : x.platform))).map(p => {
-      return {
-        ...p,
-        guides: matches
-          .filter(m => m.type === 'guide' && m.platform.key === p.key)
-          .map(m => p.guides.find(g => g.key === m.key)!)
-          .filter(Boolean),
-        integrations: p.integrations.filter(i => matches.some(m => m.key === i.key)),
-      };
-    })
-  );
-
-  return (
-    <div>
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 py-8 md:items-end">
-        <div className="lg:col-span-2 space-y-2">
-          <h2 className="text-2xl font-medium">Choose your SDK</h2>
-          <p className="m-0">If you use it, we probably support it.</p>
-        </div>
-        <div className="w-full flex justify-end">
-          <input
-            placeholder="Search SDKs"
-            className={`${styles.input}`}
-            value={filter}
-            onChange={e => setFilter(e.target.value)}
-          />
-        </div>
-      </div>
-      {matches.length > 0 && (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          {platformColumns.map((column, i) => (
-            <div key={i} className={`flex flex-col gap-4 ${styles.platform}`}>
-              {column.map(platform =>
-                platform.guides.length === 0 && platform.integrations.length === 0 ? (
-                  <Link href={platform.url} key={platform.key}>
-                    <div className={styles.StandalonePlatform}>
-                      <PlatformIcon
-                        size={20}
-                        platform={platform.icon ?? platform.key}
-                        format="lg"
-                        className={styles.PlatformIcon}
-                      />
-                      {platform.title}
-                    </div>
-                  </Link>
-                ) : (
-                  <PlatformWithGuides
-                    key={platform.key}
-                    platform={platform}
-                    // force expand if the filter is long enough to have few results
-                    forceExpand={filter.length >= 2}
-                  />
-                )
-              )}
-            </div>
-          ))}
-        </div>
-      )}
-      {!matches.length && (
-        <div className="col-span-3 text-center text-gray-600">No SDKs found</div>
-      )}
-    </div>
-  );
-}
-
-function PlatformWithGuides({
-  platform,
-  forceExpand,
-}: {
-  forceExpand: boolean;
-  platform: Platform;
-}) {
-  const [expanded, setExpanded] = useState(false);
-  return (
-    <Collapsible.Root
-      className={styles.CollapsibleRoot}
-      open={forceExpand || expanded}
-      onOpenChange={setExpanded}
-    >
-      <Collapsible.Trigger asChild className={classNames(styles.CollapsibleTrigger)}>
-        <div>
-          <div className={styles.PlatformTitle} key={platform.key}>
-            <PlatformIcon
-              size={20}
-              platform={platform.icon ?? platform.key}
-              format="lg"
-              className={styles.PlatformIcon}
-            />
-            {platform.title}
-          </div>
-          <button className={styles.ChevronButton}>
-            <TriangleRightIcon
-              className={styles.CollapsibleChevron}
-              aria-hidden
-              width="20"
-              height="20"
-            />
-          </button>
-        </div>
-      </Collapsible.Trigger>
-      <Collapsible.Content
-        className={classNames(styles.CollapsibleContent)}
-        // scrollable if there are more than 8 (arbitrary limit) guides
-        data-scrollable={platform.guides.length >= 8 || platform.integrations.length >= 8}
-      >
-        {[platform, ...platform.guides].map((guide, i) => (
-          <Link href={guide.url} key={guide.key}>
-            <div
-              className={styles.Guide}
-              style={{
-                animationDelay: `${i * 5}ms`,
-              }}
-            >
-              <PlatformIcon
-                size={20}
-                platform={guide.icon ?? guide.key}
-                format="lg"
-                className={styles.PlatformIcon}
-              />
-              {guide.title}
-            </div>
-          </Link>
-        ))}
-        {platform.guides.length === 0 &&
-          platform.integrations.map((integ, i) => {
-            return (
-              <Link href={integ.url} key={integ.key}>
-                <div
-                  className={styles.Guide}
-                  style={{
-                    animationDelay: `${i * 5}ms`,
-                  }}
-                >
-                  <PlatformIcon
-                    size={20}
-                    format="lg"
-                    platform={integ.icon}
-                    className={styles.Platform}
-                  />
-                  {integ.name}
-                </div>
-              </Link>
-            );
-          })}
-      </Collapsible.Content>
-    </Collapsible.Root>
+import {extractPlatforms, getDocsRootNode} from 'sentry-docs/docTree';
+
+import {PlatformFilterClient} from './client';
+
+export async function PlatformFilter() {
+  const rootNode = await getDocsRootNode();
+  // this regex deals with names like .NET that would otherwise be sorted at the top
+  const leadingNonAlphaRegex = /^[^\w]/;
+  // sort the platforms alphabetically
+  const sortedPlatforms = extractPlatforms(rootNode).sort((a, b) =>
+    (a.title ?? a.name)
+      .replace(leadingNonAlphaRegex, '')
+      .localeCompare((b.title ?? b.name).replace(leadingNonAlphaRegex, ''))
   );
+  return <PlatformFilterClient platforms={sortedPlatforms} />;
 }
diff --git a/src/mdxComponents.ts b/src/mdxComponents.ts
index e50036a79e733e..459d16a9648a05 100644
--- a/src/mdxComponents.ts
+++ b/src/mdxComponents.ts
@@ -4,6 +4,7 @@ import {Break} from './components/break';
 import {CliChecksumTable} from './components/cliChecksumTable';
 import {CodeBlock} from './components/codeBlock';
 import {CodeTabs} from './components/codeTabs';
+import {CommunitySupportedPlatforms} from './components/communitySupportedPlatforms';
 import {ConfigKey} from './components/configKey';
 import {ConfigValue} from './components/configValue';
 import {CreateGitHubAppForm} from './components/createGitHubAppForm';
@@ -20,6 +21,7 @@ import {PageGrid} from './components/pageGrid';
 import {ParamTable} from './components/paramTable';
 import {PiiFields} from './components/piiFields';
 import {PlatformCategorySection} from './components/platformCategorySection';
+import {PlatformFilter} from './components/platformFilter';
 import {PlatformGrid} from './components/platformGrid';
 import {PlatformIdentifier} from './components/platformIdentifier';
 import {PlatformLink} from './components/platformLink';
@@ -42,6 +44,8 @@ export function mdxComponents(
     Arcade,
     Break,
     CliChecksumTable,
+    CommunitySupportedPlatforms,
+    PlatformFilter,
     CodeBlock,
     CodeTabs,
     ConfigKey,