diff --git a/docs/data/introduction/support/support.md b/docs/data/introduction/support/support.md
index dd4d445662306..ce015dcceb0d8 100644
--- a/docs/data/introduction/support/support.md
+++ b/docs/data/introduction/support/support.md
@@ -27,25 +27,30 @@ We require bug reports to be accompanied by a **minimal reproduction**.
 It significantly increases the odds of fixing the problem.
 You have a few possible options to provide it:
 
-- You can browse the documentation, find an example close to your use case, and then open it in a live editor:
-  <a href="/x/react-date-pickers/getting-started/#render-your-first-component">
-  <span class="only-light-mode">
-  <img src="/static/docs-infra/forking-an-example.png" alt="Forking an example" loading="lazy" width="1548" height="606" style="display: block; max-width: 774px;">
-  </span>
-  <span class="only-dark-mode">
-  <img src="/static/docs-infra/forking-an-example-dark.png" alt="Forking an example" loading="lazy" width="1548" height="606" style="display: block; max-width: 774px;">
-  </span>
-  </a>
-
-  - [Data Grid](/x/react-data-grid/#mit-version-free-forever)
-  - [Date Pickers](/x/react-date-pickers/getting-started/#render-your-first-component)
-  - [Charts](/x/react-charts/getting-started/#single-charts)
-  - [Tree View](/x/react-tree-view/#simple-tree-view)
-
-- You can use a starter template to build a reproduction case with:
-  <!-- #default-branch-switch -->
-  - A minimal Data Grid [TypeScript template](https://stackblitz.com/github/mui/mui-x/tree/next/bug-reproductions/x-data-grid?file=src/index.tsx)
-  - A plain React [JavaScript](https://stackblitz.com/github/stackblitz/starters/tree/main/react) or [TypeScript](https://stackblitz.com/github/stackblitz/starters/tree/main/react-ts) template
+#### Use the live editors
+
+You can browse the documentation, find an example close to your use case, and then open it in a live editor:
+
+<a href="/x/react-date-pickers/getting-started/#render-your-first-component">
+<span class="only-light-mode">
+<img src="/static/docs-infra/forking-an-example.png" alt="Forking an example" loading="lazy" width="1628" height="700" style="display: block; max-width: 774px;">
+</span>
+<span class="only-dark-mode">
+<img src="/static/docs-infra/forking-an-example-dark.png" alt="Forking an example" loading="lazy" width="1628" height="700" style="display: block; max-width: 774px;">
+</span>
+</a>
+
+- [Data Grid](/x/react-data-grid/#mit-version-free-forever)
+- [Date Pickers](/x/react-date-pickers/getting-started/#render-your-first-component)
+- [Charts](/x/react-charts/getting-started/#single-charts)
+- [Tree View](/x/react-tree-view/#simple-tree-view)
+
+#### Use starter templates
+
+You can use a starter template to build a reproduction case with:
+<!-- #default-branch-switch -->
+- A minimal Data Grid [TypeScript template](https://stackblitz.com/github/mui/mui-x/tree/next/bug-reproductions/x-data-grid?file=src/index.tsx)
+- A plain React [JavaScript](https://stackblitz.com/github/stackblitz/starters/tree/main/react) or [TypeScript](https://stackblitz.com/github/stackblitz/starters/tree/main/react-ts) template
 
 ## Stack Overflow
 
diff --git a/docs/public/static/docs-infra/forking-an-example-dark.png b/docs/public/static/docs-infra/forking-an-example-dark.png
index 1e388c6ec7603..1d95238f8d4de 100644
Binary files a/docs/public/static/docs-infra/forking-an-example-dark.png and b/docs/public/static/docs-infra/forking-an-example-dark.png differ
diff --git a/docs/public/static/docs-infra/forking-an-example.png b/docs/public/static/docs-infra/forking-an-example.png
index d1a46bb379590..99a079e2bd2ae 100644
Binary files a/docs/public/static/docs-infra/forking-an-example.png and b/docs/public/static/docs-infra/forking-an-example.png differ