diff --git a/addons/website_profile/static/src/scss/website_profile.scss b/addons/website_profile/static/src/scss/website_profile.scss
index 920ff45a1ed..5c25a5e4af1 100644
--- a/addons/website_profile/static/src/scss/website_profile.scss
+++ b/addons/website_profile/static/src/scss/website_profile.scss
@@ -100,6 +100,10 @@ $owprofile-color-bg: mix($body-bg, #efeff4);
     position: relative;
 
     svg.o_pc_circular_chart {
+        // Allow hover effect on svg paths in order to display bootstrap tooltip,
+        // by pushing the circular chart above the next rank info.
+        z-index: 1;
+        position: relative;
         display: block;
         max-width: 100%;
 
@@ -125,10 +129,6 @@ $owprofile-color-bg: mix($body-bg, #efeff4);
 
     .o_pc_overlay {
         @include o-position-absolute(0,0,0,0);
-        // Allow hover effect on svg paths in order to display bootstrap tooltip,
-        // by pushing the absolute div behind it
-        z-index: -1;
-
         h4 {
             width: 60%;
             // only apply ellipsis when in non-edit mode, that way the editor can see the full value
diff --git a/addons/website_profile/views/website_profile.xml b/addons/website_profile/views/website_profile.xml
index 536fb0b36ee..75b8c051724 100644
--- a/addons/website_profile/views/website_profile.xml
+++ b/addons/website_profile/views/website_profile.xml
@@ -329,7 +329,7 @@
                     <stop offset="100%" stop-color="var(--o-pc-color-stop-2)"/>
                 </linearGradient>
             </svg>
-            <div class="o_pc_overlay d-flex flex-column align-items-center justify-content-center">
+            <div class="o_pc_overlay d-flex flex-column align-items-center justify-content-center p-4">
                 <t t-set="rank_id" t-value="next_rank_id if next_rank_id else user.rank_id"/>
                 <div t-field="rank_id.image_1920"
                     t-attf-style="max-width: {{img_max_width or '50%'}};"