diff --git a/frappe/public/scss/website/login.scss b/frappe/public/scss/login.scss
similarity index 86%
rename from frappe/public/scss/website/login.scss
rename to frappe/public/scss/login.scss
index dc2b6ac642..ec35ed2e07 100644
--- a/frappe/public/scss/website/login.scss
+++ b/frappe/public/scss/login.scss
@@ -1,3 +1,5 @@
+@import "./desk/variables";
+
 .for-login,
 .for-forgot,
 .for-signup {
@@ -85,42 +87,25 @@
 				}
 			}
 
+			.field-icon {
+				left: 9px;
+				top: 7px;
+				position: absolute;
+				z-index: 2;
+			}
+
+			.email-field,
 			.password-field {
 				position: relative;
 
 				input {
 					padding-left: 35px;
-				}
-
-				.password-icon {
-					left: 9px;
-					top: 7px;
-					position: absolute;
-					z-index: 2;
-					cursor: pointer;
-					font-size: 12px;
+					font-size: var(--text-md);
 				}
 
 				.toggle-password {
 					right: 9px;
-					top: 8px;
-					position: absolute;
-					z-index: 2;
-					cursor: pointer;
-					font-size: 12px;
-				}
-			}
-
-			.email-field {
-				position: relative;
-
-				input {
-					padding-left: 35px;
-				}
-
-				.email-icon {
-					left: 9px;
-					top: 7px;
+					top: 9px;
 					position: absolute;
 					z-index: 2;
 					cursor: pointer;
@@ -141,7 +126,8 @@
 				margin-bottom: var(--margin-lg, 20px);
 			}
 
-			h3 {
+			h4 {
+				font-size: var(--text-xl);
 				color: var(--text-color);
 			}
 		}
diff --git a/frappe/public/scss/website/index.scss b/frappe/public/scss/website/index.scss
index fa55d60312..a4f5b8ccdd 100644
--- a/frappe/public/scss/website/index.scss
+++ b/frappe/public/scss/website/index.scss
@@ -14,7 +14,6 @@
 @import 'doc';
 @import 'navbar';
 @import 'footer';
-@import 'login';
 
 .ql-editor.read-mode {
 	padding: 0;
diff --git a/frappe/www/login.html b/frappe/www/login.html
index 096db51b99..482f9af434 100644
--- a/frappe/www/login.html
+++ b/frappe/www/login.html
@@ -1,5 +1,9 @@
 {% extends "templates/web.html" %}
 
+{% block head_include %}
+<link type="text/css" rel="stylesheet" href="/assets/css/login.css?ver={{ build_version }}">
+{% endblock %}
+
 {% block page_content %}
 <!-- {{ for_test }} -->
 <div>
@@ -11,7 +15,7 @@
 		</div>
 	</noscript>
 	<section class='for-login'>
-		<div class="login-content page-card">
+		<div class="login-content page-card p-12">
 			<form class="form-signin form-login" role="form">
 				<div class="page-card-head">
 					<img class="app-logo" src="{{ logo }}">
@@ -24,7 +28,7 @@
 							placeholder="{% if login_name_placeholder %}{{ login_name_placeholder  }}{% else %}{{ _('Email Address') }}{% endif %}"
 							required autofocus>
 
-						<svg class="email-icon" width="20" height="20" viewBox="0 0 20 20" fill="none"
+						<svg class="field-icon email-icon" width="20" height="20" viewBox="0 0 20 20" fill="none"
 							xmlns="http://www.w3.org/2000/svg">
 							<path
 								d="M2.5 7.65149V15.0757C2.5 15.4374 2.64367 15.7842 2.8994 16.04C3.15513 16.2957 3.50198 16.4394 3.86364 16.4394H16.1364C16.498 16.4394 16.8449 16.2957 17.1006 16.04C17.3563 15.7842 17.5 15.4374 17.5 15.0757V7.65149"
@@ -40,7 +44,7 @@
 						<input type="password" id="login_password" class="form-control"
 							placeholder="{{ _('Password') }}" required>
 
-						<svg class="password-icon" width="20" height="20" viewBox="0 0 20 20" fill="none"
+						<svg class="field-icon password-icon" width="20" height="20" viewBox="0 0 20 20" fill="none"
 							xmlns="http://www.w3.org/2000/svg">
 							<path fill-rule="evenodd" clip-rule="evenodd"
 								d="M10.0961 1.93768H10.0264C8.94806 1.92763 7.90976 2.34591 7.13951 3.10075C6.36866 3.85619 5.9294 4.88687 5.91833 5.96612L5.91831 5.96612V5.97124V6.52695H4.3125C3.20793 6.52695 2.3125 7.42238 2.3125 8.52695V16.0165C2.3125 17.121 3.20793 18.0165 4.3125 18.0165H15.7356C16.8401 18.0165 17.7356 17.121 17.7356 16.0165V8.52695C17.7356 7.42238 16.8401 6.52695 15.7356 6.52695H14.1297V6.04576C14.1397 4.96742 13.7214 3.92913 12.9666 3.15888C12.2112 2.38803 11.1805 1.94877 10.1012 1.9377V1.93768H10.0961ZM13.1297 6.52695V6.04336V6.03838H13.1297C13.1378 5.22428 12.8222 4.44029 12.2524 3.85881C11.6831 3.27793 10.9067 2.94667 10.0934 2.93768H10.024H10.019V2.93765C9.20491 2.92955 8.42092 3.24512 7.83944 3.81497C7.25856 4.38423 6.9273 5.1607 6.91831 5.9739V6.52695H13.1297ZM4.3125 7.52695C3.76022 7.52695 3.3125 7.97467 3.3125 8.52695V16.0165C3.3125 16.5687 3.76022 17.0165 4.3125 17.0165H15.7356C16.2879 17.0165 16.7356 16.5687 16.7356 16.0165V8.52695C16.7356 7.97467 16.2879 7.52695 15.7356 7.52695H4.3125ZM10.0242 13.2384C10.5581 13.2384 10.9909 12.8056 10.9909 12.2717C10.9909 11.7377 10.5581 11.3049 10.0242 11.3049C9.49023 11.3049 9.05738 11.7377 9.05738 12.2717C9.05738 12.8056 9.49023 13.2384 10.0242 13.2384ZM11.9909 12.2717C11.9909 13.3579 11.1104 14.2384 10.0242 14.2384C8.93794 14.2384 8.05738 13.3579 8.05738 12.2717C8.05738 11.1854 8.93794 10.3049 10.0242 10.3049C11.1104 10.3049 11.9909 11.1854 11.9909 12.2717Z"
@@ -54,7 +58,7 @@
 						<a href="#forgot">{{ _("Forgot Password?") }}</a></p>
 				</div>
 
-				<div class="page-card-actions">
+				<div class="page-card-actions mt-8">
 					<button class="btn btn-sm btn-primary btn-block btn-login" type="submit">
 						{{ _("Login") }}</button>
 
@@ -71,7 +75,7 @@
 							{% for provider in provider_logins %}
 							<div class="login-button-wrapper">
 								<a href="{{ provider.auth_url }}"
-									class="btn btn-block btn-secondary btn-sm btn-social btn-{{ provider.name }}">
+									class="btn btn-block btn-default btn-sm btn-social btn-{{ provider.name }}">
 									<span
 										class="provider-icon">{{ provider.icon }}</span>{{ provider.provider_name }}</a>
 							</div>
@@ -134,7 +138,7 @@
 					<div class="email-field">
 						<input type="email" id="forgot_email" class="form-control"
 							placeholder="{{ _('Email Address') }}" required autofocus>
-						<svg class="email-icon" width="20" height="20" viewBox="0 0 20 20" fill="none"
+						<svg class="field-icon email-icon" width="20" height="20" viewBox="0 0 20 20" fill="none"
 							xmlns="http://www.w3.org/2000/svg">
 							<path
 								d="M2.5 7.65149V15.0757C2.5 15.4374 2.64367 15.7842 2.8994 16.04C3.15513 16.2957 3.50198 16.4394 3.86364 16.4394H16.1364C16.498 16.4394 16.8449 16.2957 17.1006 16.04C17.3563 15.7842 17.5 15.4374 17.5 15.0757V7.65149"