diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Blogs/BlogPost/Default.cshtml b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Blogs/BlogPost/Default.cshtml
index ebf337ae3d..37a9fd42f3 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Blogs/BlogPost/Default.cshtml
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Blogs/BlogPost/Default.cshtml
@@ -28,25 +28,4 @@
             </div>
         </abp-row>
     </abp-card-body> 
-</abp-card>
-
-
-<style>
-    .card-body img { 
-        width: 100%;
-        border-radius: 4px;
-        margin: 20px 0;
-    }
-    .badge.badge-light {
-        color: #757575;
-        background: #f2f2f2;
-    }
-    .reaction-in-comment span.area-title {
-        display: none;
-    }
-    span.area-title {
-        font-weight: 600;
-        padding: 3px;
-        display: block;
-    }
-</style>
\ No newline at end of file
+</abp-card>
\ No newline at end of file
diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Blogs/BlogPost/DefaultBlogPostViewComponent.cs b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Blogs/BlogPost/DefaultBlogPostViewComponent.cs
index 90dc2a6ab0..24368728cd 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Blogs/BlogPost/DefaultBlogPostViewComponent.cs
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Blogs/BlogPost/DefaultBlogPostViewComponent.cs
@@ -5,11 +5,15 @@ using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
 using Volo.Abp.AspNetCore.Mvc;
+using Volo.Abp.AspNetCore.Mvc.UI.Widgets;
 using Volo.CmsKit.Public.Blogs;
 
 namespace Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Blogs.BlogPost
 {
-    [ViewComponent(Name = "CmsDefaultBlogPost")]
+    [Widget(StyleFiles = new[]
+    {
+        "/Pages/CmsKit/Shared/Components/Blogs/BlogPost/default.css"
+    })]
     public class DefaultBlogPostViewComponent : AbpViewComponent
     {
         protected IBlogPostPublicAppService BlogPostPublicAppService { get; }
diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Blogs/BlogPost/default.css b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Blogs/BlogPost/default.css
new file mode 100644
index 0000000000..1e385f6de0
--- /dev/null
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Blogs/BlogPost/default.css
@@ -0,0 +1,20 @@
+.card-body img {
+    max-width: 100%;
+    border-radius: 4px;
+    margin: 20px 0;
+}
+
+.badge.badge-light {
+    color: #757575;
+    background: #f2f2f2;
+}
+
+.reaction-in-comment span.area-title {
+    display: none;
+}
+
+span.area-title {
+    font-weight: 600;
+    padding: 3px;
+    display: block;
+}
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 119813310d..0e836f9508 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
@@ -56,8 +56,9 @@
                         </div>
                     }
 
+                    <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)">
-                        <small class="live-rating text-center d-inline-block" style="width: 24px">@(Model.CurrentRating != null ? Model.CurrentRating + "  " : 0 + "")</small>
                     </span>
                 }
                 else
@@ -68,15 +69,4 @@
             </div>
         </div>
     </div>
-</div>
-<style>
-    .reaction-in-comment span.area-title {
-        display: none;
-    }
-
-    span.area-title {
-        font-weight: 600;
-        padding: 3px;
-        display: block;
-    }
-</style>
\ 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/Rating/default.css b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/default.css
index eb46cf8f04..67c5ffa173 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
@@ -49,4 +49,13 @@
 }
 .rating-undo-link:hover {
     text-decoration:none;
+}
+.reaction-in-comment span.area-title {
+    display: none;
+}
+
+span.area-title {
+    font-weight: 600;
+    padding: 3px;
+    display: block;
 }
\ 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 b96f3332bb..9e4882125e 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
@@ -39,16 +39,4 @@
             </div>
         </div>
     </div>
-}
-
-<style>
-    .reaction-in-comment span.area-title {
-        display: none;
-    }
-
-    span.area-title {
-        font-weight: 600;
-        padding: 3px;
-        display: block;
-    }
-</style>
\ 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/ReactionSelection/default.css b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/default.css
index 7ce8d0fc02..5e3e2a4bbb 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
@@ -5,4 +5,13 @@
     width: 25%;
     display: inline-block;
     float: left;
+}
+.reaction-in-comment span.area-title {
+    display: none;
+}
+
+span.area-title {
+    font-weight: 600;
+    padding: 3px;
+    display: block;
 }
\ 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 f9b94206e5..7c608e4da1 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
@@ -25,16 +25,4 @@
                 </div>
             </div>
         </div>
-    </div>
-
-    <style>
-        .reaction-in-comment span.area-title {
-            display: none;
-        }
-
-        span.area-title {
-            font-weight: 600;
-            padding: 3px;
-            display: block;
-        }
-    </style>
\ 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/TagViewComponent.cs b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Tags/TagViewComponent.cs
index c40408117a..3af0472b29 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Tags/TagViewComponent.cs
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Tags/TagViewComponent.cs
@@ -5,12 +5,17 @@ using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
 using Volo.Abp.AspNetCore.Mvc;
+using Volo.Abp.AspNetCore.Mvc.UI.Widgets;
 using Volo.CmsKit.Public.Tags;
 using Volo.CmsKit.Tags;
 
 namespace Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Tags
 {
-    [ViewComponent(Name = "CmsTags")]
+    [Widget(
+        StyleFiles = new[]
+        {
+            "/Pages/CmsKit/Shared/Components/Blogs/BlogPost/default.css"
+        })]
     public class TagViewComponent : AbpViewComponent
     {
         protected readonly ITagAppService TagAppService;
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
new file mode 100644
index 0000000000..3fe8fa4646
--- /dev/null
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Tags/default.css
@@ -0,0 +1,10 @@
+
+.reaction-in-comment span.area-title {
+    display: none;
+}
+
+span.area-title {
+    font-weight: 600;
+    padding: 3px;
+    display: block;
+}