diff --git a/hiboo/account/forms.py b/hiboo/account/forms.py
index 4c05b54eb139cbac6b0fcbf10e71099d398ebefa..3a8437aec5f9652240842427e1fb7100c653931f 100644
--- a/hiboo/account/forms.py
+++ b/hiboo/account/forms.py
@@ -12,8 +12,8 @@ class LoginForm(flask_wtf.FlaskForm):
 
 
 class TotpForm(flask_wtf.FlaskForm):
-    totp = fields.PasswordField(_('Time-based One-Time Password'), [validators.DataRequired()])
-    submit = fields.SubmitField(_('Validate'))
+    totp = fields.PasswordField(_('Enter the one-time password delivered by your client'), [validators.DataRequired()])
+    submit = fields.SubmitField(_('Confirm'))
 
 
 class SignupForm(flask_wtf.FlaskForm):
diff --git a/hiboo/account/settings.py b/hiboo/account/settings.py
index 8e51e0ed9b8d8760bda5d05cdbb6e92deccf4c72..c0b1ba56bb23231d270e71a21cf52f56b7c9ea6d 100644
--- a/hiboo/account/settings.py
+++ b/hiboo/account/settings.py
@@ -77,7 +77,7 @@ def totp_enable():
         else:
             flask.flash(_("Failed to enable TOTP, wrong TOTP"), "danger")
             return flask.redirect(flask.url_for(".totp_enable"))
-    flask.flash(_("Fill-in the form to confirm your TOTP client is working"), "warning")
+    flask.flash(_("Scan this QR code or use the informations below it to configure your TOTP client"), "info")
     return flask.render_template(
         "account_auth_totp_enable.html",
         key=key, name=user.username, issuer=issuer, qr=qr, form=form
diff --git a/hiboo/account/templates/account_auth_totp_enable.html b/hiboo/account/templates/account_auth_totp_enable.html
index 5b3796af6b246f9ee4331b82f676c35d58eddef3..78967d810fec903f52333a091c80dac167f3ab09 100644
--- a/hiboo/account/templates/account_auth_totp_enable.html
+++ b/hiboo/account/templates/account_auth_totp_enable.html
@@ -1,32 +1,30 @@
 {% extends "base.html" %}
 
-{% block title %} {% trans %}Two-factor authentication{% endtrans %} {% endblock %}
+{% block title %}{% trans %}Two-factor authentication (2FA){% endtrans %}{% endblock %}
 {% block subtitle %}{% trans %}with Time-based One-Time Password (TOTP){% endtrans %}{% endblock %}
 
 {% block content %}
 
-<blockquote class="quote-info">
-  <h5>{% trans %}Howto{% endtrans %}</h5>
-  <p>{% trans %}Scan this QR code or use text informations to configure a TOTP client{% endtrans %}</p>
-</blockquote>
-<div class="row">
-  <div class="col-md-6 col text-center">
-    <img src="data:image/png;base64,{{ qr }}" class="rounded mb-4" width=250 height=250>
-  </div>
-  <div class="col-md-6 col">
-    <ul class="list-group", style="max-width: 500px">
-      <li class="list-group-item d-flex justify-content-between">
-        {% trans %}Secret key{% endtrans %}<code>{{ key }}</code>
+<div class="col-md-6 col">
+
+  <div class="card">
+    <img class="card-img-top w-50 mx-auto" src="data:image/png;base64,{{ qr }}" alt="TOTP QR code">
+    <ul class="list-group list-group-flush">
+      <li class="list-group-item d-flex justify-content-between align-items-center">
+        <b>{% trans %}Secret key{% endtrans %}</b> <code>{{ key }}</code>
       </li>
-      <li class="list-group-item d-flex justify-content-between">
-        {% trans %}Name{% endtrans %}<code>{{ name }}</code>
+      <li class="list-group-item d-flex justify-content-between align-items-center">
+        <b>{% trans %}Name{% endtrans %}</b> <code>{{ name }}</code>
       </li>
-      <li class="list-group-item d-flex justify-content-between">
-        {% trans %}Issuer{% endtrans %}<code>{{ issuer }}</code>
+      <li class="list-group-item d-flex justify-content-between align-items-center">
+        <b>{% trans %}Issuer{% endtrans %}</b> <code>{{ issuer }}</code>
       </li>
     </ul>
+    <div class="card-footer">
+      {{ macros.form(form) }}
+    </div>
   </div>
-  {{ macros.form(form) }}
+
 </div>
 
 {% endblock %}