diff --git a/frappe/public/scss/login.scss b/frappe/public/scss/login.scss
index 08409e4ef4..f3e4d66e07 100644
--- a/frappe/public/scss/login.scss
+++ b/frappe/public/scss/login.scss
@@ -11,20 +11,22 @@
 
 .for-login,
 .for-forgot,
-.for-signup {
+.for-signup,
+.for-email-login {
 	display: none;
+	margin: 70px 0;
 
 	@include media-breakpoint-up(sm) {
 		.page-card {
-			padding: 30px;
+			padding: 45px;
 			background-color: #fff;
 			box-shadow: var(--shadow-base);
 		}
 	}
 
 	.page-card {
-		max-width: 420px;
-		margin: 70px auto;
+		max-width: 470px;
+		margin: 0 auto;
 		border-radius: var(--border-radius-md);
 
 		form {
@@ -38,58 +40,6 @@
 
 		.page-card-actions {
 			margin-top: var(--margin-lg);
-
-			.sign-up-message {
-				margin-top: var(--margin-md);
-				color: var(--text-light);
-				font-size: var(--text-md);
-
-				a {
-					font-size: var(--text-md);
-					color: var(--primary);
-				}
-			}
-
-			.social-logins {
-				margin: var(--margin-md) 0;
-				font-size: var(--text-md);
-
-				.social-login-buttons {
-					display: flex;
-					flex-wrap: wrap;
-					justify-content: center;
-					margin-left: -4px;
-					margin-right: -4px;
-					margin-top: var(--margin-md);
-
-					.login-button-wrapper {
-						@include media-breakpoint-up(md) {
-							min-width: 33.33%;
-						}
-						min-width: 50%;
-						padding: 0 4px;
-						margin-bottom: var(--margin-sm);
-					}
-
-					.btn-social {
-						font-size: var(--text-sm);
-						color: var(--text-gray-700);
-						box-shadow: none;
-						display: flex;
-						place-content: center;
-
-						&.btn-salesforce {
-							i {
-								color: var(--blue-400);
-							}
-						}
-
-						img {
-							margin-right: var(--padding-xs);
-						}
-					}
-				}
-			}
 		}
 
 		.page-card-body {
@@ -156,6 +106,54 @@
 					font-size: 12px;
 				}
 			}
+
+			.btn-login-option {
+				font-size: var(--text-md);
+				font-weight: 500;
+				color: var(--text-gray-700);
+				background: var(--gray-100);
+				box-shadow: none;
+				border: none;
+				display: flex;
+				place-content: center;
+
+				&.btn-salesforce {
+					i {
+						color: var(--blue-400);
+					}
+				}
+
+				img {
+					margin-right: var(--padding-xs);
+				}
+
+				&:hover {
+					border: none;
+					background: var(--gray-300);
+				}
+			}
+
+			.social-logins {
+				margin: var(--margin-md) 0;
+				font-size: var(--text-md);
+
+				.social-login-buttons {
+					margin-top: var(--margin-md);
+
+					.login-button-wrapper {
+						@include media-breakpoint-up(md) {
+							min-width: 33.33%;
+						}
+						min-width: 50%;
+						padding: 0 4px;
+						margin-bottom: var(--margin-sm);
+					}
+				}
+			}
+
+			.login-divider {
+				margin: var(--margin-md) 0;
+			}
 		}
 
 		.page-card-head {
@@ -163,7 +161,7 @@
 			text-align: center;
 			font-size: var(--text-xl);
 			font-weight: 600;
-			margin-bottom: var(--margin-xl);
+			margin-bottom: var(--margin-lg);
 
 			img {
 				max-height: 42px;
@@ -177,6 +175,18 @@
 		}
 	}
 
+
+	.sign-up-message {
+		margin-top: var(--margin-md);
+		color: var(--text-light);
+		font-size: var(--text-md);
+
+		a {
+			font-size: var(--text-md);
+			color: var(--primary);
+		}
+	}
+
 	.invalid-login {
 		-webkit-animation: wiggle 0.5s linear;
 	}
diff --git a/frappe/templates/includes/login/login.js b/frappe/templates/includes/login/login.js
index 39f8317f21..52ac70513d 100644
--- a/frappe/templates/includes/login/login.js
+++ b/frappe/templates/includes/login/login.js
@@ -94,6 +94,7 @@ login.route = function () {
 login.reset_sections = function (hide) {
 	if (hide || hide === undefined) {
 		$("section.for-login").toggle(false);
+		$("section.for-email-login").toggle(false);
 		$("section.for-forgot").toggle(false);
 		$("section.for-signup").toggle(false);
 	}
@@ -106,6 +107,11 @@ login.reset_sections = function (hide) {
 login.login = function () {
 	login.reset_sections();
 	$(".for-login").toggle(true);
+}
+
+login.email = function () {
+	login.reset_sections();
+	$(".for-email-login").toggle(true);
 	$("#login_email").focus();
 }
 
diff --git a/frappe/www/login.html b/frappe/www/login.html
index a751b53abc..f78ca53557 100644
--- a/frappe/www/login.html
+++ b/frappe/www/login.html
@@ -21,7 +21,43 @@
 					<img class="app-logo" src="{{ logo }}">
 					<h4>{{ _('Login to {0}').format(app_name or _("Frappe")) }}</h4>
 				</div>
+				<div class="page-card-body">
+					<div class="social-logins text-center">
+						{%- if social_login -%}
+						<div class="social-login-buttons">
+							{% for provider in provider_logins %}
+							<div class="login-button-wrapper">
+								<a href="{{ provider.auth_url }}"
+									class="btn btn-block btn-default btn-sm btn-login-option btn-{{ provider.name }}">
+									{{ provider.icon }} {{ _("Login With") }} {{ provider.provider_name }}</a>
+							</div>
+							{% endfor %}
+							<p class="text-muted login-divider">{{ _("or") }}</p>
+						</div>
+						{%- endif -%}
+					</div>
+					<a href="#email"
+						class="btn btn-block btn-default btn-sm btn-login-option">
+					 {{ _("Login With Email") }}</a>
+				</div>
+			</form>
+		</div>
+		{%- if not disable_signup -%}
+		<div class="text-center sign-up-message">
+			{{ _("Don't have an account?") }}
+			<a href="#signup">{{ _("Sign up") }}</a>
+		</div>
+		{%- endif -%}
+	</section>
 
+
+	<section class='for-email-login'>
+		<div class="login-content page-card">
+			<form class="form-signin form-login" role="form">
+				<div class="page-card-head">
+					<img class="app-logo" src="{{ logo }}">
+					<h4>{{ _('Login to {0}').format(app_name or _("Frappe")) }}</h4>
+				</div>
 				<div class="page-card-body">
 					<div class="form-group">
 						<label class="form-label sr-only" for="login_email">{{ login_label or _("Email")}}</label>
@@ -71,31 +107,15 @@
 						{{ _("Login with LDAP") }}</button>
 					{% endif %}
 
-					<div class="social-logins text-center">
-						{%- if social_login -%}
-						<p class="text-muted">{{ _("or") }}</p>
-
-						<div class="social-login-buttons">
-							{% for provider in provider_logins %}
-							<div class="login-button-wrapper">
-								<a href="{{ provider.auth_url }}"
-									class="btn btn-block btn-default btn-sm btn-social btn-{{ provider.name }}">
-									{{ provider.icon }}{{ provider.provider_name }}</a>
-							</div>
-							{% endfor %}
-						</div>
-						{%- endif -%}
-					</div>
-
-					{%- if not disable_signup -%}
-					<div class="text-center sign-up-message">
-						{{ _("Don't have an account?") }}
-						<a href="#signup">{{ _("Sign up") }}</a>
-					</div>
-					{%- endif -%}
 				</div>
 			</form>
 		</div>
+		{%- if not disable_signup -%}
+		<div class="text-center sign-up-message">
+			{{ _("Don't have an account?") }}
+			<a href="#signup">{{ _("Sign up") }}</a>
+		</div>
+		{%- endif -%}
 	</section>
 	<section class='for-signup {{ "signup-disabled" if disable_signup else "" }}'>
 		<div class="login-content page-card">