diff --git a/js/AvatarPreview.js b/js/AvatarPreview.js
index 86805fe..827a97e 100644
--- a/js/AvatarPreview.js
+++ b/js/AvatarPreview.js
@@ -193,7 +193,7 @@ export function AvatarPreview() {
       name: "avatech-viewer-iframe",
       allow: "cross-origin-isolated",
       class: () =>
-        "w-[450px] h-[450px] z-[100] pointer-events-auto flex border-none overflow-hidden" +
+        "w-full h-full min-w-[300px] min-h-[600px] z-[100] pointer-events-auto flex border-none overflow-hidden" +
         (showPreview.val ? "" : "hidden"),
       // src: "https://labs.avatech.ai/viewer/default",
       // src: "http://localhost:3000/viewer/default",
@@ -208,7 +208,10 @@ export function AvatarPreview() {
           "w-full flex flex-col gap-2 justify-center items-center mt-8",
       },
       div(
-        { class: () => "w-full flex justify-center text-black font-bold italic text-gray-500" },
+        {
+          class: () =>
+            "w-full flex justify-center font-bold italic text-gray-500",
+        },
         span("We are launching OpenAI Assistant API integration soon!")
       ),
       div(
@@ -313,45 +316,48 @@ export function AvatarPreview() {
 
         return (
           (showPreview.val ? "" : "hidden ") +
-          "w-full h-screen absolute left-0 top-0 z-[99] pointer-events-auto flex border-none"
+          "w-full h-full absolute left-0 top-0 z-[99] pointer-events-auto flex border-none"
         );
       },
     },
     div(
-      {
-        class: "absolute top-4 left-4 flex flex-row gap-2",
-      },
-      renderCloseButton(),
-      renderChangeWorkflowButton()
-    ),
-    renderTwitter(),
-    () => {
-      if (isMobileDevice()) {
-        return div(
-          {
-            class: () =>
-              "flex flex-col w-full h-[110%] bg-white justify-center items-center py-16 px-4 gap-2" +
-              (showPreview.val ? "" : "hidden"),
-          },
-          renderIFrame(),
-          renderSteps(),
-          renderShareLink()
-        );
-      } else {
-        return div(
-          {
-            class: () =>
-              "flex w-full h-full bg-white justify-around items-center p-24" +
-              (showPreview.val ? "" : "hidden"),
-          },
-          renderSteps(),
-          div(
-            { class: () => "flex flex-col" },
+      { class: "overflow-y-auto overflow-x-hidden w-full h-full" },
+      div(
+        {
+          class: "absolute top-4 left-4 flex flex-row gap-2",
+        },
+        renderCloseButton(),
+        renderChangeWorkflowButton()
+      ),
+      renderTwitter(),
+      () => {
+        if (isMobileDevice()) {
+          return div(
+            {
+              class: () =>
+                "flex flex-col w-full h-fit bg-white justify-center items-center py-16 px-4 gap-2" +
+                (showPreview.val ? "" : "hidden"),
+            },
             renderIFrame(),
+            renderSteps(),
             renderShareLink()
-          )
-        );
+          );
+        } else {
+          return div(
+            {
+              class: () =>
+                "flex w-full h-full bg-white justify-around items-center p-24" +
+                (showPreview.val ? "" : "hidden"),
+            },
+            renderSteps(),
+            div(
+              { class: () => "flex flex-col" },
+              renderIFrame(),
+              renderShareLink()
+            )
+          );
+        }
       }
-    }
+    )
   );
 }
diff --git a/js/state.js b/js/state.js
index 65d0ea9..104e187 100644
--- a/js/state.js
+++ b/js/state.js
@@ -18,7 +18,7 @@ export const iframeSrc = van.state("https://editor.avatech.ai?comfyui=true");
 export const showEditor = van.state(false);
 // localStorage.getItem("showPreview") == 'true'
 export const showPreview = van.state(true);
-export const previewUrl = van.state("https://editor.avatech.ai/viewer?avatarId=default&debug=false&width=400&height=400&hideTrigger=true&voiceSelection=true");
+export const previewUrl = van.state("https://editor.avatech.ai/viewer?avatarId=default&debug=false&width=300&height=300&hideTrigger=true&voiceSelection=true");
 export const previewImg = van.state("");
 export const previewImgLoading = van.state(false);
 // export const previewUrl = van.state("http://localhost:3006/viewer?avatarId=default&hideUI=true&debug=true&width=300&height=300&showAudioControl=true");
diff --git a/js/tw-styles.css b/js/tw-styles.css
index aeb2978..422d630 100644
--- a/js/tw-styles.css
+++ b/js/tw-styles.css
@@ -1,7 +1,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Gabarito&display=swap');
 
 /*
-! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com
+! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -803,7 +803,7 @@ html{
   display: inline-block;
 }
 
-.dropdown > *:focus{
+.dropdown > *:not(summary):focus{
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
@@ -921,8 +921,7 @@ html{
 .file-input::file-selector-button{
   margin-right: 1rem;
   display: inline-flex;
-  height: 2.875rem;
-  min-height: 2.875rem;
+  height: 100%;
   flex-shrink: 0;
   cursor: pointer;
   -webkit-user-select: none;
@@ -1000,8 +999,8 @@ html{
 
 .join .dropdown .join-item:first-child:not(:last-child),
   .join *:first-child:not(:last-child) .dropdown .join-item{
-  border-top-right-radius: inherit;
-  border-bottom-right-radius: inherit;
+  border-start-end-radius: inherit;
+  border-end-end-radius: inherit;
 }
 
 .link{
@@ -1460,6 +1459,11 @@ details.collapse summary::-webkit-details-marker{
   --tw-text-opacity: 0.2;
 }
 
+.input input:focus{
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
 .input[list]::-webkit-calendar-picker-indicator{
   line-height: 1em;
 }
@@ -1468,7 +1472,8 @@ details.collapse summary::-webkit-details-marker{
   --tw-border-opacity: 0.2;
 }
 
-.input:focus{
+.input:focus,
+  .input:focus-within{
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
@@ -1545,9 +1550,9 @@ details.collapse summary::-webkit-details-marker{
 
 .menu :where(li ul):before{
   position: absolute;
+  bottom: 0.75rem;
   left: 0px;
   top: 0.75rem;
-  bottom: 0.75rem;
   width: 1px;
   background-color: hsl(var(--bc) / 0.1);
   content: "";
@@ -1644,8 +1649,8 @@ details.collapse summary::-webkit-details-marker{
 .mockup-browser .mockup-browser-toolbar .input:before{
   content: "";
   position: absolute;
-  top: 50%;
   left: 0.5rem;
+  top: 50%;
   aspect-ratio: 1 / 1;
   height: 0.75rem;
   --tw-translate-y: -50%;
@@ -1659,8 +1664,8 @@ details.collapse summary::-webkit-details-marker{
 .mockup-browser .mockup-browser-toolbar .input:after{
   content: "";
   position: absolute;
-  top: 50%;
   left: 1.25rem;
+  top: 50%;
   height: 0.5rem;
   --tw-translate-y: 25%;
   --tw-rotate: -45deg;
@@ -1890,8 +1895,8 @@ details.collapse summary::-webkit-details-marker{
 }
 
 .btn-group .btn:first-child:not(:last-child){
-  margin-top: -0px;
   margin-left: -1px;
+  margin-top: -0px;
   border-top-left-radius: var(--rounded-btn, 0.5rem);
   border-top-right-radius: 0;
   border-bottom-left-radius: var(--rounded-btn, 0.5rem);
@@ -1913,8 +1918,8 @@ details.collapse summary::-webkit-details-marker{
 }
 
 .btn-group-horizontal .btn:first-child:not(:last-child){
-  margin-top: -0px;
   margin-left: -1px;
+  margin-top: -0px;
   border-top-left-radius: var(--rounded-btn, 0.5rem);
   border-top-right-radius: 0;
   border-bottom-left-radius: var(--rounded-btn, 0.5rem);
@@ -1929,8 +1934,8 @@ details.collapse summary::-webkit-details-marker{
 }
 
 .btn-group-vertical .btn:first-child:not(:last-child){
-  margin-top: -1px;
   margin-left: -0px;
+  margin-top: -1px;
   border-top-left-radius: var(--rounded-btn, 0.5rem);
   border-top-right-radius: var(--rounded-btn, 0.5rem);
   border-bottom-left-radius: 0;
@@ -2136,24 +2141,21 @@ details.collapse summary::-webkit-details-marker{
   height: 0.75rem;
 }
 
-.h-\[110\%\]{
-  height: 110%;
-}
-
 .h-\[394px\]{
   height: 394px;
 }
 
-.h-\[450px\]{
-  height: 450px;
+.h-fit{
+  height: -moz-fit-content;
+  height: fit-content;
 }
 
 .h-full{
   height: 100%;
 }
 
-.h-screen{
-  height: 100vh;
+.min-h-\[600px\]{
+  min-height: 600px;
 }
 
 .w-24{
@@ -2176,10 +2178,6 @@ details.collapse summary::-webkit-details-marker{
   width: 24rem;
 }
 
-.w-\[450px\]{
-  width: 450px;
-}
-
 .w-\[550px\]{
   width: 550px;
 }
@@ -2193,6 +2191,14 @@ details.collapse summary::-webkit-details-marker{
   width: 100%;
 }
 
+.min-w-\[250px\]{
+  min-width: 250px;
+}
+
+.min-w-\[300px\]{
+  min-width: 300px;
+}
+
 .-translate-x-1\/2{
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2255,6 +2261,14 @@ details.collapse summary::-webkit-details-marker{
   overflow: hidden;
 }
 
+.overflow-y-auto{
+  overflow-y: auto;
+}
+
+.overflow-x-hidden{
+  overflow-x: hidden;
+}
+
 .rounded{
   border-radius: 0.25rem;
 }
@@ -2505,6 +2519,11 @@ details.collapse summary::-webkit-details-marker{
   color: rgb(209 213 219 / var(--tw-text-opacity));
 }
 
+.text-gray-500{
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
 .text-orange-700{
   --tw-text-opacity: 1;
   color: rgb(194 65 12 / var(--tw-text-opacity));
@@ -2519,11 +2538,6 @@ details.collapse summary::-webkit-details-marker{
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.text-gray-500{
-  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity));
-}
-
 .opacity-80{
   opacity: 0.8;
 }
@@ -2533,11 +2547,6 @@ details.collapse summary::-webkit-details-marker{
   outline-offset: 2px !important;
 }
 
-.outline-none{
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
-
 .ring-1{
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -2728,9 +2737,3 @@ img[src] {
   --tw-text-opacity: 1;
   color: rgb(239 68 68 / var(--tw-text-opacity));
 }
-
-.focus\:ring-0:focus{
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}