diff --git a/framework/src/Volo.Abp.AspNetCore.Components.Server/Volo/Abp/AspNetCore/Components/Server/AbpAspNetCoreComponentsServerModule.cs b/framework/src/Volo.Abp.AspNetCore.Components.Server/Volo/Abp/AspNetCore/Components/Server/AbpAspNetCoreComponentsServerModule.cs
index bc7e995e43..6da6e12cf4 100644
--- a/framework/src/Volo.Abp.AspNetCore.Components.Server/Volo/Abp/AspNetCore/Components/Server/AbpAspNetCoreComponentsServerModule.cs
+++ b/framework/src/Volo.Abp.AspNetCore.Components.Server/Volo/Abp/AspNetCore/Components/Server/AbpAspNetCoreComponentsServerModule.cs
@@ -1,6 +1,8 @@
-using System.Collections.Generic;
+using System;
+using System.Collections.Generic;
 using Microsoft.AspNetCore.Builder;
 using Microsoft.AspNetCore.Hosting.StaticWebAssets;
+using Microsoft.AspNetCore.Http.Connections;
 using Microsoft.AspNetCore.Routing;
 using Microsoft.Extensions.DependencyInjection;
 using Microsoft.Extensions.FileProviders;
@@ -48,11 +50,15 @@ public class AbpAspNetCoreComponentsServerModule : AbpModule
             options.IgnoredUrls.AddIfNotContains("/_blazor");
         });
 
+        var preConfigureActions = context.Services.GetPreConfigureActions<HttpConnectionDispatcherOptions>();
         Configure<AbpEndpointRouterOptions>(options =>
         {
             options.EndpointConfigureActions.Add(endpointContext =>
             {
-                endpointContext.Endpoints.MapBlazorHub();
+                endpointContext.Endpoints.MapBlazorHub(httpConnectionDispatcherOptions =>
+                {
+                    preConfigureActions.Configure(httpConnectionDispatcherOptions);
+                });
                 endpointContext.Endpoints.MapFallbackToPage("/_Host");
             });
         });
diff --git a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Pages/create.js b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Pages/create.js
index ee6c7b7f9f..455a5e5d70 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Pages/create.js
+++ b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Pages/create.js
@@ -92,12 +92,15 @@ $(function () {
     initEditor();
 
     var editor;
+    var addWidgetButton;
     function initEditor() {
         var $editorContainer = $("#ContentEditor");
         var inputName = $editorContainer.data('input-id');
         var $editorInput = $('#' + inputName);
         var initialValue = $editorInput.val();
 
+        addWidgetButton = createAddWidgetButton();
+        
         editor = new toastui.Editor({
             el: $editorContainer[0],
             usageStatistics: false,
@@ -117,7 +120,7 @@ $(function () {
                 ['code', 'codeblock'],
                 // Using Option: Customize the last button
                 [{
-                    el: createAddWidgetButton(),
+                    el: addWidgetButton,
                     command: 'bold',
                     tooltip: 'Add Widget'
                 }]
@@ -171,27 +174,48 @@ $(function () {
         editor.insertText(txt);
     });
 
+    var $previewArea;
     $('.tab-item').on('click', function () {
         if ($(this).attr("aria-label") == 'Preview' && editor.isMarkdownMode()) {
+            
+            if(!$previewArea){
+                $previewArea = $("#ContentEditor .toastui-editor-md-preview");
+                $previewArea.replaceWith("<iframe id='previewArea' style='height: 100%; width: 100%; border: 0px; display: inline;'></iframe>");
+            }
+            
+            $previewArea.attr("srcdoc", '');
 
             let content = editor.getMarkdown();
+            addWidgetButton.disabled = true;
             localStorage.setItem('content', content);
 
             $.post("/CmsKitCommonWidgets/ContentPreview", { content: content }, function (result) {
+                var style = styleEditor.getValue();
+                var script = scriptEditor.getValue();
 
-                let style = styleEditor.getValue();
-
-                $('#editor-preview-style').remove();
-
-                $('head').append('<style id="editor-preview-style">' + style + '</style>');
-
-                editor.setHTML(result);
+                var parser = new DOMParser();
+                var doc = parser.parseFromString(result, 'text/html');
+                
+                var head = doc.querySelector('head');
+                var styleElement = doc.createElement('style');
+                styleElement.type = 'text/css';
+                styleElement.innerHTML = style;
+                head.append(styleElement);
+
+                var body = doc.querySelector('body');
+                var scriptElement = doc.createElement('script');
+                scriptElement.type = 'text/javascript';
+                scriptElement.innerHTML = script;
+                body.append(scriptElement);
+                
+                result = new XMLSerializer().serializeToString(doc);
                 
-                var highllightedText = $('#ContentEditor').find('.toastui-editor-md-preview-highlight');
-                highllightedText.removeClass('toastui-editor-md-preview-highlight');
+                $previewArea = $("#previewArea");
+                $previewArea.attr("srcdoc", result);
             });
         }
         else if ($(this).attr("aria-label") == 'Write'){
+            addWidgetButton.disabled = false;
             var retrievedObject = localStorage.getItem('content');
             editor.setMarkdown(retrievedObject);
         }
diff --git a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Pages/update.js b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Pages/update.js
index c46f1c274c..ccb221efeb 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Pages/update.js
+++ b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Pages/update.js
@@ -62,12 +62,15 @@ $(function () {
     initEditor();
 
     var editor;
+    var addWidgetButton;
     function initEditor() {
         var $editorContainer = $("#ContentEditor");
         var inputName = $editorContainer.data('input-id');
         var $editorInput = $('#' + inputName);
         var initialValue = $editorInput.val();
 
+        addWidgetButton = createAddWidgetButton();
+
         editor = new toastui.Editor({
             el: $editorContainer[0],
             usageStatistics: false,
@@ -87,7 +90,7 @@ $(function () {
                 ['code', 'codeblock'],
                 // Using Option: Customize the last button
                 [{
-                    el: createAddWidgetButton(),
+                    el: addWidgetButton,
                     command: 'bold',
                     tooltip: 'Add Widget'
                 }]
@@ -141,24 +144,44 @@ $(function () {
         editor.insertText(txt);
     });
 
+    var $previewArea;
     $('.tab-item').on('click', function () {
         if ($(this).attr("aria-label") == 'Preview' && editor.isMarkdownMode()) {
 
+            if(!$previewArea){
+                $previewArea = $("#ContentEditor .toastui-editor-md-preview");
+                $previewArea.replaceWith("<iframe id='previewArea' style='height: 100%; width: 100%; border: 0px; display: inline;'></iframe>");
+            }
+
+            $previewArea.attr("srcdoc", '');
+            addWidgetButton.disabled = true;
+            
             let content = editor.getMarkdown();
             localStorage.setItem('content', content);
 
             $.post("/CmsKitCommonWidgets/ContentPreview", { content: content }, function (result) {
 
-                let style = styleEditor.getValue();
+                var style = styleEditor.getValue();
+                var script = scriptEditor.getValue();
 
-                $('#editor-preview-style').remove();
+                var parser = new DOMParser();
+                var doc = parser.parseFromString(result, 'text/html');
 
-                $('head').append('<style id="editor-preview-style">' + style + '</style>');
+                var head = doc.querySelector('head');
+                var styleElement = doc.createElement('style');
+                styleElement.type = 'text/css';
+                styleElement.innerHTML = style;
+                head.append(styleElement);
 
-                editor.setHTML(result);
+                var body = doc.querySelector('body');
+                var scriptElement = doc.createElement('script');
+                scriptElement.type = 'text/javascript';
+                scriptElement.innerHTML = script;
+                body.append(scriptElement);
 
-                var highllightedText = $('#ContentEditor').find('.toastui-editor-md-preview-highlight');
-                highllightedText.removeClass('toastui-editor-md-preview-highlight');
+                result = new XMLSerializer().serializeToString(doc);
+                $previewArea = $("#previewArea");
+                $previewArea.attr("srcdoc", result);
             });
         }
         else if ($(this).attr("aria-label") == 'Write') {
diff --git a/modules/cms-kit/src/Volo.CmsKit.Common.Web/Pages/CmsKit/Components/ContentPreview/Default.cshtml b/modules/cms-kit/src/Volo.CmsKit.Common.Web/Pages/CmsKit/Components/ContentPreview/Default.cshtml
index 6baf41716e..450eb46f20 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Common.Web/Pages/CmsKit/Components/ContentPreview/Default.cshtml
+++ b/modules/cms-kit/src/Volo.CmsKit.Common.Web/Pages/CmsKit/Components/ContentPreview/Default.cshtml
@@ -1,10 +1,15 @@
-@using Volo.CmsKit.Contents
-@using Volo.CmsKit.Web.Pages.CmsKit.Components.Contents
+@using Volo.CmsKit.Web.Pages.CmsKit.Components.Contents
+@using Volo.Abp.AspNetCore.Mvc.UI.Theming
 
-@model DefaultContentDto
+@model Volo.CmsKit.Contents.DefaultContentDto
 
-<div class="content">
+@inject IThemeManager ThemeManager
+@{
+    Layout = ThemeManager.CurrentTheme.GetEmptyLayout();
+}
 
-    @await Component.InvokeAsync(typeof(ContentFragmentViewComponent), Model)
-
-</div>
\ No newline at end of file
+<abp-card>
+    <abp-card-body>
+         @await Component.InvokeAsync(typeof(ContentFragmentViewComponent), Model)
+    </abp-card-body>
+</abp-card>
\ No newline at end of file
diff --git a/modules/cms-kit/src/Volo.CmsKit.Common.Web/Pages/_ViewImports.cshtml b/modules/cms-kit/src/Volo.CmsKit.Common.Web/Pages/_ViewImports.cshtml
new file mode 100644
index 0000000000..3a0a2aecec
--- /dev/null
+++ b/modules/cms-kit/src/Volo.CmsKit.Common.Web/Pages/_ViewImports.cshtml
@@ -0,0 +1,6 @@
+@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
+@addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI
+@addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI.Bootstrap
+@addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI.Bundling
+@addTagHelper *, Volo.CmsKit.Common.Web
+@addTagHelper *, Volo.CmsKit.Public.Web