diff --git a/customGenerator.html b/customGenerator.html
index 9dfcfd5ad..e012f4208 100644
--- a/customGenerator.html
+++ b/customGenerator.html
@@ -8,9 +8,10 @@
         #maindiv {
             position: absolute;
             width: 50vw;
-            height: 100%;
+            height: 100vh;
             left: 0;
             top: 0;
+            overflow-y: auto;
         }
 
         #preview {
@@ -19,6 +20,8 @@
             height: 100vh;
             right: 0;
             top: 0;
+            word-break: break-all;
+            overflow-y: auto;
         }
         
         .bordered {
diff --git a/index.css b/index.css
index 67c882273..479498788 100644
--- a/index.css
+++ b/index.css
@@ -1195,6 +1195,7 @@ form {
     display: inline-block;
     background-color: lightgray;
     padding: 0.5em;
+    word-break: break-all;
 }
 
 .iframe-code-block {
diff --git a/themeGenerator.ts b/themeGenerator.ts
index 569f4e4ee..f2659ab21 100644
--- a/themeGenerator.ts
+++ b/themeGenerator.ts
@@ -43,7 +43,12 @@ export class Preview extends UIElement {
 
     InnerRender(): string {
         const url = this.url.data;
-        return JSON.stringify(this.config.data, null, 2)
+        return new Combine([
+            `<iframe width="100%" height="50%" src="${this.url.data}"></iframe>`,
+            `<br/><br><h2>Save this link below:</h2><a target='_blank' href='${this.url.data}'>${this.url.data}</a>`,
+            JSON.stringify(this.config.data, null, 2).replace(/\n/g, "<br/>").replace(/ /g, "&nbsp;"),
+
+        ]).Render();
     }
 
 }