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 46c5fa9e77..62d05abd4d 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
@@ -1,6 +1,6 @@
 $(function () {
     var l = abp.localization.getResource("CmsKit");
-
+    
     var $createForm = $('#form-page-create');
     var $title = $('#ViewModel_Title');
     var $slug = $('#ViewModel_Slug');
@@ -173,7 +173,17 @@ $(function () {
 
     $('.tab-item').on('click', function () {
         if ($(this).attr("aria-label") == 'Preview' && editor.isMarkdownMode()) {
-            editor.setMarkdown(editor.getMarkdown(), true);
+
+            let content = editor.getMarkdown();
+            localStorage.setItem('content', content);
+            
+            volo.cmsKit.contents.content.parseAsHtml(content).then(function (data) {
+                editor.setHTML(data);
+            });
+        }
+        else if ($(this).attr("aria-label") == 'Write'){
+            var retrievedObject = localStorage.getItem('content');
+            editor.setMarkdown(retrievedObject);
         }
     });
 
diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Pages/Index.cshtml b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Pages/Index.cshtml
index 2aa3c0ce8b..cc72b8b0c8 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Pages/Index.cshtml
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Pages/Index.cshtml
@@ -2,17 +2,12 @@
 @addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI.Bootstrap
 @using Volo.CmsKit.Contents
 @using System.Dynamic
-@using Volo.CmsKit.Public.Web.Renderers
 @using Volo.Abp.Data
 @using Volo.Abp.AspNetCore.Mvc.UI.Packages.HighlightJs;
 @using Volo.Abp.AspNetCore.Mvc.UI.Widgets;
 
-@inject IMarkdownToHtmlRenderer MarkdownRenderer
-
-
 @model Volo.CmsKit.Public.Web.Pages.Public.CmsKit.Pages.IndexModel
 
-
 @section styles{
     
     <abp-style src="/Pages/Public/CmsKit/Pages/index.css" />
@@ -30,18 +25,7 @@
 
 <abp-card>
     <abp-card-body>
-        @foreach (ContentFragment contentFragment in Model.PageDto.ContentFragments)
-        {
-            if (contentFragment.Type == ContentConsts.Markdown)
-            {
-                @Html.Raw(await MarkdownRenderer.RenderAsync(contentFragment.GetProperty<string>("Content")))
-            }
-            else if (contentFragment.Type == ContentConsts.Widget)
-            {
-                @await Component.InvokeAsync(contentFragment.GetProperty<string>("Type"), contentFragment.ExtraProperties.ConvertToDynamicObject())
-            }
-            
-        }
+        @await Component.InvokeAsync("ContentFragment", new { pageDto = Model.PageDto })
     </abp-card-body>
 </abp-card>