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/assets/css/tailwind.css b/assets/css/tailwind.css
index a90a793f..d65cea25 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -1,5 +1,17 @@
-@import '@rotki/ui-library/dist/style.css';
+@import '@rotki/ui-library/style.css';
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer utilities {
+  /* Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+}
diff --git a/components/account/activation/AccountActivate.vue b/components/account/activation/AccountActivate.vue
index b7d5b172..53219299 100644
--- a/components/account/activation/AccountActivate.vue
+++ b/components/account/activation/AccountActivate.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { RuiProgress } from '@rotki/ui-library';
 import { set } from '@vueuse/core';
 import { FetchError } from 'ofetch';
 import { fetchWithCsrf } from '~/utils/api';
@@ -22,39 +23,33 @@ const validateToken = async () => {
 };
 
 onBeforeMount(async () => await validateToken());
-
-const css = useCssModule();
 </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-[360px]">
+      <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">Invalid Link</div>
+        <div class="text-body-1 text-rui-text-secondary">
+          The activation link is not valid. This can happen if you have already
+          confirmed your account.
+        </div>
+      </div>
+      <div v-else class="space-y-3">
+        <div class="text-h4">Welcome to rotki</div>
+        <div class="text-body-1 text-rui-text-secondary">
+          <span>
+            Your rotki account has been successfully activated. To see your
+            dashboard click
+          </span>
+          <ButtonLink to="/home" inline color="primary">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..6a03d76a 100644
--- a/components/account/activation/PendingActivation.vue
+++ b/components/account/activation/PendingActivation.vue
@@ -1,27 +1,13 @@
-<script setup lang="ts">
-const css = useCssModule();
-</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-[400px] space-y-3">
+      <div class="text-h4">Please check your email</div>
+      <div class="text-body-1 text-rui-text-secondary">
+        A confirm registration link has been send to your account's address.
+        Please check your mailbox to proceed.
+      </div>
     </div>
-  </PageContainer>
+  </div>
 </template>
-
-<style lang="scss" module>
-.content {
-  @apply flex flex-row justify-center;
-}
-</style>
diff --git a/components/account/login/LoginForm.vue b/components/account/login/LoginForm.vue
index 5056da60..4b23ea99 100644
--- a/components/account/login/LoginForm.vue
+++ b/components/account/login/LoginForm.vue
@@ -1,5 +1,13 @@
 <script setup lang="ts">
-import { RuiButton } from '@rotki/ui-library';
+import {
+  RuiAlert,
+  RuiButton,
+  RuiRevealableTextField,
+  RuiTextField,
+} from '@rotki/ui-library';
+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 }>(), {
@@ -9,165 +17,122 @@ 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();
 </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">Sign in</div>
+      <div class="text-body-1 text-rui-text-secondary">
+        Premium users unlock the full potential of rotki by removing all limits
+        and unlocking all features.
+      </div>
     </div>
+    <form @submit.prevent="">
+      <div class="space-y-5">
+        <RuiTextField
+          id="username"
+          v-model="username"
+          dense
+          variant="outlined"
+          label="Username"
+          autocomplete="username"
+          hide-details
+          color="primary"
+          :error-messages="error ? [error] : []"
+          @focus="error = ''"
+        />
+
+        <RuiRevealableTextField
+          id="password"
+          v-model="password"
+          variant="outlined"
+          dense
+          label="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>
+          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
+        Continue
       </RuiButton>
-    </div>
-
-    <div :class="css.reset">
-      <ButtonLink to="/password/recover" color="primary">
-        Forgot password?
-      </ButtonLink>
-    </div>
-
-    <div :class="css.divider" />
-
-    <div :class="css.create">
-      First time premium?
+    </form>
+    <div class="flex items-center justify-center">
+      <span class="text-rui-text-secondary"> First time premium? </span>
       <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="If you are writing your username and password from the app, we remind you that they are independent accounts."
+    />
+  </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..7c95aff5 100644
--- a/components/account/password/PasswordChanged.vue
+++ b/components/account/password/PasswordChanged.vue
@@ -1,12 +1,23 @@
 <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">Password changed</div>
+        <div class="text-body-1 text-rui-text-secondary">
+          Your password has been successfully reset. Click below to log in.
+        </div>
       </div>
-    </UserActionMessage>
-  </PageContainer>
+      <ButtonLink
+        color="primary"
+        variant="default"
+        class="w-full"
+        size="lg"
+        to="/home"
+      >
+        Continue
+      </ButtonLink>
+    </div>
+  </div>
 </template>
diff --git a/components/account/password/PasswordForm.vue b/components/account/password/PasswordForm.vue
index ec17cbdd..1ef3b26a 100644
--- a/components/account/password/PasswordForm.vue
+++ b/components/account/password/PasswordForm.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { RuiButton } from '@rotki/ui-library';
 import { useVuelidate } from '@vuelidate/core';
 import { email, required } from '@vuelidate/validators';
 import { FetchError } from 'ofetch';
+import { RuiButton, RuiTextField } from '@rotki/ui-library';
+import { get, set } from '@vueuse/core';
 import { fetchWithCsrf } from '~/utils/api';
 import { logger } from '~/utils/logger';
 
@@ -10,7 +11,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 },
@@ -20,7 +21,7 @@ const rules = {
 const $externalResults = ref({});
 const v$ = useVuelidate(
   rules,
-  { email: emailAddress, captcha: recaptcha.recaptchaToken },
+  { email: emailAddress, captcha: recaptchaToken },
   {
     $autoDirty: true,
     $externalResults,
@@ -28,17 +29,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({
@@ -50,66 +51,56 @@ 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();
 </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">Recover password</div>
+
+      <form class="space-y-6" @submit.prevent="">
+        <div class="space-y-5">
+          <RuiTextField
+            id="email"
+            v-model="emailAddress"
+            dense
+            variant="outlined"
+            label="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
         </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..842d0ddf 100644
--- a/components/account/password/PasswordLinkSend.vue
+++ b/components/account/password/PasswordLinkSend.vue
@@ -1,22 +1,13 @@
-<script setup lang="ts">
-const css = useCssModule();
-</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">Password recovery</div>
+      <div class="text-body-1 text-rui-text-secondary">
+        A recovery link has been send to your account's address. Please check
+        your mailbox to proceed.
+      </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 371035eb..073e2563 100644
--- a/components/account/password/PasswordReset.vue
+++ b/components/account/password/PasswordReset.vue
@@ -1,17 +1,22 @@
 <script setup lang="ts">
-import { RuiButton } from '@rotki/ui-library';
 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 {
+  RuiButton,
+  RuiProgress,
+  RuiRevealableTextField,
+} from '@rotki/ui-library';
 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 {
@@ -58,7 +63,7 @@ function setupFormValidation(
     },
   );
 
-  const valid = computed(() => !v$.value.$invalid);
+  const valid = computed(() => !get(v$).$invalid);
   return { v$, valid };
 }
 
@@ -68,15 +73,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({
@@ -86,14 +94,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,99 +113,74 @@ const { valid, v$ } = setupFormValidation(
   passwordConfirmation,
   $externalResults,
 );
-
-const css = useCssModule();
 </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>
+  <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">Invalid password reset link</div>
+        <div class="text-body-1 text-rui-text-secondary">
           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>
-      </BoxContainer>
+      </div>
+      <div v-else class="space-y-8">
+        <div class="text-h4">Provide your new password</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="New password"
+                hide-details
+                color="primary"
+                :error-messages="toMessages(v$.password)"
+              />
+              <ul class="ml-4 list-disc text-rui-text-secondary text-caption">
+                <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>
+            </div>
+            <div>
+              <RuiRevealableTextField
+                id="password-confirmation"
+                v-model="passwordConfirmation"
+                dense
+                variant="outlined"
+                label="Confirm new password"
+                hint="Enter the same password as before, for verification."
+                color="primary"
+                :error-messages="toMessages(v$.passwordConfirmation)"
+              />
+            </div>
+          </div>
+          <div>
+            <RuiButton
+              color="primary"
+              :disabled="!valid"
+              class="w-full"
+              size="lg"
+              :loading="submitting"
+              @click="submit()"
+            >
+              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..3156940d
--- /dev/null
+++ b/components/account/signup/SignupAccount.vue
@@ -0,0 +1,168 @@
+<script lang="ts" setup>
+import { RuiButton, RuiTextField } from '@rotki/ui-library';
+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,
+  });
+};
+</script>
+
+<template>
+  <div class="space-y-8 grow">
+    <div class="text-h4 text-center">Account</div>
+    <div class="space-y-5">
+      <RuiTextField
+        id="username"
+        :model-value="modelValue.username"
+        variant="outlined"
+        color="primary"
+        dense
+        label="Username"
+        autocomplete="username"
+        hint="Required. Provide a unique username for your new account."
+        :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="Email"
+        hint="Required. Provide a valid email address."
+        :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="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>
+            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>
+      </div>
+      <RuiTextField
+        id="password-confirmation"
+        type="password"
+        :model-value="modelValue.confirmPassword"
+        variant="outlined"
+        color="primary"
+        autocomplete="new-password"
+        dense
+        label="Repeat password"
+        :error-messages="toMessages(v$.confirmPassword)"
+        hint="Enter the same password as before, for verification."
+        @update:model-value="updateValue('confirmPassword', $event)"
+      />
+
+      <RuiTextField
+        id="github"
+        :model-value="modelValue.githubUsername"
+        variant="outlined"
+        color="primary"
+        dense
+        label="Github username"
+        :error-messages="toMessages(v$.githubUsername)"
+        hint="Optional. Provide Github username for in-Github support."
+        @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')"
+    >
+      Back
+    </RuiButton>
+    <RuiButton
+      data-cy="next-button"
+      :disabled="v$.$invalid"
+      color="primary"
+      class="w-full"
+      size="lg"
+      @click="emit('next')"
+    >
+      Continue
+    </RuiButton>
+  </div>
+</template>
diff --git a/components/account/signup/SignupAddress.vue b/components/account/signup/SignupAddress.vue
new file mode 100644
index 00000000..77638e68
--- /dev/null
+++ b/components/account/signup/SignupAddress.vue
@@ -0,0 +1,233 @@
+<script lang="ts" setup>
+import {
+  RuiAutoComplete,
+  RuiButton,
+  RuiCheckbox,
+  RuiTextField,
+} from '@rotki/ui-library';
+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,
+  });
+};
+</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="Address line 1"
+        hint="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="Address line 2"
+        hint="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="City"
+        hint="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="Postal code"
+        hint="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="Country"
+        hint="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">
+        I have read and agreed to the
+        <ButtonLink to="/tos" inline color="primary" external>
+          Terms of Service
+        </ButtonLink>
+        and the
+        <ButtonLink inline color="primary" to="/privacy-policy" external>
+          Privacy Policy.
+        </ButtonLink>
+      </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')"
+    >
+      Back
+    </RuiButton>
+    <RuiButton
+      data-cy="submit-button"
+      :disabled="v$.$invalid || !recaptchaPassed || loading"
+      color="primary"
+      class="w-full"
+      size="lg"
+      :loading="loading"
+      @click="finish()"
+    >
+      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..9ac47be8
--- /dev/null
+++ b/components/account/signup/SignupCustomerInformation.vue
@@ -0,0 +1,134 @@
+<script lang="ts" setup>
+import { RuiButton, RuiTextField } from '@rotki/ui-library';
+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,
+  });
+};
+</script>
+
+<template>
+  <div class="space-y-8 grow">
+    <div class="text-h4 text-center">Customer Information</div>
+    <div class="space-y-5">
+      <RuiTextField
+        id="first-name"
+        :model-value="modelValue.firstName"
+        variant="outlined"
+        color="primary"
+        autocomplete="given-name"
+        dense
+        label="First name"
+        hint="Required. Will only be used for invoice of payments."
+        :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="Last name"
+        hint="Required. Will only be used for invoice of payments."
+        :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="Company name"
+        hint="Optional. If you want to be invoiced as a company the given company name will be added to the invoice."
+        :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="VAT ID"
+        hint="Optional. If you want to be invoiced as a company, the provided VAT ID will be added to the invoice."
+        :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')"
+    >
+      Back
+    </RuiButton>
+    <RuiButton
+      data-cy="next-button"
+      :disabled="v$.$invalid"
+      color="primary"
+      class="w-full"
+      size="lg"
+      @click="emit('next')"
+    >
+      Continue
+    </RuiButton>
+  </div>
+</template>
diff --git a/components/account/signup/SignupForm.vue b/components/account/signup/SignupForm.vue
index d5b924c4..38444f08 100644
--- a/components/account/signup/SignupForm.vue
+++ b/components/account/signup/SignupForm.vue
@@ -1,421 +1,198 @@
-<script setup lang="ts">
-import { RuiButton } from '@rotki/ui-library';
-import {
-  email,
-  helpers,
-  minLength,
-  required,
-  sameAs,
-} from '@vuelidate/validators';
-import { useVuelidate } from '@vuelidate/core';
-import { get } from '@vueuse/core';
+<script lang="ts" setup>
+import { RuiFooterStepper, RuiStepper } from '@rotki/ui-library';
 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'),
+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 step: Ref<number> = ref(1);
+const steps = [
+  { title: 'Introduction', description: 'First step' },
+  { title: 'Account', description: 'Set your credentials' },
+  {
+    title: 'Customer Information',
+    description: 'Information for invoice of payments',
   },
-  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-]+$/),
-    ),
+  {
+    title: 'Address',
+    description: 'Will only be used for invoice of payments',
   },
-  country: { required },
-  captcha: { required },
+];
+
+const horizontalStepperRef = ref<HTMLDivElement>();
+
+const adjustHorizontalStepper = () => {
+  nextTick(() => {
+    const elem = get(horizontalStepperRef);
+    if (elem) {
+      const a = elem.querySelector('div[class*=active]');
+      a?.scrollIntoView?.({
+        behavior: 'smooth',
+        inline: 'center',
+      });
+    }
+  });
 };
 
-const loading = ref(false);
-const captchaId = ref<number>();
-const $externalResults = ref({});
-const v$ = useVuelidate(rules, state, {
-  $autoDirty: true,
-  $externalResults,
-});
-const termsAccepted = ref(false);
-
-const { recaptchaPassed, onError, onSuccess, onExpired } = recaptcha;
-
-const setCaptchaId = (v: number) => {
-  captchaId.value = v;
+const back = () => {
+  set(step, Math.max(get(step) - 1, 1));
+  adjustHorizontalStepper();
+};
+const next = () => {
+  set(step, Math.min(get(step) + 1, 4));
+  adjustHorizontalStepper();
 };
 
-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
+      ref="horizontalStepperRef"
+      class="lg:hidden mb-14 no-scrollbar whitespace-nowrap overflow-auto [&>div>div]:pt-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..35fb1636
--- /dev/null
+++ b/components/account/signup/SignupIntroduction.vue
@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import { RuiButton } from '@rotki/ui-library';
+
+const emit = defineEmits<{
+  (e: 'next'): void;
+}>();
+</script>
+
+<template>
+  <div class="text-center space-y-3 grow">
+    <div class="text-h4">Important Note</div>
+    <div class="text-body-1 text-rui-text-secondary">
+      Creating an account in rotki.com is only needed to purchase a
+      <strong>premium subscription</strong>. Rotki is a local application and
+      the account you create when you use it is stored on your computer.
+      <br />
+      <br />
+      This is not the same account as premium and credentials for one account
+      don't work for the other. To use Rotki simply
+      <ButtonLink to="/download" inline color="primary" class="underline">
+        download
+      </ButtonLink>
+      and run it.
+      <br />
+      <br />
+      Proceed only if you intend to purchase premium and unlock the premium
+      features of the application.
+    </div>
+  </div>
+  <div class="mt-16">
+    <RuiButton
+      color="primary"
+      class="w-full"
+      size="lg"
+      data-cy="next-button"
+      @click="emit('next')"
+    >
+      Continue
+    </RuiButton>
+  </div>
+</template>
diff --git a/components/common/ButtonLink.vue b/components/common/ButtonLink.vue
index dabad8bd..8dd206f6 100644
--- a/components/common/ButtonLink.vue
+++ b/components/common/ButtonLink.vue
@@ -30,6 +30,7 @@ const attrs = useAttrs();
   >
     <RuiButton
       v-bind="{ variant: 'text', ...attrs }"
+      type="button"
       :class="{ ['inline-flex py-0 !px-1 !text-[1em]']: inline }"
     >
       <slot>
diff --git a/components/footer/PageFooter.vue b/components/footer/PageFooter.vue
index 1947883d..fe709cfb 100644
--- a/components/footer/PageFooter.vue
+++ b/components/footer/PageFooter.vue
@@ -1,15 +1,27 @@
 <script setup lang="ts">
 import { RuiButton, RuiLogo } from '@rotki/ui-library';
 
+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 />
@@ -27,9 +39,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 5baa8300..b01cdce3 100644
--- a/components/header/PageHeader.vue
+++ b/components/header/PageHeader.vue
@@ -16,15 +16,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/package.json b/package.json
index 8aae30bb..a5d6c424 100644
--- a/package.json
+++ b/package.json
@@ -50,7 +50,7 @@
     "@nuxt/devtools": "0.6.7",
     "@nuxtjs/i18n": "8.0.0-beta.12",
     "@rotki/eslint-config": "1.1.0",
-    "@rotki/ui-library": "0.1.2",
+    "@rotki/ui-library": "0.2.0",
     "@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/index.vue b/pages/index.vue
index 34d2cbfb..e32f9cf4 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -23,6 +23,10 @@ useHead({
   ...commonAttrs(),
 });
 const { visible } = useOverflow();
+
+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 c19415df..cc0f3998 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -83,8 +83,8 @@ devDependencies:
     specifier: 1.1.0
     version: 1.1.0(eslint@8.45.0)(vue@3.3.4)
   '@rotki/ui-library':
-    specifier: 0.1.2
-    version: 0.1.2(vue@3.3.4)
+    specifier: 0.2.0
+    version: 0.2.0(vue@3.3.4)
   '@types/braintree-web':
     specifier: 3.75.23
     version: 3.75.23
@@ -2234,8 +2234,8 @@ packages:
       - vue
     dev: true
 
-  /@rotki/ui-library@0.1.2(vue@3.3.4):
-    resolution: {integrity: sha512-2gzD/kjuw13Pxpsjcf/8BzQkN36Yhg1FltrkVJNFABcpimkGkZZLgyIeDWw4V6BnLkQUCRhAYUfj1Jb6Sxjviw==}
+  /@rotki/ui-library@0.2.0(vue@3.3.4):
+    resolution: {integrity: sha512-j4wiRkbIaBTEX4yLT8v4FziPz/IlA564Hd6NCjJne3eAE6pLMw2v4fM5AelMotDw5rjoGRXh8vqXNpHK3W43Fw==}
     engines: {pnpm: '>=8 <9'}
     peerDependencies:
       vue: '>=3.3.4'
diff --git a/tests/e2e/specs/pages/signup.spec.cy.ts b/tests/e2e/specs/pages/signup.spec.cy.ts
index 418b0188..11b559af 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,33 @@ 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('@countryInput').click();
+    cy.get('#country').find('li').first().click();
+    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));