diff --git a/modules/productcomments/views/templates/hook/alert-modal.tpl b/modules/productcomments/views/templates/hook/alert-modal.tpl
index 33457613e..8eeda6249 100644
--- a/modules/productcomments/views/templates/hook/alert-modal.tpl
+++ b/modules/productcomments/views/templates/hook/alert-modal.tpl
@@ -3,7 +3,7 @@
  * file that was distributed with this source code.
  *}
 
-{assign var='icon' value=$icon|default:'check_circle'}
+{assign var='icon' value=$icon|default:'check'}
 {assign var='modal_message' value=$modal_message|default:''}
 
 <script type="text/javascript">
@@ -19,22 +19,24 @@
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <p class="h2">
+        <p class="h2 mb-0">
           <i class="material-icons {$icon}" data-icon="{$icon}"></i>
           {$modal_title}
         </p>
       </div>
+      
       <div class="modal-body">
         <div class="row">
           <div class="col-md-12  col-sm-12" id="{$modal_id}-message">
             {$modal_message}
           </div>
         </div>
-        <div class="modal-footer post-comment-buttons">
-          <button type="button" class="btn btn-primary" data-bs-dismiss="modal" aria-label="{l s='OK' d='Modules.Productcomments.Shop'}">
-            {l s='OK' d='Modules.Productcomments.Shop'}
-          </button>
-        </div>
+      </div>
+
+      <div class="modal-footer">
+        <button type="button" class="btn btn-primary" data-bs-dismiss="modal" aria-label="{l s='OK' d='Modules.Productcomments.Shop'}">
+          {l s='OK' d='Modules.Productcomments.Shop'}
+        </button>
       </div>
     </div>
   </div>
diff --git a/modules/productcomments/views/templates/hook/confirm-modal.tpl b/modules/productcomments/views/templates/hook/confirm-modal.tpl
index b595da523..d52dba941 100644
--- a/modules/productcomments/views/templates/hook/confirm-modal.tpl
+++ b/modules/productcomments/views/templates/hook/confirm-modal.tpl
@@ -3,7 +3,7 @@
  * file that was distributed with this source code.
  *}
 
-{assign var='icon' value=$icon|default:'check_circle'}
+{assign var='icon' value=$icon|default:'check'}
 {assign var='modal_message' value=$modal_message|default:''}
 
 <script type="text/javascript">
@@ -32,20 +32,20 @@
           {$modal_title}
         </p>
       </div>
+
       <div class="modal-body">
         <div id="{$modal_id}-message">
           {$modal_message}
         </div>
-        <div class="modal-footer">
-          <div class="post-comment-buttons">
-            <button type="button" class="btn btn-outline-primary me-2 refuse-button" data-bs-dismiss="modal" aria-label="{l s='No' d='Modules.Productcomments.Shop'}">
-              {l s='No' d='Modules.Productcomments.Shop'}
-            </button>
-            <button type="button" class="btn btn-primary confirm-button" data-bs-dismiss="modal" aria-label="{l s='Yes' d='Modules.Productcomments.Shop'}">
-              {l s='Yes' d='Modules.Productcomments.Shop'}
-            </button>
-          </div>
-        </div>
+      </div>
+
+      <div class="modal-footer">
+        <button type="button" class="btn btn-outline-primary me-2 refuse-button" data-bs-dismiss="modal" aria-label="{l s='No' d='Modules.Productcomments.Shop'}">
+          {l s='No' d='Modules.Productcomments.Shop'}
+        </button>
+        <button type="button" class="btn btn-primary confirm-button" data-bs-dismiss="modal" aria-label="{l s='Yes' d='Modules.Productcomments.Shop'}">
+          {l s='Yes' d='Modules.Productcomments.Shop'}
+        </button>
       </div>
     </div>
   </div>
diff --git a/modules/productcomments/views/templates/hook/empty-product-comment.tpl b/modules/productcomments/views/templates/hook/empty-product-comment.tpl
index dd6f3ffa3..f99f2e181 100644
--- a/modules/productcomments/views/templates/hook/empty-product-comment.tpl
+++ b/modules/productcomments/views/templates/hook/empty-product-comment.tpl
@@ -5,7 +5,7 @@
 
 <div id="empty-product-comment" class="product-comment-list-item py-3">
   {if $post_allowed}
-    <button class="btn btn-primary btn-with-icon post-product-comment">
+    <button class="btn btn-outline-primary btn-with-icon post-product-comment">
       <i class="material-icons" aria-hidden="true">&#xE3C9;</i>
       {l s='Be the first to write your review' d='Modules.Productcomments.Shop'}
     </button>
diff --git a/modules/productcomments/views/templates/hook/post-comment-modal.tpl b/modules/productcomments/views/templates/hook/post-comment-modal.tpl
index 9c6ed14cf..e6c82d271 100644
--- a/modules/productcomments/views/templates/hook/post-comment-modal.tpl
+++ b/modules/productcomments/views/templates/hook/post-comment-modal.tpl
@@ -11,160 +11,159 @@
 
 <div id="post-product-comment-modal" class="modal fade product-comment-modal" role="dialog" aria-hidden="true">
   <div class="modal-dialog" role="document">
-    <div class="modal-content">
+    <form class="modal-content" id="post-product-comment-form" action="{$post_comment_url nofilter}" method="POST">
       <div class="modal-header">
         <p class="h4 mb-0">{l s='Write your review' d='Modules.Productcomments.Shop'}</p>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
-      <div class="modal-body">
-        <form id="post-product-comment-form" action="{$post_comment_url nofilter}" method="POST">
-          <div class="row">
-            <div class="col-5 col-sm-2 mb-4">
-              {if isset($product) && $product}
-                {block name='product_flags'}
-                  <ul class="product-flags">
-                    {foreach from=$product.flags item=flag}
-                      <li class="product-flag {$flag.type}">{$flag.label}</li>
-                    {/foreach}
-                  </ul>
-                {/block}
-
-                {block name='product_cover'}
-                  <div class="product-cover">
-                    {if !empty($product.cover)}
-                      <picture>
-                        {if isset($product.cover.bySize.default_xs.sources.avif)}
-                          <source 
-                            srcset="
-                              {$product.cover.bySize.default_xs.sources.avif},
-                              {$product.cover.bySize.default_m.sources.avif} 2x"
-                            type="image/avif"
-                          >
-                        {/if}
 
-                        {if isset($product.cover.bySize.default_xs.sources.webp)}
-                          <source 
-                            srcset="
-                              {$product.cover.bySize.default_xs.sources.webp},
-                              {$product.cover.bySize.default_m.sources.webp} 2x"
-                            type="image/webp"
-                          >
-                        {/if}
+      <div class="modal-body">
+        <div class="row">
+          <div class="col-12 col-sm-2 mb-4">
+            {if isset($product) && $product}
+              {block name='product_cover'}
+                <div class="product__cover">
+                  {if !empty($product.cover)}
+                    <picture>
+                      {if isset($product.cover.bySize.default_xs.sources.avif)}
+                        <source 
+                          srcset="
+                            {$product.cover.bySize.default_xs.sources.avif},
+                            {$product.cover.bySize.default_m.sources.avif} 2x"
+                          type="image/avif"
+                        >
+                      {/if}
 
-                        <img
-                          class="js-qv-product-cover rounded img-fluid"
+                      {if isset($product.cover.bySize.default_xs.sources.webp)}
+                        <source 
                           srcset="
-                            {$product.cover.bySize.default_xs.url},
-                            {$product.cover.bySize.default_m.url} 2x"
-                          loading="lazy"
-                          width="{$product.cover.bySize.default_xs.width}"
-                          height="{$product.cover.bySize.default_xs.height}"
-                          alt="{$product.cover.legend}"
-                          title="{$product.cover.legend}"
+                            {$product.cover.bySize.default_xs.sources.webp},
+                            {$product.cover.bySize.default_m.sources.webp} 2x"
+                          type="image/webp"
                         >
-                      </picture>
-                    {else}
-                      <picture>
-                        {if isset($urls.no_picture_image.bySize.default_xs.sources.avif)}
-                          <source 
-                            srcset="
-                              {$urls.no_picture_image.bySize.default_xs.sources.avif},
-                              {$urls.no_picture_image.bySize.default_m.sources.avif} 2x"
-                            type="image/avif"
-                          >
-                        {/if}
+                      {/if}
 
-                        {if isset($urls.no_picture_image.bySize.default_xs.sources.webp)}
-                          <source 
-                            srcset="
-                              {$urls.no_picture_image.bySize.default_xs.sources.webp},
-                              {$urls.no_picture_image.bySize.default_m.sources.webp} 2x"
-                            type="image/webp"
-                          >
-                        {/if}
+                      <img
+                        class="js-qv-product-cover rounded img-fluid"
+                        srcset="
+                          {$product.cover.bySize.default_xs.url},
+                          {$product.cover.bySize.default_m.url} 2x"
+                        loading="lazy"
+                        width="{$product.cover.bySize.default_xs.width}"
+                        height="{$product.cover.bySize.default_xs.height}"
+                        alt="{$product.cover.legend}"
+                        title="{$product.cover.legend}"
+                      >
+                    </picture>
+                  {else}
+                    <picture>
+                      {if isset($urls.no_picture_image.bySize.default_xs.sources.avif)}
+                        <source 
+                          srcset="
+                            {$urls.no_picture_image.bySize.default_xs.sources.avif},
+                            {$urls.no_picture_image.bySize.default_m.sources.avif} 2x"
+                          type="image/avif"
+                        >
+                      {/if}
 
-                        <img
-                          class="rounded img-fluid"
+                      {if isset($urls.no_picture_image.bySize.default_xs.sources.webp)}
+                        <source 
                           srcset="
-                            {$urls.no_picture_image.bySize.default_xs.url},
-                            {$urls.no_picture_image.bySize.default_m.url} 2x"
-                          width="{$urls.no_picture_image.bySize.default_xs.width}"
-                          height="{$urls.no_picture_image.bySize.default_xs.height}"
-                          loading="lazy"
+                            {$urls.no_picture_image.bySize.default_xs.sources.webp},
+                            {$urls.no_picture_image.bySize.default_m.sources.webp} 2x"
+                          type="image/webp"
                         >
-                      </picture>
-                    {/if}
-                  </div>
-                {/block}
-              {/if}
-            </div>
-            <div class="col-7 col-sm-5">
-              <p class="h5">{$product.name}</p>
-              {block name='product_description_short'}
-                <div itemprop="description">{$product.description_short nofilter}</div>
-              {/block}
-            </div>
-            <div class="col-sm-5">
-              {if $criterions|@count > 0}
-                <ul id="criterions_list">
-                  {foreach from=$criterions item='criterion'}
-                    <li class="mb-2">
-                      <div class="criterion-rating">
-                        <label>{$criterion.name|escape:'html':'UTF-8'}:</label>
-                        <div
-                          class="grade-stars"
-                          data-grade="3"
-                          data-input="criterion[{$criterion.id_product_comment_criterion}]">
-                        </div>
-                      </div>
-                    </li>
-                  {/foreach}
-                </ul>
-              {/if}
-            </div>
-          </div>
+                      {/if}
 
-          <div class="row">
-            {if !$logged}
-              <div class="col-sm-8">
-                <label class="form-label" for="comment_title">{l s='Title' d='Modules.Productcomments.Shop'}<sup class="required">*</sup></label>
-                <input class="form-control" name="comment_title" type="text" value=""/>
-              </div>
-              <div class="col-sm-4">
-                <label class="form-label" for="customer_name">{l s='Your name' d='Modules.Productcomments.Shop'}<sup class="required">*</sup></label>
-                <input class="form-control" name="customer_name" type="text" value=""/>
-              </div>
-            {else}
-              <div class="mb-3">
-                <label class="form-label" for="comment_title">{l s='Title' d='Modules.Productcomments.Shop'}<sup class="required">*</sup></label>
-                <input class="form-control" name="comment_title" type="text" value=""/>
-              </div>
+                      <img
+                        class="rounded img-fluid"
+                        srcset="
+                          {$urls.no_picture_image.bySize.default_xs.url},
+                          {$urls.no_picture_image.bySize.default_m.url} 2x"
+                        width="{$urls.no_picture_image.bySize.default_xs.width}"
+                        height="{$urls.no_picture_image.bySize.default_xs.height}"
+                        loading="lazy"
+                      >
+                    </picture>
+                  {/if}
+                </div>
+              {/block}
             {/if}
           </div>
 
-          <div class="mb-3">
-            <label class="form-label" for="comment_content">{l s='Review' d='Modules.Productcomments.Shop'}<sup class="required">*</sup></label>
-            <textarea class="form-control" name="comment_content"></textarea>
+          <div class="col-12 col-sm-10">
+            <p class="product__title">{$product.name}</p>
+            {block name='product_description_short'}
+              <div class="product__description" itemprop="description">{$product.description_short nofilter}</div>
+            {/block}
           </div>
 
-          <div class="mb-3">
-            {hook h='displayGDPRConsent' mod='psgdpr' id_module=$id_module}
+          <div class="col-12">
+            {if $criterions|@count > 0}
+              <ul id="criterions_list">
+                {foreach from=$criterions item='criterion'}
+                  <li class="mb-2">
+                    <div class="criterion-rating">
+                      <label>
+                        {$criterion.name|escape:'html':'UTF-8'}<sup class="required text-danger">*</sup>
+                      </label>
+                      
+                      <div
+                        class="grade-stars"
+                        data-grade="3"
+                        data-input="criterion[{$criterion.id_product_comment_criterion}]">
+                      </div>
+                    </div>
+                  </li>
+                {/foreach}
+              </ul>
+            {/if}
           </div>
+        </div>
 
-          <div class="modal-footer">
-            <p class="required"><sup>*</sup> {l s='Required fields' d='Modules.Productcomments.Shop'}</p>
-            <div class="post-comment-buttons">
-              <button type="button" class="btn btn-outline-primary me-2" data-bs-dismiss="modal" aria-label="{l s='Cancel' d='Modules.Productcomments.Shop'}">
-                {l s='Cancel' d='Modules.Productcomments.Shop'}
-              </button>
-              <button type="submit" class="btn btn-primary">
-                {l s='Send' d='Modules.Productcomments.Shop'}
-              </button>
+        <div class="row">
+          {if !$logged}
+            <div class="col-sm-8 mb-3">
+              <label class="form-label" for="comment_title">{l s='Title' d='Modules.Productcomments.Shop'}<sup class="required">*</sup></label>
+              <input class="form-control" name="comment_title" type="text" value=""/>
             </div>
+            <div class="col-sm-4 mb-3">
+              <label class="form-label" for="customer_name">{l s='Your name' d='Modules.Productcomments.Shop'}<sup class="required">*</sup></label>
+              <input class="form-control" name="customer_name" type="text" value=""/>
+            </div>
+          {else}
+            <div class="mb-3">
+              <label class="form-label" for="comment_title">{l s='Title' d='Modules.Productcomments.Shop'}<sup class="required">*</sup></label>
+              <input class="form-control" name="comment_title" type="text" value=""/>
+            </div>
+          {/if}
+        </div>
+
+        <div class="mb-3">
+          <label class="form-label" for="comment_content">{l s='Review' d='Modules.Productcomments.Shop'}<sup class="required">*</sup></label>
+          <textarea class="form-control" name="comment_content"></textarea>
+        </div>
+        
+        {capture name='gdprContent'}{hook h='displayGDPRConsent' mod='psgdpr' id_module=$id_module}{/capture}
+        {if $smarty.capture.gdprContent != ''}
+          <div class="mb-3">
+            {$smarty.capture.gdprContent nofilter}
           </div>
-        </form>
+        {/if}
+      </div>
+
+      <div class="modal-footer">
+        <p><sup>*</sup> {l s='Required fields' d='Modules.Productcomments.Shop'}</p>
+        <div class="d-flex flex-wrap w-100 w-md-auto">
+          <button type="button" class="btn btn-outline-primary me-0 me-md-2 w-md-auto w-100" data-bs-dismiss="modal" aria-label="{l s='Cancel' d='Modules.Productcomments.Shop'}">
+            {l s='Cancel' d='Modules.Productcomments.Shop'}
+          </button>
+          <button type="submit" class="btn btn-primary w-md-auto w-100 mb-3 mb-md-0 order-first order-md-last">
+            {l s='Send' d='Modules.Productcomments.Shop'}
+          </button>
+        </div>
       </div>
-    </div>
+    </form>
   </div>
 </div>
 
diff --git a/modules/productcomments/views/templates/hook/product-additional-info.tpl b/modules/productcomments/views/templates/hook/product-additional-info.tpl
index ea47e1bef..9cfdacba3 100644
--- a/modules/productcomments/views/templates/hook/product-additional-info.tpl
+++ b/modules/productcomments/views/templates/hook/product-additional-info.tpl
@@ -7,7 +7,7 @@
   <div class="product-comments-additional-info">
     {if $nb_comments == 0}
       {if $post_allowed}
-        <button class="btn btn-primary btn-with-icon post-product-comment">
+        <button class="btn btn-outline-primary btn-with-icon post-product-comment">
           <i class="material-icons edit" data-icon="edit"></i>
           {l s='Write your review' d='Modules.Productcomments.Shop'}
         </button>
diff --git a/modules/productcomments/views/templates/hook/product-comment-item-prototype.tpl b/modules/productcomments/views/templates/hook/product-comment-item-prototype.tpl
new file mode 100644
index 000000000..497e61f82
--- /dev/null
+++ b/modules/productcomments/views/templates/hook/product-comment-item-prototype.tpl
@@ -0,0 +1,41 @@
+{**
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ *}
+
+<div class="product-comment-list-item comment" data-product-comment-id="@COMMENT_ID@" data-product-id="@PRODUCT_ID@">
+  <div class="comment-top">
+    <div class="comment-author">
+      @CUSTOMER_NAME@
+    </div>
+
+    <div class="comment-date">
+      @COMMENT_DATE@
+    </div>
+  </div>
+
+  <div class="comment-infos">
+    <div class="grade-stars" data-grade="@COMMENT_GRADE@"></div>
+    <p class="comment-title">@COMMENT_TITLE@</p>
+  </div>
+
+  <div class="comment-content">
+    <p class="comment-text">@COMMENT_COMMENT@</p>
+  </div>
+
+  <div class="comment-buttons">
+    {if $usefulness_enabled}
+      <a class="useful-review">
+        <i class="material-icons thumb_up" data-icon="thumb_up"></i>
+        <span class="useful-review-value">@COMMENT_USEFUL_ADVICES@</span>
+      </a>
+      <a class="not-useful-review">
+        <i class="material-icons thumb_down" data-icon="thumb_down"></i>
+        <span class="not-useful-review-value">@COMMENT_NOT_USEFUL_ADVICES@</span>
+      </a>
+    {/if}
+    <a class="report-abuse" title="{l s='Report abuse' d='Modules.Productcomments.Shop'}">
+      <i class="material-icons flag" data-icon="flag"></i> {l s='Report abuse' d='Modules.Productcomments.Shop'}
+    </a>
+  </div>
+</div>
diff --git a/modules/productcomments/views/templates/hook/product-comments-list.tpl b/modules/productcomments/views/templates/hook/product-comments-list.tpl
index 9fcc350d4..60cfe32ae 100644
--- a/modules/productcomments/views/templates/hook/product-comments-list.tpl
+++ b/modules/productcomments/views/templates/hook/product-comments-list.tpl
@@ -3,75 +3,85 @@
  * file that was distributed with this source code.
  *}
 
-<script type="text/javascript">
-  var productCommentUpdatePostErrorMessage = '{l|escape:'javascript' s='Sorry, your review appreciation cannot be sent.' d='Modules.Productcomments.Shop'}';
-  var productCommentAbuseReportErrorMessage = '{l|escape:'javascript' s='Sorry, your abuse report cannot be sent.' d='Modules.Productcomments.Shop'}';
-</script>
+<div class="product-comments-wrapper my-3">
+  <script type="text/javascript">
+    var productCommentUpdatePostErrorMessage = '{l|escape:'javascript' s='Sorry, your review appreciation cannot be sent.' d='Modules.Productcomments.Shop'}';
+    var productCommentAbuseReportErrorMessage = '{l|escape:'javascript' s='Sorry, your abuse report cannot be sent.' d='Modules.Productcomments.Shop'}';
+  </script>
 
-<div id="product-comments-list-header">
-  <div class="comments-nb">
-    {l s='Comments' d='Modules.Productcomments.Shop'} ({$nb_comments})
+  <div id="product-comments-list-header">
+    <h2 class="section-title">
+      {l s='Comments' d='Modules.Productcomments.Shop'} ({$nb_comments})
+    </h2>
+    {include file='module:productcomments/views/templates/hook/average-grade-stars.tpl' grade=$average_grade showGradeAverage=true showNbComments=false}
   </div>
-  {include file='module:productcomments/views/templates/hook/average-grade-stars.tpl' grade=$average_grade showGradeAverage=true showNbComments=false}
-</div>
 
-{include file='module:productcomments/views/templates/hook/product-comment-item-prototype.tpl' assign="comment_prototype"}
-{include file='module:productcomments/views/templates/hook/empty-product-comment.tpl'}
+  {if $post_allowed && $nb_comments != 0}
+    <div id="product-comments-list-btn-group">
+      <button class="w-100 w-sm-auto btn btn-outline-primary post-product-comment">
+        {l s='Write your review' d='Modules.Productcomments.Shop'}
+      </button>
+    </div>
+  {/if}
 
-<div id="product-comments-list" data-list-comments-url="{$list_comments_url nofilter}"
-  data-update-comment-usefulness-url="{$update_comment_usefulness_url nofilter}"
-  data-report-comment-url="{$report_comment_url nofilter}"
-  data-comment-item-prototype="{$comment_prototype|escape:'html'}" data-current-page="1"
-  data-total-pages="{$list_total_pages}">
-</div>
+  {include file='module:productcomments/views/templates/hook/product-comment-item-prototype.tpl' assign="comment_prototype"}
+  {include file='module:productcomments/views/templates/hook/empty-product-comment.tpl'}
 
-<div id="product-comments-list-footer">
-  <div id="product-comments-list-pagination">
-    {if $list_total_pages > 0}
-      <ul>
-        {assign var = "prevCount" value = 0}
-        <li id="pcl_page_{$prevCount}"><span class="prev"><i class="material-icons">chevron_left</i></span></li>
-        {for $pageCount = 1 to $list_total_pages}
-          <li id="pcl_page_{$pageCount}"><span>{$pageCount}</span></li>
-        {/for}
-        {assign var = "nextCount" value = $list_total_pages + 1}
-        <li id="pcl_page_{$nextCount}"><span class="next"><i class="material-icons">chevron_right</i></span></li>
-      </ul>
-    {/if}
+  <div id="product-comments-list" data-list-comments-url="{$list_comments_url nofilter}"
+    data-update-comment-usefulness-url="{$update_comment_usefulness_url nofilter}"
+    data-report-comment-url="{$report_comment_url nofilter}"
+    data-comment-item-prototype="{$comment_prototype|escape:'html'}" data-current-page="1"
+    data-total-pages="{$list_total_pages}">
   </div>
-  {if $post_allowed && $nb_comments != 0}
-    <button class="btn btn-primary btn-with-icon post-product-comment">
-      <i class="material-icons edit" data-icon="edit"></i>
-      {l s='Write your review' d='Modules.Productcomments.Shop'}
-    </button>
+
+  {if $list_total_pages > 0}
+    <div id="product-comments-list-footer">
+      <nav id="product-comments-list-pagination">
+        <ul class="pagination justify-content-center">
+          {assign var = "prevCount" value = 0}
+          <li class="page-item" id="pcl_page_{$prevCount}">
+            <button class="page-link btn prev"><i class="material-icons">chevron_left</i></button>
+          </li>
+          {for $pageCount = 1 to $list_total_pages}
+            <li class="page-item" id="pcl_page_{$pageCount}">
+              <button class="page-link btn">{$pageCount}</button>
+            </li>
+          {/for}
+          {assign var = "nextCount" value = $list_total_pages + 1}
+          <li class="page-item" id="pcl_page_{$nextCount}">
+            <button class="page-link btn next"><i class="material-icons">chevron_right</i></button>
+          </li>
+        </ul>
+      </nav>
+    </div>
   {/if}
-</div>
 
-{* Appreciation post error modal *}
-{include file='module:productcomments/views/templates/hook/alert-modal.tpl'
-  modal_id='update-comment-usefulness-post-error'
-  modal_title={l s='Your review appreciation cannot be sent' d='Modules.Productcomments.Shop'}
-  icon='error'
-}
+  {* Appreciation post error modal *}
+  {include file='module:productcomments/views/templates/hook/alert-modal.tpl'
+    modal_id='update-comment-usefulness-post-error'
+    modal_title={l s='Your review appreciation cannot be sent' d='Modules.Productcomments.Shop'}
+    icon='error'
+  }
 
-{* Confirm report modal *}
-{include file='module:productcomments/views/templates/hook/confirm-modal.tpl'
-  modal_id='report-comment-confirmation'
-  modal_title={l s='Report comment' d='Modules.Productcomments.Shop'}
-  modal_message={l s='Are you sure that you want to report this comment?' d='Modules.Productcomments.Shop'}
-  icon='feedback'
-}
+  {* Confirm report modal *}
+  {include file='module:productcomments/views/templates/hook/confirm-modal.tpl'
+    modal_id='report-comment-confirmation'
+    modal_title={l s='Report comment' d='Modules.Productcomments.Shop'}
+    modal_message={l s='Are you sure that you want to report this comment?' d='Modules.Productcomments.Shop'}
+    icon='feedback'
+  }
 
-{* Report comment posted modal *}
-{include file='module:productcomments/views/templates/hook/alert-modal.tpl'
-  modal_id='report-comment-posted'
-  modal_title={l s='Report sent' d='Modules.Productcomments.Shop'}
-  modal_message={l s='Your report has been submitted and will be considered by a moderator.' d='Modules.Productcomments.Shop'}
-}
+  {* Report comment posted modal *}
+  {include file='module:productcomments/views/templates/hook/alert-modal.tpl'
+    modal_id='report-comment-posted'
+    modal_title={l s='Report sent' d='Modules.Productcomments.Shop'}
+    modal_message={l s='Your report has been submitted and will be considered by a moderator.' d='Modules.Productcomments.Shop'}
+  }
 
-{* Report abuse error modal *}
-{include file='module:productcomments/views/templates/hook/alert-modal.tpl'
-  modal_id='report-comment-post-error'
-  modal_title={l s='Your report cannot be sent' d='Modules.Productcomments.Shop'}
-  icon='error'
-}
+  {* Report abuse error modal *}
+  {include file='module:productcomments/views/templates/hook/alert-modal.tpl'
+    modal_id='report-comment-post-error'
+    modal_title={l s='Your report cannot be sent' d='Modules.Productcomments.Shop'}
+    icon='error'
+  }
+</div>
diff --git a/src/img/small_stars.png b/src/img/small_stars.png
new file mode 100644
index 000000000..02c688237
Binary files /dev/null and b/src/img/small_stars.png differ
diff --git a/src/img/stars.png b/src/img/stars.png
new file mode 100644
index 000000000..84fb4738a
Binary files /dev/null and b/src/img/stars.png differ
diff --git a/src/scss/core/modules/_productcomments.scss b/src/scss/core/modules/_productcomments.scss
index 8ba9adc53..f09e103a4 100644
--- a/src/scss/core/modules/_productcomments.scss
+++ b/src/scss/core/modules/_productcomments.scss
@@ -21,6 +21,82 @@
   .average-grade {
     align-self: center;
     margin-left: 0.25rem;
+    color: var(--bs-gray-600);
+  }
+}
+
+.star-content div.star,
+.star-content div.star-on,
+.star-content div.star-hover {
+  // stylelint-disable-next-line
+  background-image: url("../img/stars.png") !important;
+}
+
+.small-stars .star-content div.star,
+.small-stars .star-content div.star-on,
+.small-stars .star-content div.star-hover {
+  // stylelint-disable-next-line
+  background-image: url("../img/small_stars.png") !important;
+}
+
+// Comment modal
+.modal.product-comment-modal {
+  --bs-modal-padding: 1.5rem;
+  --bs-modal-header-padding: 1.5rem;
+
+  .modal {
+    &-dialog {
+      width: auto;
+    }
+
+    &-header {
+      padding: var(--bs-modal-header-padding);
+      padding-bottom: calc(var(--bs-modal-header-padding) * 0.5);
+
+      .material-icons {
+        font-size: 1.5rem;
+        line-height: 1;
+        color: var(--bs-primary);
+
+        &.check {
+          color: var(--bs-success);
+        }
+
+        &.error {
+          color: var(--bs-danger);
+        }
+
+        &.feedback {
+          color: var(--bs-warning);
+        }
+      }
+    }
+
+    &-body {
+      padding: var(--bs-modal-padding);
+      padding-block: calc(var(--bs-modal-header-padding) * 0.5);
+    }
+
+    &-footer {
+      padding: calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * 0.5);
+    }
+  }
+
+  input[name="comment_title"].error,
+  input[name="customer_name"].error,
+  textarea.error {
+    @extend .is-invalid;
+  }
+
+  input[name="comment_title"].valid,
+  input[name="customer_name"].valid,
+  textarea.valid {
+    @extend .is-valid;
+  }
+
+  textarea,
+  .form-control {
+    @extend .form-control;
   }
 }
 
@@ -41,6 +117,7 @@
   .product-list-reviews {
     position: initial;
     inset: auto;
+    display: flex;
     justify-content: start;
     padding: 0.5rem 0 1rem;
 
@@ -56,47 +133,292 @@
   inset: auto;
   align-items: center;
   justify-content: start;
-  padding: 0.5rem 0 1.5rem;
+  padding: 0 0 1rem;
+
+  .grade-stars {
+    height: 20px;
+  }
 }
 
 // Specific product page styles
 .page-product {
+  .product-comments-additional-info {
+    display: flex;
+    flex: 0 0 0;
+    gap: 1rem;
+    align-items: center;
+    margin: 1rem 0 0;
+
+    .comments-note {
+      margin: 0;
+    }
+
+    .additional-links {
+      display: flex;
+      gap: 1rem;
+      align-items: center;
+      width: 100%;
+
+      .link-comment {
+        display: flex;
+        gap: 0.25rem;
+        align-items: center;
+        padding-inline: 0;
+        margin-inline: 0;
+        border: none;
+
+        &:hover {
+          text-decoration: none;
+
+          .material-icons {
+            color: var(--bs-body-color);
+          }
+        }
+
+        .material-icons {
+          font-size: 1.25rem;
+          color: var(--bs-gray-600);
+        }
+      }
+    }
+  }
+
   #product-comments-list-header {
-    padding: 1rem 0;
+    flex-wrap: wrap;
+    gap: 1rem;
+    align-items: center;
+    justify-content: normal;
+    padding: 1rem 0 0;
+    margin: 0 0 1rem;
+
+    .section-title {
+      margin-block: 0;
+    }
 
     .comments-nb {
       padding: 0;
       font-size: 1.25rem;
-      font-weight: 700;
+      font-weight: 600;
+    }
+  }
+
+  // Empty comments
+  #empty-product-comment {
+    text-align: left;
+  }
+
+  .product-comment-list-item {
+    padding: 0;
+    margin: 0;
+    background-color: transparent;
+  }
+
+  // Footer comments
+  #product-comments-list-footer {
+    min-height: initial;
+  }
+
+  // Pagination
+  #product-comments-list-pagination {
+    position: initial;
+    inset: initial;
+    height: auto;
+
+    .pagination {
+      flex-wrap: wrap;
+      gap: 0.25rem;
+      align-items: center;
+      margin: 1.5rem 0;
+
+      // Number items
+      &-container {
+        align-items: center;
+        margin-block: 1rem;
+      }
+
+      &-number {
+        color: var(--bs-gray-600);
+      }
+
+      // Pagination
+      .page-item {
+        &.active {
+          font-weight: 600;
+
+          .page-link {
+            font-weight: 600;
+            color: var(--bs-primary);
+            background-color: transparent;
+          }
+        }
+
+        &.disabled {
+          .page-link {
+            color: var(--bs-gray-600);
+            opacity: 0.65;
+          }
+        }
+      }
+
+      .page-link {
+        padding: 0.25rem 0.5rem;
+        color: var(--bs-body-color);
+        border-color: transparent;
+
+        &:hover {
+          background-color: transparent;
+        }
+
+        i {
+          width: auto;
+          height: auto;
+          font-size: 1.25rem;
+          line-height: 1.5rem;
+        }
+
+        &.previous,
+        &.next {
+          color: var(--bs-body-color);
+
+          &:hover {
+            color: var(--bs-primary);
+          }
+        }
+
+        &.disabled {
+          opacity: 1;
+        }
+      }
+
+      @include media-breakpoint-up(xs) {
+        gap: 0.5rem;
+      }
     }
   }
 
   // Add comment modal
   #post-product-comment-modal {
+    .product {
+      &__cover {
+        width: auto;
+        height: auto;
 
-    .h3 {
-      font-size: inherit;
+        img {
+          width: auto;
+          height: auto;
+        }
+      }
+
+      &__title {
+        margin-bottom: 0.5rem;
+        font-size: 1rem;
+        font-weight: 600;
+      }
     }
 
-    .product-cover {
-      width: auto;
-      height: auto;
+    // Criterions
+    // stylelint-disable-next-line
+    #criterions_list {
+      .criterion-rating {
+        display: block;
+        justify-content: flex-start;
 
-      img {
-        width: auto;
-        height: auto;
+        label {
+          display: block;
+          margin-bottom: 0.5rem;
+          font-size: inherit;
+          font-weight: 600;
+        }
+
+        .star-content {
+          margin-left: 0;
+        }
+      }
+
+      // stylelint-disable-next-line
+      #ratingNotChosen {
+        font-size: 0.875rem;
+        color: var(--bs-danger);
+        text-align: left;
       }
     }
+
+    .required {
+      color: var(--bs-danger);
+    }
   }
 
   // Comments list
   #product-comments-list {
-    .product-comment-list-item {
-      margin: 0 0 1.5rem;
+    .comment {
+      padding: 1rem 0;
+      margin: 0;
+      background-color: transparent;
       border-bottom: 1px solid var(--bs-gray-200);
 
-      .comment-infos {
-        padding-right: 1.5rem;
+      &-top {
+        display: flex;
+        gap: 1rem;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 0.25rem;
+        font-size: 0.875rem;
+      }
+
+      &-author {
+        color: var(--bs-body-color);
+      }
+
+      &-date {
+        color: var(--bs-gray-600);
+      }
+
+      &-title {
+        margin: 0.125rem 0 0;
+        font-size: 1rem;
+        font-weight: 600;
+        color: var(--bs-body-color);
+      }
+
+      &-text {
+        margin: 0 0 1rem;
+        font-size: 1rem;
+        line-height: 1.5;
+        letter-spacing: initial;
+      }
+
+      &-infos {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.25rem;
+        align-items: center;
+        height: auto;
+        min-height: inherit;
+        margin-bottom: 1rem;
+
+        .grade-stars {
+          margin: 0 0 0 calc(-1 * 0.25rem);
+
+          .star-content {
+            top: 0;
+            margin: 0;
+          }
+        }
+      }
+
+      &-buttons {
+        display: flex;
+        gap: 1rem;
+        align-items: center;
+
+        a {
+          color: var(--bs-gray-600);
+
+          &:hover {
+            color: var(--bs-body-color);
+            cursor: pointer;
+          }
+        }
       }
     }
   }
diff --git a/src/scss/custom/components/category/_pagination.scss b/src/scss/custom/components/category/_pagination.scss
index 296e723c8..70458541e 100644
--- a/src/scss/custom/components/category/_pagination.scss
+++ b/src/scss/custom/components/category/_pagination.scss
@@ -1,63 +1,65 @@
 $component-name: pagination;
 
 .#{$component-name} {
-  margin: 3rem 0;
+  &--custom {
+    margin: 3rem 0;
 
-  &-number {
-    font-size: 1rem;
-    color: var(--bs-gray-600);
-  }
+    &-number {
+      font-size: 1rem;
+      color: var(--bs-gray-600);
+    }
 
-  @include media-breakpoint-down(sm) {
-    position: relative;
-    margin-bottom: 3.5rem;
+    @include media-breakpoint-down(sm) {
+      position: relative;
+      margin-bottom: 3.5rem;
 
-    .page-item {
-      &:nth-child(2) {
-        .page-link {
-          border-top-left-radius: var(--bs-pagination-border-radius);
-          border-bottom-left-radius: var(--bs-pagination-border-radius);
+      .page-item {
+        &:nth-child(2) {
+          .page-link {
+            border-top-left-radius: var(--bs-pagination-border-radius);
+            border-bottom-left-radius: var(--bs-pagination-border-radius);
+          }
         }
-      }
 
-      &:nth-last-child(2) {
-        .page-link {
-          border-top-right-radius: var(--bs-pagination-border-radius);
-          border-bottom-right-radius: var(--bs-pagination-border-radius);
+        &:nth-last-child(2) {
+          .page-link {
+            border-top-right-radius: var(--bs-pagination-border-radius);
+            border-bottom-right-radius: var(--bs-pagination-border-radius);
+          }
         }
-      }
 
-      &.disabled {
-        .page-link {
-          padding-inline: 0.375rem;
+        &.disabled {
+          .page-link {
+            padding-inline: 0.375rem;
+          }
         }
-      }
 
-      &:has(.previous),
-      &:has(.next) {
-        position: absolute;
-        top: calc(100% + 0.5rem);
-        transform-origin: center;
-      }
+        &:has(.previous),
+        &:has(.next) {
+          position: absolute;
+          top: calc(100% + 0.5rem);
+          transform-origin: center;
+        }
 
-      &:has(.previous) {
-        left: 50%;
-        transform: translateX(calc(-100% - 0.25rem));
-      }
+        &:has(.previous) {
+          left: 50%;
+          transform: translateX(calc(-100% - 0.25rem));
+        }
 
-      &:has(.next) {
-        right: 50%;
-        transform: translateX(calc(100% + 0.25rem));
+        &:has(.next) {
+          right: 50%;
+          transform: translateX(calc(100% + 0.25rem));
+        }
       }
-    }
 
-    .page-link {
-      padding-inline: 0.625rem;
+      .page-link {
+        padding-inline: 0.625rem;
 
-      &.previous,
-      &.next {
-        padding: 0.5rem;
-        border-radius: 50%;
+        &.previous,
+        &.next {
+          padding: 0.5rem;
+          border-radius: 50%;
+        }
       }
     }
   }
diff --git a/templates/_partials/pagination.tpl b/templates/_partials/pagination.tpl
index ef99b5891..8157e1e76 100644
--- a/templates/_partials/pagination.tpl
+++ b/templates/_partials/pagination.tpl
@@ -15,7 +15,7 @@
     {block name='pagination_page_list'}
       <nav aria-label="{l s='Products pagination' d='Shop.Theme.Catalog'}">
         {if $pagination.should_be_displayed}
-          <ul class="pagination">
+          <ul class="pagination pagination--custom">
             {foreach from=$pagination.pages item="page" name="paginationLoop"}
               {if $page@iteration === 1}
                 <li class="page-item">