diff --git a/services/web/app/views/user/login.pug b/services/web/app/views/user/login.pug
index f4a4b4f69b..d9291e3331 100644
--- a/services/web/app/views/user/login.pug
+++ b/services/web/app/views/user/login.pug
@@ -1,4 +1,4 @@
-extends ../layout
+extends ../layout-marketing
 
 block vars
 	- metadata = { viewport: true }
@@ -11,36 +11,29 @@ block content
 					.card
 						.page-header
 							h1 #{translate("log_in")}
-						form(async-form="login", name="loginForm", action='/login', method="POST", ng-cloak)
+						form(data-ol-form, name="loginForm", action='/login', method="POST")
 							input(name='_csrf', type='hidden', value=csrfToken)
-							form-messages(for="loginForm")
+							div(data-ol-form-messages)
 							.form-group
 								input.form-control(
 									type='email',
 									name='email',
 									required,
 									placeholder='email@example.com',
-									ng-model="email",
-									ng-model-options="{ updateOn: 'blur' }",
 									focus="true"
 								)
-								span.small.text-primary(ng-show="loginForm.email.$invalid && loginForm.email.$dirty")
-									| #{translate("must_be_email_address")}
 							.form-group
 								input.form-control(
 									type='password',
 									name='password',
 									required,
 									placeholder='********',
-									ng-model="password"
 								)
-								span.small.text-primary(ng-show="loginForm.password.$invalid && loginForm.password.$dirty")
-									| #{translate("required")}
 							.actions
 								button.btn-primary.btn(
 									type='submit',
-									ng-disabled="loginForm.inflight"
+									data-ol-disabled-inflight
 								)
-									span(ng-show="!loginForm.inflight") #{translate("login")}
-									span(ng-show="loginForm.inflight") #{translate("logging_in")}…
+									span(data-ol-not-inflight-text) #{translate("login")}
+									span(hidden data-ol-inflight-text) #{translate("logging_in")}…
 								a.pull-right(href='/user/password/reset') #{translate("forgot_your_password")}?
diff --git a/services/web/frontend/js/features/form-helpers/hydrate-form.js b/services/web/frontend/js/features/form-helpers/hydrate-form.js
index 0e44c061df..cba8d5e7fa 100644
--- a/services/web/frontend/js/features/form-helpers/hydrate-form.js
+++ b/services/web/frontend/js/features/form-helpers/hydrate-form.js
@@ -49,6 +49,7 @@ function formSubmitHelper(formEl) {
       }
       messageBag.push({
         type: 'error',
+        key: error.data?.message?.key,
         text,
       })
     } finally {
@@ -84,9 +85,21 @@ function showMessages(formEl, messageBag) {
 
   // Clear content
   messagesEl.textContent = ''
+  formEl.querySelectorAll('[data-ol-custom-form-message]').forEach(el => {
+    el.hidden = true
+  })
 
   // Render messages
   messageBag.forEach(message => {
+    if (message.key) {
+      formEl
+        .querySelectorAll(`[data-ol-custom-form-message="${message.key}"]`)
+        .forEach(el => {
+          el.hidden = false
+        })
+      return
+    }
+
     const messageEl = document.createElement('div')
     messageEl.className = classNames('alert', {
       'alert-danger': message.type === 'error',