From 2f4c0edc81f369cf336f74687a543428d9cf32b4 Mon Sep 17 00:00:00 2001
From: lukicenturi <lukicenturi@gmail.com>
Date: Thu, 20 Jul 2023 14:42:26 +0700
Subject: [PATCH] feat: introduces new registration page design

---
 app.vue                                       |   8 +-
 assets/css/main.scss                          |   7 +-
 .../account/activation/AccountActivate.vue    |  53 +-
 .../account/activation/PendingActivation.vue  |  31 +-
 .../account/home/AccountInformation.vue       |  16 +-
 components/account/home/ChangePassword.vue    |   5 +-
 components/account/home/DangerZone.vue        |  29 +-
 .../account/home/UnverifiedEmailWarning.vue   |  27 +-
 components/account/login/LoginForm.vue        | 236 ++++----
 components/account/login/LoginModal.vue       |   4 +-
 components/account/login/LoginPage.vue        |  36 +-
 .../account/password/PasswordChanged.vue      |  33 +-
 components/account/password/PasswordForm.vue  |  93 ++-
 .../account/password/PasswordLinkSend.vue     |  26 +-
 components/account/password/PasswordReset.vue | 182 +++---
 components/account/signup/SignupAccount.vue   | 174 ++++++
 components/account/signup/SignupAddress.vue   | 233 ++++++++
 .../signup/SignupCustomerInformation.vue      | 137 +++++
 components/account/signup/SignupForm.vue      | 531 +++++-------------
 .../account/signup/SignupIntroduction.vue     |  40 ++
 components/common/PageContainer.vue           |   2 +-
 components/footer/PageFooter.vue              |  20 +-
 components/header/PageHeader.vue              |   6 +-
 layouts/default.vue                           |  37 +-
 layouts/landing.vue                           |  12 +
 locales/en.json                               | 128 ++++-
 package.json                                  |   2 +-
 pages/activate/[uid]/[token].vue              |   4 -
 pages/activation.vue                          |   4 -
 pages/download.vue                            |   4 +
 pages/index.vue                               |   4 +
 pages/login.vue                               |   4 -
 pages/password/changed.vue                    |   4 -
 pages/password/recover.vue                    |   4 -
 pages/password/reset/[uid]/[token].vue        |   4 -
 pages/password/reset/index.vue                |   4 -
 pages/password/send.vue                       |   4 -
 pages/signup.vue                              |   4 -
 pnpm-lock.yaml                                |   8 +-
 tests/e2e/specs/pages/signup.spec.cy.ts       |  68 ++-
 types/common.ts                               |   2 +
 types/index.ts                                |   4 +-
 types/signup.ts                               |  19 +-
 utils/validation.ts                           |  12 +
 44 files changed, 1354 insertions(+), 911 deletions(-)
 create mode 100644 components/account/signup/SignupAccount.vue
 create mode 100644 components/account/signup/SignupAddress.vue
 create mode 100644 components/account/signup/SignupCustomerInformation.vue
 create mode 100644 components/account/signup/SignupIntroduction.vue
 create mode 100644 layouts/landing.vue
 create mode 100644 utils/validation.ts

diff --git a/app.vue b/app.vue
index 8e7f33e9..f8eacfa7 100644
--- a/app.vue
+++ b/app.vue
@@ -1,7 +1,5 @@
 <template>
-  <div>
-    <NuxtLayout>
-      <NuxtPage />
-    </NuxtLayout>
-  </div>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
 </template>
diff --git a/assets/css/main.scss b/assets/css/main.scss
index 526b04c0..054c3a92 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -1,12 +1,11 @@
 @import "media";
 
 .page {
-  scroll-behavior: smooth;
-  overflow-x: hidden;
+  @apply overflow-x-hidden scroll-smooth;
 }
 
 .body {
-  @apply overflow-x-hidden overflow-y-hidden text-rui-text;
+  @apply text-rui-text;
 }
 
 .container {
@@ -18,5 +17,5 @@
 }
 
 .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
-  opacity: 0;
+  @apply opacity-0;
 }
diff --git a/components/account/activation/AccountActivate.vue b/components/account/activation/AccountActivate.vue
index b7d5b172..a97b17e8 100644
--- a/components/account/activation/AccountActivate.vue
+++ b/components/account/activation/AccountActivate.vue
@@ -22,39 +22,34 @@ const validateToken = async () => {
 };
 
 onBeforeMount(async () => await validateToken());
-
-const css = useCssModule();
+const { t } = useI18n();
 </script>
 
 <template>
-  <PageContainer>
-    <template #title> Account Activation </template>
-    <div :class="css.content">
-      <div v-if="!validating">
-        <UserActionMessage v-if="isValid">
-          <template #header>Welcome to rotki</template>
-
-          <p>Your rotki account has been successfully activated.</p>
-          <div>
-            To see your dashboard click
-            <ButtonLink to="/home" inline color="primary">here</ButtonLink>
-          </div>
-        </UserActionMessage>
-        <UserActionMessage v-else>
-          <template #header>Invalid Link</template>
-          <p>The activation link is not valid.</p>
-          <p>This can happen if you have already confirmed your account.</p>
-        </UserActionMessage>
+  <div
+    class="container py-16 lg:pt-[200px] lg:pb-32 flex flex-col items-center justify-center"
+  >
+    <div class="w-[380px]">
+      <div v-if="validating" class="flex justify-center">
+        <RuiProgress variant="indeterminate" circular color="primary" />
       </div>
-      <div v-else>
-        <LoadingIndicator />
+      <div v-else-if="!isValid" class="space-y-3">
+        <div class="text-h4">{{ t('auth.activation.invalid.title') }}</div>
+        <div class="text-body-1 text-rui-text-secondary">
+          {{ t('auth.activation.invalid.message') }}
+        </div>
+      </div>
+      <div v-else class="space-y-3">
+        <div class="text-h4">{{ t('auth.activation.success.title') }}</div>
+        <div class="text-body-1 text-rui-text-secondary">
+          <span>
+            {{ t('auth.activation.success.message') }}
+          </span>
+          <ButtonLink to="/home" inline color="primary">
+            {{ t('common.here') }}
+          </ButtonLink>
+        </div>
       </div>
     </div>
-  </PageContainer>
+  </div>
 </template>
-
-<style module lang="scss">
-.content {
-  @apply flex flex-row justify-center;
-}
-</style>
diff --git a/components/account/activation/PendingActivation.vue b/components/account/activation/PendingActivation.vue
index 31b46601..257f47da 100644
--- a/components/account/activation/PendingActivation.vue
+++ b/components/account/activation/PendingActivation.vue
@@ -1,27 +1,16 @@
 <script setup lang="ts">
-const css = useCssModule();
+const { t } = useI18n();
 </script>
 
 <template>
-  <PageContainer>
-    <template #title> Almost Done </template>
-    <div :class="css.content">
-      <UserActionMessage>
-        <template #header>Thank you for registering.</template>
-        <p>
-          To use your new rotki account you have to first confirm your e-mail.
-        </p>
-        <p>
-          Please check your mailbox and follow the instructions to activate your
-          account.
-        </p>
-      </UserActionMessage>
+  <div
+    class="container py-16 lg:pt-[250px] lg:pb-32 flex flex-col items-center justify-center"
+  >
+    <div class="w-[500px] space-y-3">
+      <div class="text-h4">{{ t('auth.pending_activation.title') }}</div>
+      <div class="text-body-1 text-rui-text-secondary">
+        {{ t('auth.pending_activation.message') }}
+      </div>
     </div>
-  </PageContainer>
+  </div>
 </template>
-
-<style lang="scss" module>
-.content {
-  @apply flex flex-row justify-center;
-}
-</style>
diff --git a/components/account/home/AccountInformation.vue b/components/account/home/AccountInformation.vue
index ee4e1584..c7577313 100644
--- a/components/account/home/AccountInformation.vue
+++ b/components/account/home/AccountInformation.vue
@@ -203,17 +203,11 @@ const css = useCssModule();
       @blur="v$.country.$touch()"
     />
 
-    <RuiButton
-      variant="outlined"
-      size="lg"
-      class="uppercase outline-2 mt-4"
-      :loading="loading"
-      rounded
-      color="primary"
-      @click="update()"
-    >
-      Update
-    </RuiButton>
+    <div class="mt-8">
+      <RuiButton size="lg" :loading="loading" color="primary" @click="update()">
+        Update
+      </RuiButton>
+    </div>
   </CardContainer>
 </template>
 
diff --git a/components/account/home/ChangePassword.vue b/components/account/home/ChangePassword.vue
index c15b8572..0c27907e 100644
--- a/components/account/home/ChangePassword.vue
+++ b/components/account/home/ChangePassword.vue
@@ -112,14 +112,11 @@ const css = useCssModule();
       autocomplete="new-password"
     />
 
-    <div :class="css.row">
+    <div :class="css.row" class="mt-8">
       <RuiButton
         :disabled="v$.$invalid"
-        variant="outlined"
         size="lg"
-        class="uppercase outline-2 mt-4"
         :loading="loading"
-        rounded
         color="primary"
         @click="changePassword()"
       >
diff --git a/components/account/home/DangerZone.vue b/components/account/home/DangerZone.vue
index 9b924826..c59320be 100644
--- a/components/account/home/DangerZone.vue
+++ b/components/account/home/DangerZone.vue
@@ -34,28 +34,29 @@ const css = useCssModule();
 
 <template>
   <CardContainer warning>
-    <TextHeading>Danger Zone</TextHeading>
+    <TextHeading>
+      <div class="text-rui-error">Delete account</div>
+    </TextHeading>
 
-    <p :class="css.text">
+    <p class="text-rui-text-secondary">
       Proceeding will completely delete your account data. If you proceed you
       will not be able to recover your account!
     </p>
 
-    <p v-if="isSubscriber" :class="css.warning">
+    <p v-if="isSubscriber" class="text-rui-warning">
       You cannot delete your account while you have an active subscription.
     </p>
 
-    <RuiButton
-      :disabled="isSubscriber"
-      variant="outlined"
-      size="lg"
-      class="uppercase outline-2"
-      rounded
-      color="warning"
-      @click="confirm = true"
-    >
-      Delete My Account
-    </RuiButton>
+    <div class="mt-8">
+      <RuiButton
+        :disabled="isSubscriber"
+        size="lg"
+        color="error"
+        @click="confirm = true"
+      >
+        Delete My Account
+      </RuiButton>
+    </div>
 
     <ModalDialog v-model="confirm" padding="1rem">
       <div :class="css.title">Delete Account</div>
diff --git a/components/account/home/UnverifiedEmailWarning.vue b/components/account/home/UnverifiedEmailWarning.vue
index be302558..ea0461aa 100644
--- a/components/account/home/UnverifiedEmailWarning.vue
+++ b/components/account/home/UnverifiedEmailWarning.vue
@@ -1,29 +1,10 @@
 <script setup lang="ts">
-const color = '#ed6c02';
 const { t } = useI18n();
-const css = useCssModule();
 </script>
 
 <template>
-  <div role="alert" :class="css.alert">
-    <AlertIcon :color="color" width="17px" :class="css.icon" />
-    {{ t('account.unverified_email.message') }}
-  </div>
+  <RuiAlert
+    type="warning"
+    :description="t('account.unverified_email.message')"
+  />
 </template>
-
-<style module lang="scss">
-.alert {
-  @apply py-1.5 px-4 mb-4 mt-4 text-sm rounded flex flex-row font-sans;
-
-  background: linear-gradient(
-      0deg,
-      rgba(255, 255, 255, 0.9),
-      rgba(255, 255, 255, 0.9)
-    ),
-    v-bind(color);
-}
-
-.icon {
-  @apply mr-2;
-}
-</style>
diff --git a/components/account/login/LoginForm.vue b/components/account/login/LoginForm.vue
index b68d59d6..caf2c256 100644
--- a/components/account/login/LoginForm.vue
+++ b/components/account/login/LoginForm.vue
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import { get, set } from '@vueuse/core';
+import { required } from '@vuelidate/validators';
+import { useVuelidate } from '@vuelidate/core';
 import { useMainStore } from '~/store';
 
 const props = withDefaults(defineProps<{ modal?: boolean }>(), {
@@ -8,165 +11,124 @@ const props = withDefaults(defineProps<{ modal?: boolean }>(), {
 const emit = defineEmits<{ (e: 'complete'): void }>();
 
 const { modal } = toRefs(props);
-const username = ref('');
-const password = ref('');
-const showPassword = ref(false);
-const error = ref('');
+const username: Ref<string> = ref('');
+const password: Ref<string> = ref('');
+const loading: Ref<boolean> = ref(false);
+const error: Ref<string> = ref('');
+const hadError: Ref<boolean> = ref(false);
+
+const rules = {
+  username: { required },
+  password: { required },
+};
 
-const valid = computed(() => !!unref(username) && !!unref(password));
+const v$ = useVuelidate(
+  rules,
+  {
+    username,
+    password,
+  },
+  {
+    $autoDirty: true,
+  },
+);
 
 const { login } = useMainStore();
 
 const performLogin = async () => {
-  error.value = await login({
-    username: username.value,
-    password: password.value,
-  });
-
-  if (!error.value) {
-    if (modal.value) {
+  set(loading, true);
+  set(
+    error,
+    await login({
+      username: username.value,
+      password: password.value,
+    }),
+  );
+  set(loading, false);
+
+  if (!get(error)) {
+    if (get(modal)) {
       emit('complete');
     } else {
       await navigateTo('/home');
     }
+  } else {
+    set(hadError, true);
   }
 };
 
-const css = useCssModule();
+const { t } = useI18n();
 </script>
 
 <template>
-  <BoxContainer>
-    <template #label>Sign in</template>
-    <InputField
-      id="username"
-      v-model="username"
-      filled
-      label="Username"
-      type="text"
-      autocomplete="username"
-      @focus="error = ''"
-    >
-      <template #prepend>
-        <span :class="css.prepend">
-          <UserIcon />
-        </span>
-      </template>
-    </InputField>
-    <InputField
-      id="password"
-      v-model="password"
-      :class="css.password"
-      :type="showPassword ? 'text' : 'password'"
-      filled
-      autocomplete="current-password"
-      label="Password"
-      @enter="performLogin()"
-      @focus="error = ''"
-    >
-      <template #prepend>
-        <span :class="css.prepend">
-          <PasswordIcon />
-        </span>
-      </template>
-      <template #append>
-        <button :class="css.show" @click="showPassword = !showPassword">
-          <span v-if="showPassword">HIDE</span>
-          <span v-else>SHOW</span>
-        </button>
-      </template>
-    </InputField>
-
-    <div :class="css.errorWrapper">
-      <div v-if="error" :class="css.error">{{ error }}</div>
+  <div class="w-[360px] space-y-8">
+    <div class="space-y-3">
+      <div class="text-h4">{{ t('auth.login.title') }}</div>
+      <div class="text-body-1 text-rui-text-secondary">
+        {{ t('auth.login.message') }}
+      </div>
     </div>
+    <form @submit.prevent="">
+      <div class="space-y-5">
+        <RuiTextField
+          id="username"
+          v-model="username"
+          dense
+          variant="outlined"
+          :label="t('auth.common.username')"
+          autocomplete="username"
+          hide-details
+          color="primary"
+          :error-messages="error ? [error] : []"
+          @focus="error = ''"
+        />
+
+        <RuiRevealableTextField
+          id="password"
+          v-model="password"
+          variant="outlined"
+          dense
+          :label="t('auth.common.password')"
+          autocomplete="current-password"
+          hide-details
+          color="primary"
+          :error-messages="error ? [error] : []"
+          @enter="performLogin()"
+          @focus="error = ''"
+        />
+      </div>
+
+      <div class="flex justify-end mb-6 mt-2">
+        <ButtonLink to="/password/recover" inline>
+          {{ t('auth.login.forgot_password') }}
+        </ButtonLink>
+      </div>
+
+      <div v-if="error" class="text-body-1 text-center text-rui-error pb-6">
+        {{ error }}
+      </div>
 
-    <div :class="css.buttonContainer">
       <RuiButton
-        :disabled="!valid"
-        variant="default"
-        size="lg"
-        class="w-full"
+        :disabled="v$.$invalid || loading"
         color="primary"
+        :loading="loading"
+        class="w-full"
+        size="lg"
         @click="performLogin()"
       >
-        Sign in
+        {{ t('actions.continue') }}
       </RuiButton>
-    </div>
-
-    <div :class="css.reset">
-      <ButtonLink to="/password/recover" color="primary">
-        Forgot password?
+    </form>
+    <div class="flex items-center justify-center">
+      <span class="text-rui-text-secondary">
+        {{ t('auth.login.first_time_premium') }}
+      </span>
+      <ButtonLink to="/signup" inline color="primary">
+        {{ t('auth.login.sign_up_now') }}
       </ButtonLink>
     </div>
-
-    <div :class="css.divider" />
-
-    <div :class="css.create">
-      First time premium?
-      <ButtonLink to="/signup" inline color="primary"> Sign up now </ButtonLink>
-    </div>
-  </BoxContainer>
+  </div>
+  <div v-if="hadError" class="mt-14 w-[660px]">
+    <RuiAlert type="error" :description="t('auth.login.alert_error')" />
+  </div>
 </template>
-
-<style lang="scss" module>
-@import '@/assets/css/media.scss';
-@import '@/assets/css/main.scss';
-
-.buttonContainer {
-  @apply flex flex-row align-middle justify-center mt-8;
-}
-
-.reset {
-  @apply flex flex-row justify-center text-rui-primary focus:text-yellow-800 my-6;
-
-  width: 100%;
-
-  @include for-size(phone-only) {
-    margin-top: calc($mobile-margin / 2);
-    margin-bottom: calc($mobile-margin / 2);
-  }
-}
-
-.prepend {
-  @apply p-3 flex items-center;
-}
-
-.password {
-  @apply mt-5;
-}
-
-.show {
-  @apply m-2 focus:outline-none;
-
-  width: 56px;
-  font-size: 12px;
-  line-height: 16px;
-  letter-spacing: 0;
-  color: #363f41;
-}
-
-.divider {
-  @apply border border-solid border-rui-text opacity-20;
-
-  width: 328px;
-}
-
-.create {
-  @apply flex flex-row align-middle justify-center mt-6 mb-2;
-}
-
-.signup {
-  @apply font-bold ml-2;
-}
-
-.error {
-  @apply text-rui-error text-xs tracking-tight;
-}
-
-.errorWrapper {
-  @apply flex flex-row justify-center -mt-1.5;
-
-  height: 18px;
-}
-</style>
diff --git a/components/account/login/LoginModal.vue b/components/account/login/LoginModal.vue
index db3b0061..47f482f6 100644
--- a/components/account/login/LoginModal.vue
+++ b/components/account/login/LoginModal.vue
@@ -16,6 +16,8 @@ const dismiss = () => {
     boxless
     @update:model-value="dismiss()"
   >
-    <LoginForm modal @complete="dismiss()" />
+    <div class="bg-white p-8 shadow-5 rounded">
+      <LoginForm modal @complete="dismiss()" />
+    </div>
   </ModalDialog>
 </template>
diff --git a/components/account/login/LoginPage.vue b/components/account/login/LoginPage.vue
index b9fa92df..7de1496a 100644
--- a/components/account/login/LoginPage.vue
+++ b/components/account/login/LoginPage.vue
@@ -1,33 +1,7 @@
-<script setup lang="ts">
-const css = useCssModule();
-</script>
-
 <template>
-  <PageContainer>
-    <template #title> Premium account management </template>
-    <template #hint>
-      <div :class="css.hint">
-        Here you can create or login to your premium account. A premium account
-        is only needed to unlock the premium features of the application and is
-        not the same as the account you use in the Rotki application.
-        Credentials for one account can not be used for the other.
-      </div>
-    </template>
-
-    <div :class="css.container">
-      <LoginForm />
-    </div>
-  </PageContainer>
+  <div
+    class="container py-16 lg:py-32 flex flex-col items-center justify-center"
+  >
+    <LoginForm />
+  </div>
 </template>
-
-<style lang="scss" module>
-.hint {
-  @apply items-center text-justify mb-16;
-
-  max-width: 500px;
-}
-
-.container {
-  @apply flex flex-row align-middle justify-center w-full h-full items-center py-16;
-}
-</style>
diff --git a/components/account/password/PasswordChanged.vue b/components/account/password/PasswordChanged.vue
index ef5b9e2a..c4d67df3 100644
--- a/components/account/password/PasswordChanged.vue
+++ b/components/account/password/PasswordChanged.vue
@@ -1,12 +1,27 @@
+<script setup lang="ts">
+const { t } = useI18n();
+</script>
+
 <template>
-  <PageContainer>
-    <template #title>Password Change</template>
-    <UserActionMessage>
-      <template #header>Password changed.</template>
-      <div>
-        Your password has been changed. Go to your
-        <ButtonLink to="/home" inline color="primary">account</ButtonLink>.
+  <div
+    class="container py-16 lg:pt-[250px] lg:pb-32 flex flex-col items-center justify-center"
+  >
+    <div class="w-[360px] space-y-8">
+      <div class="space-y-3">
+        <div class="text-h4">{{ t('auth.password_changed.title') }}</div>
+        <div class="text-body-1 text-rui-text-secondary">
+          {{ t('auth.password_changed.message') }}
+        </div>
       </div>
-    </UserActionMessage>
-  </PageContainer>
+      <ButtonLink
+        color="primary"
+        variant="default"
+        class="w-full"
+        size="lg"
+        to="/home"
+      >
+        {{ t('actions.continue') }}
+      </ButtonLink>
+    </div>
+  </div>
 </template>
diff --git a/components/account/password/PasswordForm.vue b/components/account/password/PasswordForm.vue
index 4ab8959a..702d2335 100644
--- a/components/account/password/PasswordForm.vue
+++ b/components/account/password/PasswordForm.vue
@@ -2,6 +2,7 @@
 import { useVuelidate } from '@vuelidate/core';
 import { email, required } from '@vuelidate/validators';
 import { FetchError } from 'ofetch';
+import { get, set } from '@vueuse/core';
 import { fetchWithCsrf } from '~/utils/api';
 import { logger } from '~/utils/logger';
 
@@ -9,7 +10,7 @@ const emailAddress = ref('');
 const loading = ref(false);
 const captchaId = ref<number>();
 const recaptcha = useRecaptcha();
-const { onError, onExpired, onSuccess } = recaptcha;
+const { onError, onExpired, onSuccess, recaptchaToken } = recaptcha;
 
 const rules = {
   email: { required, email },
@@ -19,7 +20,7 @@ const rules = {
 const $externalResults = ref({});
 const v$ = useVuelidate(
   rules,
-  { email: emailAddress, captcha: recaptcha.recaptchaToken },
+  { email: emailAddress, captcha: recaptchaToken },
   {
     $autoDirty: true,
     $externalResults,
@@ -27,17 +28,17 @@ const v$ = useVuelidate(
 );
 
 const setCaptchaId = (v: number) => {
-  captchaId.value = v;
+  set(captchaId, v);
 };
 
 const reset = async () => {
-  loading.value = true;
+  set(loading, true);
   try {
     await fetchWithCsrf<void>('/webapi/password-reset/request/', {
       method: 'post',
       body: {
-        captcha: recaptcha.recaptchaToken.value,
-        email: emailAddress.value,
+        captcha: get(recaptchaToken),
+        email: get(emailAddress),
       },
     });
     await navigateTo({
@@ -49,66 +50,58 @@ const reset = async () => {
       e.status === 400 &&
       e.data?.message?.captcha
     ) {
-      window.grecaptcha?.reset(captchaId.value);
+      window.grecaptcha?.reset(get(captchaId));
       onExpired();
-      $externalResults.value = e.data.message;
+      set($externalResults, e.data.message);
     }
 
     logger.error(e);
   }
-  loading.value = false;
+  set(loading, false);
 };
 
-const css = useCssModule();
+const { t } = useI18n();
 </script>
 
 <template>
-  <PageContainer>
-    <template #title> Reset your password</template>
-    <div :class="css.content">
-      <BoxContainer>
-        <template #label> Recover password</template>
-        <InputField
-          id="email"
-          v-model="emailAddress"
-          filled
-          label="Email"
-          autocomplete="email"
-        />
-        <Recaptcha
-          :invalid="v$.captcha.$invalid && v$.captcha.$dirty"
-          @error="onError()"
-          @expired="onExpired()"
-          @success="onSuccess($event)"
-          @captcha-id="setCaptchaId($event)"
-        />
+  <div
+    class="container py-16 lg:pt-[200px] lg:pb-32 flex flex-col items-center justify-center"
+  >
+    <div class="w-[360px] space-y-8">
+      <div class="text-h4">{{ t('auth.recover_password.title') }}</div>
 
+      <form class="space-y-6" @submit.prevent="">
+        <div class="space-y-5">
+          <RuiTextField
+            id="email"
+            v-model="emailAddress"
+            dense
+            variant="outlined"
+            :label="t('auth.common.email')"
+            autocomplete="email"
+            hide-details
+            color="primary"
+          />
+
+          <Recaptcha
+            :invalid="v$.captcha.$invalid && v$.captcha.$dirty"
+            @error="onError()"
+            @expired="onExpired()"
+            @success="onSuccess($event)"
+            @captcha-id="setCaptchaId($event)"
+          />
+        </div>
         <RuiButton
+          color="primary"
           :disabled="v$.$invalid || loading"
-          :loading="loading"
-          variant="default"
-          size="lg"
           class="w-full"
-          color="primary"
+          size="lg"
+          :loading="loading"
           @click="reset()"
         >
-          Submit
+          {{ t('actions.submit') }}
         </RuiButton>
-      </BoxContainer>
+      </form>
     </div>
-  </PageContainer>
+  </div>
 </template>
-
-<style lang="scss" module>
-.button {
-  @apply mt-12;
-}
-
-.recaptcha {
-  @apply mt-4 h-20;
-}
-
-.content {
-  @apply flex flex-row justify-center;
-}
-</style>
diff --git a/components/account/password/PasswordLinkSend.vue b/components/account/password/PasswordLinkSend.vue
index e6e0e654..6aeef513 100644
--- a/components/account/password/PasswordLinkSend.vue
+++ b/components/account/password/PasswordLinkSend.vue
@@ -1,22 +1,16 @@
 <script setup lang="ts">
-const css = useCssModule();
+const { t } = useI18n();
 </script>
 
 <template>
-  <PageContainer>
-    <template #title>Password recovery</template>
-    <div :class="css.content">
-      <UserActionMessage>
-        <template #header>Please check your email</template>
-        <p>A recovery link has been send to your account's address.</p>
-        <p>Please check your mailbox to proceed.</p>
-      </UserActionMessage>
+  <div
+    class="container py-16 lg:pt-[250px] lg:pb-32 flex flex-col items-center justify-center"
+  >
+    <div class="w-[360px] space-y-3">
+      <div class="text-h4">{{ t('auth.password_link_send.title') }}</div>
+      <div class="text-body-1 text-rui-text-secondary">
+        {{ t('auth.password_link_send.message') }}
+      </div>
     </div>
-  </PageContainer>
+  </div>
 </template>
-
-<style lang="scss" module>
-.content {
-  @apply flex flex-row justify-center;
-}
-</style>
diff --git a/components/account/password/PasswordReset.vue b/components/account/password/PasswordReset.vue
index 6a05ca2e..0632287a 100644
--- a/components/account/password/PasswordReset.vue
+++ b/components/account/password/PasswordReset.vue
@@ -1,16 +1,17 @@
 <script setup lang="ts">
 import { useVuelidate } from '@vuelidate/core';
 import { minLength, required, sameAs } from '@vuelidate/validators';
-import { set } from '@vueuse/core';
+import { get, set } from '@vueuse/core';
 import { type Ref } from 'vue';
 import { FetchError } from 'ofetch';
 import { fetchWithCsrf } from '~/utils/api';
+import { toMessages } from '~/utils/validation';
 
 function setupTokenValidation() {
   const route = useRoute();
   const { uid, token } = route.params;
-  const validating = ref(true);
-  const isValid = ref(true);
+  const validating: Ref<boolean> = ref(true);
+  const isValid: Ref<boolean> = ref(true);
 
   const validateToken = async () => {
     try {
@@ -57,7 +58,7 @@ function setupFormValidation(
     },
   );
 
-  const valid = computed(() => !v$.value.$invalid);
+  const valid = computed(() => !get(v$).$invalid);
   return { v$, valid };
 }
 
@@ -67,15 +68,18 @@ const $externalResults = ref({});
 
 const route = useRoute();
 const { uid, token } = route.params;
+const submitting: Ref<boolean> = ref(false);
+
 const submit = async () => {
+  set(submitting, true);
   try {
     await fetchWithCsrf<void>('/webapi/password-reset/confirm/', {
       method: 'post',
       body: {
         uid,
         token,
-        password: password.value,
-        password_confirmation: passwordConfirmation.value,
+        password: get(password),
+        password_confirmation: get(passwordConfirmation),
       },
     });
     await navigateTo({
@@ -85,14 +89,16 @@ const submit = async () => {
     if (e instanceof FetchError && e.status === 400) {
       const message = e.data.message;
       if (message && typeof message === 'object') {
-        $externalResults.value = {
+        set($externalResults, {
           password: message.password,
           passwordConfirmation: message.password_confirmation,
-        };
+        });
       }
     } else {
       logger.error(e);
     }
+  } finally {
+    set(submitting, false);
   }
 };
 
@@ -103,98 +109,80 @@ const { valid, v$ } = setupFormValidation(
   $externalResults,
 );
 
-const css = useCssModule();
+const { t } = useI18n();
 </script>
 
 <template>
-  <PageContainer>
-    <template #title> Reset your password </template>
-
-    <div :class="css.content">
-      <LoadingIndicator v-if="validating" />
-      <UserActionMessage v-else-if="!isValid">
-        <template #header>Invalid password reset link.</template>
-        <p>
-          The link you followed doesn't seem like a valid password reset link.
-        </p>
-      </UserActionMessage>
-      <BoxContainer v-else>
-        <template #label> Provide your new password </template>
-        <InputField
-          id="password"
-          v-model="password"
-          :error-messages="v$.password.$errors"
-          filled
-          label="Password"
-          autocomplete="new-password"
-          type="password"
-        >
-          <ul :class="css.list">
-            <li>
-              Your password can't be too similar to your other personal
-              information.
-            </li>
-            <li>Your password must contain at least 8 characters.</li>
-            <li>Your password can't be a commonly used password.</li>
-
-            <li>Your password can't be entirely numeric.</li>
-          </ul>
-        </InputField>
-
-        <InputField
-          id="password-confirmation"
-          v-model="passwordConfirmation"
-          :class="css.confirmation"
-          :error-messages="v$.passwordConfirmation.$errors"
-          filled
-          hint="Enter the same password as before, for verification."
-          label="Password Confirmation"
-          type="password"
-          autocomplete="new-password"
-        />
-        <div :class="css.buttonWrapper">
-          <RuiButton
-            :disabled="!valid"
-            variant="default"
-            size="lg"
-            class="w-full mt-16"
-            color="primary"
-            @click="submit()"
-          >
-            Submit
-          </RuiButton>
+  <div
+    class="container py-16 lg:pt-[200px] lg:pb-32 flex flex-col items-center justify-center"
+  >
+    <div class="w-[360px]">
+      <div v-if="validating" class="flex justify-center">
+        <RuiProgress variant="indeterminate" circular color="primary" />
+      </div>
+      <div v-else-if="!isValid" class="space-y-3">
+        <div class="text-h4">{{ t('auth.password_reset.invalid.title') }}</div>
+        <div class="text-body-1 text-rui-text-secondary">
+          {{ t('auth.password_reset.invalid.message') }}
         </div>
-      </BoxContainer>
+      </div>
+      <div v-else class="space-y-8">
+        <div class="text-h4">{{ t('auth.password_reset.title') }}</div>
+        <form class="space-y-6" @submit.prevent="">
+          <div class="space-y-5">
+            <div class="space-y-1">
+              <RuiRevealableTextField
+                id="password"
+                v-model="password"
+                dense
+                variant="outlined"
+                :label="t('auth.password_reset.form.password')"
+                hide-details
+                color="primary"
+                :error-messages="toMessages(v$.password)"
+              />
+              <ul class="ml-4 list-disc text-rui-text-secondary text-caption">
+                <li>
+                  {{ t('auth.common.password_hint.line_1') }}
+                </li>
+                <li>
+                  {{ t('auth.common.password_hint.line_2') }}
+                </li>
+                <li>
+                  {{ t('auth.common.password_hint.line_3') }}
+                </li>
+                <li>
+                  {{ t('auth.common.password_hint.line_4') }}
+                </li>
+              </ul>
+            </div>
+            <div>
+              <RuiRevealableTextField
+                id="password-confirmation"
+                v-model="passwordConfirmation"
+                dense
+                variant="outlined"
+                :label="t('auth.password_reset.form.confirm')"
+                :hint="t('auth.common.confirm_hint')"
+                color="primary"
+                :error-messages="toMessages(v$.passwordConfirmation)"
+              />
+            </div>
+          </div>
+          <div>
+            <RuiButton
+              color="primary"
+              :disabled="!valid"
+              class="w-full"
+              size="lg"
+              :loading="submitting"
+              @click="submit()"
+            >
+              {{ t('actions.submit') }}
+            </RuiButton>
+          </div>
+        </form>
+      </div>
     </div>
-  </PageContainer>
+  </div>
 </template>
-
-<style lang="scss" module>
-.buttonWrapper {
-  @apply flex flex-row align-middle justify-center;
-}
-
-.subtitle {
-  @apply text-rui-text font-medium text-center uppercase text-xs;
-}
-
-.list {
-  @apply text-xs list-disc pl-6 text-rui-text-secondary;
-}
-
-.box {
-  @apply border p-6 rounded w-full lg:w-96;
-}
-
-.label {
-  @apply text-rui-grey-800 mb-4 text-lg;
-}
-
-.confirmation {
-  @apply mt-2;
-}
-
-.content {
-  @apply flex flex-row justify-center;
-}
-</style>
diff --git a/components/account/signup/SignupAccount.vue b/components/account/signup/SignupAccount.vue
new file mode 100644
index 00000000..86dd1bff
--- /dev/null
+++ b/components/account/signup/SignupAccount.vue
@@ -0,0 +1,174 @@
+<script lang="ts" setup>
+import { email, minLength, required, sameAs } from '@vuelidate/validators';
+import { get, set } from '@vueuse/core';
+import { useVuelidate } from '@vuelidate/core';
+import { type SignupAccountPayload } from '~/types/signup';
+import { toMessages } from '~/utils/validation';
+import { type ValidationErrors } from '~/types/common';
+
+const props = defineProps<{
+  modelValue: SignupAccountPayload;
+  externalResults: ValidationErrors;
+}>();
+
+const emit = defineEmits<{
+  (e: 'back'): void;
+  (e: 'next'): void;
+  (e: 'update:model-value', newValue: SignupAccountPayload): void;
+}>();
+
+const { modelValue, externalResults } = toRefs(props);
+
+const password = computed(() => get(modelValue).password);
+
+const rules = {
+  username: { required },
+  password: { required, minLength: minLength(8) },
+  confirmPassword: {
+    required,
+    sameAsPassword: sameAs(password, 'password'),
+  },
+  email: { required, email },
+  githubUsername: {},
+};
+
+const $externalResults: Ref<Record<string, string[]>> = ref({});
+
+const v$ = useVuelidate(rules, modelValue, {
+  $autoDirty: true,
+  $externalResults,
+});
+
+watch(
+  externalResults,
+  (errors) => {
+    set($externalResults, errors);
+    if (Object.values(errors).some((i) => !!i)) {
+      get(v$).$validate();
+    }
+  },
+  { immediate: true },
+);
+
+const updateValue = (field: string, value: any) => {
+  emit('update:model-value', {
+    ...get(modelValue),
+    [field]: value,
+  });
+};
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <div class="space-y-8 grow">
+    <div class="text-h4 text-center">{{ t('auth.signup.account.title') }}</div>
+    <div class="space-y-5">
+      <RuiTextField
+        id="username"
+        :model-value="modelValue.username"
+        variant="outlined"
+        color="primary"
+        dense
+        :label="t('auth.common.username')"
+        :hint="t('auth.signup.account.form.username_hint')"
+        autocomplete="username"
+        :error-messages="toMessages(v$.username)"
+        @update:model-value="updateValue('username', $event)"
+      />
+      <RuiTextField
+        id="email"
+        :model-value="modelValue.email"
+        variant="outlined"
+        color="primary"
+        dense
+        autocomplete="email"
+        :label="t('auth.common.email')"
+        :hint="t('auth.signup.account.form.email_hint')"
+        :error-messages="toMessages(v$.email)"
+        @update:model-value="updateValue('email', $event)"
+      />
+      <div class="space-y-1">
+        <RuiTextField
+          id="password"
+          type="password"
+          :model-value="modelValue.password"
+          variant="outlined"
+          dense
+          autocomplete="new-password"
+          :label="t('auth.common.password')"
+          hide-details
+          :error-messages="toMessages(v$.password).length > 0 ? [''] : []"
+          @update:model-value="updateValue('password', $event)"
+        />
+        <ul
+          class="ml-4 list-disc text-caption"
+          :class="
+            toMessages(v$.password).length > 0
+              ? 'text-rui-error'
+              : 'text-rui-text-secondary'
+          "
+        >
+          <li>
+            {{ t('auth.common.password_hint.line_1') }}
+          </li>
+          <li>
+            {{ t('auth.common.password_hint.line_2') }}
+          </li>
+          <li>
+            {{ t('auth.common.password_hint.line_3') }}
+          </li>
+          <li>
+            {{ t('auth.common.password_hint.line_4') }}
+          </li>
+        </ul>
+      </div>
+      <RuiTextField
+        id="password-confirmation"
+        type="password"
+        :model-value="modelValue.confirmPassword"
+        variant="outlined"
+        color="primary"
+        autocomplete="new-password"
+        dense
+        :label="t('auth.signup.account.form.confirm_password')"
+        :hint="t('auth.common.confirm_hint')"
+        :error-messages="toMessages(v$.confirmPassword)"
+        @update:model-value="updateValue('confirmPassword', $event)"
+      />
+
+      <RuiTextField
+        id="github"
+        :model-value="modelValue.githubUsername"
+        variant="outlined"
+        color="primary"
+        dense
+        :label="t('auth.signup.account.form.github_username')"
+        :hint="t('auth.signup.account.form.github_username_hint')"
+        :error-messages="toMessages(v$.githubUsername)"
+        @update:model-value="updateValue('githubUsername', $event)"
+      />
+    </div>
+  </div>
+  <div class="mt-16 grid md:grid-cols-2 gap-4">
+    <RuiButton
+      type="button"
+      class="w-full"
+      size="lg"
+      data-cy="back-button"
+      @click="emit('back')"
+    >
+      {{ t('actions.back') }}
+    </RuiButton>
+    <RuiButton
+      data-cy="next-button"
+      :disabled="v$.$invalid"
+      color="primary"
+      class="w-full"
+      size="lg"
+      @click="emit('next')"
+    >
+      {{ t('actions.continue') }}
+    </RuiButton>
+  </div>
+</template>
diff --git a/components/account/signup/SignupAddress.vue b/components/account/signup/SignupAddress.vue
new file mode 100644
index 00000000..2de3a3f7
--- /dev/null
+++ b/components/account/signup/SignupAddress.vue
@@ -0,0 +1,233 @@
+<script lang="ts" setup>
+import { helpers, required } from '@vuelidate/validators';
+import { get, set } from '@vueuse/core';
+import { useVuelidate } from '@vuelidate/core';
+import { type SignupAddressPayload } from '~/types/signup';
+import { toMessages } from '~/utils/validation';
+import { type Country } from '~/composables/countries';
+import { type ValidationErrors } from '~/types/common';
+
+const props = defineProps<{
+  modelValue: SignupAddressPayload;
+  externalResults: ValidationErrors;
+  captchaId: number;
+  loading: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'back'): void;
+  (
+    e: 'finish',
+    events: {
+      recaptchaToken: string;
+      onExpired: () => void;
+    },
+  ): void;
+  (e: 'update:model-value', newValue: SignupAddressPayload): void;
+  (e: 'update:captcha-id', captchaId: number): void;
+}>();
+
+const { modelValue, externalResults } = toRefs(props);
+
+const rules = {
+  address1: { required },
+  address2: {},
+  city: { required },
+  postcode: {
+    required,
+    validateCode: helpers.withMessage(
+      'Enter a valid postal code. Only alphabets, numbers, space and -',
+      helpers.regex(/^[\d\sA-Za-z-]+$/),
+    ),
+  },
+  country: { required },
+  captcha: { required },
+  terms: { checked: (value: boolean) => value },
+};
+
+const terms: Ref<boolean> = ref(false);
+
+const recaptcha = useRecaptcha();
+const { recaptchaPassed, onError, onSuccess, onExpired, recaptchaToken } =
+  recaptcha;
+
+const $externalResults: Ref<Record<string, string[]>> = ref({});
+
+const v$ = useVuelidate(
+  rules,
+  computed(() => ({
+    ...get(modelValue),
+    captcha: recaptchaToken,
+    terms,
+  })),
+  {
+    $autoDirty: true,
+    $externalResults,
+  },
+);
+
+watch(
+  externalResults,
+  (errors) => {
+    set($externalResults, errors);
+    if (Object.values(errors).some((i) => !!i)) {
+      get(v$).$validate();
+    }
+  },
+  { immediate: true },
+);
+
+const updateValue = (field: string, value: any) => {
+  emit('update:model-value', {
+    ...get(modelValue),
+    [field]: value,
+  });
+};
+
+const { countries } = useCountries();
+
+const country = computed({
+  get() {
+    return (
+      get(countries).find(({ code }) => code === get(modelValue).country) ||
+      null
+    );
+  },
+  set(item: Country | null) {
+    updateValue('country', item ? item.code : '');
+  },
+});
+
+const setCaptchaId = (captchaId: number) => {
+  emit('update:captcha-id', captchaId);
+};
+
+const finish = () => {
+  emit('finish', {
+    recaptchaToken: get(recaptchaToken),
+    onExpired,
+  });
+};
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <div class="space-y-8 grow">
+    <div class="text-h4 text-center">Address</div>
+    <div class="space-y-5">
+      <RuiTextField
+        id="address-1"
+        :model-value="modelValue.address1"
+        variant="outlined"
+        color="primary"
+        autocomplete="address-line1"
+        dense
+        :label="t('auth.signup.address.form.address_line_1')"
+        :hint="t('auth.common.required')"
+        :error-messages="toMessages(v$.address1)"
+        @update:model-value="updateValue('address1', $event)"
+        @blur="v$.address1.$touch()"
+      />
+      <RuiTextField
+        id="address-2"
+        :model-value="modelValue.address2"
+        variant="outlined"
+        color="primary"
+        autocomplete="address-line2"
+        dense
+        :label="t('auth.signup.address.form.address_line_2')"
+        :hint="t('auth.common.required')"
+        :error-messages="toMessages(v$.address2)"
+        @update:model-value="updateValue('address2', $event)"
+        @blur="v$.address2.$touch()"
+      />
+      <RuiTextField
+        id="city"
+        :model-value="modelValue.city"
+        variant="outlined"
+        color="primary"
+        autocomplete="address-level2"
+        dense
+        :label="t('auth.signup.address.form.city')"
+        :hint="t('auth.common.required')"
+        :error-messages="toMessages(v$.city)"
+        @update:model-value="updateValue('city', $event)"
+        @blur="v$.city.$touch()"
+      />
+      <RuiTextField
+        id="postal"
+        :model-value="modelValue.postcode"
+        variant="outlined"
+        color="primary"
+        autocomplete="postal-code"
+        dense
+        :label="t('auth.signup.address.form.postal_code')"
+        :hint="t('auth.common.required')"
+        :error-messages="toMessages(v$.postcode)"
+        @update:model-value="updateValue('postcode', $event)"
+        @blur="v$.postcode.$touch()"
+      />
+      <RuiAutoComplete
+        id="country"
+        v-model="country"
+        variant="outlined"
+        color="primary"
+        autocomplete="country"
+        :data="countries"
+        key-prop="code"
+        text-prop="name"
+        dense
+        :label="t('auth.signup.address.form.country')"
+        :hint="t('auth.common.required')"
+        :error-messages="toMessages(v$.country)"
+        @blur="v$.country.$touch()"
+      />
+      <Recaptcha
+        id="signup-captcha"
+        :invalid="v$.captcha.$invalid && v$.captcha.$dirty"
+        @error="onError()"
+        @expired="onExpired()"
+        @success="onSuccess($event)"
+        @captcha-id="setCaptchaId($event)"
+      />
+
+      <RuiCheckbox id="tos" v-model="terms" color="primary">
+        <i18n-t keypath="auth.signup.address.form.tos" scope="global">
+          <template #tos>
+            <ButtonLink to="/tos" inline color="primary" external>
+              {{ t('footer_legalese.tos') }}
+            </ButtonLink>
+          </template>
+          <template #privacy_policy>
+            <ButtonLink to="/privacy-policy" inline color="primary" external>
+              {{ t('footer_legalese.privacy_policy') }}
+            </ButtonLink>
+          </template>
+        </i18n-t>
+      </RuiCheckbox>
+    </div>
+  </div>
+  <div class="mt-16 grid md:grid-cols-2 gap-4">
+    <RuiButton
+      data-cy="back-button"
+      type="button"
+      class="w-full"
+      size="lg"
+      @click="emit('back')"
+    >
+      {{ t('actions.back') }}
+    </RuiButton>
+    <RuiButton
+      data-cy="submit-button"
+      :disabled="v$.$invalid || !recaptchaPassed || loading"
+      color="primary"
+      class="w-full"
+      size="lg"
+      :loading="loading"
+      @click="finish()"
+    >
+      {{ t('auth.signup.create_account') }}
+    </RuiButton>
+  </div>
+</template>
diff --git a/components/account/signup/SignupCustomerInformation.vue b/components/account/signup/SignupCustomerInformation.vue
new file mode 100644
index 00000000..24b127aa
--- /dev/null
+++ b/components/account/signup/SignupCustomerInformation.vue
@@ -0,0 +1,137 @@
+<script lang="ts" setup>
+import { required } from '@vuelidate/validators';
+import { get, set } from '@vueuse/core';
+import { useVuelidate } from '@vuelidate/core';
+import { type SignupCustomerInformationPayload } from '~/types/signup';
+import { toMessages } from '~/utils/validation';
+import { type ValidationErrors } from '~/types/common';
+
+const props = defineProps<{
+  modelValue: SignupCustomerInformationPayload;
+  externalResults: ValidationErrors;
+}>();
+
+const emit = defineEmits<{
+  (e: 'back'): void;
+  (e: 'next'): void;
+  (e: 'update:model-value', newValue: SignupCustomerInformationPayload): void;
+}>();
+
+const { modelValue, externalResults } = toRefs(props);
+
+const rules = {
+  firstName: { required },
+  lastName: { required },
+  companyName: {},
+  vatId: {},
+};
+
+const $externalResults: Ref<Record<string, string[]>> = ref({});
+
+const v$ = useVuelidate(rules, modelValue, {
+  $autoDirty: true,
+  $externalResults,
+});
+
+watch(
+  externalResults,
+  (errors) => {
+    set($externalResults, errors);
+    if (Object.values(errors).some((i) => !!i)) {
+      get(v$).$validate();
+    }
+  },
+  { immediate: true },
+);
+
+const updateValue = (field: string, value: any) => {
+  emit('update:model-value', {
+    ...get(modelValue),
+    [field]: value,
+  });
+};
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <div class="space-y-8 grow">
+    <div class="text-h4 text-center">
+      {{ t('auth.signup.customer_information.title') }}
+    </div>
+    <div class="space-y-5">
+      <RuiTextField
+        id="first-name"
+        :model-value="modelValue.firstName"
+        variant="outlined"
+        color="primary"
+        autocomplete="given-name"
+        dense
+        :label="t('auth.signup.customer_information.form.first_name')"
+        :hint="t('auth.signup.customer_information.form.name_hint')"
+        :error-messages="toMessages(v$.firstName)"
+        @update:model-value="updateValue('firstName', $event)"
+        @blur="v$.firstName.$touch()"
+      />
+      <RuiTextField
+        id="last-name"
+        :model-value="modelValue.lastName"
+        variant="outlined"
+        color="primary"
+        autocomplete="family-name"
+        dense
+        :label="t('auth.signup.customer_information.form.last_name')"
+        :hint="t('auth.signup.customer_information.form.name_hint')"
+        :error-messages="toMessages(v$.lastName)"
+        @update:model-value="updateValue('lastName', $event)"
+        @blur="v$.lastName.$touch()"
+      />
+      <RuiTextField
+        id="company-name"
+        :model-value="modelValue.companyName"
+        variant="outlined"
+        color="primary"
+        autocomplete="organization"
+        dense
+        :label="t('auth.signup.customer_information.form.company')"
+        :hint="t('auth.signup.customer_information.form.company_hint')"
+        :error-messages="toMessages(v$.companyName)"
+        @update:model-value="updateValue('companyName', $event)"
+        @blur="v$.companyName.$touch()"
+      />
+      <RuiTextField
+        id="vat-id"
+        :model-value="modelValue.vatId"
+        variant="outlined"
+        color="primary"
+        dense
+        :label="t('auth.signup.customer_information.form.vat_id')"
+        :hint="t('auth.signup.customer_information.form.vat_id_hint')"
+        :error-messages="toMessages(v$.vatId)"
+        @update:model-value="updateValue('vatId', $event)"
+        @blur="v$.vatId.$touch()"
+      />
+    </div>
+  </div>
+  <div class="mt-16 grid md:grid-cols-2 gap-4">
+    <RuiButton
+      type="button"
+      class="w-full"
+      size="lg"
+      data-cy="back-button"
+      @click="emit('back')"
+    >
+      {{ t('actions.back') }}
+    </RuiButton>
+    <RuiButton
+      data-cy="next-button"
+      :disabled="v$.$invalid"
+      color="primary"
+      class="w-full"
+      size="lg"
+      @click="emit('next')"
+    >
+      {{ t('actions.continue') }}
+    </RuiButton>
+  </div>
+</template>
diff --git a/components/account/signup/SignupForm.vue b/components/account/signup/SignupForm.vue
index bf63ea8c..d8a6f260 100644
--- a/components/account/signup/SignupForm.vue
+++ b/components/account/signup/SignupForm.vue
@@ -1,420 +1,185 @@
-<script setup lang="ts">
-import {
-  email,
-  helpers,
-  minLength,
-  required,
-  sameAs,
-} from '@vuelidate/validators';
-import { useVuelidate } from '@vuelidate/core';
-import { get } from '@vueuse/core';
+<script lang="ts" setup>
 import { type Ref } from 'vue';
+import { get, set } from '@vueuse/core';
 import { FetchError } from 'ofetch';
-import { type SignupPayload } from '~/types/signup';
+import {
+  type SignupAccountPayload,
+  type SignupAddressPayload,
+  type SignupCustomerInformationPayload,
+  type SignupPayload,
+} from '~/types/signup';
 import { fetchWithCsrf } from '~/utils/api';
+import { type ValidationErrors } from '~/types/common';
+import { type ApiResponse } from '~/types';
 
-const recaptcha = useRecaptcha();
-
-const state = reactive<SignupPayload & { captcha: Ref<string> }>({
+const accountForm = ref<SignupAccountPayload>({
   username: '',
   password: '',
   confirmPassword: '',
   email: '',
   githubUsername: '',
+});
+
+const customerInformationForm = ref<SignupCustomerInformationPayload>({
   firstName: '',
   lastName: '',
   companyName: '',
   vatId: '',
+});
+
+const addressForm = ref<SignupAddressPayload>({
   address1: '',
   address2: '',
   city: '',
   postcode: '',
   country: '',
-  captcha: recaptcha.recaptchaToken,
 });
 
-const rules = {
-  username: { required },
-  password: { required, minLength: minLength(8) },
-  confirmPassword: {
-    required,
-    sameAsPassword: sameAs(toRef(state, 'password'), 'password'),
-  },
-  email: { required, email },
-  githubUsername: {},
-  firstName: { required },
-  lastName: { required },
-  companyName: {},
-  vatId: {},
-  address1: { required },
-  address2: {},
-  city: { required },
-  postcode: {
-    required,
-    validateCode: helpers.withMessage(
-      'Enter a valid postal code. Only alphabets, numbers, space and -',
-      helpers.regex(/^[\d\sA-Za-z-]+$/),
-    ),
-  },
-  country: { required },
-  captcha: { required },
+const loading: Ref<boolean> = ref(false);
+const captchaId: Ref<number> = ref(0);
+const externalResults: Ref<ValidationErrors> = ref({});
+
+const signup = async ({
+  recaptchaToken,
+  onExpired,
+}: {
+  recaptchaToken: string;
+  onExpired: () => void;
+}) => {
+  set(loading, true);
+
+  const payload: SignupPayload = {
+    ...get(accountForm),
+    ...get(customerInformationForm),
+    ...get(addressForm),
+  };
+
+  try {
+    const { result, message } = await fetchWithCsrf<
+      ApiResponse<boolean, ValidationErrors>
+    >('/webapi/signup/', {
+      method: 'post',
+      body: {
+        captcha: recaptchaToken,
+        ...payload,
+      },
+    });
+    if (result) {
+      await navigateTo({ path: '/activation' });
+    } else if (typeof message === 'object') {
+      window.grecaptcha?.reset(get(captchaId));
+      onExpired();
+      setErrors(message);
+    }
+  } catch (e: any) {
+    if (
+      e instanceof FetchError &&
+      e.status === 400 &&
+      e.data &&
+      typeof e.data.message === 'object'
+    ) {
+      window.grecaptcha?.reset(get(captchaId));
+      onExpired();
+      setErrors(e.data.message);
+    }
+  }
+  set(loading, false);
 };
 
-const loading = ref(false);
-const captchaId = ref<number>();
-const $externalResults = ref({});
-const v$ = useVuelidate(rules, state, {
-  $autoDirty: true,
-  $externalResults,
-});
-const termsAccepted = ref(false);
+const { t } = useI18n();
 
-const { recaptchaPassed, onError, onSuccess, onExpired } = recaptcha;
+const step: Ref<number> = ref(1);
+const steps = [
+  {
+    title: t('auth.signup.steps.step_1.title'),
+    description: t('auth.signup.steps.step_1.description'),
+  },
+  {
+    title: t('auth.signup.steps.step_2.title'),
+    description: t('auth.signup.steps.step_2.description'),
+  },
+  {
+    title: t('auth.signup.steps.step_3.title'),
+    description: t('auth.signup.steps.step_3.description'),
+  },
+  {
+    title: t('auth.signup.steps.step_4.title'),
+    description: t('auth.signup.steps.step_4.description'),
+  },
+];
 
-const setCaptchaId = (v: number) => {
-  captchaId.value = v;
+const back = () => {
+  set(step, Math.max(get(step) - 1, 1));
+};
+const next = () => {
+  set(step, Math.min(get(step) + 1, 4));
 };
 
-const useSignup = (
-  captcha: Ref<string>,
-  $externalResults: Ref<Record<string, string>>,
-) => {
-  const signup = async (payload: SignupPayload) => {
-    const isValid = await get(v$).$validate();
-
-    if (!isValid) {
-      return;
-    }
-
-    loading.value = true;
+const haveIntersectionKeys = (obj1: object, obj2: object) => {
+  const keys1 = Object.keys(obj1);
+  const keys2 = Object.keys(obj2);
 
-    try {
-      await fetchWithCsrf<void>('/webapi/signup/', {
-        method: 'post',
-        body: {
-          captcha: captcha.value,
-          ...payload,
-        },
-      });
-      await navigateTo({ path: '/activation' });
-    } catch (e: any) {
-      if (
-        e instanceof FetchError &&
-        e.status === 400 &&
-        e.data &&
-        typeof e.data.message === 'object'
-      ) {
-        window.grecaptcha?.reset(captchaId.value);
-        onExpired();
-        $externalResults.value = e.data.message;
-      }
-    }
-    loading.value = false;
-  };
-  return {
-    signup,
-  };
+  return keys1.some((key) => keys2.includes(key));
 };
 
-const { countries } = useCountries();
-const { signup } = useSignup(recaptcha.recaptchaToken, $externalResults);
-const css = useCssModule();
+const setErrors = (errors: ValidationErrors) => {
+  set(externalResults, errors);
+
+  if (haveIntersectionKeys(errors, get(accountForm))) {
+    set(step, 2);
+    return;
+  } else if (haveIntersectionKeys(errors, get(customerInformationForm))) {
+    set(step, 3);
+    return;
+  } else if (haveIntersectionKeys(errors, get(addressForm))) {
+    set(step, 4);
+    return;
+  }
+};
 </script>
 
 <template>
-  <PageContainer>
-    <template #title> Create a rotki premium Account</template>
-
-    <div :class="css.row">
-      <div :class="css.column">
-        <div :class="css.hint">
-          <span :class="css.important">Important</span> Note: Creating an
-          account in rotki.com is only needed to purchase a
-          <ButtonLink to="/products" inline color="primary">
-            premium subscription
-          </ButtonLink>
-          Rotki is a local application and the account you create when you use
-          it is stored on your computer. This is not the same account as premium
-          and credentials for one account don't work for the other. To use Rotki
-          simply
-          <ButtonLink
-            inline
-            color="primary"
-            external
-            to="/https://github.com/rotki/rotki/releases/latest"
-          >
-            download
-          </ButtonLink>
-          and run it. Proceed only if you intend to purchase premium and unlock
-          the premium features of the application.
-        </div>
-
-        <TextHeading :class="css.heading">Account</TextHeading>
-
-        <div :class="css.inputs">
-          <InputField
-            id="username"
-            v-model="state.username"
-            :error-messages="v$.username.$errors"
-            hint="Required: Provide a unique username for your new account."
-            label="Username"
-            autocomplete="username"
-            @blur="v$.username.$touch()"
-          />
-          <InputField
-            id="email"
-            v-model="state.email"
-            :error-messages="v$.email.$errors"
-            hint="Required. Provide a valid email address."
-            label="Email"
-            type="email"
-            autocomplete="email"
-            @blur="v$.email.$touch()"
-          />
-          <InputField
-            id="github"
-            v-model="state.githubUsername"
-            :error-messages="v$.githubUsername.$errors"
-            hint="Optional. Provide Github username for in-Github support."
-            label="Github Username"
-            @blur="v$.githubUsername.$touch()"
-          />
-          <InputField
-            id="password"
-            v-model="state.password"
-            :error-messages="v$.password.$errors"
-            label="Password"
-            type="password"
-            autocomplete="new-password"
-            @blur="v$.password.$touch()"
-          >
-            <ul :class="css.list">
-              <li>
-                Your password can't be too similar to your other personal
-                information.
-              </li>
-              <li>Your password must contain at least 8 characters.</li>
-              <li>Your password can't be a commonly used password.</li>
-
-              <li>Your password can't be entirely numeric.</li>
-            </ul>
-          </InputField>
-
-          <InputField
-            id="password-confirmation"
-            v-model="state.confirmPassword"
-            :error-messages="v$.confirmPassword.$errors"
-            hint="Enter the same password as before, for verification."
-            label="Password Confirmation"
-            type="password"
-            autocomplete="new-password"
-            @blur="v$.confirmPassword.$touch()"
-          />
-        </div>
-
-        <TextHeading :class="css.heading">Customer Information</TextHeading>
-
-        <div :class="css.inputs">
-          <InputField
-            id="first-name"
-            v-model="state.firstName"
-            :error-messages="v$.firstName.$errors"
-            hint="Required. Will only be used for invoice of payments."
-            label="First Name"
-            autocomplete="given-name"
-            @blur="v$.firstName.$touch()"
-          />
-          <InputField
-            id="last-name"
-            v-model="state.lastName"
-            :error-messages="v$.lastName.$errors"
-            hint="Required. Will only be used for invoice of payments."
-            label="Last Name"
-            autocomplete="family-name"
-            @blur="v$.lastName.$touch()"
-          />
-          <InputField
-            id="company-name"
-            v-model="state.companyName"
-            hint="Optional. If you want to be invoiced as a company the given company name will be added to the invoice."
-            label="Company Name"
-            autocomplete="organization"
-            @blur="v$.companyName.$touch()"
-          />
-          <InputField
-            id="vat-id"
-            v-model="state.vatId"
-            :error-messages="v$.vatId.$errors"
-            hint="Optional. If you want to be invoiced as a company, the provided VAT ID will be added to the invoice."
-            label="VAT ID"
-            @blur="v$.vatId.$touch()"
-          />
-        </div>
-
-        <TextHeading :class="css.heading">Address</TextHeading>
-
-        <div :class="css.inputs">
-          <InputField
-            id="address-1"
-            v-model="state.address1"
-            :error-messages="v$.address1.$errors"
-            hint="Required. Will only be used for invoice of payments."
-            label="Address line 1"
-            autocomplete="address-line1"
-            @blur="v$.address1.$touch()"
-          />
-          <InputField
-            id="address-2"
-            v-model="state.address2"
-            :error-messages="v$.address2.$errors"
-            hint="Optional. Additional data for the address."
-            label="Address line 2"
-            autocomplete="address-line2"
-            @blur="v$.address2.$touch()"
-          />
-          <InputField
-            id="city"
-            v-model="state.city"
-            :error-messages="v$.city.$errors"
-            hint="Required. Will only be used for invoice of payments."
-            label="City"
-            autocomplete="address-level2"
-            @blur="v$.city.$touch()"
-          />
-          <InputField
-            id="postal"
-            v-model="state.postcode"
-            :error-messages="v$.postcode.$errors"
-            hint="Required. Will only be used for invoice of payments."
-            label="Postal code"
-            autocomplete="postal-code"
-            @blur="v$.postcode.$touch()"
-          />
-
-          <CountrySelect
-            id="country"
-            v-model="state.country"
-            :countries="countries"
-            :error-messages="v$.country.$errors"
-            hint="Required. Will only be used for invoice of payments."
-            label="Country"
-            autocomplete="country"
-            @blur="v$.country.$touch()"
-          />
-        </div>
+  <div
+    class="container flex flex-col lg:flex-row pt-4 pb-8 lg:py-14 h-full grow"
+  >
+    <div class="lg:hidden mb-14 [&>div>div]:pt-4 [&>div>hr]:!mt-4">
+      <RuiStepper custom orientation="horizontal" :step="step" :steps="steps" />
+    </div>
 
-        <Recaptcha
-          id="signup-captcha"
-          :class="css.recaptcha"
-          :invalid="v$.captcha.$invalid && v$.captcha.$dirty"
-          @error="onError()"
-          @expired="onExpired()"
-          @success="onSuccess($event)"
-          @captcha-id="setCaptchaId($event)"
+    <div class="flex justify-center grow">
+      <form class="w-[440px] flex flex-col justify-between" @submit.prevent="">
+        <SignupIntroduction v-if="step === 1" @next="next()" />
+        <SignupAccount
+          v-if="step === 2"
+          v-model="accountForm"
+          :external-results="externalResults"
+          @back="back()"
+          @next="next()"
         />
-
-        <label :class="css.termsCheck">
-          <input
-            id="tos"
-            :class="css.checkbox"
-            :value="termsAccepted"
-            type="checkbox"
-            @click="termsAccepted = !termsAccepted"
-          />
-          <span :class="css.terms">
-            I have read and agreed to the
-            <ButtonLink inline color="primary" to="/tos">
-              Terms of Service
-            </ButtonLink>
-            and the
-            <ButtonLink inline color="primary" to="/privacy-policy">
-              Privacy Policy
-            </ButtonLink>
-          </span>
-        </label>
-
-        <RuiButton
-          :disabled="!termsAccepted || !recaptchaPassed || loading"
+        <SignupCustomerInformation
+          v-if="step === 3"
+          v-model="customerInformationForm"
+          :external-results="externalResults"
+          @back="back()"
+          @next="next()"
+        />
+        <SignupAddress
+          v-if="step === 4"
+          v-model="addressForm"
+          v-model:captcha-id="captchaId"
           :loading="loading"
-          variant="default"
-          size="lg"
-          class="w-full mt-12"
-          color="primary"
-          @click="signup(state)"
-        >
-          Create Account
-        </RuiButton>
-      </div>
+          :external-results="externalResults"
+          @back="back()"
+          @finish="signup($event)"
+        />
+        <div class="mt-4 p-6">
+          <RuiFooterStepper v-model="step" :pages="4" variant="pill" />
+        </div>
+      </form>
     </div>
-  </PageContainer>
-</template>
-
-<style lang="scss" module>
-@import '@/assets/css/media.scss';
-@import '@/assets/css/main.scss';
-
-.row {
-  @apply flex flex-row mx-auto;
-}
-
-.column {
-  @apply flex flex-col;
-}
 
-.hint {
-  @apply font-sans;
-
-  margin-top: 48px;
-  align-items: center;
-  text-align: justify;
-  color: #808080;
-
-  div {
-    margin-left: auto;
-    margin-right: auto;
-    max-width: 500px;
-  }
-
-  @include text-size(14px, 21px);
-  @include for-size(phone-only) {
-    bottom: calc($mobile-margin / 2);
-    padding: calc($mobile-margin / 2);
-  }
-}
-
-.inputs {
-  margin-top: 12px;
-
-  > * {
-    margin-top: 24px;
-  }
-}
-
-.heading {
-  margin-top: 40px;
-}
-
-.checkbox {
-  @apply h-5 w-5 text-rui-primary;
-}
-
-.termsCheck {
-  @apply inline-flex items-center mt-8;
-}
-
-.terms {
-  @apply ml-2 text-rui-text;
-}
-
-.list {
-  @apply text-xs;
-
-  list-style-type: circle;
-  padding-left: $mobile-margin * 2;
-  color: #808080;
-}
-
-.recaptcha {
-  @apply mt-12;
-}
-</style>
+    <div class="hidden lg:block w-[332px] sticky top-0 self-start">
+      <RuiStepper custom orientation="vertical" :step="step" :steps="steps" />
+    </div>
+  </div>
+</template>
diff --git a/components/account/signup/SignupIntroduction.vue b/components/account/signup/SignupIntroduction.vue
new file mode 100644
index 00000000..d98a2acf
--- /dev/null
+++ b/components/account/signup/SignupIntroduction.vue
@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+const emit = defineEmits<{
+  (e: 'next'): void;
+}>();
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <div class="text-center space-y-3 grow">
+    <div class="text-h4">
+      {{ t('auth.signup.introduction.title') }}
+    </div>
+    <div class="text-body-1 text-rui-text-secondary whitespace-pre-line">
+      <i18n-t keypath="auth.signup.introduction.message.default" scope="global">
+        <template #premium_subscription>
+          <strong>
+            {{ t('auth.signup.introduction.message.premium_subscription') }}
+          </strong>
+        </template>
+        <template #download>
+          <ButtonLink to="/download" inline color="primary" class="underline">
+            {{ t('auth.signup.introduction.message.download') }}
+          </ButtonLink>
+        </template>
+      </i18n-t>
+    </div>
+  </div>
+  <div class="mt-16">
+    <RuiButton
+      color="primary"
+      class="w-full"
+      size="lg"
+      data-cy="next-button"
+      @click="emit('next')"
+    >
+      {{ t('actions.continue') }}
+    </RuiButton>
+  </div>
+</template>
diff --git a/components/common/PageContainer.vue b/components/common/PageContainer.vue
index 0fd61248..3b8b6a15 100644
--- a/components/common/PageContainer.vue
+++ b/components/common/PageContainer.vue
@@ -46,7 +46,7 @@ const slots = useSlots();
 @import '@/assets/css/main.scss';
 
 .wrapper {
-  @apply container flex flex-col flex-grow min-h-screen px-4;
+  @apply container flex flex-col flex-grow min-h-screen py-12;
 }
 
 .subtitle {
diff --git a/components/footer/PageFooter.vue b/components/footer/PageFooter.vue
index e10ee6b1..724bc6ba 100644
--- a/components/footer/PageFooter.vue
+++ b/components/footer/PageFooter.vue
@@ -1,13 +1,25 @@
 <script setup lang="ts">
+withDefaults(
+  defineProps<{
+    landing?: boolean;
+  }>(),
+  {
+    landing: false,
+  },
+);
+
 const { t } = useI18n();
 
 const year = new Date().getFullYear().toString();
 </script>
 
 <template>
-  <div class="py-8 lg:py-16">
+  <div>
     <div class="container">
-      <div class="space-y-4 lg:space-y-8">
+      <div
+        v-if="landing"
+        class="space-y-4 lg:space-y-8 mt-8 mb-4 lg:mt-16 lg:mb-10"
+      >
         <div class="flex flex-col lg:flex-row justify-between items-center">
           <div class="hidden lg:block">
             <RuiLogo text />
@@ -25,9 +37,9 @@ const year = new Date().getFullYear().toString();
           <FooterLegalese />
         </div>
       </div>
-      <div class="border-t border-grey-100 my-6 lg:my-10" />
+      <div class="border-t border-grey-100" />
       <div
-        class="flex flex-col-reverse lg:flex-row justify-between items-center"
+        class="flex flex-col-reverse lg:flex-row justify-between items-center pt-4 pb-6 lg:pt-8 lg:pb-12"
       >
         <div
           class="flex flex-wrap justify-center space-x-1 text-rui-text-secondary mt-2 lg:mt-0"
diff --git a/components/header/PageHeader.vue b/components/header/PageHeader.vue
index 24f13859..9a743000 100644
--- a/components/header/PageHeader.vue
+++ b/components/header/PageHeader.vue
@@ -15,15 +15,15 @@ const logout = async () => {
 <template>
   <div class="py-6 border-b border-grey-200">
     <div
-      class="container flex items-center justify-between flex-col lg:flex-row space-y-4 lg:space-y-0"
+      class="container flex items-center justify-center lg:justify-between flex-wrap lg:flex-row space-y-4 lg:space-y-0"
     >
-      <NuxtLink to="/">
+      <NuxtLink to="/" class="flex justify-center w-full lg:w-auto">
         <RuiLogo text />
       </NuxtLink>
       <div>
         <NavigationMenu />
       </div>
-      <div class="flex items-center space-x-2">
+      <div class="flex items-center space-x-2 ml-6">
         <NuxtLink to="/home">
           <RuiButton rounded color="primary">
             {{ t('page_header.manage_premium') }}
diff --git a/layouts/default.vue b/layouts/default.vue
index faed4911..b3ed3dba 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,5 +1,36 @@
+<script setup lang="ts">
+import { get } from '@vueuse/core';
+
+const css = useCssModule();
+
+const headerRef = ref<HTMLDivElement>();
+const footerRef = ref<HTMLDivElement>();
+
+const { height: topHeight } = useElementBounding(headerRef);
+const { height: bottomHeight } = useElementBounding(footerRef);
+
+const otherHeight: ComputedRef<number> = computed(
+  () => get(topHeight) + get(bottomHeight) || 219,
+);
+</script>
+
 <template>
-  <PageHeader />
-  <slot />
-  <PageFooter />
+  <div ref="headerRef">
+    <PageHeader />
+  </div>
+  <div :class="css.body">
+    <slot />
+  </div>
+  <div ref="footerRef">
+    <slot name="footer">
+      <PageFooter />
+    </slot>
+  </div>
 </template>
+
+<style lang="scss" module>
+.body {
+  min-height: calc(100vh - v-bind(otherHeight) * 1px);
+  @apply flex flex-col;
+}
+</style>
diff --git a/layouts/landing.vue b/layouts/landing.vue
new file mode 100644
index 00000000..6fbe4602
--- /dev/null
+++ b/layouts/landing.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import Default from '~/layouts/default.vue';
+</script>
+
+<template>
+  <Default>
+    <slot />
+    <template #footer>
+      <PageFooter landing />
+    </template>
+  </Default>
+</template>
diff --git a/locales/en.json b/locales/en.json
index fcca8544..d5c1cbe9 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -1,16 +1,142 @@
 {
+  "auth": {
+    "activation": {
+      "invalid": {
+        "title": "Invalid Link",
+        "message": "The activation link is not valid. This can happen if you have already confirmed your account."
+      },
+      "success": {
+        "title": "Welcome to rotki",
+        "message": "Your rotki account has been successfully activated. To see your dashboard click"
+      }
+    },
+    "common": {
+      "email": "Email",
+      "username": "Username",
+      "password": "Password",
+      "confirm_hint": "Enter the same password as before, for verification.",
+      "password_hint": {
+        "line_1": "Your password can't be too similar to your other personal information.",
+        "line_2": "Your password must contain at least 8 characters.",
+        "line_3": "Your password can't be a commonly used password.",
+        "line_4": "Your password can't be entirely numeric."
+      },
+      "required": "Required."
+    },
+    "login": {
+      "title": "Sign in",
+      "message": " Premium users unlock the full potential of rotki by removing all limits and unlocking all features.",
+      "forgot_password": "Forgot password?",
+      "first_time_premium": "First time premium?",
+      "sign_up_now": "Sign up now",
+      "alert_error": "If you are writing your username and password from the app, we remind you that they are independent accounts."
+    },
+    "password_changed": {
+      "title": "Password changed",
+      "message": "Your password has been successfully reset. Click below to log in."
+    },
+    "password_link_send": {
+      "title": "Password recovery",
+      "message": "A recovery link has been send to your account's address. Please check your mailbox to proceed."
+    },
+    "password_reset": {
+      "invalid": {
+        "title": "Invalid password reset link",
+        "message": "The link you followed doesn't seem like a valid password reset link."
+      },
+      "form": {
+        "confirm": "Confirm new password",
+        "password": "New password"
+      },
+      "title": "Provide your new password"
+    },
+    "pending_activation": {
+      "title": "Please check your email",
+      "message": "A confirm registration link has been send to your account's address. Please check your mailbox to proceed."
+    },
+    "recover_password": {
+      "title": "Recover password"
+    },
+    "signup": {
+      "steps": {
+        "step_1": {
+          "title": "Introduction",
+          "description": "First step"
+        },
+        "step_2": {
+          "title": "Account",
+          "description": "Set your credentials"
+        },
+        "step_3": {
+          "title": "Customer Information",
+          "description": "Information for invoice of payments"
+        },
+        "step_4": {
+          "title": "Address",
+          "description": "Will only be used for invoice of payments"
+        }
+      },
+      "create_account": "Create Account",
+      "introduction": {
+        "title": "Important Note",
+        "message": {
+          "default": "Creating an account in rotki.com is only needed to purchase a {premium_subscription}. Rotki is a local application and the account you create when you use it is stored on your computer. \n\n This is not the same account as premium and credentials for one account don't work for the other. To use Rotki simply {download} and run it. \n\n Proceed only if you intend to purchase premium and unlock the premium features of the application.",
+          "premium_subscription": "premium subscription",
+          "download": "download"
+        }
+      },
+      "account": {
+        "title": "Account",
+        "form": {
+          "username_hint": "Required. Provide a unique username for your new account.",
+          "email_hint": "Required. Provide a valid email address.",
+          "confirm_password": "Repeat password",
+          "github_username": "Github username",
+          "github_username_hint": "Optional. Provide Github username for in-Github support."
+        }
+      },
+      "address": {
+        "form": {
+          "address_line_1": "Address line 1",
+          "address_line_2": "Address line 2",
+          "city": "City",
+          "postal_code": "Postal code",
+          "country": "Country",
+          "tos": "I have read and agreed to the {tos} and the {privacy_policy}"
+        }
+      },
+      "customer_information": {
+        "title": "Customer Information",
+        "form": {
+          "first_name": "First name",
+          "last_name": "Last name",
+          "name_hint": "Required. Will only be used for invoice of payments.",
+          "company": "Company name",
+          "company_hint": "Optional. If you want to be invoiced as a company the given company name will be added to the invoice.",
+          "vat_id": "VAT ID",
+          "vat_id_hint": "Optional. If you want to be invoiced as a company, the provided VAT ID will be added to the invoice."
+        }
+      }
+    }
+  },
   "account": {
     "unverified_email": {
       "message": "Your e-mail address has not been verified. Check your mailbox for the activation e-mail."
     }
   },
   "actions": {
+    "back": "Back",
+    "continue": "Continue",
     "download": "Start now for free",
     "get_premium": "Get Premium",
     "get_premium_plan": "Get Premium Plan",
     "get_advanced_plan": "Get Advanced Plan",
     "get_in_touch": "Get In Touch Now",
-    "go_back_home": "Go back home"
+    "go_back_home": "Go back home",
+    "submit": "Submit"
+  },
+  "common": {
+    "here": "here"
   },
   "supported_defi": {
     "title": "Dedicated DeFi support for",
diff --git a/package.json b/package.json
index 457b79ff..36f090ed 100644
--- a/package.json
+++ b/package.json
@@ -52,7 +52,7 @@
     "@nuxt/devtools": "0.6.7",
     "@nuxtjs/i18n": "8.0.0-beta.12",
     "@rotki/eslint-config": "1.1.0",
-    "@rotki/ui-library": "0.2.2",
+    "@rotki/ui-library": "0.2.3",
     "@types/braintree-web": "3.75.23",
     "@types/paypal-checkout-components": "4.0.5",
     "@types/qrcode": "1.5.1",
diff --git a/pages/activate/[uid]/[token].vue b/pages/activate/[uid]/[token].vue
index 46b873b2..e3456659 100644
--- a/pages/activate/[uid]/[token].vue
+++ b/pages/activate/[uid]/[token].vue
@@ -22,7 +22,3 @@ useHead({
 <template>
   <AccountActivate />
 </template>
-
-<style lang="scss">
-@import '@/assets/css/main.scss';
-</style>
diff --git a/pages/activation.vue b/pages/activation.vue
index 2aa848d2..1d9c466c 100644
--- a/pages/activation.vue
+++ b/pages/activation.vue
@@ -18,7 +18,3 @@ useHead({
 <template>
   <PendingActivation />
 </template>
-
-<style lang="scss">
-@import '@/assets/css/main.scss';
-</style>
diff --git a/pages/download.vue b/pages/download.vue
index 296fd26f..0c5d2f9b 100644
--- a/pages/download.vue
+++ b/pages/download.vue
@@ -33,6 +33,10 @@ const links = computed<DownloadItemProps[]>(() => [
 ]);
 
 onBeforeMount(async () => await fetchLatestRelease());
+
+definePageMeta({
+  layout: 'landing',
+});
 </script>
 
 <template>
diff --git a/pages/index.vue b/pages/index.vue
index cc9bb536..0b32e58c 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -22,6 +22,10 @@ useHead({
   ],
   ...commonAttrs(),
 });
+
+definePageMeta({
+  layout: 'landing',
+});
 </script>
 
 <template>
diff --git a/pages/login.vue b/pages/login.vue
index 4ed510fe..a6accacd 100644
--- a/pages/login.vue
+++ b/pages/login.vue
@@ -21,7 +21,3 @@ useHead({
 <template>
   <LoginPage />
 </template>
-
-<style lang="scss">
-@import '@/assets/css/main.scss';
-</style>
diff --git a/pages/password/changed.vue b/pages/password/changed.vue
index e6923ec2..3149f9cb 100644
--- a/pages/password/changed.vue
+++ b/pages/password/changed.vue
@@ -22,7 +22,3 @@ useHead({
 <template>
   <PasswordChanged />
 </template>
-
-<style lang="scss">
-@import '@/assets/css/main.scss';
-</style>
diff --git a/pages/password/recover.vue b/pages/password/recover.vue
index c8784f51..10b2b86c 100644
--- a/pages/password/recover.vue
+++ b/pages/password/recover.vue
@@ -21,7 +21,3 @@ useHead({
 <template>
   <PasswordForm />
 </template>
-
-<style lang="scss">
-@import '@/assets/css/main.scss';
-</style>
diff --git a/pages/password/reset/[uid]/[token].vue b/pages/password/reset/[uid]/[token].vue
index a328b462..66019d28 100644
--- a/pages/password/reset/[uid]/[token].vue
+++ b/pages/password/reset/[uid]/[token].vue
@@ -22,7 +22,3 @@ useHead({
 <template>
   <PasswordReset />
 </template>
-
-<style lang="scss">
-@import '@/assets/css/main.scss';
-</style>
diff --git a/pages/password/reset/index.vue b/pages/password/reset/index.vue
index af05786e..721f1570 100644
--- a/pages/password/reset/index.vue
+++ b/pages/password/reset/index.vue
@@ -22,7 +22,3 @@ useHead({
 <template>
   <PasswordReset />
 </template>
-
-<style lang="scss">
-@import '@/assets/css/main.scss';
-</style>
diff --git a/pages/password/send.vue b/pages/password/send.vue
index 97ee8af3..597e57f4 100644
--- a/pages/password/send.vue
+++ b/pages/password/send.vue
@@ -22,7 +22,3 @@ useHead({
 <template>
   <PasswordLinkSend />
 </template>
-
-<style lang="scss">
-@import '@/assets/css/main.scss';
-</style>
diff --git a/pages/signup.vue b/pages/signup.vue
index 6e894ff8..54e2c87f 100644
--- a/pages/signup.vue
+++ b/pages/signup.vue
@@ -21,7 +21,3 @@ useHead({
 <template>
   <SignupForm />
 </template>
-
-<style lang="scss">
-@import '@/assets/css/main.scss';
-</style>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 431d8855..59089b15 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -86,8 +86,8 @@ devDependencies:
     specifier: 1.1.0
     version: 1.1.0(eslint@8.45.0)(vue@3.3.4)
   '@rotki/ui-library':
-    specifier: 0.2.2
-    version: 0.2.2(@vueuse/core@10.2.1)(@vueuse/shared@10.2.1)(vue@3.3.4)
+    specifier: 0.2.3
+    version: 0.2.3(@vueuse/core@10.2.1)(@vueuse/shared@10.2.1)(vue@3.3.4)
   '@types/braintree-web':
     specifier: 3.75.23
     version: 3.75.23
@@ -2237,8 +2237,8 @@ packages:
       - vue
     dev: true
 
-  /@rotki/ui-library@0.2.2(@vueuse/core@10.2.1)(@vueuse/shared@10.2.1)(vue@3.3.4):
-    resolution: {integrity: sha512-LgOMSSYzhVQso8SM2DoPNiqXCosA82zvWtGYDGAjISOPQDdgQMjUGAMP7hBSkyxgpf9NDbeDWx7nMmz4u9fx2A==}
+  /@rotki/ui-library@0.2.3(@vueuse/core@10.2.1)(@vueuse/shared@10.2.1)(vue@3.3.4):
+    resolution: {integrity: sha512-3J8ZjEMt2JlkhGPtf4ZXJ+MMLyr7XsR/Tg+CytLsu+/mET1C5c4HIa8Zr01kb3PXAHO1Mx2Bcb9GCmrGCNBSSg==}
     engines: {pnpm: '>=8 <9'}
     peerDependencies:
       '@vueuse/core': '>10.0.0'
diff --git a/tests/e2e/specs/pages/signup.spec.cy.ts b/tests/e2e/specs/pages/signup.spec.cy.ts
index 418b0188..627ced1f 100644
--- a/tests/e2e/specs/pages/signup.spec.cy.ts
+++ b/tests/e2e/specs/pages/signup.spec.cy.ts
@@ -3,36 +3,65 @@ describe('Signup test', () => {
     cy.visit('/signup').wait(3000);
   });
 
-  it('checks input fields and submit button!', () => {
+  it('show introduction page', () => {
+    cy.contains('Important Note');
+    cy.get('[data-cy=next-button]').click();
+  });
+
+  it('show account form', () => {
     cy.get('input#username').first().as('usernameInput');
     cy.get('input#email').first().as('emailInput');
     cy.get('input#github').first().as('githubInput');
     cy.get('input#password').first().as('passwordInput');
     cy.get('input#password-confirmation').first().as('confirmPasswordInput');
+    cy.get('button[data-cy=next-button]').first().as('nextButton');
+
+    expect(cy.get('@usernameInput')).to.exist;
+    expect(cy.get('@emailInput')).to.exist;
+    expect(cy.get('@passwordInput')).to.exist;
+    expect(cy.get('@confirmPasswordInput')).to.exist;
+    expect(cy.get('@nextButton').should('be.disabled'));
+
+    cy.get('@usernameInput').type('username');
+    cy.get('@emailInput').type('email@gmail.com');
+    cy.get('@passwordInput').type('p455w0rD');
+    cy.get('@confirmPasswordInput').type('p455w0rD');
+    expect(cy.get('@nextButton').should('be.enabled'));
+    cy.get('@nextButton').click();
+  });
+
+  it('show customer information form', () => {
     cy.get('input#first-name').first().as('firstNameInput');
     cy.get('input#last-name').first().as('lastNameInput');
     cy.get('input#company-name').first().as('companyNameInput');
     cy.get('input#vat-id').first().as('vatIdInput');
+    cy.get('button[data-cy=next-button]').first().as('nextButton');
+
+    expect(cy.get('@firstNameInput')).to.exist;
+    expect(cy.get('@lastNameInput')).to.exist;
+    expect(cy.get('@companyNameInput')).to.exist;
+    expect(cy.get('@vatIdInput')).to.exist;
+    expect(cy.get('@nextButton').should('be.disabled'));
+
+    cy.get('@firstNameInput').type('First');
+    cy.get('@lastNameInput').type('Last');
+    cy.get('@nextButton').click();
+  });
+
+  it('show address form', () => {
     cy.get('input#address-1').first().as('address1Input');
     cy.get('input#address-2').first().as('address2Input');
     cy.get('input#city').first().as('cityInput');
     cy.get('input#postal').first().as('postalInput');
-    cy.get('input#country').first().as('countryInput');
+    cy.get('#country input').first().as('countryInput');
     cy.get('div#signup-captcha').first().as('captcha');
     cy.get('input#tos').first().as('tosInput');
     cy.get('button')
       .contains('button', 'Create Account')
       .first()
       .as('submitButton');
+    cy.get('button[data-cy=submit-button]').first().as('submitButton');
 
-    expect(cy.get('@usernameInput')).to.exist;
-    expect(cy.get('@emailInput')).to.exist;
-    expect(cy.get('@passwordInput')).to.exist;
-    expect(cy.get('@confirmPasswordInput')).to.exist;
-    expect(cy.get('@firstNameInput')).to.exist;
-    expect(cy.get('@lastNameInput')).to.exist;
-    expect(cy.get('@companyNameInput')).to.exist;
-    expect(cy.get('@vatIdInput')).to.exist;
     expect(cy.get('@address1Input')).to.exist;
     expect(cy.get('@address2Input')).to.exist;
     expect(cy.get('@cityInput')).to.exist;
@@ -40,26 +69,31 @@ describe('Signup test', () => {
     expect(cy.get('@countryInput')).to.exist;
     expect(cy.get('@captcha')).to.exist;
     expect(cy.get('@tosInput')).to.exist;
-    expect(cy.get('@submitButton')).to.exist;
+    expect(cy.get('@submitButton').should('be.disabled'));
+
+    cy.get('@address1Input').type('Address first line');
+    cy.get('@address2Input').type('Address second line');
+    cy.get('@cityInput').type('City');
+    cy.get('@postalInput').type('11703');
+    cy.get('@tosInput').click();
   });
 
   it('checks signup postal input field for valid inputs!', () => {
     cy.get('input#postal').first().as('postalInput');
     cy.get('@postalInput').type('12345');
-    cy.get('span#postal-error').should('not.exist');
+    cy.get('#postal .details .text-rui-error').should('not.exist');
     cy.get('@postalInput').clear().type('ABC-40');
-    cy.get('span#postal-error').should('not.exist');
+    cy.get('#postal .details .text-rui-error').should('not.exist');
     cy.get('@postalInput').clear().type('ABC-40 224');
-    cy.get('span#postal-error').should('not.exist');
-
+    cy.get('#postal .details .text-rui-error').should('not.exist');
     cy.get('@postalInput').clear().type('12@345');
-    cy.get('span#postal-error').first().as('postalError');
+    cy.get('#postal .details .text-rui-error').first().as('postalError');
     expect(cy.get('@postalError')).to.exist;
     cy.get('@postalInput').clear().type('12#345');
     expect(cy.get('@postalError')).to.exist;
     cy.get('@postalInput').clear().type('.');
     expect(cy.get('@postalError')).to.exist;
     cy.get('@postalInput').clear().type('105102');
-    cy.get('span#postal-error').should('not.exist');
+    cy.get('#postal .details .text-rui-error').should('not.exist');
   });
 });
diff --git a/types/common.ts b/types/common.ts
index 718c81e5..ef04e2e9 100644
--- a/types/common.ts
+++ b/types/common.ts
@@ -16,3 +16,5 @@ export type ActionResult = {
 export type BaseErrorObject = { $message: string | Ref<string> };
 
 export type PayEvent = { months: number; nonce: string };
+
+export type ValidationErrors = Record<string, string[] | string>;
diff --git a/types/index.ts b/types/index.ts
index 09620fd2..08cd9b33 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -13,9 +13,9 @@ type ResultSuccess<T> = {
 
 export type Result<T, Code = undefined> = ResultError<Code> | ResultSuccess<T>;
 
-export interface ApiResponse<T> {
+export interface ApiResponse<T, M = string> {
   readonly result: T | null;
-  readonly message: string;
+  readonly message: M;
 }
 
 const StringArray = z.array(z.string());
diff --git a/types/signup.ts b/types/signup.ts
index d799ac0a..195752ae 100644
--- a/types/signup.ts
+++ b/types/signup.ts
@@ -1,16 +1,27 @@
-export interface SignupPayload {
+export interface SignupAccountPayload {
   readonly username: string;
   readonly email: string;
   readonly password: string;
   readonly confirmPassword: string;
+  readonly githubUsername: string;
+}
+
+export interface SignupCustomerInformationPayload {
   readonly firstName: string;
   readonly lastName: string;
   readonly companyName: string;
+  readonly vatId: string;
+}
+
+export interface SignupAddressPayload {
   readonly address1: string;
   readonly address2: string;
   readonly city: string;
-  readonly country: string;
   readonly postcode: string;
-  readonly githubUsername: string;
-  readonly vatId: string;
+  readonly country: string;
 }
+
+export interface SignupPayload
+  extends SignupAccountPayload,
+    SignupCustomerInformationPayload,
+    SignupAddressPayload {}
diff --git a/utils/validation.ts b/utils/validation.ts
new file mode 100644
index 00000000..4568da34
--- /dev/null
+++ b/utils/validation.ts
@@ -0,0 +1,12 @@
+import { type BaseValidation } from '@vuelidate/core';
+import { get } from '@vueuse/core';
+
+/**
+ * Converts an object of vuelidate's BaseValidation to an array of
+ * strings to be passed to the components error-messages
+ *
+ * @param validation BaseValidation
+ * @return string[]
+ */
+export const toMessages = (validation: BaseValidation): string[] =>
+  validation.$errors.map((e) => get(e.$message));