diff --git a/includes/template-previews.html b/includes/template-previews.html
index e880d51..42b7ac7 100644
--- a/includes/template-previews.html
+++ b/includes/template-previews.html
@@ -54,8 +54,8 @@
             <div class="w-1/4 h-0.5 bg-gradient-to-r from-teal-300 via-blue-500 to-pink-500"></div>
         </div>
     </div>
-    <iframe x-show="iframeReady" id="iframe" :src="url" class="relative z-20 w-full h-full bg-white"></iframe>
-    <div class="fixed z-10 flex items-center justify-center w-screen h-screen">
-        <svg class="w-5 h-5 text-white animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
+    <iframe x-show="iframeReady" :class="{ 'opacity-0' : !iframeReady }" id="iframe" :src="iframeURL" class="relative z-20 w-full h-full duration-300 ease-out delay-500 bg-white"></iframe>
+    <div class="fixed z-10 flex items-center justify-center w-screen h-screen bg-white">
+        <svg class="w-5 h-5 text-black animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
     </div>
 </div>
\ No newline at end of file
diff --git a/layouts/main.html b/layouts/main.html
index 223cfcc..d8cf17d 100644
--- a/layouts/main.html
+++ b/layouts/main.html
@@ -172,21 +172,33 @@
           templateDropdownShow: false,
           iframeReady: false,
           activeTemplate: null,
-          url: 'about:blank',
-          changeURL: function(url){
-            this.iframeReady=false;
-            this.url = url;
-          },
+          templateURL: 'about:blank',
+          iframeURL: 'about:blank',
           changeTheme: function(slug, url){
+            this.ifreamReady=false;
             window.dispatchEvent(new CustomEvent('change-template', { detail : { slug: slug }}));
-            this.url = 'about:blank';
+            this.iframeURL = 'about:blank';
             let that = this;
             setTimeout(function(){
                 that.changeURL(url);
+                that.iframeReady=true;
                 console.log('change');
                 console.log(slug);
             }, 100);
           },
+          showTemplatePreview: function(templateURL){
+            this.iframeURL = 'about:blank';
+            if(window.innerWidth < 768){ 
+              window.open(url, '_blank'); 
+            }else{ 
+              this.templatePreview=true;
+              let that = this;
+              setTimeout(function(){
+                  that.iframeReady=true;
+                  that.iframeURL=templateURL; 
+              }, 10);
+            }
+          },
           templateInstallCommand(){
             if(this.activeTemplate != null){
                 if(this.activeTemplate.slug == 'starter'){
@@ -246,9 +258,14 @@
                 if(value){
                     window.dispatchEvent(new CustomEvent('close-mobile-menu', {}));
                 }
+            });
+            $watch('templatePreview', function(value){
+                if(!value){
+                  url = 'about:blank';
+                }
             })
         "
-        @show-template-preview.window="url=event.detail.url; if(window.innerWidth < 768){ window.open(url, '_blank'); }else{ templatePreview=true }" 
+        @show-template-preview.window="showTemplatePreview(event.detail.url);" 
         @set-active-template.window="setActiveTemplate(event.detail.slug);"
         @close-left-sidebar.window="leftSidebar = false"
         x-init="route=window.location.pathname"