diff --git a/umap/static/umap/content.css b/umap/static/umap/content.css
index 386c8581..0737e4ff 100644
--- a/umap/static/umap/content.css
+++ b/umap/static/umap/content.css
@@ -24,11 +24,11 @@ input:-moz-placeholder, :-moz-placeholder {
 body.login {
     width:  320px;
     margin: auto;
-    text-align: center;
+    background-color: var(--color-lighterGray);
+    color: var(--color-darkerGray);
 }
 body.login header {
     display: flex;
-    justify-content: center;
 }
 .login-grid {
     display: grid;
diff --git a/umap/static/umap/vars.css b/umap/static/umap/vars.css
index 4c8f5eb3..1493757b 100644
--- a/umap/static/umap/vars.css
+++ b/umap/static/umap/vars.css
@@ -2,6 +2,7 @@
     /* Colors. */
     --color-waterMint: #B9F5D2;
     --color-darkBlue: #263B58;
+    --color-lighterGray: #f6f6f6;
     --color-lightGray: #ddd;
     --color-mediumGray: #3e4444;
     --color-darkGray: #323737;
diff --git a/umap/templates/registration/login.html b/umap/templates/registration/login.html
index d408e0cf..ee5ab99c 100644
--- a/umap/templates/registration/login.html
+++ b/umap/templates/registration/login.html
@@ -19,10 +19,11 @@
     <header class="umap-nav">
       {% include "umap/branding.html" %}
     </header>
+    <h2>{% trans "To save and easily find your maps, identify yourself." %}</h2>
     {% if ENABLE_ACCOUNT_LOGIN %}
-      <h2>
-        {% trans "Please log in with your account" %}
-      </h2>
+      <h3>
+        {% trans "Please log in with your account:" %}
+      </h3>
       <div>
         {% if form.non_field_errors %}
           <ul class="form-errors">
@@ -47,9 +48,9 @@
       </div>
     {% endif %}
     {% if backends.backends|length %}
-      <h2>
-        {% trans "Please choose a provider" %}
-      </h2>
+      <h3>
+        {% trans "Please choose a provider:" %}
+      </h3>
       <div>
         <ul class="login-grid block-grid">
           {% for name in backends.backends %}