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 1b3f3ff94c..860c2350ac 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
@@ -48,7 +48,12 @@
     <abp-column size-md="_6">
         @if (GlobalFeatureManager.Instance.IsEnabled<RatingsFeature>())
         {
-            @await Component.InvokeAsync(typeof(RatingViewComponent), new {entityType = "quote", entityId = "1"})
+            @await Component.InvokeAsync(typeof(RatingViewComponent), new 
+            { 
+                entityType = "quote",
+                entityId = "1",
+                isReadOnly = false
+            })
         }
     </abp-column>
     <abp-column size-md="_6">
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 9b7f6e24f7..95879128a7 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,58 +6,59 @@
 @inject IHtmlLocalizer<CmsKitResource> L
 
 <div class="row 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)
+    <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)
+            {
+                @if (!Model.IsReadOnly && Model.CurrentRating != null)
                 {
-                    @if (Model.CurrentRating != null)
-                    {
-                        <a href="#" class="rating-undo-link text-decoration-none">
-                            <small class="text-muted"><i class="fa fa-undo"></i> @L["Undo"]</small>
-                        </a>
-                    }
-                    if (Model.Ratings != null)
-                    {
-                        <a href="#" class="text-muted ms-1 text-decoration-none" data-bs-toggle="modal" data-bs-target="#ratingDetail">
-                            <i class="far fa-question-circle"></i>
-                        </a>
+                    <a href="#" class="rating-undo-link text-decoration-none">
+                        <small class="text-muted"><i class="fa fa-undo"></i> @L["Undo"]</small>
+                    </a>
+                }
+                if (Model.Ratings != null)
+                {
+                    <a href="#" class="text-muted ms-1 text-decoration-none" data-bs-toggle="modal" data-bs-target="#ratingDetail">
+                        <i class="far fa-question-circle"></i>
+                    </a>
 
-                        <div class="modal fade" id="ratingDetail" tabindex="-1" role="dialog" aria-labelledby="ratingDetail" aria-hidden="true">
-                            <div class="modal-dialog modal-dialog-centered" role="document">
-                                <div class="modal-content">
-                                    <div class="modal-header">
-                                        <h5 class="modal-title" id="exampleModalLabel">Rating Detail</h5>
-                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                                    </div>
-                                    <div class="modal-body">
-                                        <div class="row text-center">
-                                            @foreach (var rating in Model.Ratings)
-                                            {
-                                                <div class="col">
-                                                    <label>@rating.StarCount @L["Star"]</label>
-                                                    <div class="bar-container">
-                                                        <div class="bar bar-@rating.StarCount" style="width: @(rating.Count * 100 / Model.TotalRating)%"></div>
-                                                    </div>
-                                                    <div><small class="text-muted">@rating.Count Rate(s)</small> </div>
+                    <div class="modal fade" id="ratingDetail" tabindex="-1" role="dialog" aria-labelledby="ratingDetail" aria-hidden="true">
+                        <div class="modal-dialog modal-dialog-centered" role="document">
+                            <div class="modal-content">
+                                <div class="modal-header">
+                                    <h5 class="modal-title" id="exampleModalLabel">Rating Detail</h5>
+                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                                </div>
+                                <div class="modal-body">
+                                    <div class="row text-center">
+                                        @foreach (var rating in Model.Ratings)
+                                        {
+                                            <div class="col">
+                                                <label>@rating.StarCount @L["Star"]</label>
+                                                <div class="bar-container">
+                                                    <div class="bar bar-@rating.StarCount" style="width: @(rating.Count * 100 / Model.TotalRating)%"></div>
                                                 </div>
-                                            }
-                                        </div>
+                                                <div><small class="text-muted">@rating.Count Rate(s)</small> </div>
+                                            </div>
+                                        }
                                     </div>
                                 </div>
                             </div>
                         </div>
-                    }
+                    </div>
+                }
 
-                    <small class="live-rating text-center d-inline-block" style="width: 24px">@(Model.CurrentRating != null ? Model.CurrentRating + "  " : 0 + "")</small>
+                <small class="live-rating text-center d-inline-block" style="width: 24px">@(Model.CurrentRating != null ? Model.CurrentRating + "  " : 0 + "")</small>
 
-                    <span class="my-rating text-dark p-1" data-rating="@(Model.CurrentRating ?? 0)" data-authenticated="@(Model.CurrentRating != null)">
-                    </span>
-                }
-                else
-                {
-                    <span class="my-rating text-dark p-1" data-authenticated="True" data-bs-toggle="popover" data-bs-placement="right" data-html="true" data-content="<div class='text-center'><div class='d-grid gap-2'><a href='@Model.LoginUrl' class='btn btn-primary'>@L["LoginToRate"]</a></div></div>"></span>
-                    <span class="rating-login"></span>
-                }
-            </div>
+                <span class="my-rating text-dark p-1" data-rating="@(Model.CurrentRating ?? 0)" data-authenticated="@(Model.CurrentRating != null)" data-readonly="@Model.IsReadOnly">
+                </span>
+            }
+            else
+            {
+                <span class="my-rating text-dark p-1" data-authenticated="True" data-bs-toggle="popover" data-bs-placement="right" data-html="true" data-content="<div class='text-center'><div class='d-grid gap-2'><a href='@Model.LoginUrl' class='btn btn-primary'>@L["LoginToRate"]</a></div></div>"></span>
+                <span class="rating-login"></span>
+            }
         </div>
-    </div>
\ No newline at end of file
+    </div>
+</div>
\ No newline at end of file
diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/RatingViewComponent.cs b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/RatingViewComponent.cs
index b928f7e2af..7ab1df47b8 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/RatingViewComponent.cs
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/RatingViewComponent.cs
@@ -31,7 +31,7 @@ public class RatingViewComponent : AbpViewComponent
         CurrentUser = currentUser;
     }
 
-    public virtual async Task<IViewComponentResult> InvokeAsync(string entityType, string entityId)
+    public virtual async Task<IViewComponentResult> InvokeAsync(string entityType, string entityId, bool isReadOnly = false)
     {
         var ratings = await RatingPublicAppService.GetGroupedStarCountsAsync(entityType, entityId);
         var totalRating = ratings.Sum(x => x.Count);
@@ -52,7 +52,8 @@ public class RatingViewComponent : AbpViewComponent
             LoginUrl = loginUrl,
             Ratings = ratings,
             CurrentRating = currentUserRating,
-            TotalRating = totalRating
+            TotalRating = totalRating,
+            IsReadOnly = isReadOnly
         };
 
         return View("~/Pages/CmsKit/Shared/Components/Rating/Default.cshtml", viewModel);
@@ -72,4 +73,6 @@ public class RatingViewModel
     public short? CurrentRating { get; set; }
 
     public int TotalRating { get; set; }
+
+    public bool IsReadOnly { get; set; }
 }
diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/default.js b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/default.js
index 22531b47f3..69bb1bac4f 100644
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/default.js
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/default.js
@@ -15,6 +15,7 @@
         function registerCreateOfNewRating() {
             $widget.find(".my-rating").each(function () {
                     var authenticated = $(this).attr("data-authenticated");
+                    var readonly = $(this).attr("data-readonly");
 
                     $(this).starRating({
                         initialRating: 0,
@@ -26,7 +27,7 @@
                         strokeWidth: 0,
                         disableAfterRate: true,
                         useFullStars: true,
-                        readOnly: authenticated === "True",
+                        readOnly: authenticated === "True" || readonly === "True",
                         onHover: function (currentIndex, currentRating, $el) {
                             $widget.find(".live-rating").text(currentIndex);
                         },