diff --git a/addons/website_rating/static/src/xml/portal_chatter.xml b/addons/website_rating/static/src/xml/portal_chatter.xml
index e331c0393cc..5d0395c099b 100644
--- a/addons/website_rating/static/src/xml/portal_chatter.xml
+++ b/addons/website_rating/static/src/xml/portal_chatter.xml
@@ -44,17 +44,17 @@
         It can alse be used to modify a message
     -->
     <t t-name="website_rating.PopupComposer">
-        <div class="row align-items-center">
-            <div class="col">
+        <div class="d-flex flex-wrap align-items-center">
+            <div class="text-nowrap">
                 <t t-call="website_rating.rating_stars_static">
                     <t t-set="val" t-value="widget.rating_avg || 0"/>
                     <t t-set="inline_mode" t-value="true"/>
                 </t>
                 <t t-if="widget.rating_total">
-                   <small class="font-weight-bold">(<t t-esc="widget.rating_total"/> ratings)</small>
+                   <small>(<t t-esc="widget.rating_total"/> ratings)</small>
                 </t>
             </div>
-            <button t-if="widget.options['display_composer']" type="button" class="btn btn-primary col" data-toggle="modal" data-target="#ratingpopupcomposer">
+            <button t-if="widget.options['display_composer']" type="button" class="btn btn-sm btn-primary mx-3" data-toggle="modal" data-target="#ratingpopupcomposer">
                 <t t-if="widget.options['display_composer']">
                     <t t-if="widget.options['default_message_id']">
                         Modify your review
diff --git a/addons/website_rating/static/src/xml/website_mail.xml b/addons/website_rating/static/src/xml/website_mail.xml
index d4e8dd83218..fc1c00cb7a9 100644
--- a/addons/website_rating/static/src/xml/website_mail.xml
+++ b/addons/website_rating/static/src/xml/website_mail.xml
@@ -13,7 +13,7 @@
                 <i class="fa fa-star-half-o" role="img" aria-label="Half a star" title="Half a star"></i>
             </t>
             <t t-foreach="_.range(0, empty_star)" t-as="num" role="img" t-attf-aria-label="#{empty_star} on 5" t-attf-title="#{empty_star} on 5">
-                <i class="fa fa-star-o"></i>
+                <i class="fa fa-star text-black-25"></i>
             </t>
         </div>
     </t>
@@ -73,7 +73,7 @@
                     <i class="fa fa-star-half-o" role="img" aria-label="Half a star" title="Half a star"></i>
                 </t>
                 <t t-foreach="_.range(0, empty_star)" t-as="num" role="img" t-attf-aria-label="#{empty_star} on 5" t-attf-title="#{empty_star} on 5">
-                    <i class="fa fa-star-o"></i>
+                    <i class="fa fa-star-o text-black-25"></i>
                 </t>
             </div>
             <div class="rate_text">
diff --git a/addons/website_rating/views/website_rating_templates.xml b/addons/website_rating/views/website_rating_templates.xml
index c5893a7944e..36bd88a1186 100644
--- a/addons/website_rating/views/website_rating_templates.xml
+++ b/addons/website_rating/views/website_rating_templates.xml
@@ -30,7 +30,7 @@
                 <i class="fa fa-star-half-o" role="img"></i>
             </t>
             <t t-foreach="range(0, empty_star)" t-as="num" role="img">
-                <i class="fa fa-star-o"></i>
+                <i class="fa fa-star text-black-25"></i>
             </t>
             <t t-if="rating_count">
                 (<t t-esc="rating_count"/>)