diff --git a/website_example/index.html b/website_example/index.html
index 5c0cb33..49ac81d 100644
--- a/website_example/index.html
+++ b/website_example/index.html
@@ -17,7 +17,7 @@
     <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
     <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
     <link href="themes/default.css?" rel="stylesheet">
-    <link href="themes/custom.css?v=20260324d" rel="stylesheet">
+    <link href="themes/custom.css?v=20260324e" rel="stylesheet">
 </head>
 <body>
 
@@ -87,8 +87,8 @@
 <!-- Javascript -->
 <script src="config.js?"></script>
 <script src="lang/languages.js"></script>
-<script src="js/common.js?v=20260324d"></script>
-<script src="js/custom.js?v=20260324d"></script>
+<script src="js/common.js?v=20260324e"></script>
+<script src="js/custom.js?v=20260324e"></script>
 <script>
 // Store last pool statistics
 let lastStats;
diff --git a/website_example/js/common.js b/website_example/js/common.js
index a88961e..2b11da4 100644
--- a/website_example/js/common.js
+++ b/website_example/js/common.js
@@ -60,35 +60,7 @@ const lucideIconMap = {
     'fa-sign-out': 'log-out'
 };
 
-function createLucideSvg(iconName, classes, sourceNode) {
-    if (!window.lucide || !window.lucide.icons) return null;
-
-    const icon = window.lucide.icons[iconName];
-    if (!icon || typeof icon.toSvg !== 'function') return null;
-
-    const className = ['lucide', 'lucide-' + iconName]
-        .concat(classes || [])
-        .filter(Boolean)
-        .join(' ');
-
-    const wrapper = document.createElement('div');
-    wrapper.innerHTML = icon.toSvg({
-        'stroke-width': 1.9,
-        class: className
-    });
-
-    const svg = wrapper.firstElementChild;
-    if (!svg) return null;
-
-    if (sourceNode && sourceNode.attributes) {
-        Array.from(sourceNode.attributes).forEach(function(attr) {
-            if (attr.name === 'class' || attr.name === 'data-lucide') return;
-            svg.setAttribute(attr.name, attr.value);
-        });
-    }
-
-    return svg;
-}
+let lucideRenderingActive = false;
 
 function renderLucideIcons(root) {
     const scope = root || document;
@@ -114,19 +86,18 @@ function renderLucideIcons(root) {
         }
     });
 
-    const lucidePlaceholders = scope.querySelectorAll('[data-lucide]:not(svg)');
-    lucidePlaceholders.forEach(function(node) {
-        const iconName = node.getAttribute('data-lucide');
-        if (!iconName) return;
-
-        const classes = Array.from(node.classList).filter(function(cls) {
-            return cls !== 'fa' && cls.indexOf('fa-') !== 0;
-        });
-
-        const svg = createLucideSvg(iconName, classes, node);
-        if (!svg) return;
-        node.replaceWith(svg);
-    });
+    if (window.lucide && typeof window.lucide.createIcons === 'function') {
+        lucideRenderingActive = true;
+        try {
+            window.lucide.createIcons({
+                icons: window.lucide.icons,
+                attrs: { 'stroke-width': 1.9 },
+                nameAttr: 'data-lucide'
+            });
+        } finally {
+            lucideRenderingActive = false;
+        }
+    }
 }
 
 function toggleSingleTabNav(selector) {
@@ -137,11 +108,13 @@ function toggleSingleTabNav(selector) {
 
 let lucideRenderScheduled = false;
 function scheduleLucideRender() {
-    if (lucideRenderScheduled) return;
+    if (lucideRenderScheduled || lucideRenderingActive) return;
     lucideRenderScheduled = true;
     requestAnimationFrame(function() {
         lucideRenderScheduled = false;
-        renderLucideIcons(document.body);
+        if (!lucideRenderingActive) {
+            renderLucideIcons(document.body);
+        }
     });
 }
 
@@ -149,8 +122,14 @@ $(function() {
     const pageRoot = document.getElementById('page');
     if (!pageRoot || typeof MutationObserver === 'undefined') return;
 
-    const observer = new MutationObserver(function() {
-        scheduleLucideRender();
+    const observer = new MutationObserver(function(mutations) {
+        if (lucideRenderingActive) return;
+        const hasChildChanges = mutations.some(function(mutation) {
+            return mutation.type === 'childList' && (mutation.addedNodes.length || mutation.removedNodes.length);
+        });
+        if (hasChildChanges) {
+            scheduleLucideRender();
+        }
     });
 
     observer.observe(pageRoot, {
diff --git a/website_example/themes/custom.css b/website_example/themes/custom.css
index 8a0dda7..d1bcf53 100644
--- a/website_example/themes/custom.css
+++ b/website_example/themes/custom.css
@@ -718,6 +718,31 @@ footer a .lucide,
   border-color: var(--accent-cyan);
 }
 
+.appConfig pre,
+.appConfig pre code {
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 18px;
+  color: var(--text-main);
+}
+
+.appConfig pre {
+  margin: 14px 0 6px;
+  padding: 18px 20px;
+  overflow-x: auto;
+}
+
+.appConfig pre code {
+  display: block;
+  padding: 0;
+  border: 0;
+  box-shadow: none;
+  color: var(--text-main);
+  background: transparent;
+  border-radius: 0;
+  white-space: pre;
+}
+
 .nav-tabs {
   border-bottom: 1px solid var(--line);
   margin-bottom: 18px;
