diff --git a/addons/auth_totp/static/tests/totp_flow.js b/addons/auth_totp/static/tests/totp_flow.js
index 575e847f4f7..eea245041a9 100644
--- a/addons/auth_totp/static/tests/totp_flow.js
+++ b/addons/auth_totp/static/tests/totp_flow.js
@@ -42,7 +42,7 @@ tour.register('totp_tour_setup', {
     trigger: 'button[name=totp_enable_wizard]',
 }, {
     content: "Check that we have to enter enhanced security mode",
-    trigger: '.card-title:contains("confirm your password")',
+    trigger: 'div:contains("confirm your password")',
     run: () => {},
 }, {
     content: "Input password",
@@ -126,7 +126,7 @@ tour.register('totp_login_enabled', {
     trigger: 'button[name=totp_disable]',
 }, {
     content: "Check that we have to enter enhanced security mode",
-    trigger: '.card-title:contains("confirm your password")',
+    trigger: 'div:contains("confirm your password")',
     run: () => {},
 }, {
     content: "Input password",
@@ -225,7 +225,7 @@ tour.register('totp_admin_disables', {
     trigger: 'a.dropdown-item:contains(Disable TOTP on users)'
 }, { // enhanced security yo
     content: "Check that we have to enter enhanced security mode",
-trigger: '.card-title:contains("confirm your password")',
+trigger: 'div:contains("confirm your password")',
     run: () => {},
 }, {
     content: "Input password",
diff --git a/addons/auth_totp/views/templates.xml b/addons/auth_totp/views/templates.xml
index 6100317eeed..100dbbc4452 100644
--- a/addons/auth_totp/views/templates.xml
+++ b/addons/auth_totp/views/templates.xml
@@ -20,12 +20,19 @@
                     <p class="alert alert-danger" t-if="error" role="alert">
                         <t t-esc="error"/>
                     </p>
-                    <div t-attf-class="clearfix oe_login_buttons text-center mb-1 {{'pt-2' if form_small else 'pt-3'}}">
+                    <div t-attf-class="clearfix oe_login_buttons text-center mb-1">
                         <button type="submit" class="btn btn-primary btn-block">
                             Verify
                         </button>
                     </div>
+                    <div class="small mb-2 mt-2 text-muted">
+                        <i class="fa fa-2x fa-mobile pull-left"/>
+                        Open the two-factor authentication app on your
+                        device to obtain a code and verify your identity
+                    </div>
                 </form>
+            </div>
+            <div class="text-center pb-2 border-top">
                 <form method="POST" action="/web/session/logout" class="form-inline">
                     <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                     <button type="submit" class="btn btn-link btn-sm mb-2">
diff --git a/addons/auth_totp/views/user_preferences.xml b/addons/auth_totp/views/user_preferences.xml
index 9255b19a920..b1d70f6076b 100644
--- a/addons/auth_totp/views/user_preferences.xml
+++ b/addons/auth_totp/views/user_preferences.xml
@@ -55,7 +55,7 @@
             <form>
                 <sheet>
                     <div class="row container">
-                        <div class="col-lg-6 offset-lg-3 mb-3">
+                        <div class="mb-3">
                             <h3 class="font-weight-bold">Scan this barcode with your app</h3>
                             <div>
                                 Scan the image below with the authenticator app on your phone.<br/>
@@ -72,7 +72,7 @@
                                     </li>
                                 </ul>
                                 <!-- code outside list to have more horiz space on mobile -->
-                                <div class="collapse" id="collapseTotpSecret">
+                                <div class="collapse col-12 col-md-6" id="collapseTotpSecret">
                                   <div class="card card-body">
                                     <h3>Your two-factor secret:</h3>
                                     <code class="text-center"><field name="secret"/></code>
@@ -80,24 +80,27 @@
                                 </div>
                             </div>
 
-                            <field class="offset-1 offset-lg-2" name="qrcode" readonly="True" widget="image"/>
+                            <field class="offset-1" name="qrcode" readonly="True" widget="image"/>
 
                             <h3 class="font-weight-bold">Enter the 6-digit code from your app</h3>
-                            <div class="text-justify">
+                            <div class="text-justify col-10 col-lg-6 px-0">
                                 After scanning the barcode, the app will display a 6-digit code that you
                                 should enter below. Don't worry if the code changes in the app,
                                 it stays valid a bit longer.
                             </div>
                             <div class="mt-2">
-                                <label for="code">Verification Code</label>
-                                <field required="True" name="code"/>
+                                <label for="code" class="col-4 col-md-12 px-0">Verification Code</label>
+                                <field required="True" name="code" class="col-10 col-md-6 px-0"/>
                             </div>
-                            <button type="object" name="enable" class="btn btn-primary"
-                                    string="Enable two-factor authentication"/>
+
                         </div>
                     </div>
                 </sheet>
-                <footer><!-- no buttons --></footer>
+                <footer>
+                    <button type="object" name="enable" class="btn btn-primary"
+                            string="Enable two-factor authentication"/>
+                    <button string="Cancel" special="cancel"/>
+                </footer>
             </form>
         </field>
     </record>
diff --git a/addons/auth_totp_portal/static/src/js/totp_frontend.js b/addons/auth_totp_portal/static/src/js/totp_frontend.js
index cb249e63d65..5f55970344c 100644
--- a/addons/auth_totp_portal/static/src/js/totp_frontend.js
+++ b/addons/auth_totp_portal/static/src/js/totp_frontend.js
@@ -13,7 +13,7 @@ function fromField(f, record) {
     switch (f.getAttribute('name')) {
     case 'qrcode':
         const qrcode = document.createElement('img');
-        qrcode.setAttribute('class', 'img img-fluid offset-1 offset-lg-2');
+        qrcode.setAttribute('class', 'img img-fluid offset-1');
         qrcode.setAttribute('src', 'data:image/png;base64,' + record['qrcode']);
         return qrcode;
     case 'url':
@@ -24,7 +24,7 @@ function fromField(f, record) {
     case 'code':
         const code = document.createElement('input');
         code.setAttribute('name', 'code');
-        code.setAttribute('class', 'form-control');
+        code.setAttribute('class', 'form-control col-10 col-md-6');
         code.setAttribute('placeholder', '6-digit code');
         code.required = true;
         code.maxLength = 6;
@@ -108,10 +108,6 @@ class Button {
             // because Dialog doesnt' call() click on the descriptor object
             this.click = this._click.bind(this);
         }
-        if (!button_node.closest('footer')) {
-            // remove non-footer buttons, otherwise they will appear twice
-            button_node.parentNode.removeChild(button_node);
-        }
     }
     async _click() {
         if (!this.input.reportValidity()) {
@@ -191,7 +187,7 @@ publicWidget.registry.TOTPButton = publicWidget.Widget.extend({
         codeInput.addEventListener('input', () => codeInput.setCustomValidity(''));
 
         const buttons = [];
-        for(const button of body.querySelectorAll('button')) {
+        for(const button of doc.querySelectorAll('footer button')) {
             buttons.push(new Button(this, model, record.id, codeInput, button));
         }
 
diff --git a/addons/auth_totp_portal/static/tests/totp_portal.js b/addons/auth_totp_portal/static/tests/totp_portal.js
index ec26366e9ad..6424647aabe 100644
--- a/addons/auth_totp_portal/static/tests/totp_portal.js
+++ b/addons/auth_totp_portal/static/tests/totp_portal.js
@@ -12,7 +12,7 @@ tour.register('totportal_tour_setup', {
     trigger: 'button#auth_totp_portal_enable',
 }, {
     content: "Check that we have to enter enhanced security mode",
-    trigger: '.card-title:contains("confirm your password")',
+    trigger: 'div:contains("confirm your password")',
     run: () => {},
 }, {
     content: "Input password",
@@ -84,7 +84,7 @@ tour.register('totportal_login_enabled', {
     trigger: 'button#auth_totp_portal_disable',
 }, {
     content: "Check that we have to enter enhanced security mode",
-    trigger: '.card-title:contains("confirm your password")',
+    trigger: 'div:contains("confirm your password")',
     run: () => {},
 }, {
     content: "Input password",
diff --git a/addons/portal/static/src/js/portal.js b/addons/portal/static/src/js/portal.js
index 7499a798851..610e58b505f 100644
--- a/addons/portal/static/src/js/portal.js
+++ b/addons/portal/static/src/js/portal.js
@@ -215,6 +215,9 @@ function handleCheckIdentity(rpc, wrapped) {
                     }
                 }, {
                     text: _t('Cancel'), close: true
+                }, {
+                    text: _t('Forgot password?'), classes: 'btn btn-link',
+                    click() { window.location.href = "/web/reset_password/"; }
                 }]
             }).on('close', null, () => {
                 // unlink wizard object?
diff --git a/addons/portal/static/src/xml/portal_security.xml b/addons/portal/static/src/xml/portal_security.xml
index 1f905563ede..ff5e62e895a 100644
--- a/addons/portal/static/src/xml/portal_security.xml
+++ b/addons/portal/static/src/xml/portal_security.xml
@@ -1,27 +1,12 @@
 <templates xml:space="preserve">
     <t t-name="portal.identitycheck">
-        <form>
-            <div class="row container">
-                <div class="col-10 offset-1">
-                  <div class="card bg-dark my-b mx-5">
-                    <div class="card-header">
-                        <i class="fa fa-bell mx-2"/>
-                        <span class="text-uppercase">Security Control</span>
-                    </div>
-                    <div class="card-body">
-                      <a href="/web/reset_password/" class="float-right">Forgot password?</a>
-                      <h4 class="card-title">Please confirm your password to continue</h4>
-                      <p class="card-text">
-                        This is necessary for security-related changes. The authorization will last for a few minutes.
-                      </p>
-                      <div>
-                        <label for="password">Password</label>
-                        <input class="form-control" autocomplete="current-password"
-                               name="password" type="password" required="required"/>
-                      </div>
-                    </div>
-                  </div>
-                </div>
+        <form string="Security Control">
+            <h3><strong>Please confirm your password to continue</strong></h3>
+            <p>This is necessary for security-related changes. The authorization will last for a few minutes.</p>
+            <div>
+                <label for="password" class="col-4 col-md-12 px-0">Password</label>
+                <input class="form-control col-10 col-md-6" autocomplete="current-password"
+                       name="password" type="password" required="required"/>
             </div>
         </form>
     </t>
diff --git a/odoo/addons/base/views/res_users_views.xml b/odoo/addons/base/views/res_users_views.xml
index 51866fc0bef..a8982fe1142 100644
--- a/odoo/addons/base/views/res_users_views.xml
+++ b/odoo/addons/base/views/res_users_views.xml
@@ -40,32 +40,19 @@
             <field name="model">res.users.identitycheck</field>
             <field name="arch" type="xml">
                 <form string="Security Control">
-                    <sheet>
-                        <div class="row container">
-                            <div class="col-8 offset-2">
-                              <div class="card bg-dark my-b mx-5">
-                                <div class="card-header">
-                                    <span class="fa fa-bell mx-2" t-translation="off">&amp;nbsp;</span>
-                                    <span class="text-uppercase">Security Control</span>
-                                </div>
-                                <div class="card-body">
-                                  <a href="/web/reset_password/" class="float-right">Forgot password?</a>
-                                  <h4 class="card-title">Please confirm your password to continue</h4>
-                                  <p class="card-text">
-                                    This is necessary for security-related changes. The authorization will last for a few minutes.
-                                  </p>
-                                  <div>
-                                    <label for="password"/>
-                                    <field class="col-4" name="password" autocomplete="current-password"
-                                           required="True" password="True"/>
-                                  </div>
-                                  <button string="Confirm Password" type="object" name="run_check" class="btn btn-primary mt-3"/>
-                                </div>
-                              </div>
-                            </div>
+                    <sheet clas="bg-primary">
+                        <h3><strong>Please confirm your password to continue</strong></h3>
+                        <p>This is necessary for security-related changes. The authorization will last for a few minutes.</p>
+                        <div>
+                            <label for="password" class="col-4 col-md-12 px-0"/>
+                            <field class="col-10 col-md-6 px-0" name="password" autocomplete="current-password" required="True" password="True"/>
                         </div>
-                        <footer><!-- no buttons --></footer>
                     </sheet>
+                    <footer>
+                        <button string="Confirm Password" type="object" name="run_check" class="btn btn-primary"/>
+                        <button string="Cancel" special="cancel" class="btn btn-secondary"/>
+                        <a href="/web/reset_password/" class="btn btn-link" role="button">Forgot password?</a>
+                    </footer>
                 </form>
             </field>
         </record>
diff --git a/odoo/addons/test_apikeys/static/tests/apikey_flow.js b/odoo/addons/test_apikeys/static/tests/apikey_flow.js
index 906ea63c005..8507f3e4001 100644
--- a/odoo/addons/test_apikeys/static/tests/apikey_flow.js
+++ b/odoo/addons/test_apikeys/static/tests/apikey_flow.js
@@ -24,7 +24,7 @@ tour.register('apikeys_tour_setup', {
     trigger: 'button:contains("New API Key")',
 }, {
     content: "Check that we have to enter enhanced security mode",
-    trigger: '.card-title:contains("confirm your password")',
+    trigger: 'div:contains("confirm your password")',
     run: () => {},
 }, {
     content: "Input password",