diff --git a/frontend/src/assets/styles/main.css b/frontend/src/assets/styles/main.css
index 412e04da..d8cbf055 100644
--- a/frontend/src/assets/styles/main.css
+++ b/frontend/src/assets/styles/main.css
@@ -177,8 +177,9 @@
 }
 
 /* Force First Time User Experience to be different from the rest of the site */
-.page-ftue {
+.page-ftue, .new-design {
   font-family: 'Inter', 'sans-serif';
+  font-size: 0.8125rem;
 }
 
 
@@ -199,3 +200,7 @@
     display: block;
   }
 }
+
+.modal-active {
+  overflow: hidden;
+}
diff --git a/frontend/src/components/GenericModal.vue b/frontend/src/components/GenericModal.vue
new file mode 100644
index 00000000..ef0a8454
--- /dev/null
+++ b/frontend/src/components/GenericModal.vue
@@ -0,0 +1,228 @@
+<script setup lang="ts">
+import {
+  onMounted, inject, ref, toRefs, onUnmounted,
+} from 'vue';
+import { refreshKey } from '@/keys';
+import NoticeBar from '@/tbpro/elements/NoticeBar.vue';
+
+// component properties
+interface Props {
+  infoMessage?: string;
+  warningMessage?: string;
+  errorMessage?: string;
+}
+const props = withDefaults(defineProps<Props>(), {
+  infoMessage: null,
+  warningMessage: null,
+  errorMessage: null,
+});
+
+const { infoMessage, warningMessage, errorMessage } = toRefs(props);
+
+const refresh = inject(refreshKey);
+
+onMounted(async () => {
+  // Activate page scroll-lock
+  window.document.body.classList.add('modal-active');
+  await refresh();
+});
+onUnmounted(() => {
+  // Release page scroll-lock
+  window.document.body.classList.remove('modal-active');
+});
+</script>
+
+<template>
+  <div class="new-design overlay" role="dialog" tabindex="-1" aria-labelledby="title" aria-modal="true">
+    <div class="modal">
+        <div class="modal-header">
+          <slot name="header"></slot>
+          <notice-bar type="error" v-if="errorMessage">
+            {{ errorMessage }}
+          </notice-bar>
+          <notice-bar type="warning" v-else-if="warningMessage">
+            {{ warningMessage }}
+          </notice-bar>
+          <notice-bar v-else-if="infoMessage">
+            {{ infoMessage }}
+          </notice-bar>
+          <div class="pls-keep-height" v-else/>
+        </div>
+        <div class="modal-body">
+          <slot></slot>
+        </div>
+        <div class="modal-actions">
+          <slot name="actions"></slot>
+        </div>
+        <div class="divider"></div>
+        <div class="footer">
+          <slot name="footer"></slot>
+        </div>
+      </div>
+  </div>
+</template>
+<style scoped>
+@import '@/assets/styles/custom-media.pcss';
+@import '@/assets/styles/mixins.pcss';
+
+.overlay {
+  @mixin faded-background var(--colour-neutral-900);
+  position: fixed;
+  display: flex;
+  left: 0;
+  top: 0;
+  z-index: 55;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  align-items: center;
+  justify-content: center;
+}
+
+.modal-body {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 1rem;
+}
+
+.modal-actions {
+  display: flex;
+  width: 100%;
+  gap: 1rem;
+  justify-content: center;
+  margin-top: 2rem;
+}
+
+.modal-header {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  min-height: 8.0rem;
+  width: 100%;
+  gap: 1rem;
+}
+
+/* Empty space if a notice bar isn't shown */
+.pls-keep-height {
+  min-height: 2.0625rem; /* 33px */
+}
+
+/* position-center apmt-background-color fixed z-[60] flex size-full gap-6 rounded-xl bg-white p-8 pb-0 drop-shadow-xl*/
+.modal {
+  --background-color: var(--colour-neutral-raised);
+  --background: url('@/assets/svg/ftue-background.svg');
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: var(--background-color);
+  background-image: var(--background);
+  background-size: cover;
+  background-repeat: no-repeat;
+  border-radius: 0.75rem;
+  padding: 1rem 1rem 0;
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
+
+.dark .modal {
+  --background: url('@/assets/svg/ftue-background-dark.svg');
+}
+
+.modal::before {
+  content: '';
+  position: absolute;
+  inset: -4px;
+  margin: 50% 5% 0;
+  opacity: 0.8;
+  z-index: -1;
+  border-radius: 9px;
+  background: linear-gradient(119deg, #A3ECE3 -1.91%, #03AFD7 48.8%, #008080 100.54%);
+  filter: blur(30px);
+}
+
+.dark {
+  .modal::before {
+    background: linear-gradient(119deg, #0B8C86 -1.91%, #1C6395 100.54%);
+  }
+}
+
+.divider {
+  width: 100%;
+  padding-bottom: 1px;
+  border-radius: unset;
+  background: linear-gradient(90deg, rgba(21, 66, 124, 0) 20.5%, rgba(21, 66, 124, 0.2) 50%, rgba(21, 66, 124, 0) 79.5%);
+}
+.dark {
+  .divider {
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.40) 50%, rgba(255, 255, 255, 0.00) 100%);
+  }
+}
+
+.footer {
+  bottom: 0;
+  height: 4rem;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-bottom: 1rem;
+  gap: 1rem;
+
+  :deep(a) {
+    color: var(--colour-service-primary-pressed);
+    font-size: 0.75rem;
+    line-height: 1.5rem;
+  }
+}
+
+/* Default styling for #title */
+:deep(#title) {
+  color: var(--colour-ti-base);
+  font-family: 'Inter', 'sans-serif';
+  font-weight: 400;
+  font-size: 1.375rem;
+  line-height: 1.664rem;
+}
+
+@media (--md) {
+  .modal-header {
+    margin-bottom: 0;
+  }
+
+  .modal {
+    width: 50rem; /* 800px */
+    height: 37.5rem; /* 600px */
+    padding: 2rem 2rem 0;
+    overflow: visible;
+  }
+
+  .modal-body {
+    height: 15.0rem;
+  }
+
+  .modal-actions {
+    justify-content: center;
+    position: absolute;
+    left: 0;
+    bottom: 5.75rem;
+    margin: 0;
+  }
+
+  .divider {
+    position: absolute;
+    bottom: 4rem;
+    width: 50rem;
+    height: 0.0625rem;
+  }
+
+  .footer {
+    position: absolute;
+    left: 0;
+    padding-bottom: 0;
+  }
+}
+
+</style>
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index c068de00..2b52a3b3 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -227,7 +227,7 @@
     "home": "Home",
     "immediately": "instant",
     "inPerson": "In person",
-    "inviteCode": "Have an invite code?",
+    "inviteCode": "Invite code",
     "language": "Choose language",
     "legal": "Legal",
     "light": "Light",
diff --git a/frontend/src/tbpro/elements/TextInput.vue b/frontend/src/tbpro/elements/TextInput.vue
index 7d5bbcc3..8167aab9 100644
--- a/frontend/src/tbpro/elements/TextInput.vue
+++ b/frontend/src/tbpro/elements/TextInput.vue
@@ -2,6 +2,10 @@
 import { ref } from 'vue';
 import { HTMLInputElementEvent } from '@/models';
 
+const model = defineModel<string>();
+const isInvalid = ref(false);
+const validationMessage = ref('');
+const isDirty = ref(false);
 const inputRef = ref<HTMLInputElement>(null);
 /**
  * Forwards focus intent to the text input element.
@@ -17,29 +21,38 @@ const focus = () => {
 // component properties
 interface Props {
   name: string;
+  help?: string;
+  remoteError?: string;
   type?: string;
   placeholder?: string;
   required?: boolean;
   disabled?: boolean;
-};
+}
 withDefaults(defineProps<Props>(), {
   type: 'text',
+  help: null,
+  remoteError: null,
   placeholder: '',
   required: false,
   disabled: false,
-})
+});
 
 defineEmits(['submit']);
 defineExpose({ focus });
 
-const model = defineModel<string>();
-const isInvalid = ref(false);
-const validationMessage = ref('');
-
 const onInvalid = (evt: HTMLInputElementEvent) => {
   isInvalid.value = true;
+  isDirty.value = true;
   validationMessage.value = evt.target.validationMessage;
 };
+/**
+ * On any change we mark the element as dirty
+ * this is so we can delay :invalid until
+ * the user does something worth invalidating
+ */
+const onChange = () => {
+  isDirty.value = true;
+};
 </script>
 
 <template>
@@ -51,6 +64,7 @@ const onInvalid = (evt: HTMLInputElementEvent) => {
     <input
       class="tbpro-input"
       v-model="model"
+      :class="{'dirty': isDirty}"
       :type="type"
       :id="name"
       :name="name"
@@ -58,11 +72,18 @@ const onInvalid = (evt: HTMLInputElementEvent) => {
       :placeholder="placeholder"
       :required="required"
       @invalid="onInvalid"
+      @change="onChange"
       ref="inputRef"
     />
-    <span :class="{'visible': isInvalid}" class="help-label">
+    <span v-if="isInvalid" class="help-label invalid">
       {{ validationMessage }}
     </span>
+    <span v-else-if="help" class="help-label">
+      {{ help }}
+    </span>
+    <span v-else class="help-label">
+      <!-- Empty space -->
+    </span>
   </label>
 </template>
 
@@ -86,18 +107,18 @@ const onInvalid = (evt: HTMLInputElementEvent) => {
 }
 
 .help-label {
-  visibility: hidden;
   display: flex;
-  color: var(--colour-danger-default);
+  color: var(--colour-ti-base);
 
   width: 100%;
   min-height: 0.9375rem;
   font-size: 0.625rem;
   line-height: 0.9375rem;
-}
+  padding: 0.1875rem;
 
-.visible {
-  visibility: visible;
+  &.invalid {
+    color: var(--colour-danger-default);
+  }
 }
 
 .required {
@@ -124,7 +145,7 @@ const onInvalid = (evt: HTMLInputElementEvent) => {
     border-radius: 0.125rem;
   }
 
-  &:invalid {
+  &.dirty:invalid {
     --colour-btn-border: var(--colour-ti-critical);
   }
 
diff --git a/frontend/src/views/LoginView.vue b/frontend/src/views/LoginView.vue
index a3b2d7b4..1d0391b8 100644
--- a/frontend/src/views/LoginView.vue
+++ b/frontend/src/views/LoginView.vue
@@ -9,10 +9,13 @@ import {
 import {
   BooleanResponse, AuthUrlResponse, Exception, AuthUrl, Error,
 } from '@/models';
-import PrimaryButton from '@/elements/PrimaryButton.vue';
-import AlertBox from '@/elements/AlertBox.vue';
 import { posthog, usePosthog } from '@/composables/posthog';
 import { MetricEvents } from '@/definitions';
+import GenericModal from '@/components/GenericModal.vue';
+import HomeView from '@/views/HomeView.vue';
+import TextInput from '@/tbpro/elements/TextInput.vue';
+import PrimaryButton from '@/tbpro/elements/PrimaryButton.vue';
+import WordMark from '@/elements/WordMark.vue';
 
 // component constants
 const user = useUserStore();
@@ -25,32 +28,44 @@ const route = useRoute();
 const router = useRouter();
 const isPasswordAuth = inject(isPasswordAuthKey);
 const isFxaAuth = inject(isFxaAuthKey);
-// Show the invite flow if they've failed to login
-const showInviteFlow = ref(false);
 // Don't show the invite code field, only the "Join the waiting list" part
-const onlyShowJoin = ref(false);
+const hideInviteField = ref(false);
 const isLoading = ref(false);
+const formRef = ref();
+
+// eslint-disable-next-line no-shadow
+enum LoginSteps {
+  Login = 1,
+  SignUp = 2,
+  SignUpConfirm = 3,
+}
 
 // form input and error
 const email = ref('');
 const password = ref('');
-const loginError = ref<string>(null);
 const inviteCode = ref('');
-const showConfirmEmailScreen = ref(false);
+const loginStep = ref(LoginSteps.Login);
+const loginError = ref<string>(null);
 
 onMounted(() => {
   if (route.name === 'join-the-waiting-list') {
-    showInviteFlow.value = true;
-    onlyShowJoin.value = true;
+    hideInviteField.value = true;
+    loginStep.value = LoginSteps.SignUp;
   }
 });
 
-const closeError = () => {
-  loginError.value = null;
-};
+const handleFormError = (errObj: Exception) => {
+  const { detail } = errObj;
+  console.log(formRef.value, detail);
+  const fields = formRef.value.elements;
 
-const goHome = () => {
-  router.push('/');
+  detail.forEach((err) => {
+    const name = err?.loc[1];
+    if (name) {
+      fields[name].setCustomValidity(err.ctx.reason);
+    }
+  });
+  console.log(fields);
 };
 
 /**
@@ -69,6 +84,7 @@ const signUp = async () => {
 
   if (error?.value) {
     // Handle error
+    handleFormError(data.value as Exception);
     loginError.value = (data?.value as Exception)?.detail[0]?.msg;
     isLoading.value = false;
     return;
@@ -84,7 +100,8 @@ const signUp = async () => {
       });
     }
   } else {
-    showConfirmEmailScreen.value = true;
+    // Advance them to the "Check your email" step
+    loginStep.value = LoginSteps.SignUpConfirm;
 
     if (usePosthog) {
       posthog.capture(MetricEvents.SignUp, {
@@ -98,21 +115,19 @@ const signUp = async () => {
 };
 
 const login = async () => {
-  if (!email.value || (isPasswordAuth && !password.value)) {
-    loginError.value = t('error.credentialsIncomplete');
-    return;
-  }
-
   isLoading.value = true;
 
   // If they come here the first time we check if they're allowed to login
   // If they come here a second time after not being allowed it's because they have an invite code.
-  if (!showInviteFlow.value) {
+  if (loginStep.value === LoginSteps.Login) {
     const { data: canLogin, error }: BooleanResponse = await call('can-login').post({
       email: email.value,
     }).json();
 
+    console.log(error.value, canLogin.value);
     if (error?.value) {
+      // Handle error
+      handleFormError(canLogin.value as Exception);
       // Bleh
       loginError.value = (canLogin?.value as Exception)?.detail[0]?.msg;
       isLoading.value = false;
@@ -120,7 +135,8 @@ const login = async () => {
     }
 
     if (!canLogin.value) {
-      showInviteFlow.value = true;
+      // Advance them to the SignUp step (waiting list right now!)
+      loginStep.value = LoginSteps.SignUp;
       isLoading.value = false;
       return;
     }
@@ -168,14 +184,17 @@ const login = async () => {
 
 /**
  * What to do when hitting the enter key on a particular input
- * @param isEmailField - Is this the email field? Only needed for password auth
  */
-const onEnter = (isEmailField: boolean) => {
-  if (isEmailField && !isFxaAuth) {
+const onEnter = () => {
+  // Validate the form first
+  loginError.value = null;
+  if (!formRef.value.checkValidity()) {
+    formRef.value.reportValidity();
+    isLoading.value = false;
     return;
   }
 
-  if (showInviteFlow.value && onlyShowJoin.value) {
+  if (loginStep.value === LoginSteps.SignUp || hideInviteField.value) {
     signUp();
   } else {
     login();
@@ -184,98 +203,84 @@ const onEnter = (isEmailField: boolean) => {
 </script>
 
 <template>
-  <!-- page title area -->
-  <div class="flex-center runded flex h-screen w-full bg-gray-100 dark:bg-gray-600">
-    <div class="my-auto flex w-full flex-col items-center justify-center gap-2 rounded-md bg-white px-4 py-12 shadow-lg dark:bg-gray-700 md:w-1/2 md:max-w-lg">
-      <img class="mb-2 w-full max-w-32" src="/appointment_logo.svg" alt="Appointment Logo"/>
-      <div class="text-center text-4xl font-light">{{ t('app.title') }}</div>
-      <alert-box v-if="loginError" @close="closeError" class="mt-4">
-        {{ loginError }}
-      </alert-box>
-      <div class="flex w-full flex-col items-center justify-center px-4" v-if="showConfirmEmailScreen">
-        <div class="my-8 grid w-full gap-8">
-          <h2 class="text-xl">{{ t('waitingList.signUpHeading') }}</h2>
-          <p>{{ t('waitingList.signUpInfo') }}</p>
-          <p>{{ t('waitingList.signUpCheckYourEmail') }}</p>
-        </div>
-        <primary-button
-          :label="t('label.back')"
-          class="btn-back"
-          @click="goHome"
-          :title="t('label.back')"
-          :disabled="isLoading"
-        />
-      </div>
-      <div class="flex w-full flex-col items-center justify-center px-4" v-else>
-        <div class="my-8 grid w-full gap-8">
-          <label class="flex flex-col items-center pl-4">
-          <span class="w-full">
-            {{ t('label.email') }}
-          </span>
-            <input
-              v-model="email"
-              type="email"
-              class="mr-6 w-full rounded-md"
-              :class="{'mr-4': isFxaAuth}"
-              @keydown.enter="onEnter(true)"
-            />
-          </label>
-          <label class="flex flex-col items-center pl-4" v-if="showInviteFlow && !onlyShowJoin">
-          <span class="w-full">
-          {{ t('label.inviteCode') }}
-          </span>
-            <input
-              v-model="inviteCode"
-              type="text"
-              class="mr-6 w-full rounded-md"
-              :class="{'mr-4': isFxaAuth}"
-              @keydown.enter="onEnter(false)"
-            />
-          </label>
-          <div v-if="isFxaAuth && (!showInviteFlow || inviteCode.length > 0)" class="text-center text-sm">{{ t('text.login.continueToFxa') }}</div>
-          <label v-if="isPasswordAuth" class="flex flex-col items-center pl-4">
-            <span class="w-full">{{ t('label.password') }}</span>
-            <input
-              v-model="password"
-              type="password"
-              class="mr-6 w-full rounded-md"
-              @keyup.enter="onEnter(false)"
-            />
-          </label>
-        </div>
-        <primary-button
-          v-if="showInviteFlow && inviteCode.length > 0"
-          :label="t('label.signUpWithInviteCode')"
-          class="btn-login-with-invite-code"
-          @click="login"
-          :title="t('label.signUpWithInviteCode')"
-          :disabled="isLoading"
-        />
-        <primary-button
-          v-else-if="showInviteFlow"
-          :label="t('label.addToWaitingList')"
-          class="btn-add-to-waiting-list"
-          @click="signUp"
-          :title="t('label.addToWaitingList')"
-          :disabled="isLoading"
-        />
-        <primary-button
-          v-else-if="!isFxaAuth"
-          :label="t('label.logIn')"
-          class="btn-login"
-          @click="login"
-          :title="t('label.logIn')"
-          :disabled="isLoading"
-        />
-        <primary-button
-          v-else
-          :label="t('label.continue')"
-          class="btn-continue"
-          @click="login"
-          :title="t('label.continue')"
-          :disabled="isLoading"
-        />
-      </div>
+  <div>
+  <home-view></home-view>
+  <generic-modal :error-message="loginError">
+    <template v-slot:header>
+      <word-mark/>
+      <h2 id="title" v-if="loginStep === LoginSteps.Login">
+        Simplify your day – just enter your email:
+      </h2>
+      <h2 id="title" v-else-if="loginStep === LoginSteps.SignUp">
+        Have an invite code? Enter it here
+      </h2>
+      <h2 id="title" v-else>
+        Complete your sign up
+      </h2>
+    </template>
+    <div class="intro-text" v-if="loginStep === LoginSteps.Login">
+      <p><strong>Returning?</strong> We'll recognize you and direct you to your account.</p>
+      <p><strong>New?</strong> We'll help you set up quickly.</p>
+    </div>
+    <div class="intro-text" v-if="loginStep === LoginSteps.SignUpConfirm">
+      <p><strong>Please confirm your email to join our waiting list.</strong></p>
+      <p>Check your inbox for more information shortly.</p>
     </div>
+    <div class="form-body">
+      <form v-if="loginStep !== LoginSteps.SignUpConfirm" class="form" ref="formRef" autocomplete="off" @submit.prevent @keyup.enter="() => onEnter()">
+        <text-input name="email" v-model="email" :required="true" :help="loginStep === LoginSteps.Login || hideInviteField ? 'Your privacy is important to us.' : null">{{ t('label.email') }}</text-input>
+        <text-input v-if="isPasswordAuth" name="password" v-model="password" :required="true">{{ t('label.password') }}</text-input>
+        <text-input v-if="loginStep === LoginSteps.SignUp && !hideInviteField" name="inviteCode" v-model="inviteCode" help="If you don't have an invite code, add your email to our waiting list">{{ t('label.inviteCode') }}</text-input>
+      </form>
+    </div>
+    <template v-slot:actions>
+      <primary-button
+        class="btn-continue"
+        :title="t('label.continue')"
+        @click="onEnter()"
+        v-if="loginStep !== LoginSteps.SignUpConfirm"
+      >
+        {{ t('label.continue') }}
+      </primary-button>
+      <primary-button
+        class="btn-close"
+        :title="t('label.close')"
+        @click="router.push({name: 'home'})"
+        v-else
+      >
+        {{ t('label.close') }}
+      </primary-button>
+    </template>
+    <template v-slot:footer>
+      <router-link :to="{name: 'home'}">Plan less, do more</router-link>
+    </template>
+  </generic-modal>
   </div>
 </template>
+<style scoped>
+.intro-text {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  gap: 0.983125rem;
+  margin-bottom: 1.5625rem;
+}
+.form-body {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  min-width: 23.75rem;
+}
+
+.btn-continue, .btn-close {
+  /* Right align */
+  margin-right: 2rem;
+  margin-left: auto;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+</style>