diff --git a/frappe/public/scss/login.scss b/frappe/public/scss/login.scss
index aadeba4002..a80f6ba861 100644
--- a/frappe/public/scss/login.scss
+++ b/frappe/public/scss/login.scss
@@ -20,9 +20,24 @@
 
 			.sign-up-message {
 				margin-top: var(--margin-md);
-				> * {
-					color: var(--text-light);
+				color: var(--text-light);
+				font-size: var(--text-sm);
+
+				a {
 					font-size: var(--text-sm);
+					color: var(--primary);
+				}
+			}
+
+			.social-logins {
+				margin: var(--margin-md) 0;
+				.social-login-buttons {
+					display: grid;
+					grid-template-columns: 1fr 1fr 1fr;
+					grid-gap: var(--padding-sm);
+				}
+				.btn-social {
+					box-shadow: none;
 				}
 			}
 		}
diff --git a/frappe/www/login.html b/frappe/www/login.html
index 731aeb5940..8acdff9c39 100644
--- a/frappe/www/login.html
+++ b/frappe/www/login.html
@@ -63,28 +63,29 @@
 						{{ _("Login with LDAP") }}</button>
 					{% endif %}
 
+					<div class="social-logins text-center">
+						{%- if social_login -%}
+						<p class="text-muted small">{{ _("or") }}</p>
+
+						<div class="social-login-buttons">
+							{% for provider in provider_logins %}
+							<a href="{{ provider.auth_url }}"
+								class="btn btn-secondary btn-sm btn-social btn-{{ provider.name }}">
+								{{ provider.icon }} {{ provider.provider_name }}</a>
+							{% endfor %}
+						</div>
+						{%- endif -%}
+					</div>
+
 					{%- if not disable_signup -%}
-					<p class="text-center sign-up-message">
-						<a href="#signup">{{ _("Don't have an account? Sign up") }}</a>
-					</p>
+					<div class="text-center sign-up-message">
+						{{ _("Don't have an account?") }}
+						<a href="#signup">{{ _("Sign up") }}</a>
+					</div>
 					{%- endif -%}
 				</div>
 			</form>
 		</div>
-		<div class='form-footer'>
-			<div class='social-logins'>
-				{%- if social_login -%}
-				<h6>{{ _("Or login with") }}</h6>
-
-				<p class="text-center">
-					{% for provider in provider_logins %}
-					<a href="{{ provider.auth_url }}" class="btn btn-default btn-sm btn-social btn-{{ provider.name }}">
-						{{ provider.icon }} {{ provider.provider_name }}</a>
-					{% endfor %}
-				</p>
-				{%- endif -%}
-			</div>
-		</div>
 	</section>
 	<section class='for-signup {{ "signup-disabled" if disable_signup else "" }}'>
 		<div class="login-content page-card" style="margin-top: 20px;">