diff --git a/addons/rating/static/src/img/rating_1.png b/addons/rating/static/src/img/rating_1.png
index e6d82264f11..e2919617942 100644
Binary files a/addons/rating/static/src/img/rating_1.png and b/addons/rating/static/src/img/rating_1.png differ
diff --git a/addons/rating/static/src/img/rating_1.svg b/addons/rating/static/src/img/rating_1.svg
new file mode 100644
index 00000000000..1a03ef19299
--- /dev/null
+++ b/addons/rating/static/src/img/rating_1.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 68"><path d="M34,68A34,34,0,1,1,68,34,34,34,0,0,1,34,68ZM34,4A30,30,0,1,0,64,34,30,30,0,0,0,34,4Z" style="fill:#d23f3a"/><path d="M49.55,51.18a2,2,0,0,1-1.63-.84,17.2,17.2,0,0,0-27.84,0A2,2,0,0,1,16.82,48a21.21,21.21,0,0,1,34.36,0,2,2,0,0,1-1.63,3.2Z" style="fill:#d23f3a"/><circle cx="20.9" cy="30.19" r="4.79" style="fill:#d23f3a"/><circle cx="47" cy="30.19" r="4.79" style="fill:#d23f3a"/></svg>
\ No newline at end of file
diff --git a/addons/rating/static/src/img/rating_3.png b/addons/rating/static/src/img/rating_3.png
index 8ec3a2a7325..69942a2e20a 100644
Binary files a/addons/rating/static/src/img/rating_3.png and b/addons/rating/static/src/img/rating_3.png differ
diff --git a/addons/rating/static/src/img/rating_3.svg b/addons/rating/static/src/img/rating_3.svg
new file mode 100644
index 00000000000..5cee881f2ab
--- /dev/null
+++ b/addons/rating/static/src/img/rating_3.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 68"><path d="M34,68A34,34,0,1,1,68,34,34,34,0,0,1,34,68ZM34,4A30,30,0,1,0,64,34,30,30,0,0,0,34,4Z" style="fill:#f7931e"/><path d="M18.45,47.15a2,2,0,0,1,0-4h31.1a2,2,0,0,1,0,4Z" style="fill:#f7931e"/><circle cx="20.9" cy="30.19" r="4.79" style="fill:#f7931e"/><circle cx="47" cy="30.19" r="4.79" style="fill:#f7931e"/></svg>
\ No newline at end of file
diff --git a/addons/rating/static/src/img/rating_5.png b/addons/rating/static/src/img/rating_5.png
index 3af034234c0..015baac529b 100644
Binary files a/addons/rating/static/src/img/rating_5.png and b/addons/rating/static/src/img/rating_5.png differ
diff --git a/addons/rating/static/src/img/rating_5.svg b/addons/rating/static/src/img/rating_5.svg
new file mode 100644
index 00000000000..9ac69427d39
--- /dev/null
+++ b/addons/rating/static/src/img/rating_5.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 68"><path d="M34,68A34,34,0,1,1,68,34,34,34,0,0,1,34,68ZM34,4A30,30,0,1,0,64,34,30,30,0,0,0,34,4Z" style="fill:#008818"/><path d="M34,55.21a21.26,21.26,0,0,1-17.18-8.78,2,2,0,1,1,3.26-2.36,17.18,17.18,0,0,0,27.84,0,2,2,0,0,1,3.26,2.36A21.26,21.26,0,0,1,34,55.21Z" style="fill:#008818"/><circle cx="20.9" cy="30.19" r="4.79" style="fill:#008818"/><circle cx="47" cy="30.19" r="4.79" style="fill:#008818"/></svg>
\ No newline at end of file
diff --git a/addons/rating/static/src/scss/rating.scss b/addons/rating/static/src/scss/rating.scss
index 768d261a3dc..389441fe853 100644
--- a/addons/rating/static/src/scss/rating.scss
+++ b/addons/rating/static/src/scss/rating.scss
@@ -1,8 +1,31 @@
 /* Rating feedback */
 .o_rating_page_submit {
 
-    .o_rating_label.active {
-        filter: drop-shadow(0 0 5px black);
-        -webkit-filter: drop-shadow(0 0 5px black);
+    .btn-group > .btn:not(:first-child),
+    .btn-group > .btn-group:not(:first-child) > .btn {
+        margin-left: 0 !important;
+    }
+    .o_rating_label {
+        transition: .3s;
+        &:hover {
+            transform: scale(1.1);
+        }
+        a {
+            &.bg-white:hover,
+            &.bg-white:focus {
+                background-color: #ffffff !important;
+            }
+        }
+        &.active {
+            filter: drop-shadow(0 0 10px rgba(0,0,0,0.25));
+            -webkit-filter: drop-shadow(0 0 10px rgba(0,0,0,0.25));
+            transform: scale(1.1);
+            a {
+                &.bg-white:hover,
+                &.bg-white:focus {
+                    background-color: #ffffff !important;
+                }
+            }
+        }
     }
 }
diff --git a/addons/rating/views/rating_template.xml b/addons/rating/views/rating_template.xml
index f182d248619..09b972ea6ac 100644
--- a/addons/rating/views/rating_template.xml
+++ b/addons/rating/views/rating_template.xml
@@ -17,30 +17,27 @@
         <!-- External page: rate and submit feedback -->
         <template id="rating_external_page_submit" name="Rating Page Submit">
             <t t-call="web.frontend_layout">
-                <div class="container card mb-5 mt-4 o_rating_page_submit">
-                    <div class="card-body">
-                        <div class="row text-center justify-content-center">
-                            <h1 class="col-12 mt-5">Thank you for rating our services!</h1>
-                            <form t-attf-action="/rate/#{token}/submit_feedback" method="post">
-                                <div class="btn-group btn-group-toggle row" data-toggle="buttons">
-                                    <t t-foreach="rate_names" t-as="rate_name">
-                                        <label t-attf-class="col-xs-12 btn o_rating_label shadow-none {{rate == rate_name and 'active' or ''}}">
-                                            <input type="radio" name="rate" t-attf-id="rate_{{rate_name}}" t-att-value="rate_name" t-att-checked="rate == rate_name"/>
-                                            <a class="o_rating" href="#">
-                                                <img t-attf-src='/rating/static/src/img/rating_#{rate_name}.png' t-att-alt="rate_name_value" t-att-title="rate_name_value"/>
-                                            </a>
-                                        </label>
-                                    </t>
-                                </div>
-                                <div class="clearfix"></div>
-                                <p class="mt-5">
-                                    Feel free to write a feedback on your experience:
-                                </p>
-                                <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
-                                <textarea class="form-control" name="feedback" rows="8" t-att-value="rating.feedback"></textarea>
-                                <button type="submit" class="btn btn-primary" style="margin-top:8px;">Send Feedback</button>
-                            </form>
-                        </div>
+                <div class="container mb-5 mt-4 o_rating_page_submit">
+                    <div class="row text-center justify-content-center">
+                        <h1 class="col-12 mt-5">Thank you for rating our services!</h1>
+                        <form class="col-md-6" t-attf-action="/rate/#{token}/submit_feedback" method="post">
+                            <div class="btn-group btn-group-toggle row flex-nowrap justify-content-center w-100 mt-5" data-toggle="buttons">
+                                <t t-foreach="rate_names" t-as="rate_name">
+                                    <label t-attf-class="col p-4 btn o_rating_label shadow-none {{rate == rate_name and 'active' or ''}}">
+                                        <input type="radio" name="rate" t-attf-id="rate_{{rate_name}}" t-att-value="rate_name" t-att-checked="rate == rate_name"/>
+                                        <a class="o_rating d-block bg-white rounded-circle" href="#">
+                                            <img t-attf-src='/rating/static/src/img/rating_#{rate_name}.svg' t-att-alt="rate_name_value" t-att-title="rate_name_value"/>
+                                        </a>
+                                    </label>
+                                </t>
+                            </div>
+                            <p class="mt-5">
+                                Feel free to write a feedback on your experience:
+                            </p>
+                            <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
+                            <textarea class="form-control" name="feedback" rows="8" t-att-value="rating.feedback"></textarea>
+                            <button type="submit" class="btn btn-primary mt-4" style="margin-top:8px;">Send Feedback</button>
+                        </form>
                     </div>
                 </div>
             </t>