diff --git a/develop-docs/getting-started/index.mdx b/develop-docs/getting-started/index.mdx
index 799d8388fa88c..fc4578de1028f 100644
--- a/develop-docs/getting-started/index.mdx
+++ b/develop-docs/getting-started/index.mdx
@@ -4,15 +4,10 @@ description: This documentation serves as reference points for developing agains
 sidebar_order: 1
 ---
 
-## Getting Started
+We recommend going through the [engineering practices](/engineering-practices) and our [development philsophy](/getting-started/philosophy/) before contributing a change to Sentry.
 
-We recommend going through the general documentation before contributing a change to Sentry.
 
-- <Link to="/getting-started/philosophy/">Development Philosophy</Link> (and <Link to="/sdk/philosophy/">SDK Development Philosophy</Link>)
-- <Link to="/development/commit-messages/">Commit Messages</Link>
-- <Link to="/development/code-review/">Code Review</Link>
-- <Link to="/development/environment/">Environment</Link>
-- <Link to="/development/workflow/">Workflow</Link>
-- <Link to="/application/architecture/">Application Architecture</Link>
+<DevDocsCardGrid />
+
 
 You can also take a glance at the [Sentry Dockerfile](https://github.com/getsentry/sentry/blob/master/self-hosted/Dockerfile) for more information on how the Sentry server is configured, including its system dependencies.
diff --git a/src/components/card.tsx b/src/components/card.tsx
index db5687f275f35..b17746da26ed1 100644
--- a/src/components/card.tsx
+++ b/src/components/card.tsx
@@ -19,11 +19,16 @@ export function Card({
 }) {
   return (
     <Link href={href} className={className}>
-      <div className="flex flex-col md:flex-row shadow dark:bg-[var(--gray-4)] p-6 rounded gap-4 h-full">
-        <Image src={image} height={64} alt={imageAlt} className="object-contain" />
+      <div className="flex flex-col md:flex-row shadow dark:bg-[var(--gray-4)] p-6 rounded gap-4 h-full text-[var(--foreground)]">
+        <Image
+          src={image}
+          height={64}
+          alt={imageAlt}
+          className="object-contain !border-none !shadow-none"
+        />
         <div className="flex flex-col justify-center space-y-2">
           <h3 className="text-xl font-medium">{title}</h3>
-          <p>{description}</p>
+          <p className="text-[length:--font-size-3]">{description}</p>
         </div>
       </div>
     </Link>
diff --git a/src/components/devDocsCardGrid.tsx b/src/components/devDocsCardGrid.tsx
new file mode 100644
index 0000000000000..e999b7f6baa60
--- /dev/null
+++ b/src/components/devDocsCardGrid.tsx
@@ -0,0 +1,82 @@
+import BackendImg from 'sentry-docs/imgs/back-end.png';
+import InfraImg from 'sentry-docs/imgs/dev-infra.png';
+import FrontendImg from 'sentry-docs/imgs/front-end.png';
+import IngestImg from 'sentry-docs/imgs/ingest.png';
+import IntegrationsImg from 'sentry-docs/imgs/integrate.png';
+import SkdsImg from 'sentry-docs/imgs/sdks.png';
+import ServicesImg from 'sentry-docs/imgs/services.png';
+import SelfHostedImg from 'sentry-docs/imgs/support.png';
+
+import {Card} from './card';
+
+export function DevDocsCardGrid() {
+  return (
+    <div className="flex flex-wrap gap-6 not-prose">
+      <Card
+        className="w-full"
+        href="/development-infrastructure/"
+        title="Development Infrastructure"
+        description="How to get your local dev environment up and running."
+        image={InfraImg}
+        imageAlt="Development Infrastructure"
+      />
+
+      <Card
+        className="w-full md:w-[calc(50%-12px)]"
+        href="/backend/"
+        title="Backend"
+        description="The monolith that is powering Sentry."
+        image={BackendImg}
+        imageAlt="Backend"
+      />
+      <Card
+        className="w-full md:w-[calc(50%-12px)]"
+        href="/frontend/"
+        title="Frontend"
+        description="How we write frontend code."
+        image={FrontendImg}
+        imageAlt="Frontend"
+      />
+      <Card
+        className="w-full md:w-[calc(50%-12px)]"
+        href="/services/"
+        title="Services"
+        description="Running alongside the monolith."
+        image={ServicesImg}
+        imageAlt="Services"
+      />
+      <Card
+        className="w-full md:w-[calc(50%-12px)]"
+        href="/integrations/"
+        title="Integrations"
+        imageAlt="Integrations"
+        description="Connecting Sentry to other products."
+        image={IntegrationsImg}
+      />
+      <Card
+        className="w-full md:w-[calc(50%-12px)]"
+        href="/ingestion/"
+        title="Ingestion"
+        imageAlt="Ingestion"
+        description="Receiving and processing data."
+        image={IngestImg}
+      />
+      <Card
+        className="w-full md:w-[calc(50%-12px)]"
+        href="/sdk/"
+        title="SDKs"
+        imageAlt="SDKs"
+        description="Instrumenting user code."
+        image={SkdsImg}
+      />
+      <Card
+        className="w-full"
+        href="/self-hosted/"
+        title="Self-Hosted Sentry"
+        imageAlt="Self-Hosted Sentry"
+        description="How you can run all of Sentry on your own server, without paying anything."
+        image={SelfHostedImg}
+      />
+    </div>
+  );
+}
diff --git a/src/components/docPage/type.scss b/src/components/docPage/type.scss
index 5ba6cf1d2af91..87c70ea1b40b1 100644
--- a/src/components/docPage/type.scss
+++ b/src/components/docPage/type.scss
@@ -78,7 +78,7 @@
     margin-bottom: 1.75rem;
   }
 
-  h3 {
+  h3 :not(.not-prose) {
     font-size: 1.125rem;
   }
 
diff --git a/src/imgs/back-end.png b/src/imgs/back-end.png
new file mode 100644
index 0000000000000..de7dfb7a7c0a0
Binary files /dev/null and b/src/imgs/back-end.png differ
diff --git a/src/imgs/dev-infra.png b/src/imgs/dev-infra.png
new file mode 100644
index 0000000000000..d43e3478df5d2
Binary files /dev/null and b/src/imgs/dev-infra.png differ
diff --git a/src/imgs/front-end.png b/src/imgs/front-end.png
new file mode 100644
index 0000000000000..22fcd91b43601
Binary files /dev/null and b/src/imgs/front-end.png differ
diff --git a/src/imgs/ingest.png b/src/imgs/ingest.png
new file mode 100644
index 0000000000000..af1e8ff06f3bb
Binary files /dev/null and b/src/imgs/ingest.png differ
diff --git a/src/imgs/integrate.png b/src/imgs/integrate.png
new file mode 100644
index 0000000000000..d70865dc11754
Binary files /dev/null and b/src/imgs/integrate.png differ
diff --git a/src/imgs/sdks.png b/src/imgs/sdks.png
new file mode 100644
index 0000000000000..d95ea68d3400c
Binary files /dev/null and b/src/imgs/sdks.png differ
diff --git a/src/imgs/services.png b/src/imgs/services.png
new file mode 100644
index 0000000000000..9f5b6b0cac97e
Binary files /dev/null and b/src/imgs/services.png differ
diff --git a/src/mdxComponents.ts b/src/mdxComponents.ts
index f22c2e0214382..39da4ba80710e 100644
--- a/src/mdxComponents.ts
+++ b/src/mdxComponents.ts
@@ -1,6 +1,7 @@
 import {Alert} from './components/alert';
 import {Arcade} from './components/arcade';
 import {Break} from './components/break';
+import {Card} from './components/card';
 import {CliChecksumTable} from './components/cliChecksumTable';
 import {CodeBlock} from './components/codeBlock';
 import {CodeTabs} from './components/codeTabs';
@@ -9,6 +10,7 @@ import {ConfigKey} from './components/configKey';
 import {ConfigValue} from './components/configValue';
 import {CreateGitHubAppForm} from './components/createGitHubAppForm';
 import {DefinitionList} from './components/definitionList';
+import {DevDocsCardGrid} from './components/devDocsCardGrid';
 import DocImage from './components/docImage';
 import {Expandable} from './components/expandable';
 import {GuideGrid} from './components/guideGrid';
@@ -43,8 +45,10 @@ export function mdxComponents(
     Alert,
     Arcade,
     Break,
+    Card,
     CliChecksumTable,
     CommunitySupportedPlatforms,
+    DevDocsCardGrid,
     PlatformFilter,
     CodeBlock,
     CodeTabs,