diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Tags/Default.cshtml b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Tags/Default.cshtml
index 133e868a3f6..7d568c4b0b1 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Tags/Default.cshtml
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Tags/Default.cshtml
@@ -6,26 +6,22 @@
 	<div class="cms-tags-area">
 		@if (Model.Tags != null)
 		{
-			<ul class="d-flex flex-wrap gap-1">
+			<div class="d-flex flex-wrap gap-2">
 				@foreach (var tag in Model.Tags)
 				{
 					if (Model.UrlFormat.IsNullOrWhiteSpace())
 					{
-						<li>
-							<span class="badge rounded-pill badge-secondary text-bg-secondary cmskit-tag font-weight-normal">
+							<span class="badge rounded-pill bg-secondary cmskit-tag fw-normal">
 								@tag.Name
 							</span>
-						</li>
 					}
 					else
 					{
 						var formattedUrl = Model.UrlFormat.Replace("{TagId}", tag.Id.ToString()).Replace("{TagName}", tag.Name);
-						<li>
-							<a href="@formattedUrl"><span class="badge rounded-pill badge-secondary text-bg-secondary cmskit-tag font-weight-normal">@tag.Name</span></a>
-						</li>
+							<a class="badge rounded-pill bg-secondary cmskit-tag fw-normal text-decoration-none" href="@formattedUrl">@tag.Name</a>
 					}
 				}
-			</ul>
+			</div>
 		}
 	</div>
 </div> 
\ No newline at end of file
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 e3f8fa16771..d94c8e199ed 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
@@ -60,13 +60,13 @@
                 <input hidden id="BlogId" value="@Model.ViewModel.Id" />
                 <abp-card-body>
                     <abp-row>
-                        <div class="col-lg-8 col-md-10 mx-auto pb-4">
+                        <div class="col-lg-8 col-md-10 mx-auto">
                             <h1 class="mt-lg-4 mt-md-3">@Model.ViewModel.Title</h1>
                             <p class="mb-lg-5 mb-md-3">
-                            <a href="/@CmsBlogsWebConsts.BlogsRoutePrefix/@Model.BlogSlug?authorId=@Model.ViewModel.Author.Id">
-                                    <span class="font-weight-bold">@@@Model.ViewModel.Author?.UserName</span>
+                            <a class="text-decoration-none" href="/@CmsBlogsWebConsts.BlogsRoutePrefix/@Model.BlogSlug?authorId=@Model.ViewModel.Author.Id">
+                                    <span class="fw-bold text-dark">@@@Model.ViewModel.Author?.UserName</span>
                                 </a>
-                                <small style="opacity:.65;">@Model.ViewModel.CreationTime</small>
+                                <small class="text-muted">@Model.ViewModel.CreationTime</small>
                             </p>
                             @(await Component.InvokeAsync(typeof(ContentFragmentViewComponent), new DefaultContentDto
                             {
@@ -96,35 +96,41 @@
                             }
                     </div>
                 </abp-row>
+                
+                    <abp-row class="row">
+                        <div class="col-lg-8 col-md-10 mx-auto pb-4">
+                            <hr class="mt-0" />
+                            <abp-row>
+                                <abp-column size-lg="_6" size-md="_12">
+                                    @if (GlobalFeatureManager.Instance.IsEnabled<RatingsFeature>())
+                                    {
+                                        if (Model.RatingsFeature?.IsEnabled == true)
+                                        {
+                                            @await Component.InvokeAsync(typeof(RatingViewComponent), new
+                                            {
+                                                entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType,
+                                                entityId = Model.ViewModel.Id.ToString()
+                                            })
+                                        }
+                                    }
+                                </abp-column>
+                                <abp-column class="d-flex justify-content-end" size-lg="_6" size-md="_12">
+                                    @if (GlobalFeatureManager.Instance.IsEnabled<ReactionsFeature>())
+                                    {
+                                        if (Model.ReactionsFeature?.IsEnabled == true)
+                                        {
+                                            @await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new
+                                            {
+                                                entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType,
+                                                entityId = Model.ViewModel.Id.ToString()
+                                            })
+                                        }
+                                    }
+                                </abp-column>
+                            </abp-row>
+                        </div>
 
-                <abp-row class="row">
-                    <abp-column size-lg="_6" size-md="_12">
-                        @if (GlobalFeatureManager.Instance.IsEnabled<ReactionsFeature>())
-                        {
-                            if (Model.ReactionsFeature?.IsEnabled == true)
-                            {
-                                @await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new
-                                {
-                                    entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType,
-                                    entityId = Model.ViewModel.Id.ToString()
-                                })
-                            }
-                        }
-                    </abp-column>
-                    <abp-column size-lg="_6" size-md="_12">
-                        @if (GlobalFeatureManager.Instance.IsEnabled<RatingsFeature>())
-                        {
-                            if (Model.RatingsFeature?.IsEnabled == true)
-                            {
-                                @await Component.InvokeAsync(typeof(RatingViewComponent), new
-                                {
-                                    entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType,
-                                    entityId = Model.ViewModel.Id.ToString()
-                                })
-                            }
-                        }
-                    </abp-column>
-                </abp-row>
+                    </abp-row>
             </abp-card-body>
         </abp-card>
     </div>
diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/blogPost.css b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/blogPost.css
index 03ed4523e48..96e4520d9a0 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/blogPost.css
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/blogPost.css
@@ -42,4 +42,22 @@ span.area-title {
     color: #aaa;
     text-decoration: none;
     padding-left: 18px;
+}
+
+.blockquote, blockquote{
+    display: block;
+    padding: 1em 1.5em;
+    border-radius: 8px;
+    background: rgba(58, 130, 246, 0.1);
+    font-size: 1.125rem;
+}
+
+code.hljs{
+    border-radius: 8px;
+    background: rgba(247, 37, 133, 0.1);
+}
+
+pre code.hljs{
+    background: rgba(0, 0, 0, 0.1);
+    padding: 1em 1.5em;
 }
\ No newline at end of file