diff --git a/contentcuration/contentcuration/frontend/accounts/pages/AccountsMain.vue b/contentcuration/contentcuration/frontend/accounts/pages/AccountsMain.vue
index 647913874f..2b900e90b7 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/AccountsMain.vue
+++ b/contentcuration/contentcuration/frontend/accounts/pages/AccountsMain.vue
@@ -1,17 +1,20 @@
 <template>
 
-  <VApp>
-    <VLayout
-      fill-height
-      justify-center
-      class="main pt-5"
-    >
-      <div>
-        <!-- Sign in -->
-        <VCard
-          class="pa-4"
-          style="width: 300px; margin: 0 auto"
-        >
+  <!--
+    theme--light is load-bearing: Vuetify 1.5 (still active via VApp on other
+    account pages, e.g. MessageLayout.vue) generates a global .link background
+    rule that collides with the basic-link KButtons below. It's only
+    neutralised under .theme--light in shared/styles/main.scss. Remove this
+    only once that rule is un-nested there.
+  -->
+  <div
+    class="page theme--light"
+    :style="{ backgroundColor: $themePalette.grey.v_100 }"
+  >
+    <div>
+      <!-- Sign in -->
+      <StudioRaisedBox class="sign-in-card">
+        <template #header>
           <div class="k-logo-container">
             <KLogo
               altText="Kolibri Logo with background"
@@ -19,103 +22,124 @@
               :size="120"
             />
           </div>
-          <h2 class="primary--text py-2 text-xs-center">
-            {{ $tr('kolibriStudio') }}
-          </h2>
-          <Banner
-            :value="loginFailed"
-            :text="$tr('loginFailed')"
-            error
-          />
-          <Banner
-            :value="offline"
-            :text="$tr('loginFailedOffline')"
-            error
-          />
-          <Banner
-            :value="Boolean(nextParam)"
-            :text="$tr('loginToProceed')"
-            class="pb-0 px-0"
-            data-test="loginToProceed"
-          />
-          <VForm
-            ref="form"
-            lazy-validation
-            class="py-3"
-            @submit.prevent="submit"
+          <h1
+            class="notranslate page-title"
+            :style="{ color: $themeTokens.primary }"
           >
-            <EmailField
-              v-model="username"
-              autofocus
-            />
-            <PasswordField
-              v-model="password"
-              :label="$tr('passwordLabel')"
-            />
-            <p>
+            {{ $tr('kolibriStudio') }}
+          </h1>
+        </template>
+        <template #main>
+          <div class="card-body">
+            <StudioBanner
+              v-if="loginFailed"
+              role="alert"
+              error
+            >
+              {{ $tr('loginFailed') }}
+            </StudioBanner>
+            <StudioBanner
+              v-if="offline"
+              role="alert"
+              error
+            >
+              {{ $tr('loginFailedOffline') }}
+            </StudioBanner>
+            <StudioBanner
+              v-if="nextParam"
+              data-test="loginToProceed"
+            >
+              {{ $tr('loginToProceed') }}
+            </StudioBanner>
+            <form
+              class="form"
+              @submit.prevent="submit"
+            >
+              <StudioEmailField
+                v-model="username"
+                autofocus
+                :label="$tr('emailLabel')"
+                :errorMessages="touched.username && errors.username ? [usernameErrorText] : []"
+                :appearanceOverrides="{ maxWidth: '100%' }"
+                @blur="touched.username = true"
+              />
+              <StudioPasswordField
+                v-model="password"
+                :errorMessages="touched.password && errors.password ? [passwordErrorText] : []"
+                :appearanceOverrides="{ maxWidth: '100%' }"
+                @blur="touched.password = true"
+              />
+              <p>
+                <KRouterLink
+                  :to="{ name: 'ForgotPassword' }"
+                  :text="$tr('forgotPasswordLink')"
+                  appearance="basic-link"
+                />
+              </p>
+              <KButton
+                primary
+                class="w-100"
+                :text="$tr('signInButton')"
+                :disabled="offline || busy"
+                type="submit"
+              />
               <KRouterLink
-                :to="{ name: 'ForgotPassword' }"
-                :text="$tr('forgotPasswordLink')"
+                primary
+                class="create-account-link w-100"
+                :text="$tr('createAccountButton')"
+                :to="{ name: 'Create' }"
+                appearance="flat-button"
+              />
+            </form>
+            <hr
+              class="divider"
+              :style="{ borderTopColor: $themeTokens.fineLine }"
+            >
+            <p class="guest-link">
+              <KButton
+                href="/channels/#public"
+                :text="$tr('guestModeLink')"
                 appearance="basic-link"
               />
             </p>
-            <KButton
-              primary
-              class="w-100"
-              :text="$tr('signInButton')"
-              :disabled="offline || busy"
-              type="submit"
-            />
-            <KRouterLink
-              primary
-              class="mt-2 w-100"
-              :text="$tr('createAccountButton')"
-              :to="{ name: 'Create' }"
-              appearance="flat-button"
-            />
-          </VForm>
-          <VDivider />
-          <p class="mt-4 text-xs-center">
-            <KButton
-              href="/channels/#public"
-              :text="$tr('guestModeLink')"
-              appearance="basic-link"
-            />
-          </p>
-        </VCard>
-
-        <!-- Footer -->
-        <LanguageSwitcherList class="mt-3 text-xs-center" />
-
-        <p class="links mt-3 text-xs-center">
-          <span>
-            <KButton
-              :text="$tr('privacyPolicyLink')"
-              appearance="basic-link"
-              @click="showPrivacyPolicy"
-            />
-          </span>
-          <span>
-            <KButton
-              :text="$tr('TOSLink')"
-              appearance="basic-link"
-              @click="showTermsOfService"
-            />
-          </span>
-          <span>
-            <KButton
-              href="https://learningequality.org/"
-              :text="$tr('copyright', { year: new Date().getFullYear() })"
-              appearance="basic-link"
-              iconAfter="openNewTab"
-              target="_blank"
-            />
-          </span>
-        </p>
-      </div>
-    </VLayout>
+          </div>
+        </template>
+      </StudioRaisedBox>
+
+      <!-- Footer -->
+      <LanguageSwitcherList class="language-switcher" />
+
+      <p
+        class="links"
+        :style="{ color: $themePalette.grey.v_700 }"
+      >
+        <span>
+          <KButton
+            :text="$tr('privacyPolicyLink')"
+            appearance="basic-link"
+            @click="showPrivacyPolicy"
+          />
+        </span>
+        <span>
+          <KButton
+            :text="$tr('TOSLink')"
+            appearance="basic-link"
+            @click="showTermsOfService"
+          />
+        </span>
+        <span>
+          <KButton
+            href="https://learningequality.org/"
+            :text="$tr('copyright', { year: new Date().getFullYear() })"
+            appearance="basic-link"
+            iconAfter="openNewTab"
+            target="_blank"
+          />
+        </span>
+      </p>
+    </div>
     <PolicyModals />
-  </VApp>
+  </div>
 
 </template>
 
@@ -123,30 +147,50 @@
 <script>
 
   import { mapActions, mapState } from 'vuex';
-  import EmailField from 'shared/views/form/EmailField';
-  import PasswordField from 'shared/views/form/PasswordField';
-  import Banner from 'shared/views/Banner';
+  import StudioEmailField from '../components/form/StudioEmailField';
+  import StudioPasswordField from '../components/form/StudioPasswordField';
   import PolicyModals from 'shared/views/policies/PolicyModals';
-  import { policies } from 'shared/constants';
+  import StudioBanner from 'shared/views/StudioBanner';
+  import StudioRaisedBox from 'shared/views/StudioRaisedBox';
   import LanguageSwitcherList from 'shared/languageSwitcher/LanguageSwitcherList';
+  import { policies } from 'shared/constants';
+  import commonStrings from 'shared/translator';
+  import { generateFormMixin } from 'shared/mixins';
   import { redirectBrowser } from 'shared/utils/navigation';
 
+  const formMixin = generateFormMixin({
+    username: {
+      required: true,
+      validator: v => Boolean(v && v.trim()) && /.+@.+\..+/.test(v),
+    },
+    password: {
+      required: true,
+    },
+  });
+
   export default {
     name: 'AccountsMain',
     components: {
-      Banner,
-      EmailField,
       LanguageSwitcherList,
-      PasswordField,
       PolicyModals,
+      StudioBanner,
+      StudioEmailField,
+      StudioPasswordField,
+      StudioRaisedBox,
     },
+    mixins: [formMixin],
     data() {
       return {
-        username: '',
-        password: '',
         loginFailed: false,
         busy: false,
-        loginFailedOffline: false,
+        // Gates error display until blur, since formMixin's setters otherwise
+        // mark errors on every keystroke. Create.vue has no equivalent gate,
+        // so the two forms validate differently; epic-level decision tracked
+        // on #5060.
+        touched: {
+          username: false,
+          password: false,
+        },
       };
     },
     computed: {
@@ -157,6 +201,17 @@
         const params = new URLSearchParams(window.location.search.substring(1));
         return params.get('next');
       },
+      usernameErrorText() {
+        if (!this.username || !this.username.trim()) {
+          /* eslint-disable-next-line kolibri/vue-no-undefined-string-uses */
+          return commonStrings.$tr('fieldRequired');
+        }
+        return this.$tr('validEmailMessage');
+      },
+      passwordErrorText() {
+        /* eslint-disable-next-line kolibri/vue-no-undefined-string-uses */
+        return commonStrings.$tr('fieldRequired');
+      },
     },
     methods: {
       ...mapActions(['login']),
@@ -166,41 +221,59 @@
       showPrivacyPolicy() {
         this.$router.push({ query: { showPolicy: policies.PRIVACY } });
       },
-      submit() {
-        if (this.$refs.form.validate()) {
-          this.busy = true;
-          const credentials = {
-            username: this.username,
-            password: this.password,
-          };
-          return this.login(credentials)
-            .then(() => {
-              this.loginFailedOffline = false;
-              this.loginFailed = false;
-              redirectBrowser(this.nextParam || window.Urls.channels());
-            })
-            .catch(err => {
-              this.busy = false;
-              if (err.message === 'Network Error') {
-                this.loginFailedOffline = true;
-              } else if (err.response.status === 405) {
-                this.$router.push({ name: 'AccountNotActivated' });
-              } else {
-                this.loginFailed = true;
-              }
-            });
-        }
-        return Promise.resolve();
+      // eslint-disable-next-line vue/no-unused-properties
+      onValidationFailed() {
+        this.touched.username = true;
+        this.touched.password = true;
+        this.$nextTick(() => {
+          const selector = this.errors.username ? 'input[type="email"]' : 'input[type="password"]';
+          const firstInvalidInput = this.$el.querySelector(selector);
+          if (firstInvalidInput) {
+            firstInvalidInput.focus();
+          }
+        });
+      },
+      // eslint-disable-next-line vue/no-unused-properties
+      onSubmit(formData) {
+        this.busy = true;
+        // formMixin's clean() trims every field, including password, before
+        // building formData. Reading the untrimmed this.password here (not
+        // formData.password) preserves leading/trailing spaces the user typed.
+        const credentials = {
+          username: formData.username,
+          password: this.password,
+        };
+        return this.login(credentials)
+          .then(() => {
+            this.loginFailed = false;
+            redirectBrowser(this.nextParam || window.Urls.channels());
+          })
+          .catch(err => {
+            this.busy = false;
+            if (err.message === 'Network Error') {
+              // The offline banner is driven by state.connection.online via
+              // the offline computed property, so no local flag is needed here.
+              return;
+            }
+            if (err.response.status === 405) {
+              this.$router.push({ name: 'AccountNotActivated' });
+            } else {
+              this.loginFailed = true;
+            }
+          });
       },
     },
     $trs: {
       kolibriStudio: 'Kolibri Studio',
-      passwordLabel: 'Password',
+      // Matches the legacy EmailField's own label. StudioEmailField's default
+      // ('Email address') would otherwise change this page's visible text.
+      emailLabel: 'Email',
       forgotPasswordLink: 'Forgot your password?',
       signInButton: 'Sign in',
       createAccountButton: 'Create an account',
       guestModeLink: 'Explore without an account',
       loginFailed: 'Email or password is incorrect',
+      validEmailMessage: 'Please enter a valid email',
       privacyPolicyLink: 'Privacy policy',
       TOSLink: 'Terms of service',
       copyright: '© {year} Learning Equality',
@@ -215,31 +288,74 @@
 
 <style lang="scss" scoped>
 
-  .main {
+  .page {
+    display: flex;
+    justify-content: center;
+    min-height: 100vh;
+    padding-top: 48px;
     overflow: auto;
-    /* stylelint-disable-next-line custom-property-pattern */
-    background-color: var(--v-backgroundColor-base);
+  }
+
+  .sign-in-card {
+    width: 300px;
+    margin: 0 auto;
+  }
+
+  .k-logo-container {
+    display: flex;
+    justify-content: center;
+  }
+
+  .page-title {
+    padding: 8px 0;
+    font-size: 24px;
+    font-weight: bold;
+    text-align: center;
+  }
+
+  .card-body {
+    padding: 0 16px;
+  }
+
+  .form {
+    padding: 16px 0;
+  }
+
+  .create-account-link {
+    margin-top: 8px;
+  }
+
+  .divider {
+    border: 0;
+    border-top: 1px solid;
+  }
+
+  .guest-link {
+    margin-top: 24px;
+    text-align: center;
+  }
+
+  .w-100 {
+    width: 100%;
+  }
+
+  .language-switcher {
+    margin-top: 16px;
+    text-align: center;
   }
 
   .links {
+    margin-top: 16px;
+    text-align: center;
+
     span {
       &:not(:last-child)::after {
         margin: 0 8px 0 12px;
         font-size: 14pt;
-        color: var(--v-grey-base);
         vertical-align: middle;
         content: '•';
       }
     }
   }
 
-  .w-100 {
-    width: 100%;
-  }
-
-  .k-logo-container {
-    display: flex;
-    justify-content: center;
-  }
-
 </style>
diff --git a/contentcuration/contentcuration/frontend/accounts/pages/__tests__/accountsMain.spec.js b/contentcuration/contentcuration/frontend/accounts/pages/__tests__/accountsMain.spec.js
index 7187a208a4..7baacced42 100644
--- a/contentcuration/contentcuration/frontend/accounts/pages/__tests__/accountsMain.spec.js
+++ b/contentcuration/contentcuration/frontend/accounts/pages/__tests__/accountsMain.spec.js
@@ -2,12 +2,26 @@ import { render, screen, waitFor } from '@testing-library/vue';
 import userEvent from '@testing-library/user-event';
 import VueRouter from 'vue-router';
 import AccountsMain from '../AccountsMain.vue';
+import StudioPasswordField from '../../components/form/StudioPasswordField';
+import commonStrings from 'shared/translator';
+import { createTranslator } from 'shared/i18n';
 import { redirectBrowser } from 'shared/utils/navigation';
 
 jest.mock('shared/utils/navigation', () => ({
   redirectBrowser: jest.fn(),
 }));
 
+const { fieldRequired$ } = commonStrings;
+const {
+  emailLabel$,
+  signInButton$,
+  loginFailed$,
+  validEmailMessage$,
+  loginToProceed$,
+  loginFailedOffline$,
+} = createTranslator(AccountsMain.name, AccountsMain.$trs);
+const { passwordLabel$ } = createTranslator(StudioPasswordField.name, StudioPasswordField.$trs);
+
 window.Urls = {
   channels: () => '/channels/',
 };
@@ -71,35 +85,110 @@ describe('AccountsMain', () => {
   it('should render sign-in form with email, password fields and sign in button', () => {
     makeWrapper();
 
-    expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
-    expect(screen.getByLabelText(/password/i)).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /sign in/i })).toBeInTheDocument();
+    expect(screen.getByLabelText(emailLabel$())).toBeInTheDocument();
+    expect(screen.getByLabelText(passwordLabel$())).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: signInButton$() })).toBeInTheDocument();
   });
 
   it('should show error when submitting empty form', async () => {
     makeWrapper();
-    await user.click(screen.getByRole('button', { name: /sign in/i }));
+    await user.click(screen.getByRole('button', { name: signInButton$() }));
 
-    // User sees validation errors (from EmailField and PasswordField components)
+    // User sees validation errors (from StudioEmailField and StudioPasswordField components)
     await waitFor(() => {
-      const errorMessages = screen.queryAllByText(/required|field is required/i);
+      const errorMessages = screen.queryAllByText(fieldRequired$());
       expect(errorMessages.length).toBeGreaterThan(0);
     });
   });
 
-  it('should show error message when login fails', async () => {
+  it('should not attempt to log in when the form is invalid', async () => {
+    const loginMock = jest.fn();
+    makeWrapper({ loginMock });
+
+    await user.click(screen.getByRole('button', { name: signInButton$() }));
+
+    expect(loginMock).not.toHaveBeenCalled();
+  });
+
+  it('should move focus to the email field when it is the first invalid field', async () => {
+    makeWrapper();
+    const emailField = screen.getByLabelText(emailLabel$());
+
+    await user.click(screen.getByRole('button', { name: signInButton$() }));
+
+    await waitFor(() => {
+      expect(emailField).toHaveFocus();
+    });
+  });
+
+  it('should move focus to the password field when only it is invalid', async () => {
+    makeWrapper();
+    const passwordField = screen.getByLabelText(passwordLabel$());
+
+    await user.type(screen.getByLabelText(emailLabel$()), 'test@test.com');
+    await user.click(screen.getByRole('button', { name: signInButton$() }));
+
+    await waitFor(() => {
+      expect(passwordField).toHaveFocus();
+    });
+  });
+
+  it('should not show the email error while the user is still typing', async () => {
+    makeWrapper();
+
+    await user.type(screen.getByLabelText(emailLabel$()), 'not-an-email');
+
+    expect(screen.queryByText(validEmailMessage$())).not.toBeInTheDocument();
+  });
+
+  it('should show the email error once the field loses focus', async () => {
+    makeWrapper();
+    const emailField = screen.getByLabelText(emailLabel$());
+
+    await user.type(emailField, 'not-an-email');
+    await user.tab();
+
+    await waitFor(() => {
+      expect(screen.getByText(validEmailMessage$())).toBeInTheDocument();
+    });
+  });
+
+  it('should show and announce the offline banner when offline', () => {
+    makeWrapper({ online: false });
+
+    expect(screen.getByRole('alert')).toHaveTextContent(loginFailedOffline$());
+  });
+
+  it('should preserve leading and trailing whitespace in the password', async () => {
+    const EMAIL = 'test@test.com';
+    const PASSWORD_WITH_SPACES = '  spaced  ';
+    const loginMock = jest.fn().mockResolvedValue();
+    makeWrapper({ loginMock });
+
+    await user.type(screen.getByLabelText(emailLabel$()), EMAIL);
+    await user.type(screen.getByLabelText(passwordLabel$()), PASSWORD_WITH_SPACES);
+    await user.click(screen.getByRole('button', { name: signInButton$() }));
+
+    await waitFor(() => {
+      expect(loginMock).toHaveBeenCalledWith('login', {
+        username: EMAIL,
+        password: PASSWORD_WITH_SPACES,
+      });
+    });
+  });
+
+  it('should show and announce login failure to screen readers', async () => {
     const loginMock = jest.fn().mockRejectedValue({
       response: { status: 401 },
     });
     makeWrapper({ loginMock });
 
-    await user.type(screen.getByLabelText(/email/i), 'test@test.com');
-    await user.type(screen.getByLabelText(/password/i), 'wrongpassword');
-    await user.click(screen.getByRole('button', { name: /sign in/i }));
+    await user.type(screen.getByLabelText(emailLabel$()), 'test@test.com');
+    await user.type(screen.getByLabelText(passwordLabel$()), 'wrongpassword');
+    await user.click(screen.getByRole('button', { name: signInButton$() }));
 
-    // User sees error banner
     await waitFor(() => {
-      expect(screen.getByText('Email or password is incorrect')).toBeInTheDocument();
+      expect(screen.getByRole('alert')).toHaveTextContent(loginFailed$());
     });
   });
 
@@ -107,9 +196,9 @@ describe('AccountsMain', () => {
     const loginMock = jest.fn().mockResolvedValue();
     makeWrapper({ loginMock });
 
-    await user.type(screen.getByLabelText(/email/i), 'test@test.com');
-    await user.type(screen.getByLabelText(/password/i), 'testpassword');
-    await user.click(screen.getByRole('button', { name: /sign in/i }));
+    await user.type(screen.getByLabelText(emailLabel$()), 'test@test.com');
+    await user.type(screen.getByLabelText(passwordLabel$()), 'testpassword');
+    await user.click(screen.getByRole('button', { name: signInButton$() }));
 
     // User is redirected to channels page
     await waitFor(() => {
@@ -120,7 +209,7 @@ describe('AccountsMain', () => {
   it('should show "You must sign in" banner when ?next= param is present', () => {
     makeWrapper({ nextParam: '/protected-page/' });
 
-    expect(screen.getByText('You must sign in to view that page')).toBeInTheDocument();
+    expect(screen.getByText(loginToProceed$())).toBeInTheDocument();
   });
 
   it('should redirect to next URL when provided after successful login', async () => {
@@ -128,9 +217,9 @@ describe('AccountsMain', () => {
     const nextUrl = '/protected-page/';
     makeWrapper({ loginMock, nextParam: nextUrl });
 
-    await user.type(screen.getByLabelText(/email/i), 'test@test.com');
-    await user.type(screen.getByLabelText(/password/i), 'testpassword');
-    await user.click(screen.getByRole('button', { name: /sign in/i }));
+    await user.type(screen.getByLabelText(emailLabel$()), 'test@test.com');
+    await user.type(screen.getByLabelText(passwordLabel$()), 'testpassword');
+    await user.click(screen.getByRole('button', { name: signInButton$() }));
 
     // User is redirected to next URL
     await waitFor(() => {
@@ -144,9 +233,9 @@ describe('AccountsMain', () => {
     });
     const { router } = makeWrapper({ loginMock });
 
-    await user.type(screen.getByLabelText(/email/i), 'test@test.com');
-    await user.type(screen.getByLabelText(/password/i), 'testpassword');
-    await user.click(screen.getByRole('button', { name: /sign in/i }));
+    await user.type(screen.getByLabelText(emailLabel$()), 'test@test.com');
+    await user.type(screen.getByLabelText(passwordLabel$()), 'testpassword');
+    await user.click(screen.getByRole('button', { name: signInButton$() }));
 
     // User is redirected to account not activated page
     await waitFor(() => {
@@ -157,6 +246,6 @@ describe('AccountsMain', () => {
   it('should disable sign in button when offline', () => {
     makeWrapper({ online: false });
 
-    expect(screen.getByRole('button', { name: /sign in/i })).toBeDisabled();
+    expect(screen.getByRole('button', { name: signInButton$() })).toBeDisabled();
   });
 });