diff --git a/sites/orgdocs/src/css/custom.css b/sites/orgdocs/src/css/custom.css
index d80355535be..f8fcb424fb6 100644
--- a/sites/orgdocs/src/css/custom.css
+++ b/sites/orgdocs/src/css/custom.css
@@ -618,3 +618,10 @@ figure.develop.example div.develop {
 .technique {
   background: hsl(var(--pink-500));
 }
+
+figcaption.mdx {
+  font-style: italic;
+  margin-top: -0.5rem;
+  padding: 0 0.5rem;
+  font-size: 90%;
+}
diff --git a/sites/orgdocs/src/theme/MDXComponents/Img/index.js b/sites/orgdocs/src/theme/MDXComponents/Img/index.js
index 6f3183da176..9b05595d05c 100644
--- a/sites/orgdocs/src/theme/MDXComponents/Img/index.js
+++ b/sites/orgdocs/src/theme/MDXComponents/Img/index.js
@@ -1,17 +1,20 @@
-import React from 'react';
-import clsx from 'clsx';
-import styles from './styles.module.css';
+import React from 'react'
+import clsx from 'clsx'
+import styles from './styles.module.css'
 function transformImgClassName(className) {
-  return clsx(className, styles.img);
+  return clsx(className, styles.img)
 }
 export default function MDXImg(props) {
+  // eslint-disable-next-line jsx-a11y/alt-text
   return (
-    // eslint-disable-next-line jsx-a11y/alt-text
-    <img
-      decoding="async"
-      loading="lazy"
-      {...props}
-      className={transformImgClassName(props.className)}
-    />
-  );
+    <figure>
+      <img
+        decoding="async"
+        loading="lazy"
+        {...props}
+        className={transformImgClassName(props.className)}
+      />
+      <figcaption className="mdx">{props.title}</figcaption>
+    </figure>
+  )
 }