diff --git a/static/css/styles.css b/static/css/styles.css
index 783484cb..f7156363 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -882,10 +882,6 @@ input[type=file] {
   right: 0.75rem;
 }
 
-.top-20 {
-  top: 5rem;
-}
-
 .top-14 {
   top: 3.5rem;
 }
@@ -1388,18 +1384,18 @@ input[type=file] {
   margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
-.space-y-5 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
-}
-
 .space-x-8 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(2rem * var(--tw-space-x-reverse));
   margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-y-5 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
+}
+
 .space-x-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.5rem * var(--tw-space-x-reverse));
@@ -1527,6 +1523,16 @@ input[type=file] {
   background-color: rgb(23 42 52 / 0.6);
 }
 
+.bg-orange {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 159 0 / var(--tw-bg-opacity));
+}
+
+.bg-slate {
+  --tw-bg-opacity: 1;
+  background-color: rgb(49 74 87 / var(--tw-bg-opacity));
+}
+
 .bg-gradient-to-r {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
diff --git a/templates/socialaccount/login.html b/templates/socialaccount/login.html
index bbf1cee0..629a50cb 100644
--- a/templates/socialaccount/login.html
+++ b/templates/socialaccount/login.html
@@ -4,18 +4,20 @@
 {% block head_title %}{% trans "Sign In" %}{% endblock %}
 
 {% block content %}
-{% if process == "connect" %}
-<h1>{% blocktrans with provider.name as provider %}Connect {{ provider }}{% endblocktrans %}</h1>
+<div class="text-center my-6">
+  <div class="py-6">
+    {% if process == "connect" %}
+      <h1 class="text-4xl">{% blocktrans with provider.name as provider %}Connect {{ provider }}{% endblocktrans %}</h1>
+      <p>{% blocktrans with provider.name as provider %}You are about to connect a new third party account from {{ provider }}.{% endblocktrans %}</p>
+    {% else %}
+      <h1 class="text-4xl">{% blocktrans with provider.name as provider %}Sign In Via {{ provider }}{% endblocktrans %}</h1>
+      <p>{% blocktrans with provider.name as provider %}You are about to sign in using a third party account from {{ provider }}.{% endblocktrans %}</p>
+    {% endif %}
+  </div>
 
-<p>{% blocktrans with provider.name as provider %}You are about to connect a new third party account from {{ provider }}.{% endblocktrans %}</p>
-{% else %}
-<h1>{% blocktrans with provider.name as provider %}Sign In Via {{ provider }}{% endblocktrans %}</h1>
-
-<p>{% blocktrans with provider.name as provider %}You are about to sign in using a third party account from {{ provider }}.{% endblocktrans %}</p>
-{% endif %}
-
-<form method="post">
-  {% csrf_token %}
-  <button type="submit">{% trans "Continue" %}</button>
-</form>
+  <form method="post">
+    {% csrf_token %}
+    <button type="submit" class="border border-orange py-3 px-4 rounded text-orange uppercase">{% trans "Continue" %}</button>
+  </form>
+</div>
 {% endblock %}
diff --git a/templates/socialaccount/snippets/provider_list.html b/templates/socialaccount/snippets/provider_list.html
index c43cdb4f..6be5cd5b 100644
--- a/templates/socialaccount/snippets/provider_list.html
+++ b/templates/socialaccount/snippets/provider_list.html
@@ -11,6 +11,16 @@
      >{{brand.name}}</a>
 {% endfor %}
 {% endif %}
-  <a title="{{provider.name}}" class="px-8 py-3 border border-steel text-base font-medium rounded-md text-orange hover:bg-gray-50 md:py-4 md:text-lg md:px-10 {{provider.id}}"
-     href="{% provider_login_url provider.id process=process scope=scope auth_params=auth_params %}">{{provider.name}}</a>
+    <a title="{{provider.name}}"
+       class="px-8 py-3 text-base font-medium rounded-md border border-orange text-white bg-slate md:py-4 md:text-lg md:px-10 {{provider.id}}"
+       href="{% provider_login_url provider.id process=process scope=scope auth_params=auth_params %}"
+    >
+      {% if provider.name == "GitHub" %}
+        <i class="fab fa-github mr-3"></i>
+      {% endif %}
+      {% if provider.name == "Google" %}
+        <i class="fab fa-google mr-3"></i>
+      {% endif %}
+      Login with {{provider.name}}
+    </a>
 {% endfor %}