diff --git a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/BlogPosts/Index.cshtml b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/BlogPosts/Index.cshtml
index 09f3f7f447..b819b0a161 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/BlogPosts/Index.cshtml
+++ b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/BlogPosts/Index.cshtml
@@ -25,16 +25,20 @@
     @await Component.InvokeAsync(typeof(AbpPageToolbarViewComponent), new { pageName = typeof(IndexModel).FullName })
 }
 
-<div id="CmsKitBlogPostsWrapper">
-    <abp-card>
-        <abp-card-body>
+<abp-card class="mb-4">
+    <abp-card-body>
+        <div id="CmsKitBlogPostsWrapper">
             <abp-row>
                 <abp-column>
                     @await Component.InvokeAsync(typeof(AbpPageSearchBoxViewComponent))
                 </abp-column>
             </abp-row>
-        </abp-card-body>
-    </abp-card>
-    
-    <abp-table striped-rows="true" id="BlogPostsTable" class="nowrap"></abp-table>
-</div>
\ No newline at end of file
+        </div>
+    </abp-card-body>
+</abp-card>
+ 
+<abp-card>
+    <abp-card-body>
+        <abp-table striped-rows="true" id="BlogPostsTable" class="nowrap"></abp-table>
+    </abp-card-body>
+</abp-card>
\ No newline at end of file
diff --git a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Comments/Index.cshtml b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Comments/Index.cshtml
index 8841d656b0..44fd02e9d8 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Comments/Index.cshtml
+++ b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Comments/Index.cshtml
@@ -15,14 +15,14 @@
     PageLayout.Content.Title = L["Comments"].Value;
     PageLayout.Content.BreadCrumb.Add(L["Menu:CMS"].Value);
     PageLayout.Content.MenuItemName = CmsKitAdminMenus.Comments.CommentsMenu;
-    
+
     var defaultStartDate = DateTime.Now.AddDays(-7).Date.ToShortDateString();
 }
 
 @section styles{
     <abp-style-bundle>
         <abp-style src="/Pages/CmsKit/Comments/index.css" />
-    </abp-style-bundle>    
+    </abp-style-bundle>
 }
 
 @section scripts {
@@ -31,9 +31,9 @@
     </abp-script-bundle>
 }
 
-<div id="CmsKitCommentsWrapper">
-    <abp-card>
-        <abp-card-body>
+<abp-card class="mb-4">
+    <abp-card-body>
+        <div id="CmsKitCommentsWrapper">
             <abp-row>
                 <abp-column>
                     <form id="CmsKitCommentsFilterForm" method="post">
@@ -47,13 +47,13 @@
                                 </abp-column>
                             </abp-column>
                             <abp-column size-lg="_2" size-md="_6">
-                                <abp-input asp-for="@Model.EntityType" label="@L["EntityType"].Value" type="text"/>
+                                <abp-input asp-for="@Model.EntityType" label="@L["EntityType"].Value" type="text" />
                             </abp-column>
                             <abp-column size-lg="_2" size-md="_6">
-                                <abp-input asp-for="@Model.EntityId" label="@L["EntityId"].Value" type="text"/>
+                                <abp-input asp-for="@Model.EntityId" label="@L["EntityId"].Value" type="text" />
                             </abp-column>
                             <abp-column size-lg="_2" size-md="_12">
-                                <abp-input asp-for="@Model.Author" label="@L["Username"].Value" type="text"/>
+                                <abp-input asp-for="@Model.Author" label="@L["Username"].Value" type="text" />
                             </abp-column>
                             <abp-column size-lg="_2" size-md="_12">
                                 <abp-button class="mt-md-4" size="Block" button-type="Primary" type="submit">
@@ -64,8 +64,12 @@
                     </form>
                 </abp-column>
             </abp-row>
-        </abp-card-body>
-    </abp-card>
-    
-    <abp-table striped-rows="true" id="CommentsTable" class="nowrap"></abp-table>
-</div>
\ No newline at end of file
+        </div>
+    </abp-card-body>
+</abp-card>
+
+<abp-card>
+    <abp-card-body>
+        <abp-table striped-rows="true" id="CommentsTable" class="nowrap"></abp-table>
+    </abp-card-body>
+</abp-card>
diff --git a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Pages/Index.cshtml b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Pages/Index.cshtml
index c85d4759ba..ffb1e156e0 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Pages/Index.cshtml
+++ b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Pages/Index.cshtml
@@ -1,6 +1,6 @@
 @page
 @using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Pages.Shared.Components.AbpPageToolbar
-@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Pages.Shared.Components.AbpPageSearchBox 
+@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Pages.Shared.Components.AbpPageSearchBox
 @using Volo.CmsKit.Admin.Web.Pages
 @using Volo.CmsKit.Admin.Web.Menus
 @using Volo.CmsKit.Admin.Web.Pages.CmsKit.Pages
@@ -16,23 +16,27 @@
 }
 
 @section scripts {
-    <abp-script src="/Pages/CmsKit/Pages/index.js"/>
+    <abp-script src="/Pages/CmsKit/Pages/index.js" />
 }
 
 @section content_toolbar {
-    @await Component.InvokeAsync(typeof(AbpPageToolbarViewComponent), new {pageName = typeof(IndexModel).FullName})
+    @await Component.InvokeAsync(typeof(AbpPageToolbarViewComponent), new { pageName = typeof(IndexModel).FullName })
 }
 
-<div id="CmsKitPagesWrapper">
-    <abp-card>
-        <abp-card-body>
+<abp-card class="mb-4">
+    <abp-card-body>
+        <div id="CmsKitPagesWrapper">
             <abp-row>
                 <abp-column>
                     @await Component.InvokeAsync(typeof(AbpPageSearchBoxViewComponent))
                 </abp-column>
             </abp-row>
-        </abp-card-body>
-    </abp-card>
-    
-    <abp-table striped-rows="true" id="PagesTable" class="nowrap"></abp-table>
-</div>
\ No newline at end of file
+        </div>
+    </abp-card-body>
+</abp-card>
+
+<abp-card>
+    <abp-card-body>
+        <abp-table striped-rows="true" id="PagesTable" class="nowrap"></abp-table>
+    </abp-card-body>
+</abp-card>
diff --git a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Tags/Index.cshtml b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Tags/Index.cshtml
index b568c2737c..e76f0ad9f5 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Tags/Index.cshtml
+++ b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Tags/Index.cshtml
@@ -23,16 +23,20 @@
     @await Component.InvokeAsync(typeof(AbpPageToolbarViewComponent), new { pageName = typeof(IndexModel).FullName })
 }
 
-<div id="CmsKitTagsWrapper">
-    <abp-card>
-        <abp-card-body>
+<abp-card class="mb-4">
+    <abp-card-body>
+        <div id="CmsKitTagsWrapper">
             <abp-row>
                 <abp-column>
                     @await Component.InvokeAsync(typeof(AbpPageSearchBoxViewComponent))
                 </abp-column>
             </abp-row>
-        </abp-card-body>
-    </abp-card>
-    <abp-table striped-rows="true" id="TagsTable"></abp-table>
-</div>
+        </div>
+    </abp-card-body>
+</abp-card> 
 
+<abp-card>
+    <abp-card-body>
+        <abp-table striped-rows="true" id="TagsTable"></abp-table>
+    </abp-card-body>
+</abp-card>
\ No newline at end of file
diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Blogs/BlogPostComment/Default.cshtml b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Blogs/BlogPostComment/Default.cshtml
index 33206a3344..aac65629f4 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Blogs/BlogPostComment/Default.cshtml
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Blogs/BlogPostComment/Default.cshtml
@@ -7,16 +7,9 @@
 
 @model DefaultBlogPostCommentViewComponent.DefaultBlogPostCommentViewModel
 
-
-<abp-card> 
-    <abp-card-body>
-        <span class="area-title pt-0 pb-3">
-            @L["Comments"]
-        </span>
+  
         @await Component.InvokeAsync(typeof(CommentingViewComponent), new
            {
                entityType = Model.EntityType,
                entityId = Model.EntityId
-           })
-    </abp-card-body>
-</abp-card>
\ No newline at end of file
+           }) 
\ No newline at end of file
diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Commenting/Default.cshtml b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Commenting/Default.cshtml
index 4e99b0cb9f..062afddc4d 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Commenting/Default.cshtml
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Commenting/Default.cshtml
@@ -25,7 +25,7 @@
 }
 @{
     Func<dynamic, IHtmlContent> GetCommentArea(Guid? repliedCommentId, bool cancelButton = false) =>
-    @<div class="cms-comment-form-area bg-light card p-3 mx-0  @(repliedCommentId.HasValue ? "my-1" : "mb-0")"
+    @<div class="cms-comment-form-area bg-light card p-3 mx-0  @(repliedCommentId.HasValue ? "my-3" : "mt-3")"
           data-reply-id="@(repliedCommentId?.ToString() ?? "")"
           style="@(string.IsNullOrEmpty(repliedCommentId?.ToString() ?? "") ? "" : "display:none")">
         <form class="cms-comment-form">
@@ -113,7 +113,7 @@
     </div>;
 }
 
-<div class="cms-comment-area" data-entity-type="@Model.EntityType" data-entity-id="@Model.EntityId">
+<div class="cms-comment-area mb-5" data-entity-type="@Model.EntityType" data-entity-id="@Model.EntityId">
     @if (CurrentUser.IsAuthenticated)
     {
         <div id="@($"cms-comment_{Model.EntityType}_{Model.EntityId}")">
@@ -129,28 +129,28 @@
     @foreach (var comment in Model.Comments)
     {
         <div class="comment">
-            <div class="card p-3 mx-0 my-4">
+            <div class="card p-3 mx-0 my-3">
                 <h5>
                     @GetCommentTitle(comment.Author, comment.CreationTime).Invoke(null)
                 </h5>
 
                 @GetCommentContentArea(comment.Id, comment.Text).Invoke(null)
 
-            <div class="form-row mt-2">
-                <div class="col">
-                    <div class="my-2 ">
-                        @GetCommentActionArea(comment.Id, comment.Author.Id, false).Invoke(null)
+                <div class="form-row mt-2">
+                    <div class="col">
+                        <div class="my-2 ">
+                            @GetCommentActionArea(comment.Id, comment.Author.Id, false).Invoke(null)
+                        </div>
                     </div>
-                </div>
-                <div class="col-auto">
-                    <div class="reaction-in-comment">
-                        @if (cmsKitUiOptions.Value.CommentsOptions.IsReactionsEnabled && GlobalFeatureManager.Instance.IsEnabled<ReactionsFeature>())
-                        {
-                            @await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new { entityType = "comment", entityId = comment.Id.ToString() })
-                        }
+                    <div class="col-auto">
+                        <div class="reaction-in-comment">
+                            @if (cmsKitUiOptions.Value.CommentsOptions.IsReactionsEnabled && GlobalFeatureManager.Instance.IsEnabled<ReactionsFeature>())
+                            {
+                                @await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new { entityType = "comment", entityId = comment.Id.ToString() })
+                            }
+                        </div>
                     </div>
                 </div>
-            </div>
                 @GetEditArea(comment.Id, comment.Text).Invoke(null)
 
                 @if (comment.Replies.Any())
@@ -165,21 +165,21 @@
 
                                 @GetCommentContentArea(reply.Id, reply.Text).Invoke(null)
 
-                            <div class="form-row mt-2">
-                                <div class="col">
-                                    <div class="my-2 ">
-                                        @GetCommentActionArea(reply.Id, reply.Author.Id, true).Invoke(null)
+                                <div class="form-row mt-2">
+                                    <div class="col">
+                                        <div class="my-2 ">
+                                            @GetCommentActionArea(reply.Id, reply.Author.Id, true).Invoke(null)
+                                        </div>
                                     </div>
-                                </div>
-                                <div class="col-auto">
-                                    <div class="reaction-in-comment">
-                                        @if (cmsKitUiOptions.Value.CommentsOptions.IsReactionsEnabled && GlobalFeatureManager.Instance.IsEnabled<ReactionsFeature>())
-                                        {
-                                            @await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new { entityType = "comment", entityId = reply.Id.ToString() })
-                                        }
+                                    <div class="col-auto">
+                                        <div class="reaction-in-comment">
+                                            @if (cmsKitUiOptions.Value.CommentsOptions.IsReactionsEnabled && GlobalFeatureManager.Instance.IsEnabled<ReactionsFeature>())
+                                            {
+                                                @await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new { entityType = "comment", entityId = reply.Id.ToString() })
+                                            }
+                                        </div>
                                     </div>
                                 </div>
-                            </div>
 
                                 @GetEditArea(reply.Id, reply.Text).Invoke(null)
                             </div>
@@ -190,7 +190,7 @@
                         <div class=" mt-2">
                             @if (CurrentUser.IsAuthenticated)
                             {
-                                <a href="#" class="comment-links  comment-reply-link btn btn-primary btn-sm"  data-reply-id="@comment.Id.ToString()">
+                                <a href="#" class="comment-links  comment-reply-link btn btn-primary btn-sm" data-reply-id="@comment.Id.ToString()">
                                     <i class="fa fa-reply mr-1"></i> @L["Reply"]
                                 </a>
                             }
@@ -210,3 +210,4 @@
         </div>
     }
 </div>
+ 
\ No newline at end of file
diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/Default.cshtml b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/Default.cshtml
index 0e836f9508..db5b71d7fa 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/Default.cshtml
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/Default.cshtml
@@ -6,7 +6,7 @@
 @inject IHtmlLocalizer<CmsKitResource> L
 
 <div class="p-3 my-3 card">
-    <div class="row">
+    <div class="row form-row">
         <div class="col-auto text-left">
             <span class="area-title">
                 Rating
diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/default.css b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/default.css
index 67c5ffa173..e8aa16162a 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/default.css
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/default.css
@@ -58,4 +58,13 @@ span.area-title {
     font-weight: 600;
     padding: 3px;
     display: block;
+}
+.reaction-in-comment .card {
+    border: 0 !important;
+    padding: 0 !important;
+    margin: 0 !important;
+}
+
+.popover {
+    min-width: 276px;
 }
\ No newline at end of file
diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/Default.cshtml b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/Default.cshtml
index 926524df93..a7d24898d6 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/Default.cshtml
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/Default.cshtml
@@ -7,7 +7,7 @@
 
 
 <div class="p-3 my-3 card">
-    <div class="row">
+    <div class="row form-row">
         <div class="col-auto text-left">
             <span class="area-title">
                 Reactions
diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/default.css b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/default.css
index 5e3e2a4bbb..2bea61970d 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/default.css
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/default.css
@@ -14,4 +14,7 @@ span.area-title {
     font-weight: 600;
     padding: 3px;
     display: block;
+}
+.popover {
+    min-width: 276px;
 }
\ No newline at end of file
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 7c608e4da1..bb7b95e08f 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
@@ -2,27 +2,16 @@
 
 @model TagViewComponent.TagViewModel
 
-    <div>
-        <div class="p-3 my-3 card">
-            <div class="row">
-                <div class="col-auto text-left">
-                    <span class="area-title">
-                        Tags
+    <div class="my-3">
+        <div class="cms-tags-area">
+            @if (Model.Tags != null)
+            {
+                foreach (var tag in Model.Tags)
+                {
+                    <span class="badge badge-light px-3 py-2 cmskit-tag font-weight-normal">
+                        @tag.Name
                     </span>
-                </div>
-                <div class="col text-right">
-                    <div class="cms-tags-area">
-                        @if (Model.Tags != null)
-                        {
-                            foreach (var tag in Model.Tags)
-                            {
-                                <span class="badge badge-light px-3 py-2 cmskit-tag font-weight-normal">
-                                    @tag.Name
-                                </span>
-                            }
-                        }
-                    </div>
-                </div>
-            </div>
+                }
+            }
         </div>
-    </div>
\ No newline at end of file
+    </div> 
\ No newline at end of file
diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Tags/default.css b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Tags/default.css
index 3fe8fa4646..3465bb45be 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Tags/default.css
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Tags/default.css
@@ -8,3 +8,7 @@ span.area-title {
     padding: 3px;
     display: block;
 }
+
+.popover {
+    min-width: 276px;
+}
\ 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 a7c3c60cce..491ae75e8d 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
@@ -14,14 +14,14 @@
 
 
 @section styles{
-    <abp-style src="/Pages/Public/CmsKit/Blogs/blogPost.css"/>
+    <abp-style src="/Pages/Public/CmsKit/Blogs/blogPost.css" />
 }
 
 @{
     string dummyImageSource = "https://dummyimage.com/1280x720/a3a3a3/fff.png?text=" + Model.BlogPost.Title;
 }
 
-<abp-card>
+<abp-card class="mb-4">
     <img src="/api/cms-kit/media/@Model.BlogPost.CoverImageMediaId" class="card-img-top" onerror="this.src='@dummyImageSource'" />
     <abp-card-body>
         <abp-row>
@@ -32,54 +32,62 @@
                     <small style="opacity:.65;">@Model.BlogPost.CreationTime</small>
                 </p>
                 @Html.Raw(Model.BlogPost.Content)
-                <p>
+                <p class="mb-3">
                     @if (Model.BlogPost.LastModificationTime != null)
                     {
                         <small style="opacity:.65;">@L["LastModification"].Value : @Model.BlogPost.LastModificationTime</small>
                     }
                 </p>
+                <hr />
+
+                @if (GlobalFeatureManager.Instance.IsEnabled<TagsFeature>())
+                {
+                    if (Model.TagsFeature?.IsEnabled == true)
+                    {
+                        @await Component.InvokeAsync(typeof(TagViewComponent), new
+                        {
+                            entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType,
+                            entityId = Model.BlogPost.Id.ToString()
+                        })
+                    }
+                }
             </div>
         </abp-row>
-    </abp-card-body>
-</abp-card>
 
+        <abp-row class="form-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.BlogPost.Id.ToString()
+                        })
+                    }
+                }
 
-@if (GlobalFeatureManager.Instance.IsEnabled<TagsFeature>())
-{
-    if (Model.TagsFeature?.IsEnabled == true)
-    {
-        @await Component.InvokeAsync(typeof(TagViewComponent), new
-        {
-            entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType,
-            entityId = Model.BlogPost.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.BlogPost.Id.ToString()
+                        })
+                    }
+                }
+
+            </abp-column>
+        </abp-row>
+    </abp-card-body>
+</abp-card>
 
-@if (GlobalFeatureManager.Instance.IsEnabled<ReactionsFeature>())
-{
-    if (Model.ReactionsFeature?.IsEnabled == true)
-    {
-        @await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new
-        {
-            entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType,
-            entityId = Model.BlogPost.Id.ToString()
-        })
-    }
-}
 
-@if (GlobalFeatureManager.Instance.IsEnabled<RatingsFeature>())
-{
-    if (Model.RatingsFeature?.IsEnabled == true)
-    {
-        @await Component.InvokeAsync(typeof(RatingViewComponent), new
-        {
-            entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType,
-            entityId = Model.BlogPost.Id.ToString()
-        })
-    }
-}
- 
 
 @if (GlobalFeatureManager.Instance.IsEnabled<CommentsFeature>())
 {
diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/Index.cshtml b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/Index.cshtml
index 6e4b7be5d2..c3cc22b91d 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/Index.cshtml
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/Index.cshtml
@@ -7,6 +7,9 @@
 
 @model IndexModel
 
+@section styles{
+    <abp-style src="/Pages/Public/CmsKit/Blogs/index.css" />
+}
 @{
     const string dummyImageSource = "https://dummyimage.com/320x180/a3a3a3/fff.png";
 }
@@ -23,18 +26,18 @@
                 else
                 {
                     <img src="@(dummyImageSource)?text=@blog.Title" class="card-img-top" />
-                } 
-            <abp-card-body class="p-4">
-                <h5>@blog.Title</h5> 
-                <p class="mb-2">
-                    <span class="font-weight-bold">@@@blog.Author?.UserName</span>
-                    <small style="opacity:.65;">@blog.CreationTime</small>
-                </p> 
-                <p style="min-height: 60px;">@blog.ShortDescription</p>
-                <a href="/blogs/@Model.BlogSlug/@blog.Slug" class="btn btn-block btn-light">
-                    @L["Read"]
-                </a>
-            </abp-card-body> 
+                }
+                <abp-card-body class="p-4">
+                    <h5>@blog.Title</h5>
+                    <p class="mb-2">
+                        <span class="font-weight-bold">@@@blog.Author?.UserName</span>
+                        <small style="opacity:.65;">@blog.CreationTime</small>
+                    </p>
+                    <p style="min-height: 60px;">@blog.ShortDescription</p>
+                    <a href="/blogs/@Model.BlogSlug/@blog.Slug" class="btn btn-block btn-light">
+                        @L["Read"]
+                    </a>
+                </abp-card-body>
             </abp-card>
         </abp-column>
 
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 1e385f6de0..f4543f9870 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
@@ -18,3 +18,6 @@ span.area-title {
     padding: 3px;
     display: block;
 }
+.popover {
+    min-width: 276px;
+}
\ No newline at end of file
diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/index.css b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/index.css
new file mode 100644
index 0000000000..48e71edcf9
--- /dev/null
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/index.css
@@ -0,0 +1,6 @@
+.card-img-top { 
+}
+
+.popover {
+    min-width: 276px;
+}
\ No newline at end of file
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 426b5ebacf..7503bcfaa4 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
@@ -5,6 +5,9 @@
 @model Volo.CmsKit.Public.Web.Pages.Public.CmsKit.Pages.IndexModel
 @inject IHtmlLocalizer<CmsKitResource> L
 
+@section styles{
+    <abp-style src="/Pages/Public/CmsKit/Pages/index.css" />
+}
 @await Component.InvokeAsync(typeof(DefaultPageViewComponent),
     new
     {
diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Pages/index.css b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Pages/index.css
new file mode 100644
index 0000000000..48e71edcf9
--- /dev/null
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Pages/index.css
@@ -0,0 +1,6 @@
+.card-img-top { 
+}
+
+.popover {
+    min-width: 276px;
+}
\ No newline at end of file
diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Volo.CmsKit.Public.Web.csproj b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Volo.CmsKit.Public.Web.csproj
index 5f19bdd904..2003412559 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Volo.CmsKit.Public.Web.csproj
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Volo.CmsKit.Public.Web.csproj
@@ -29,4 +29,9 @@
     <Content Remove="Components\**\*.css" />
   </ItemGroup>
 
+  <ItemGroup>
+    <None Remove="Pages\Public\CmsKit\Blogs\index.css" />
+    <None Remove="Pages\Public\CmsKit\Pages\index.css" />
+  </ItemGroup>
+
 </Project>