diff --git a/package-lock.json b/package-lock.json
index 65be3ae9f..03718674e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "@mdx-js/react": "^3.0.1",
         "clsx": "^2.1.1",
         "docusaurus-lunr-search": "^3.3.2",
+        "medium-zoom": "^1.1.0",
         "prism-react-renderer": "^2.3.0",
         "react": "^18.3.1",
         "react-copy-to-clipboard": "^5.1.0",
@@ -9899,6 +9900,11 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/medium-zoom": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/medium-zoom/-/medium-zoom-1.1.0.tgz",
+      "integrity": "sha512-ewyDsp7k4InCUp3jRmwHBRFGyjBimKps/AJLjRSox+2q/2H4p/PNpQf+pwONWlJiOudkBXtbdmVbFjqyybfTmQ=="
+    },
     "node_modules/memfs": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.5.3.tgz",
diff --git a/package.json b/package.json
index f9e179e98..1fee53e10 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "@mdx-js/react": "^3.0.1",
     "clsx": "^2.1.1",
     "docusaurus-lunr-search": "^3.3.2",
+    "medium-zoom": "^1.1.0",
     "prism-react-renderer": "^2.3.0",
     "react": "^18.3.1",
     "react-copy-to-clipboard": "^5.1.0",
diff --git a/src/theme/Root.js b/src/theme/Root.js
index 4834dfbe3..09f166702 100644
--- a/src/theme/Root.js
+++ b/src/theme/Root.js
@@ -1,10 +1,34 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import mediumZoom from 'medium-zoom';
+import { useLocation } from '@docusaurus/router';
 import { VoucherProvider } from '../utilities/contexts/VoucherContext';
 
-export default function Root({children}) {
-    return (
-        <VoucherProvider>
-            { children }
-        </VoucherProvider>
-    );
-}
+export default function Root({ children }) {
+  const location = useLocation();
+
+  useEffect(() => {
+    const applyMediumZoom = () => {
+      mediumZoom('img');
+    };
+
+    const intervalId = setInterval(() => {
+      if (document.readyState === 'complete') {
+        applyMediumZoom();
+        clearInterval(intervalId);
+      }
+    }, 100); 
+
+    window.addEventListener('docusaurus.onRouteDidUpdate', applyMediumZoom);
+
+    return () => {
+      clearInterval(intervalId);
+      window.removeEventListener('docusaurus.onRouteDidUpdate', applyMediumZoom);
+    };
+  }, [location.pathname]);
+
+  return (
+    <VoucherProvider>
+      {children}
+    </VoucherProvider>
+  );
+}
\ No newline at end of file