diff --git a/content/demo.html b/content/demo.html
index 852e7b6..464bf80 100644
--- a/content/demo.html
+++ b/content/demo.html
@@ -56,6 +56,7 @@
       iframe {
         width: 100%;
         height: 100%;
+        transition: opacity .25s ease-in-out;
       }
       .code-wrapper {
         position: relative;
@@ -189,7 +190,7 @@ <h2>CDAO AI Assurance Portal</h2>
         wrapper.appendChild(spinerWrapper);
 
         wrapper.appendChild(iframe);
-        iframe.style.display = 'none';
+        iframe.style.opacity = '0';
         iframe.onload = async () => {
           if (iframe.contentDocument) {
             iframe.contentDocument.head.appendChild(styleSheet);
@@ -204,7 +205,7 @@ <h2>CDAO AI Assurance Portal</h2>
             });
           } else {
             codeEl.style.display = 'none';
-            iframe.style.display = 'block';
+            iframe.style.opacity = '1';
             spinerWrapper.style.display = 'none';
           }
         }