diff --git a/content/demo-dev.html b/content/demo-dev.html
index 16bb317..7fd9021 100644
--- a/content/demo-dev.html
+++ b/content/demo-dev.html
@@ -9,7 +9,7 @@
 
     <style>
       .post {
-        border: 1px solid #ccc;
+        border: 1px solid #999;
         border-radius: 4px;
         display: grid;
         grid-auto-flow: column;
@@ -38,23 +38,34 @@
         padding: 8px;
       }
       code[data-run] {
-        margin-left: 94px;
         white-space: pre;
         font-size: 13px;
-        display: flex;
-        align-items: flex-end;
+        display: block;
+        padding: 10px;
+        position: absolute;
+        right: 8px;
+        bottom: 8px;
+        top: 215px;
+        left: 90px;
+        background: rgb(245, 245, 245);
+        border: 1px solid #ccc;
       }
-      code[data-run], .code-wrapper, iframe {
+      .code-wrapper, iframe {
         height: 400px;
       }
-      code[data-run] {
-        border: 1px solid #ccc;
-      }
       iframe {
         width: 100%
       }
       .code-wrapper {
         position: relative;
+        border: 1px solid #ccc;
+      }
+      .spinner-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        scale: 3;
       }
     </style>
   </head>
@@ -165,7 +176,15 @@ <h2>AI Assurance Portal</h2>
         const wrapper = document.createElement('div');
         wrapper.classList.add('code-wrapper');
         codeEl.replaceWith(wrapper);
-        wrapper.appendChild(codeEl)
+        wrapper.appendChild(codeEl);
+
+        const spinerWrapper = document.createElement('div');
+        const spiner = document.createElement('div');
+        spinerWrapper.appendChild(spiner);
+        spinerWrapper.className = "spinner-wrapper";
+        spiner.className = 'spinner-border text-primary';
+        wrapper.appendChild(spinerWrapper);
+
         wrapper.appendChild(iframe);
         iframe.style.display = 'none';
         iframe.onload = async () => {
@@ -175,6 +194,7 @@ <h2>AI Assurance Portal</h2>
             jupyter.restored.then(() => {
               codeEl.style.display = 'none';
               iframe.style.display = 'block';
+              spinerWrapper.style.display = 'none';
             });
             jupyter.shell.currentChanged.connect((shell, change) => {
               jupyter.commands.execute('console:replace-selection', {text: cleanCode});
@@ -182,6 +202,7 @@ <h2>AI Assurance Portal</h2>
           } else {
             codeEl.style.display = 'none';
             iframe.style.display = 'block';
+            spinerWrapper.style.display = 'none';
           }
         }
       }
@@ -191,4 +212,3 @@ <h2>AI Assurance Portal</h2>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
   </body>
 </html>
-
diff --git a/content/demo.html b/content/demo.html
index bcc5b88..7fd9021 100644
--- a/content/demo.html
+++ b/content/demo.html
@@ -9,117 +9,205 @@
 
     <style>
       .post {
-        border: 1px solid #ccc;
-        margin: 12px;
+        border: 1px solid #999;
         border-radius: 4px;
         display: grid;
         grid-auto-flow: column;
         grid-template-columns: 60px 1fr;
         padding: 8px
       }
+      .post, .title-header {
+        margin: 12px;
+      }
       .user {
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+      }
+      .user-logo {
         padding: 10px;
         border-radius: 50px;
         width: 50px;
         height: 50px;
-        background: #ccc;
         align-items: center;
         display: flex;
         place-content: center;
+        border: 1px solid #666;
       }
       .content {
-        padding: 4px
+        padding: 8px;
       }
       code[data-run] {
-        white-space: pre-wrap;
+        white-space: pre;
+        font-size: 13px;
+        display: block;
+        padding: 10px;
+        position: absolute;
+        right: 8px;
+        bottom: 8px;
+        top: 215px;
+        left: 90px;
+        background: rgb(245, 245, 245);
+        border: 1px solid #ccc;
+      }
+      .code-wrapper, iframe {
+        height: 400px;
+      }
+      iframe {
+        width: 100%
       }
-      #loader {
-        display: none;
+      .code-wrapper {
+        position: relative;
+        border: 1px solid #ccc;
+      }
+      .spinner-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        scale: 3;
       }
     </style>
   </head>
   <body>
 
-    <div class="post container">
-      <div class="user"><i class="bi bi-person-fill"></i></div>
-      <div class="content">
-        <p>I'm testing out this simple logistic regression model but it does not work, how can I fix that?</p>
-        <code data-run>
-          from sklearn import datasets
-          from sklearn.linear_model import LogisticRegression
+    <div class="container">
+      <div class="row title-header">
+        <h2>AI Assurance Portal</h2>
+      </div>
+      <div class="post row">
+        <div class="user">
+          <div class="user-logo" style="background: lightblue">
+            <i class="bi bi-person-fill"></i>
+          </div>
+          M. K.
+        </div>
+        <div class="content">
+          <p>I'm testing out this simple logistic regression model but it does not work, how can I fix that?</p>
+          <code data-run>
+            from sklearn import datasets
+            from sklearn.linear_model import LogisticRegression
 
-          X, y = datasets.load_digits(return_X_y=True)
-          y = (y > 4).astype(int)
+            X, y = datasets.load_digits(return_X_y=True)
+            y = (y > 4).astype(int)
 
-          model = LogisticRegression(penalty="l1", tol=0.01)
-          model.fit(X, y)
-        </code>
+            model = LogisticRegression(penalty="l1", tol=0.01)
+            model.fit(X, y)
+          </code>
+        </div>
       </div>
-    </div>
-
-    <div class="post container">
-      <div class="user"><i class="bi bi-person-fill"></i></div>
-      <div class="content">
-        <p>You need to change solver, by passing an argument like this <code>solver="saga"</code>, see below:</p>
-        <code data-run>
-          from sklearn import datasets
-          from sklearn.linear_model import LogisticRegression
+      <div class="post row">
+        <div class="user">
+          <div class="user-logo" style="background: lightgoldenrodyellow">
+            <i class="bi bi-person-fill"></i>
+          </div>
+          D. P.
+        </div>
+        <div class="content">
+          <p>You need to change solver, by passing an argument like this <code>solver="saga"</code>, see below:</p>
+          <code data-run>
+            from sklearn import datasets
+            from sklearn.linear_model import LogisticRegression
 
-          X, y = datasets.load_digits(return_X_y=True)
-          y = (y > 4).astype(int)
+            X, y = datasets.load_digits(return_X_y=True)
+            y = (y > 4).astype(int)
 
-          model = LogisticRegression(penalty="l1", tol=0.01, solver="saga")
-          model.fit(X, y)
-        </code>
+            model = LogisticRegression(penalty="l1", tol=0.01, solver="saga")
+            model.fit(X, y)
+          </code>
+        </div>
       </div>
     </div>
 
-    <div id="loader"></div>
-
     <script>
     const styles = `
     .jp-CodeConsole-banner {
       display: none;
     }
+    .jp-PoweredBy {
+      display: none !important;
+    }
     `;
-    const loader = document.getElementById('loader');
-
-    for (const codeEl of document.querySelectorAll('code[data-run]')) {
-      const styleSheet = document.createElement("style");
-      styleSheet.textContent = styles;
-      const iframe = document.createElement('iframe');
-      const code = codeEl.textContent;
-      // find indent
-      let indent = 0;
-      for (const line of code.split('\n')) {
-        if (line.length === 0) {
-          continue
+    async function getJupyterApp(iframe, pause=50, maxAttempts=100) {
+      let attempt = 1;
+      while (attempt < maxAttempts) {
+        if (iframe.contentWindow.jupyterapp) {
+          return iframe.contentWindow.jupyterapp;
         }
-        while (line.length > indent && line.substring(indent, indent + 1) === ' ') {
-          indent += 1;
-        }
-        break;
+        attempt += 1;
+        await new Promise(resolve => setTimeout(resolve, pause));
       }
-      let cleanCode = '';
-      let blocks = [];
-      for (const line of code.split('\n')) {
-        if (cleanCode === '' && line.length === 0) {
-          continue
+      throw Error(`Could not acquite 'jupyterapp' object in ${maxAttempts * pause} ms`);
+    }
+    async function load() {
+      for (const codeEl of document.querySelectorAll('code[data-run]')) {
+        const styleSheet = document.createElement("style");
+        styleSheet.textContent = styles;
+        const iframe = document.createElement('iframe');
+        const code = codeEl.textContent;
+        // find indent
+        let indent = 0;
+        for (const line of code.split('\n')) {
+          if (line.length === 0) {
+            continue
+          }
+          while (line.length > indent && line.substring(indent, indent + 1) === ' ') {
+            indent += 1;
+          }
+          break;
         }
-        cleanCode += line.substring(indent) + '\n';
-      }
-      codeEl.textContent = cleanCode;
-      iframe.src = `https://quansight.github.io/jupyterlite-demo/repl/index.html?kernel=python&toolbar=1&code=${encodeURIComponent(cleanCode)}`;
-      iframe.style.width = '100%';
-      iframe.style.height = '300px';
-      iframe.onload = () => {
-        if (iframe.contentDocument) {
-          iframe.contentDocument.head.appendChild(styleSheet);
+        const cleanLines = [];
+        for (const line of code.split('\n')) {
+          if (cleanLines.length === 0 && line.length === 0) {
+            // remove first empty line
+            continue
+          }
+          cleanLines.push(line.substring(indent));
+        }
+        // remove last empty line
+        if (cleanLines[cleanLines.length - 1] === '') {
+          cleanLines.pop();
+        }
+        const cleanCode = cleanLines.join('\n')
+        codeEl.textContent = cleanCode;
+        const baseURL = location.href.split('/').slice(0, -2).join('/');
+        iframe.src = baseURL + `/repl/index.html?kernel=python&toolbar=1`;
+        iframe.style.width = '100%';
+        const wrapper = document.createElement('div');
+        wrapper.classList.add('code-wrapper');
+        codeEl.replaceWith(wrapper);
+        wrapper.appendChild(codeEl);
+
+        const spinerWrapper = document.createElement('div');
+        const spiner = document.createElement('div');
+        spinerWrapper.appendChild(spiner);
+        spinerWrapper.className = "spinner-wrapper";
+        spiner.className = 'spinner-border text-primary';
+        wrapper.appendChild(spinerWrapper);
+
+        wrapper.appendChild(iframe);
+        iframe.style.display = 'none';
+        iframe.onload = async () => {
+          if (iframe.contentDocument) {
+            iframe.contentDocument.head.appendChild(styleSheet);
+            const jupyter = await getJupyterApp(iframe);
+            jupyter.restored.then(() => {
+              codeEl.style.display = 'none';
+              iframe.style.display = 'block';
+              spinerWrapper.style.display = 'none';
+            });
+            jupyter.shell.currentChanged.connect((shell, change) => {
+              jupyter.commands.execute('console:replace-selection', {text: cleanCode});
+            });
+          } else {
+            codeEl.style.display = 'none';
+            iframe.style.display = 'block';
+            spinerWrapper.style.display = 'none';
+          }
         }
-        codeEl.replaceWith(iframe);
       }
-      loader.appendChild(iframe);
     }
+    load()
     </script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
   </body>