diff --git a/addons/gamification/data/gamification_karma_rank_data.xml b/addons/gamification/data/gamification_karma_rank_data.xml
index f86b827cceb..5eba07b1a3d 100644
--- a/addons/gamification/data/gamification_karma_rank_data.xml
+++ b/addons/gamification/data/gamification_karma_rank_data.xml
@@ -14,8 +14,8 @@
         <field name="description" type="html"><p>You just began the adventure! Welcome!</p></field>
         <field name="description_motivational" type="html">
             <div class="media align-items-center">
-                <div class="media-body">Reach the next rank to show the rest of the world you exist!</div>
-                <img class="ml-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_student_badge.svg"/>
+                <div class="media-body">Earn your first points and join the adventure !</div>
+                <img class="ml-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_newbie_badge.svg"/>
             </div>
         </field>
         <field name="karma_min">1</field>
@@ -27,8 +27,8 @@
         <field name="description" type="html"><p>You're a young padawan now. May the force be with you!</p></field>
         <field name="description_motivational" type="html">
             <div class="media align-items-center">
-                <div class="media-body">Reach the next rank to improve your status.</div>
-                <img class="ml-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_bachelor_badge.svg"/>
+                <div class="media-body">Reach the next rank to show the rest of the world you exist.</div>
+                <img class="ml-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_student_badge.svg"/>
             </div>
         </field>
         <field name="karma_min">100</field>
@@ -40,8 +40,8 @@
         <field name="description" type="html"><p>You love learning things. Curiosity is a good way to progress.</p></field>
         <field name="description_motivational" type="html">
             <div class="media align-items-center">
-                <div class="media-body">Reach the next rank and become a Master!</div>
-                <img class="ml-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_master_badge.svg"/>
+                <div class="media-body">Reach the next rank to improve your status!</div>
+                <img class="ml-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_bachelor_badge.svg"/>
             </div>
         </field>
         <field name="karma_min">500</field>
@@ -53,8 +53,8 @@
         <field name="description" type="html"><p>You know what you are talking about. People learn from you.</p></field>
         <field name="description_motivational" type="html">
             <div class="media align-items-center">
-                <div class="media-body">Reach the next rank and become a powerful user!</div>
-                <img class="ml-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_doctor_badge.svg"/>
+                <div class="media-body">Reach the next rank and become a Master!</div>
+                <img class="ml-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_master_badge.svg"/>
             </div>
         </field>
         <field name="karma_min">2000</field>
@@ -66,7 +66,8 @@
         <field name="description" type="html"><p>You have reached the last rank. Congratulations!</p></field>
         <field name="description_motivational" type="html">
             <div class="media align-items-center">
-                <div class="media-body">You have reached the last rank. Congratulations!</div>
+                <div class="media-body">Reach the next rank and become a powerful user!</div>
+                <img class="ml-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_doctor_badge.svg"/>
             </div>
         </field>
         <field name="karma_min">10000</field>
diff --git a/addons/gamification/data/gamification_karma_rank_demo.xml b/addons/gamification/data/gamification_karma_rank_demo.xml
index 6250ee227f6..839e8750047 100644
--- a/addons/gamification/data/gamification_karma_rank_demo.xml
+++ b/addons/gamification/data/gamification_karma_rank_demo.xml
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<odoo><data noupdate="0">
+<odoo><data noupdate="1">
     <!-- Set demo karma for test tour as demo user-->
     <record id="base.user_demo" model="res.users">
         <field name="karma">20</field>
@@ -39,7 +39,7 @@
     <record id="rank_doctor" model="gamification.karma.rank">
         <field name="description_motivational" type="html">
             <div class="media align-items-center">
-                <div class="media-body">You have reached the last rank. Congratulations!</div>
+                <div class="media-body">Reach the next rank and gain a very nice unicorn !</div>
                 <img class="ml-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_misc_unicorn.png"/>
             </div>
         </field>
diff --git a/addons/gamification/models/res_users.py b/addons/gamification/models/res_users.py
index daa9d4bc1e1..a0ca65ced45 100644
--- a/addons/gamification/models/res_users.py
+++ b/addons/gamification/models/res_users.py
@@ -96,6 +96,14 @@ class Users(models.Model):
             if old_rank != user.rank_id:
                 user._rank_changed()
 
+    def _get_next_rank(self):
+        """ For fresh users with 0 karma that don't have a rank_id and next_rank_id yet
+        this method returns the first karma rank (by karma ascending). This acts as a
+        default value in related views.
+
+        TDE FIXME in post-12.4: make next_rank_id a non-stored computed field correctly computed """
+        return self.next_rank_id or (not self.rank_id and self.env['gamification.karma.rank'].search([], order="karma_min ASC", limit=1))
+
     def get_gamification_redirection_data(self):
         """
         Hook for other modules to add redirect button(s) in new rank reached mail
diff --git a/addons/website_profile/views/website_profile.xml b/addons/website_profile/views/website_profile.xml
index 9aac0a4376d..c28712f06ac 100644
--- a/addons/website_profile/views/website_profile.xml
+++ b/addons/website_profile/views/website_profile.xml
@@ -258,12 +258,11 @@
                             <button class="btn btn-sm d-md-none bg-white border" type="button" data-toggle="collapse" data-target="#o_wprofile_sidebar_collapse" aria-expanded="false" aria-controls="o_wprofile_sidebar_collapse">More info</button>
                         </div>
                         <div class="collapse d-md-block" id="o_wprofile_sidebar_collapse">
-                            <div t-if="user.rank_id" class="mb-3">
-                                <small t-if="user.next_rank_id" class="font-weight-bold mt-1">Next rank:</small>
-                                <t t-call="website_profile.profile_next_rank_card">
-                                    <t t-set="img_max_width">40%</t>
-                                </t>
-                            </div>
+                            <t t-set="next_rank_id" t-value="user._get_next_rank()"/>
+                            <small t-if="next_rank_id" class="font-weight-bold mt-1">Next rank:</small>
+                            <t t-if="next_rank_id or user.rank_id" t-call="website_profile.profile_next_rank_card">
+                                <t t-set="img_max_width">40%</t>
+                            </t>
 
                             <table class="table table-sm w-100" id="o_wprofile_sidebar_table">
                                 <tbody>
@@ -315,17 +314,21 @@
     <template id="profile_next_rank_card" name="Profile Next Rank Card">
         <div class="o_wprofile_progress_circle">
             <svg viewBox="0 0 36 36" class="o_pc_circular_chart">
-                <t t-if="user.next_rank_id">
-                    <t t-if="(user.next_rank_id.karma_min - user.rank_id.karma_min) > 0">
-                        <t t-set="user_points" t-value="int(100*(user.karma - user.rank_id.karma_min)/(user.next_rank_id.karma_min - user.rank_id.karma_min))"/>
+                <t t-set="next_rank_id" t-value="next_rank_id or user._get_next_rank()"/>
+                <t t-if="next_rank_id and user.rank_id">
+                    <t t-if="(next_rank_id.karma_min - user.rank_id.karma_min) > 0">
+                        <t t-set="user_points" t-value="int(100*(user.karma - user.rank_id.karma_min)/(next_rank_id.karma_min - user.rank_id.karma_min))"/>
                     </t>
                     <t t-else="">
                         <t t-set="user_points" t-value="0"/>
                     </t>
                 </t>
-                <t t-else="">
+                <t t-elif="user.rank_id">
                     <t t-set="user_points" t-value="100"/>
                 </t>
+                <t t-else="">
+                    <t t-set="user_points" t-value="0"/>
+                </t>
                 <path class="o_pc_circle_bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
                 <path class="o_pc_circle" t-attf-stroke-dasharray="#{user_points}, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" stroke="url(#gradient)" mask="url(#mask)"/>
                 <mask id="mask">
@@ -338,18 +341,18 @@
             </svg>
             <div class="o_pc_overlay d-flex flex-column align-items-center justify-content-center">
                 <img class="img-fluid"
-                    t-attf-src="/web/image/gamification.karma.rank/#{user.next_rank_id.id if user.next_rank_id else user.rank_id.id}/image_medium"
-                    t-att-alt="(user.next_rank_id.name if user.next_rank_id else user.rank_id.name) + ' badge'"
+                    t-attf-src="/web/image/gamification.karma.rank/#{next_rank_id.id if next_rank_id else user.rank_id.id}/image_medium"
+                    t-att-alt="(next_rank_id.name if next_rank_id else user.rank_id.name) + ' badge'"
                     t-att-style="'max-width: ' + (img_max_width if img_max_width else '50%;')"/>
                 <h4 class=" mb-0">
                     "
-                    <span t-if="user.next_rank_id" t-field="user.next_rank_id.name"/>
+                    <span t-if="next_rank_id" t-field="next_rank_id.name"/>
                     <span t-else="" t-field="user.rank_id.name"/>
                     "
                 </h4>
                 <small>
                     <span class="font-weight-bold text-primary" t-field="user.karma"/>/
-                    <span t-if="user.next_rank_id" class="font-weight-bold" t-field="user.next_rank_id.karma_min"/>
+                    <span t-if="next_rank_id" class="font-weight-bold" t-field="next_rank_id.karma_min"/>
                     <span t-else="" class="font-weight-bold" t-field="user.rank_id.karma_min"/>
                      xp
                 </small>
diff --git a/addons/website_slides/views/website_slides_templates_homepage.xml b/addons/website_slides/views/website_slides_templates_homepage.xml
index 828b6d2dfa8..1a176c361a3 100644
--- a/addons/website_slides/views/website_slides_templates_homepage.xml
+++ b/addons/website_slides/views/website_slides_templates_homepage.xml
@@ -396,14 +396,14 @@
             <img t-attf-src="/web/image/gamification.karma.rank/#{user.rank_id.id}/image_small" height="16" alt="" class="mr-1"/>
             <a href="/profile/ranks_badges" t-field="user.rank_id"/>
         </div>
-        <t t-if="user.rank_id">
-            <div t-if="user.next_rank_id" class="font-weight-bold text-muted mt-1">Next rank:</div>
-            <t t-call="website_profile.profile_next_rank_card">
-                <t t-set="bg_class">bg-200</t>
-                <t t-set="img_max_width">50%</t>
-            </t>
-            <div t-field="user.rank_id.description_motivational"/>
+        <t t-set="next_rank_id" t-value="user._get_next_rank()"/>
+        <div t-if="next_rank_id" class="font-weight-bold text-muted mt-1">Next rank:</div>
+        <t t-if="next_rank_id or user.rank_id" t-call="website_profile.profile_next_rank_card">
+            <t t-set="bg_class">bg-200</t>
+            <t t-set="img_max_width">50%</t>
         </t>
+        <div t-if="next_rank_id" t-field="next_rank_id.description_motivational"/>
+        <div t-else="">Congratulations, you have reached the last rank!</div>
     </div>
 </template>