diff --git a/docs/data/tree-view/tree-item-customization/tree-item-customization.md b/docs/data/tree-view/tree-item-customization/tree-item-customization.md
index 0ab26ac3818b..9d5600ce91ea 100644
--- a/docs/data/tree-view/tree-item-customization/tree-item-customization.md
+++ b/docs/data/tree-view/tree-item-customization/tree-item-customization.md
@@ -16,10 +16,12 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
 Each Tree Item component is shaped by a series of composable slots.
 Hover over them in the demo below to see each slot.
 
-<!-- TBD which option is the best: interactive or image -->
-<!-- {{"demo": "CustomTreeItemDemo.js", "hideToolbar": true}} -->
-
-{{"component": "modules/components/TreeItemAnatomy.js"}}
+<span class="only-light-mode" style="border: 1px solid rgb(232, 234, 238); border-radius:12px">
+<img src="/static/x/tree-view-illustrations/tree-item-light.png" alt="Tree Item anatomy" loading="lazy"   >
+</span>
+<span class="only-dark-mode" style="border: 1px solid rgb(29, 33, 38); border-radius:12px">
+<img src="/static/x/tree-view-illustrations/tree-item-dark.png" alt="Tree Item anatomy" loading="lazy"   >
+</span>
 
 ### Content
 
diff --git a/docs/public/static/x/tree-view-illustrations/tree-item-dark.png b/docs/public/static/x/tree-view-illustrations/tree-item-dark.png
index 9cd285c3d279..4067c0fb25a5 100644
Binary files a/docs/public/static/x/tree-view-illustrations/tree-item-dark.png and b/docs/public/static/x/tree-view-illustrations/tree-item-dark.png differ
diff --git a/docs/public/static/x/tree-view-illustrations/tree-item-light.png b/docs/public/static/x/tree-view-illustrations/tree-item-light.png
index 052d8359525c..355f6c881340 100644
Binary files a/docs/public/static/x/tree-view-illustrations/tree-item-light.png and b/docs/public/static/x/tree-view-illustrations/tree-item-light.png differ
diff --git a/docs/src/modules/components/TreeItemAnatomy.js b/docs/src/modules/components/TreeItemAnatomy.js
deleted file mode 100644
index 2f4b1fdbc3e7..000000000000
--- a/docs/src/modules/components/TreeItemAnatomy.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from 'react';
-import { useTheme } from '@mui/material/styles';
-import Card from '@mui/material/Card';
-import CardMedia from '@mui/material/CardMedia';
-
-export default function TreeItemAnatomy() {
-  const { palette } = useTheme();
-
-  const src =
-    palette.mode === 'light'
-      ? '/static/x/tree-view-illustrations/tree-item-light.png'
-      : '/static/x/tree-view-illustrations/tree-item-dark.png';
-  return (
-    <Card elevation={0} variant="outlined" sx={{ padding: 4 }}>
-      <CardMedia
-        sx={{ minHeight: '250px', backgroundSize: 'contain' }}
-        image={src}
-        title="Tree Item anatomy"
-      />
-    </Card>
-  );
-}