diff --git a/modules/cms-kit/host/Volo.CmsKit.Web.Unified/Pages/Index.cshtml b/modules/cms-kit/host/Volo.CmsKit.Web.Unified/Pages/Index.cshtml
index 9a4f9cb716..02cff93c8f 100644
--- a/modules/cms-kit/host/Volo.CmsKit.Web.Unified/Pages/Index.cshtml
+++ b/modules/cms-kit/host/Volo.CmsKit.Web.Unified/Pages/Index.cshtml
@@ -64,7 +64,7 @@
         }
     </abp-column>
 </abp-row>
-<abp-card>
+<abp-card class="mb-2">
     <abp-card-body class="p-5">
         <abp-blockquote class="text-center">
             <p class="h2 mb-4">
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 4a64c1c4a8..68e97d9318 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
@@ -5,14 +5,8 @@
 @model Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Rating.RatingViewModel
 @inject IHtmlLocalizer<CmsKitResource> L
 
-<div class="p-3 my-3 card">
-    <div class="row form-row">
-        <div class="col-auto text-left">
-            <span class="area-title">
-                @L["Rating"]
-            </span>
-        </div>
-        <div class="col text-right">
+<div class="row form-row">
+        <div class="col">
             <div class="cms-rating-area" data-entity-type="@Model.EntityType" data-entity-id="@Model.EntityId" id="cms-rating_{@Model.EntityType}_{@Model.EntityId}">
                 @if (CurrentUser.IsAuthenticated)
                 {
@@ -58,15 +52,14 @@
 
                     <small class="live-rating text-center d-inline-block" style="width: 24px">@(Model.CurrentRating != null ? Model.CurrentRating + "  " : 0 + "")</small>
 
-                    <span class="my-rating btn btn-secondary btn-sm py-1 ml-2" data-rating="@(Model.CurrentRating ?? 0)" data-authenticated="@(Model.CurrentRating != null)">
+                    <span class="my-rating text-dark p-1" data-rating="@(Model.CurrentRating ?? 0)" data-authenticated="@(Model.CurrentRating != null)">
                     </span>
                 }
                 else
                 {
-                    <span class="my-rating btn btn-secondary btn-sm py-1 ml-2" data-authenticated="True" data-toggle="popover" data-placement="right" data-html="true" data-content="<div class='text-center'><a href='@Model.LoginUrl' class='btn btn-primary btn-block'>@L["LoginToRate"]</a></div>"></span>
+                    <span class="my-rating text-dark p-1" data-authenticated="True" data-toggle="popover" data-placement="right" data-html="true" data-content="<div class='text-center'><a href='@Model.LoginUrl' class='btn btn-primary btn-block'>@L["LoginToRate"]</a></div>"></span>
                     <span class="rating-login"></span>
                 }
             </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/ReactionSelection/Default.cshtml b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/Default.cshtml
index 8aaac7d8db..52cca1d91a 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
@@ -6,14 +6,8 @@
 @model Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.ReactionSelection.ReactionSelectionViewComponent.ReactionSelectionViewModel
 
 
-<div class="p-3 my-3 card">
-    <div class="row form-row">
-        <div class="col-auto text-left">
-            <span class="area-title">
-                @L["Reactions"]
-            </span>
-        </div>
-        <div class="col text-right">
+<div class="row form-row">
+        <div class="col">
             <span class="cms-reaction-area" data-entity-type="@Model.EntityType" data-entity-id="@Model.EntityId">
 
                 @foreach (var reaction in Model.Reactions.Where(r => r.Count > 0))
@@ -25,7 +19,7 @@
                 }
                 @if (CurrentUser.IsAuthenticated)
                 {
-                    <a class="cms-reaction-select-icon btn btn-secondary text-light btn-sm py-1 ml-2" href="javascript:;">
+                    <a class="cms-reaction-select-icon text-dark p-1" href="javascript:;">
                         <i class="fa fa-smile-o"></i>
                     </a>
                     <div class="cms-reaction-selection-popover-content" style="display: none">
@@ -39,11 +33,10 @@
                 }
                 else
                 {
-                    <span class="ms-reaction-select-icon btn btn-secondary text-light btn-sm py-1 ml-2" data-authenticated="True" data-toggle="popover" data-placement="right" data-html="true" data-content="<div class='text-center'><a href='@Model.LoginUrl' class='btn btn-primary btn-block'>@L["LoginToReact"]</a></div>">
+                    <span class="ms-reaction-select-icon text-dark p-1" data-authenticated="True" data-toggle="popover" data-placement="right" data-html="true" data-content="<div class='text-center'><a href='@Model.LoginUrl' class='btn btn-primary btn-block'>@L["LoginToReact"]</a></div>">
                         <i class="fa fa-smile-o"></i>
                     </span>
                 }
             </span>
         </div>
-    </div>
-</div>
\ No newline at end of file
+    </div>
\ No newline at end of file