diff --git a/docs/administrator-documentation/moderne-platform/references/lossless-semantic-trees.md b/docs/administrator-documentation/moderne-platform/references/lossless-semantic-trees.md
index 8382b3aa..653b32cc 100644
--- a/docs/administrator-documentation/moderne-platform/references/lossless-semantic-trees.md
+++ b/docs/administrator-documentation/moderne-platform/references/lossless-semantic-trees.md
@@ -1,6 +1,8 @@
 # Lossless semantic trees
 
-![LST comparison](./assets/LST-comparison.png)
+<figure>
+  ![](./assets/LST-comparison.png)
+</figure>
 
 A Lossless Semantic Tree (LST) is a tree representation of code. Unlike the traditional [Abstract Syntax Tree](https://en.wikipedia.org/wiki/Abstract_syntax_tree) (AST), OpenRewrite's LST offers a unique set of characteristics that make it possible to perform accurate transformations and searches across a repository:
 
diff --git a/docs/user-documentation/moderne-platform/getting-started/running-your-first-recipe.md b/docs/user-documentation/moderne-platform/getting-started/running-your-first-recipe.md
index ff2bc903..1bde9c23 100644
--- a/docs/user-documentation/moderne-platform/getting-started/running-your-first-recipe.md
+++ b/docs/user-documentation/moderne-platform/getting-started/running-your-first-recipe.md
@@ -92,7 +92,9 @@ On the results page, you will see a summary of your recipe criteria and an indic
 
 Each result shows the number of files searched and how many changes were detected.
 
-To see the proposed changes, click on either the ![](./assets/diff-button.png) button under `Actions` or the name of the repository (e.g. _openrewrite/rewrite_).
+import diff from './assets/diff-button.png';
+
+To see the proposed changes, click on either the <img src={diff} /> button under `Actions` or the name of the repository (e.g. _openrewrite/rewrite_).
 
 ## Step 7: View the results
 
diff --git a/package.json b/package.json
index 28afd54b..faaebb6b 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "react-medium-image-zoom": "^5.2.10",
     "react-player": "^2.16.0"
   },
   "devDependencies": {
diff --git a/src/css/custom.css b/src/css/custom.css
index f951deb5..4af9e484 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -42,3 +42,8 @@ figure figcaption {
 .reactPlayer {
   margin: auto;
 }
+
+/* Zoomed image background */
+[data-rmiz-modal-content] {
+  background-color: black;
+}
\ No newline at end of file
diff --git a/src/theme/MDXComponents/Img/index.tsx b/src/theme/MDXComponents/Img/index.tsx
new file mode 100644
index 00000000..e1953a59
--- /dev/null
+++ b/src/theme/MDXComponents/Img/index.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import clsx from 'clsx';
+import type {Props} from '@theme/MDXComponents/Img';
+import Zoom from 'react-medium-image-zoom'
+import 'react-medium-image-zoom/dist/styles.css'
+
+import styles from './styles.module.css';
+
+function transformImgClassName(className?: string): string {
+  return clsx(className, styles.img);
+}
+
+export default function ZoomableImage(props: Props) {
+  return (
+    <Zoom>
+      <img
+        decoding="async"
+        loading="lazy"
+        {...props}
+        className={transformImgClassName(props.className)}
+      />
+    </Zoom>
+  )
+} 
\ No newline at end of file
diff --git a/src/theme/MDXComponents/Img/styles.module.css b/src/theme/MDXComponents/Img/styles.module.css
new file mode 100644
index 00000000..2e4c258f
--- /dev/null
+++ b/src/theme/MDXComponents/Img/styles.module.css
@@ -0,0 +1,3 @@
+.img {
+  height: auto;
+}
diff --git a/yarn.lock b/yarn.lock
index 6881d23f..6a22407a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7656,6 +7656,11 @@ react-loadable-ssr-addon-v5-slorber@^1.0.1:
   dependencies:
     "@types/react" "*"
 
+react-medium-image-zoom@^5.2.10:
+  version "5.2.10"
+  resolved "https://registry.yarnpkg.com/react-medium-image-zoom/-/react-medium-image-zoom-5.2.10.tgz#5e913804bc282a165b18d46a06aa3035bcc7b946"
+  integrity sha512-JBYf4u0zsocezIDtrjwStD+8sX+c8XuLsdz+HxPbojRj0sCicua0XOQKysuPetoFyX+YgStfj+vEtZ+699O/pg==
+
 react-player@^2.16.0:
   version "2.16.0"
   resolved "https://registry.yarnpkg.com/react-player/-/react-player-2.16.0.tgz#89070700b03f5a5ded9f0b3165d4717390796481"