diff --git a/modules/cms-kit/src/Volo.CmsKit.Common.Web/Pages/CmsKit/Components/Contents/ContentFragment.cshtml b/modules/cms-kit/src/Volo.CmsKit.Common.Web/Pages/CmsKit/Components/Contents/ContentFragment.cshtml
index 1fe1d67791..3ac2080529 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Common.Web/Pages/CmsKit/Components/Contents/ContentFragment.cshtml
+++ b/modules/cms-kit/src/Volo.CmsKit.Common.Web/Pages/CmsKit/Components/Contents/ContentFragment.cshtml
@@ -1,6 +1,7 @@
 @using Microsoft.AspNetCore.Mvc.ViewComponents
 @using Volo.Abp.Data
 @using Volo.Abp.Reflection
+@using Volo.CmsKit.Contents
 @using Volo.CmsKit.Web.Renderers;
 @using Volo.CmsKit.Web.Pages.CmsKit.Components.Contents;
 
@@ -11,11 +12,11 @@
 
 @foreach (var contentFragment in Model.ContentDto.ContentFragments)
 {
-    if (contentFragment.Type == "Markdown")
+    if (contentFragment.Type == ContentConsts.Markdown)
     {
         @Html.Raw(await MarkdownRenderer.RenderAsync(contentFragment.GetProperty<string>("Content")))
     }
-    else if (contentFragment.Type == "Widget")
+    else if (contentFragment.Type == ContentConsts.Widget)
     {
         var componentName = contentFragment.GetProperty<string>("Type");
         var descriptor = ViewComponentSelector.SelectComponent(componentName);
diff --git a/modules/cms-kit/src/Volo.CmsKit.Common.Web/Pages/CmsKit/Components/Contents/ContentFragmentViewComponent.cs b/modules/cms-kit/src/Volo.CmsKit.Common.Web/Pages/CmsKit/Components/Contents/ContentFragmentViewComponent.cs
index d276165982..e89bd6846d 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Common.Web/Pages/CmsKit/Components/Contents/ContentFragmentViewComponent.cs
+++ b/modules/cms-kit/src/Volo.CmsKit.Common.Web/Pages/CmsKit/Components/Contents/ContentFragmentViewComponent.cs
@@ -14,7 +14,7 @@ public class ContentFragmentViewComponent : AbpViewComponent
 {
     public IContent ContentDto { get; set; }
 
-    public virtual async Task<IViewComponentResult> InvokeAsync(IContent contentDto)
+    public virtual IViewComponentResult Invoke(IContent contentDto)
     {
         return View("~/Pages/CmsKit/Components/Contents/ContentFragment.cshtml", new ContentFragmentViewComponent() { ContentDto = contentDto });
     }
diff --git a/modules/cms-kit/src/Volo.CmsKit.Common.Web/Renderers/MarkdownToHtmlRenderer.cs b/modules/cms-kit/src/Volo.CmsKit.Common.Web/Renderers/MarkdownToHtmlRenderer.cs
index 9dd5555051..772e7a8531 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Common.Web/Renderers/MarkdownToHtmlRenderer.cs
+++ b/modules/cms-kit/src/Volo.CmsKit.Common.Web/Renderers/MarkdownToHtmlRenderer.cs
@@ -19,6 +19,9 @@ public class MarkdownToHtmlRenderer : IMarkdownToHtmlRenderer, ITransientDepende
     {
         MarkdownPipeline = markdownPipeline;
         _htmlSanitizer = new HtmlSanitizer();
+        _htmlSanitizer.AllowedAttributes.Add("class");
+        _htmlSanitizer.AllowedAttributes.Add("data-bs-toggle");
+        _htmlSanitizer.AllowedAttributes.Add("data-bs-target");
     }
 
     public Task<string> RenderAsync(string rawMarkdown, bool allowHtmlTags = true, bool preventXSS = true, string referralLinks = null)
diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/BlogPost.cshtml b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/BlogPost.cshtml
index edb03a12bd..c45dde17cb 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/BlogPost.cshtml
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/BlogPost.cshtml
@@ -1,8 +1,6 @@
 @page
 
-@using Volo.Abp.Data
 @using Volo.Abp.Users;
-@using Volo.CmsKit.Public.Blogs
 @using Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Blogs.BlogPostComment
 @using Volo.CmsKit.Public.Web.Pages
 @using Volo.Abp.GlobalFeatures
@@ -10,16 +8,15 @@
 @using Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.ReactionSelection
 @using Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Rating
 @using Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Tags
-@using Volo.CmsKit.Web.Renderers
 @using Volo.Abp.AspNetCore.Mvc.UI.Packages.HighlightJs
 @using Volo.CmsKit.Contents
+@using Volo.CmsKit.Web.Pages.CmsKit.Components.Contents
 
 @inherits CmsKitPublicPageBase
 
 @model Volo.CmsKit.Public.Web.Pages.Public.CmsKit.Blogs.BlogPostModel
 
 @inject ICurrentUser CurrentUser
-@inject IMarkdownToHtmlRenderer MarkdownRenderer
 
 @{
     string dummyImageSource = "https://dummyimage.com/1280x720/a3a3a3/fff.png?text=" + Model.ViewModel.Title;
@@ -70,17 +67,10 @@
                                 </a>
                                 <small style="opacity:.65;">@Model.ViewModel.CreationTime</small>
                             </p>
-                            @foreach (var contentFragment in Model.ViewModel.ContentFragments)
+                            @(await Component.InvokeAsync(typeof(ContentFragmentViewComponent), new DefaultContentDto
                             {
-                                if (contentFragment.Type == ContentConsts.Markdown)
-                                {
-                                    @Html.Raw(await MarkdownRenderer.RenderAsync(contentFragment.GetProperty<string>("Content"), allowHtmlTags: true, preventXSS: true))
-                                }
-                                else if (contentFragment.Type == ContentConsts.Widget)
-                                {
-                                    @await Component.InvokeAsync(contentFragment.GetProperty<string>("Type"), contentFragment.ExtraProperties.ConvertToDynamicObject())
-                                }
-                            }
+                                ContentFragments = Model.ViewModel.ContentFragments
+                            }))
                             <p class="mb-3">
                                 @if (Model.ViewModel.LastModificationTime != null)
                                 {
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 e14733695a..44ac5332b6 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
@@ -1,15 +1,9 @@
 @page
 @addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI.Bootstrap
 @using Volo.CmsKit.Contents
-@using System.Dynamic
-@using Volo.Abp.Data
-@using Volo.Abp.AspNetCore.Mvc.UI.Packages.HighlightJs;
-@using Volo.Abp.AspNetCore.Mvc.UI.Widgets;
-@using Volo.CmsKit.Web.Renderers
+@using Volo.CmsKit.Web.Pages.CmsKit.Components.Contents
 @model Volo.CmsKit.Public.Web.Pages.Public.CmsKit.Pages.IndexModel
 
-@inject IMarkdownToHtmlRenderer MarkdownRenderer
-
 @section styles{
     
     <abp-style src="/Pages/Public/CmsKit/Pages/index.css" />
@@ -27,17 +21,10 @@
 
 <abp-card>
     <abp-card-body>
-        @foreach (ContentFragment contentFragment in Model.ViewModel.ContentFragments)
+        @(await Component.InvokeAsync(typeof(ContentFragmentViewComponent), new DefaultContentDto
         {
-            if (contentFragment.Type == ContentConsts.Markdown)
-            {
-                @Html.Raw(await MarkdownRenderer.RenderAsync(contentFragment.GetProperty<string>("Content"), allowHtmlTags: true, preventXSS: true))
-            }
-            else if (contentFragment.Type == ContentConsts.Widget)
-            {
-                @await Component.InvokeAsync(contentFragment.GetProperty<string>("Type"), contentFragment.ExtraProperties.ConvertToDynamicObject())
-            }
-        }
+            ContentFragments = Model.ViewModel.ContentFragments
+        }))
     </abp-card-body>
 </abp-card>