diff --git a/index.html b/index.html
index ec206d4..c390ece 100644
--- a/index.html
+++ b/index.html
@@ -158,6 +158,51 @@
 <body>
   <div id="root"></div>
   <script type="module" src="/src/main.tsx"></script>
+<script>
+window.addEventListener('message', (event) => {
+        if (event.data && event.data.type === 'UPDATE_APPEARANCE') {
+            const settings = event.data.settings;
+            if (!settings) return;
+            let css = '';
+            if (settings.primaryColor) {
+               css += "\n:root { " +
+                 "--color-brand-primary: " + settings.primaryColor + " !important; " +
+                 "--color-brand-blue: " + settings.primaryColor + " !important; " +
+                 "--color-brand-gold: " + settings.primaryColor + " !important; " +
+                 "--color-blue-500: " + settings.primaryColor + " !important; " +
+                 "--color-blue-600: " + settings.primaryColor + " !important; " +
+                 "--color-emerald-500: " + settings.primaryColor + " !important; " +
+                 "--color-emerald-600: " + settings.primaryColor + " !important; " +
+                 "} " +
+                 ".text-brand-blue, .text-blue-600, .group-hover\\:text-blue-600:hover, .text-brand-gold, .text-emerald-600, .text-blue-500, .text-emerald-500 { color: " + settings.primaryColor + " !important; } " +
+                 ".bg-brand-blue, .bg-blue-600, .hover\\:bg-blue-500:hover, .bg-brand-gold, .bg-emerald-600, .bg-blue-500, .bg-emerald-500 { background-color: " + settings.primaryColor + " !important; } " +
+                 ".border-brand-blue, .border-blue-600, .focus\\:border-blue-600:focus, .border-brand-gold, .border-emerald-600, .border-blue-500, .border-emerald-500 { border-color: " + settings.primaryColor + " !important; } " +
+                 ".fill-blue-600, .fill-emerald-600 { fill: " + settings.primaryColor + " !important; }";
+            }
+            if (settings.backgroundColor) {
+               css += "\n:root { --color-brand-bg: " + settings.backgroundColor + " !important; } body { background-color: " + settings.backgroundColor + " !important; }";
+            }
+            if (settings.fontFamily) {
+              const fontLink = document.getElementById('dynamic-font');
+              const fontName = settings.fontFamily.replace(/ /g, '+');
+              const fontUrl = 'https://fonts.googleapis.com/css2?family=' + fontName + ':wght@300;400;500;600;700&display=swap';
+              if (fontLink) { (fontLink as HTMLLinkElement).href = fontUrl; } else {
+                const link = document.createElement('link'); link.id = 'dynamic-font'; link.rel = 'stylesheet'; link.href = fontUrl; document.head.appendChild(link);
+              }
+              css += "\n:root { " +
+                "--font-sans: \"" + settings.fontFamily + "\", sans-serif !important; " +
+                "--font-serif: \"" + settings.fontFamily + "\", serif !important; " +
+                "--font-mono: \"" + settings.fontFamily + "\", monospace !important; " +
+              "} * { font-family: \"" + settings.fontFamily + "\", sans-serif !important; }";
+            }
+            let styleNode = document.getElementById('dynamic-theme-style');
+            if (!styleNode) { styleNode = document.createElement('style'); styleNode.id = 'dynamic-theme-style'; document.head.appendChild(styleNode); }
+            styleNode.innerHTML = css;
+        }
+      });
+      // Ping parent window that we are ready
+      window.parent.postMessage({ type: 'IFRAME_READY' }, '*');
+</script>
 </body>
 
 </html>
\ No newline at end of file
