diff --git a/ippisite/ippidb/templates/account/login.html b/ippisite/ippidb/templates/account/login.html
index 48ded68af84ba277275c6d1903317405dfd042ee..d5b3d55a19e3056e085697587c9edb76beecf5e2 100644
--- a/ippisite/ippidb/templates/account/login.html
+++ b/ippisite/ippidb/templates/account/login.html
@@ -7,9 +7,9 @@
 
 {% block content %}
 
-<div class="d-flex justify-content-center">
+<div class="d-flex justify-content-center mt-2">
 
-    <div class="card" style="width: 18rem;">
+    <div class="card">
         <div class="card-header">
             <h1>{% trans "Sign In" %}</h1>
         </div>
@@ -21,16 +21,16 @@
         of your existing third party accounts. Or, <a href="{{ signup_url }}">sign up</a>
         for a {{ site_name }} account and sign in below:{% endblocktrans %}</p>
 
-            <div class="socialaccount_ballot">
+            <div class="socialaccount_ballot d-flex">
 
-              <ul class="socialaccount_providers">
+              <ul class="socialaccount_providers list-inline mx-auto justify-content-between">
                 {% include "socialaccount/snippets/provider_list.html" with process="login" %}
               </ul>
 
-              <div class="login-or">{% trans 'or' %}</div>
-
             </div>
 
+            <div class="login-or">{% trans 'or' %}</div>
+
             {% include "socialaccount/snippets/login_extra.html" %}
 
             {% else %}
diff --git a/ippisite/ippidb/templates/base.html b/ippisite/ippidb/templates/base.html
index cfd8345eb1f7f573ba114b445a3bdac3cb03b91a..452972a068918f11c6d1d5afcbc73a1c9e13ac73 100644
--- a/ippisite/ippidb/templates/base.html
+++ b/ippisite/ippidb/templates/base.html
@@ -196,7 +196,7 @@
                         <li>Welcome {{ user.username }} !!! <a href="{% url 'logout' %}">logout</a></li>
                         {% else %}
                         <li><a href="{% provider_login_url 'github' %}"><i class="fab fa-github" title="Login with github"></i> Login with GitHub</a></li>
-                        <li><a href="{% provider_login_url 'orcid' %}"><i class="fab fa-orcid" title="Login with ORCID"></i> Login with ORCID</a></li>
+                        <li><a href="{% provider_login_url 'orcid' %}"><i class="ai ai-orcid" title="Login with ORCID"></i> Login with ORCID</a></li>
                         {% endif %}
                     </ul>
                 </div>
diff --git a/ippisite/ippidb/templates/socialaccount/snippets/login_extra.html b/ippisite/ippidb/templates/socialaccount/snippets/login_extra.html
new file mode 100644
index 0000000000000000000000000000000000000000..307def40c158a84e312f3b867586774f484bb8a8
--- /dev/null
+++ b/ippisite/ippidb/templates/socialaccount/snippets/login_extra.html
@@ -0,0 +1,3 @@
+{% load socialaccount %}
+
+{% providers_media_js %}
diff --git a/ippisite/ippidb/templates/socialaccount/snippets/provider_list.html b/ippisite/ippidb/templates/socialaccount/snippets/provider_list.html
new file mode 100644
index 0000000000000000000000000000000000000000..5dc7ac4403c213607cb3e712c40fe9de523dbbad
--- /dev/null
+++ b/ippisite/ippidb/templates/socialaccount/snippets/provider_list.html
@@ -0,0 +1,20 @@
+{% load socialaccount %}
+
+{% get_providers as socialaccount_providers %}
+
+{% for provider in socialaccount_providers %}
+{% if provider.id == "openid" %}
+{% for brand in provider.get_brands %}
+<li class="list-inline-item">
+  <a title="{{brand.name}}" 
+     class="socialaccount_provider {{provider.id}} {{brand.id}}" 
+     href="{% provider_login_url provider.id openid=brand.openid_url process=process %}"
+     ><i class="fab fa-{{provider.id}}" title="Login with {{provider.id}}"></i>Login with {{brand.name}}</a>
+</li>
+{% endfor %}
+{% endif %}
+<li class="list-inline-item">
+  <a title="{{provider.name}}" class="socialaccount_provider {{provider.id}}" 
+     href="{% provider_login_url provider.id process=process scope=scope auth_params=auth_params %}"><i class="{% if  provider.id != 'orcid' %}fab fa-{% else %}ai ai-{% endif %}{{provider.id}}" title="Login with {{provider.id}}"></i> Login with {{provider.name}}</a>
+</li>
+{% endfor %}