diff --git a/components/account/CountrySelect.vue b/components/account/CountrySelect.vue
index 05394312..3fe49bca 100644
--- a/components/account/CountrySelect.vue
+++ b/components/account/CountrySelect.vue
@@ -1,291 +1,52 @@
 <script setup lang="ts">
-import { debouncedWatch, get, set } from '@vueuse/core';
+import { get } from '@vueuse/core';
 import { type Country } from '~/composables/countries';
-import { type BaseErrorObject } from '~/types/common';
 
 const props = withDefaults(
   defineProps<{
     modelValue: string;
-    id: string;
-    label: string;
-    countries?: Country[];
-    hint?: string;
     disabled?: boolean;
-    errorMessages?: BaseErrorObject[];
-    autocomplete?: string;
   }>(),
   {
-    countries: () => [],
-    hint: '',
     disabled: false,
-    errorMessages: () => [],
-    autocomplete: undefined,
   },
 );
 
 const emit = defineEmits<{
   (e: 'update:modelValue', value: string): void;
-  (e: 'blur'): void;
-  (e: 'selected', country: Country | null): void;
 }>();
 
-const { countries, modelValue: value, disabled } = toRefs(props);
-const selected = ref<Country | null>(null);
-const optionsShown = ref(false);
-const searchFilter = ref('');
+const { modelValue } = toRefs(props);
 
-const filteredOptions = computed(() => {
-  const filtered: Country[] = [];
-  const filter = get(searchFilter);
-  const regOption = new RegExp(filter, 'ig');
-  for (const option of get(countries)) {
-    if (filter.length === 0 || option.name.match(regOption)) {
-      filtered.push(option);
-    }
-  }
-  return filtered;
-});
-
-const selectOption = (option: Country) => {
-  set(selected, option);
-  set(optionsShown, false);
-  set(searchFilter, option.name);
-  emit('update:modelValue', option.code);
-};
-
-const showOptions = () => {
-  if (!get(disabled)) {
-    set(searchFilter, '');
-    set(optionsShown, true);
-  }
-};
+const { t } = useI18n();
 
-const exit = () => {
-  const filtered = get(filteredOptions);
-  if (filtered.length > 0 && get(searchFilter)) {
-    selectOption(filtered[0]);
-  } else {
-    const selection = get(selected);
-    if (selection) {
-      selectOption(selection);
-    } else {
-      set(searchFilter, '');
-    }
-  }
-  set(optionsShown, false);
-  emit('blur');
-};
+const { countries } = useCountries();
 
-const keyMonitor = (event: KeyboardEvent) => {
-  const filtered = get(filteredOptions);
-  if (event.key === 'Enter' && filtered[0]) {
-    selectOption(filtered[0]);
-  }
-};
-
-const getFlagEmoji = (code: string) => {
-  const codePoints = code
-    .toUpperCase()
-    .split('')
-    .map((char) => 127397 + char.charCodeAt(0));
-  return String.fromCodePoint(...codePoints);
-};
-
-const isEmpty = computed(() => {
-  const filter = get(searchFilter);
-  const selection = get(selected);
-  return !filter || selection?.name !== filter;
-});
-
-watch(selected, (newValue, oldValue) => {
-  if (newValue && newValue !== oldValue) {
-    emit('update:modelValue', newValue?.code ?? '');
-  }
-});
-onMounted(() => setCountryUsingCode(get(value)));
-
-function setCountryUsingCode(value: string) {
-  const cnt = get(countries);
-  const country = cnt.find(({ code }) => code === value);
-  if (country && country !== get(selected)) {
-    selectOption(country);
-  }
-}
-
-debouncedWatch(
-  value,
-  (value) => {
-    if (!value) {
-      set(selected, null);
-    } else {
-      setCountryUsingCode(value);
-    }
+const country = computed({
+  get() {
+    return get(countries).find(({ code }) => code === get(modelValue)) || null;
   },
-  { debounce: 800 },
-);
-
-emit('selected', get(selected));
-const css = useCssModule();
+  set(item: Country | null) {
+    emit('update:modelValue', item ? item.code : '');
+  },
+});
 </script>
 
 <template>
-  <div :class="css.wrapper">
-    <div>
-      <div :class="css.inputContainer">
-        <div v-if="countries" :class="css.dropdown">
-          <span
-            v-if="selected && searchFilter === selected.name"
-            :class="css.flag"
-          >
-            {{ getFlagEmoji(selected.code) }}</span
-          >
-          <input
-            :id="id"
-            v-model="searchFilter"
-            :name="id"
-            autocomplete="off"
-            :class="{
-              [css.input]: true,
-              [css.empty]: isEmpty,
-            }"
-            :disabled="disabled"
-            @focus="showOptions()"
-            @blur="exit()"
-            @keyup="keyMonitor($event)"
-          />
-          <label
-            v-if="label"
-            :class="{
-              [css.label]: true,
-              [css.select]: true,
-            }"
-            :for="id"
-          >
-            {{ label }}
-          </label>
-
-          <div v-show="optionsShown" :class="css.content">
-            <div
-              v-for="(option, index) in filteredOptions"
-              :key="index"
-              :class="css.item"
-              @mousedown="selectOption(option)"
-            >
-              {{ getFlagEmoji(option.code) }}
-              {{ option.name || '-' }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <span
-      v-if="errorMessages && errorMessages.length > 0"
-      :id="`${id}-error`"
-      :class="css.error"
-    >
-      {{ errorMessages[0].$message }}
-    </span>
-
-    <span v-else :class="css.caption">
-      <slot name="hint">{{ hint }}</slot>
-    </span>
-    <slot />
-  </div>
+  <RuiAutoComplete
+    id="country"
+    v-model="country"
+    variant="outlined"
+    color="primary"
+    autocomplete="country"
+    :data="countries"
+    :disabled="disabled"
+    key-prop="code"
+    text-prop="name"
+    :label="t('auth.signup.address.form.country')"
+  >
+    <template #no-data>
+      {{ t('country_select.no_data') }}
+    </template>
+  </RuiAutoComplete>
 </template>
-
-<style lang="scss" module>
-.wrapper {
-  @apply flex flex-col pt-2.5;
-}
-
-.inputContainer {
-  @apply relative w-full;
-}
-
-.input {
-  @apply block border-rui-grey-300 box-border border-solid focus:outline-none focus:border-rui-primary pr-2 px-3 appearance-none w-full bg-white;
-
-  margin-top: 8px;
-  border-width: 1px;
-  border-radius: 8px;
-  height: 56px;
-
-  & ~ label {
-    @apply top-4;
-
-    transform-origin: 0 0;
-    left: 26px;
-  }
-
-  &:focus-within ~ label {
-    @apply transform scale-75 -translate-y-4 text-rui-primary-darker duration-300;
-  }
-
-  &:not(.empty) {
-    @apply pl-9;
-  }
-
-  &:not(.empty):not(:focus-within) ~ label {
-    @apply transform scale-75 -translate-y-4 text-rui-text-secondary duration-300;
-  }
-
-  &:disabled {
-    @apply bg-gray-200;
-  }
-}
-
-.label {
-  @apply absolute top-4 text-rui-text-secondary text-sm;
-}
-
-.dropdown {
-  @apply relative block m-auto;
-
-  .dropdown:hover .content {
-    @apply block;
-  }
-}
-
-.content {
-  @apply absolute bg-white max-h-60 border border-solid border-rui-grey-200 shadow-md overflow-auto z-10;
-
-  min-width: 280px;
-  max-width: 280px;
-}
-
-.item {
-  @apply text-base text-rui-grey-800 p-2 block cursor-pointer;
-
-  text-decoration: none;
-
-  &:hover {
-    background-color: #e7ecf5;
-  }
-}
-
-%text-style {
-  @apply text-xs font-sans;
-
-  color: #808080;
-  margin-top: 8px;
-}
-
-.caption {
-  @extend %text-style;
-}
-
-.error {
-  color: #e53935;
-
-  @extend %text-style;
-}
-
-.empty {
-  @apply pl-3;
-}
-
-.flag {
-  @apply absolute top-4 left-3;
-}
-</style>
diff --git a/components/account/home/AccountAddress.vue b/components/account/home/AccountAddress.vue
new file mode 100644
index 00000000..866c3911
--- /dev/null
+++ b/components/account/home/AccountAddress.vue
@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+import { get, objectOmit, set } from '@vueuse/core';
+import { storeToRefs } from 'pinia';
+import { useMainStore } from '~/store';
+
+const store = useMainStore();
+const state = reactive({
+  address1: '',
+  address2: '',
+  city: '',
+  postcode: '',
+  country: '',
+});
+
+const loading = ref(false);
+const done = ref(false);
+
+const { account } = storeToRefs(store);
+
+const movedOffline = computed(
+  () => get(account)?.address.movedOffline ?? false,
+);
+
+onMounted(() => {
+  reset();
+});
+
+const rules = {
+  address1: { required },
+  address2: {},
+  city: { required },
+  postcode: { required },
+  country: { required },
+};
+
+const $externalResults = ref<Record<string, string[]>>({});
+
+const v$ = useVuelidate(rules, state, {
+  $autoDirty: true,
+  $externalResults,
+});
+
+const reset = () => {
+  const userAccount = get(account);
+
+  if (!userAccount) {
+    return;
+  }
+
+  const offline =
+    'Moved offline. For editing please contact support@rotki.com.';
+
+  const unavailable = get(movedOffline);
+
+  state.address1 = unavailable ? offline : userAccount.address.address1;
+  state.address2 = unavailable ? offline : userAccount.address.address2;
+  state.city = unavailable ? offline : userAccount.address.city;
+  state.postcode = unavailable ? offline : userAccount.address.postcode;
+  state.country = unavailable ? offline : userAccount.address.country;
+
+  get(v$).$reset();
+};
+
+const update = async () => {
+  const userAccount = get(account);
+  if (!userAccount) {
+    return;
+  }
+
+  const isValid = await get(v$).$validate();
+  if (!isValid) {
+    return;
+  }
+  set(loading, true);
+
+  const payload = objectOmit(
+    {
+      githubUsername: userAccount.githubUsername,
+      ...userAccount.address,
+      ...state,
+    },
+    ['movedOffline'],
+  );
+  const { success, message } = await store.updateProfile(payload);
+  if (success) {
+    set(done, true);
+  } else if (message && typeof message !== 'string') {
+    set($externalResults, message);
+  }
+  set(loading, false);
+};
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <div>
+    <div class="space-y-5">
+      <RuiTextField
+        id="address-1"
+        v-model="state.address1"
+        :disabled="movedOffline"
+        variant="outlined"
+        color="primary"
+        autocomplete="address-line1"
+        :label="t('auth.signup.address.form.address_line_1')"
+        :hint="t('auth.common.required')"
+        :error-messages="toMessages(v$.address1)"
+        @blur="v$.address1.$touch()"
+      />
+
+      <RuiTextField
+        id="address-2"
+        v-model="state.address2"
+        :disabled="movedOffline"
+        variant="outlined"
+        color="primary"
+        autocomplete="address-line2"
+        :label="t('auth.signup.address.form.address_line_2')"
+        :hint="t('auth.common.optional')"
+        :error-messages="toMessages(v$.address2)"
+        @blur="v$.address2.$touch()"
+      />
+
+      <RuiTextField
+        id="city"
+        v-model="state.city"
+        :disabled="movedOffline"
+        variant="outlined"
+        color="primary"
+        autocomplete="address-level2"
+        :label="t('auth.signup.address.form.city')"
+        :hint="t('auth.common.required')"
+        :error-messages="toMessages(v$.city)"
+        @blur="v$.city.$touch()"
+      />
+
+      <RuiTextField
+        id="postal"
+        v-model="state.postcode"
+        :disabled="movedOffline"
+        variant="outlined"
+        color="primary"
+        autocomplete="postal-code"
+        :label="t('auth.signup.address.form.postal_code')"
+        :hint="t('auth.common.required')"
+        :error-messages="toMessages(v$.postcode)"
+        @blur="v$.postcode.$touch()"
+      />
+
+      <CountrySelect
+        v-model="state.country"
+        disabled
+        :error-messages="toMessages(v$.country)"
+        :hint="
+          t('account.address.country.hint', { email: 'support@rotki.com' })
+        "
+        @blur="v$.country.$touch()"
+      />
+    </div>
+
+    <div class="mt-10 mb-5 border-t border-grey-50" />
+
+    <div class="flex justify-end gap-3">
+      <RuiButton size="lg" color="primary" variant="outlined" @click="reset()">
+        {{ t('actions.cancel') }}
+      </RuiButton>
+      <RuiButton
+        :disabled="v$.$invalid"
+        size="lg"
+        :loading="loading"
+        color="primary"
+        @click="update()"
+      >
+        {{ t('actions.update') }}
+      </RuiButton>
+    </div>
+  </div>
+</template>
diff --git a/components/account/home/AccountDetails.vue b/components/account/home/AccountDetails.vue
index c9513df7..1f41c052 100644
--- a/components/account/home/AccountDetails.vue
+++ b/components/account/home/AccountDetails.vue
@@ -1,6 +1,31 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+import { useMainStore } from '~/store';
+
+const store = useMainStore();
+const { account } = storeToRefs(store);
+
+const email = computed(() => {
+  const userAccount = account.value;
+  return !userAccount ? '' : userAccount.email;
+});
+
+const { t } = useI18n();
+</script>
+
 <template>
   <div>
-    <ChangePassword />
-    <AccountInformation />
+    <div class="text-h6 mb-6">Details</div>
+    <div>
+      <RuiTextField
+        id="email"
+        v-model="email"
+        disabled
+        variant="outlined"
+        :label="t('auth.common.email')"
+        hide-details
+        color="primary"
+      />
+    </div>
   </div>
 </template>
diff --git a/components/account/home/AccountInformation.vue b/components/account/home/AccountInformation.vue
index b86bcca4..f2d7c0b9 100644
--- a/components/account/home/AccountInformation.vue
+++ b/components/account/home/AccountInformation.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
-import { get, set } from '@vueuse/core';
+import { get, objectOmit, set } from '@vueuse/core';
 import { storeToRefs } from 'pinia';
 import { useMainStore } from '~/store';
 
@@ -12,11 +12,6 @@ const state = reactive({
   lastName: '',
   companyName: '',
   vatId: '',
-  address1: '',
-  address2: '',
-  city: '',
-  postcode: '',
-  country: '',
 });
 
 const loading = ref(false);
@@ -29,7 +24,27 @@ const movedOffline = computed(
 );
 
 onMounted(() => {
+  reset();
+});
+
+const rules = {
+  githubUsername: {},
+  firstName: { required },
+  lastName: { required },
+  companyName: {},
+  vatId: {},
+};
+
+const $externalResults = ref<Record<string, string[]>>({});
+
+const v$ = useVuelidate(rules, state, {
+  $autoDirty: true,
+  $externalResults,
+});
+
+const reset = () => {
   const userAccount = get(account);
+
   if (!userAccount) {
     return;
   }
@@ -44,40 +59,30 @@ onMounted(() => {
   state.lastName = unavailable ? offline : userAccount.address.lastName;
   state.companyName = unavailable ? offline : userAccount.address.companyName;
   state.vatId = unavailable ? offline : userAccount.address.vatId;
-  state.address1 = unavailable ? offline : userAccount.address.address1;
-  state.address2 = unavailable ? offline : userAccount.address.address2;
-  state.city = unavailable ? offline : userAccount.address.city;
-  state.postcode = unavailable ? offline : userAccount.address.postcode;
-  state.country = unavailable ? offline : userAccount.address.country;
-});
 
-const rules = {
-  githubUsername: {},
-  firstName: { required },
-  lastName: { required },
-  companyName: {},
-  vatId: {},
-  address1: { required },
-  address2: {},
-  city: { required },
-  postcode: { required },
-  country: { required },
+  get(v$).$reset();
 };
 
-const $externalResults = ref<Record<string, string[]>>({});
-
-const v$ = useVuelidate(rules, state, {
-  $autoDirty: true,
-  $externalResults,
-});
-
 const update = async () => {
+  const userAccount = get(account);
+  if (!userAccount) {
+    return;
+  }
+
   const isValid = await get(v$).$validate();
   if (!isValid) {
     return;
   }
   set(loading, true);
-  const { success, message } = await store.updateProfile(state);
+
+  const payload = objectOmit(
+    {
+      ...userAccount.address,
+      ...state,
+    },
+    ['movedOffline'],
+  );
+  const { success, message } = await store.updateProfile(payload);
   if (success) {
     set(done, true);
   } else if (message && typeof message !== 'string') {
@@ -86,131 +91,91 @@ const update = async () => {
   set(loading, false);
 };
 
-const { countries } = useCountries();
-const css = useCssModule();
+const { t } = useI18n();
 </script>
 
 <template>
-  <CardContainer :class="css.info">
-    <TextHeading subheading> Customer Information</TextHeading>
-    <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="first-name"
-      v-model="state.firstName"
-      :disabled="movedOffline"
-      :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"
-      :disabled="movedOffline"
-      :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"
-      :disabled="movedOffline"
-      :error-messages="v$.companyName.$errors"
-      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"
-      :disabled="movedOffline"
-      :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()"
-    />
-
-    <TextHeading subheading>Address</TextHeading>
-
-    <InputField
-      id="address-1"
-      v-model="state.address1"
-      :disabled="movedOffline"
-      :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"
-      :disabled="movedOffline"
-      :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"
-      :disabled="movedOffline"
-      :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"
-      :disabled="movedOffline"
-      :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"
-      disabled
-      :error-messages="v$.country.$errors"
-      hint="Email us at support@rotki.com if you need to change your billing country."
-      label="Country"
-      autocomplete="country"
-      @blur="v$.country.$touch()"
-    />
-
-    <div class="my-5 border-t border-grey-50" />
-
-    <div class="flex justify-end mt-8">
-      <RuiButton size="lg" :loading="loading" color="primary" @click="update()">
-        Update
+  <div>
+    <div class="space-y-5">
+      <RuiTextField
+        id="github"
+        v-model="state.githubUsername"
+        variant="outlined"
+        color="primary"
+        :label="t('auth.signup.account.form.github_username')"
+        :hint="t('auth.signup.account.form.github_username_hint')"
+        :error-messages="toMessages(v$.githubUsername)"
+      />
+
+      <RuiTextField
+        id="first-name"
+        v-model="state.firstName"
+        :disabled="movedOffline"
+        variant="outlined"
+        color="primary"
+        autocomplete="given-name"
+        :label="t('auth.signup.customer_information.form.first_name')"
+        :hint="t('auth.signup.customer_information.form.name_hint')"
+        :error-messages="toMessages(v$.firstName)"
+        @blur="v$.firstName.$touch()"
+      />
+
+      <RuiTextField
+        id="last-name"
+        v-model="state.lastName"
+        :disabled="movedOffline"
+        variant="outlined"
+        color="primary"
+        autocomplete="family-name"
+        :label="t('auth.signup.customer_information.form.last_name')"
+        :hint="t('auth.signup.customer_information.form.name_hint')"
+        :error-messages="toMessages(v$.lastName)"
+        @blur="v$.lastName.$touch()"
+      />
+
+      <RuiTextField
+        id="company-name"
+        v-model="state.companyName"
+        :disabled="movedOffline"
+        variant="outlined"
+        color="primary"
+        autocomplete="organization"
+        :label="t('auth.signup.customer_information.form.company')"
+        :hint="t('auth.signup.customer_information.form.company_hint')"
+        :error-messages="toMessages(v$.companyName)"
+        @blur="v$.companyName.$touch()"
+      />
+
+      <RuiTextField
+        id="vat-id"
+        v-model="state.vatId"
+        :disabled="movedOffline"
+        variant="outlined"
+        color="primary"
+        :label="t('auth.signup.customer_information.form.vat_id')"
+        :hint="t('auth.signup.customer_information.form.vat_id_hint')"
+        :error-messages="toMessages(v$.vatId)"
+        @blur="v$.vatId.$touch()"
+      />
+    </div>
+
+    <div class="mt-10 mb-5 border-t border-grey-50" />
+
+    <div class="flex justify-end gap-3">
+      <RuiButton size="lg" color="primary" variant="outlined" @click="reset()">
+        {{ t('actions.cancel') }}
+      </RuiButton>
+      <RuiButton
+        :disabled="v$.$invalid"
+        size="lg"
+        :loading="loading"
+        color="primary"
+        @click="update()"
+      >
+        {{ t('actions.update') }}
       </RuiButton>
     </div>
-  </CardContainer>
+  </div>
 </template>
 
 <style lang="scss" module>
diff --git a/components/account/home/AccountInformation1.vue b/components/account/home/AccountInformation1.vue
new file mode 100644
index 00000000..b86bcca4
--- /dev/null
+++ b/components/account/home/AccountInformation1.vue
@@ -0,0 +1,220 @@
+<script setup lang="ts">
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+import { get, set } from '@vueuse/core';
+import { storeToRefs } from 'pinia';
+import { useMainStore } from '~/store';
+
+const store = useMainStore();
+const state = reactive({
+  githubUsername: '',
+  firstName: '',
+  lastName: '',
+  companyName: '',
+  vatId: '',
+  address1: '',
+  address2: '',
+  city: '',
+  postcode: '',
+  country: '',
+});
+
+const loading = ref(false);
+const done = ref(false);
+
+const { account } = storeToRefs(store);
+
+const movedOffline = computed(
+  () => get(account)?.address.movedOffline ?? false,
+);
+
+onMounted(() => {
+  const userAccount = get(account);
+  if (!userAccount) {
+    return;
+  }
+
+  const offline =
+    'Moved offline. For editing please contact support@rotki.com.';
+
+  const unavailable = get(movedOffline);
+
+  state.githubUsername = userAccount.githubUsername;
+  state.firstName = unavailable ? offline : userAccount.address.firstName;
+  state.lastName = unavailable ? offline : userAccount.address.lastName;
+  state.companyName = unavailable ? offline : userAccount.address.companyName;
+  state.vatId = unavailable ? offline : userAccount.address.vatId;
+  state.address1 = unavailable ? offline : userAccount.address.address1;
+  state.address2 = unavailable ? offline : userAccount.address.address2;
+  state.city = unavailable ? offline : userAccount.address.city;
+  state.postcode = unavailable ? offline : userAccount.address.postcode;
+  state.country = unavailable ? offline : userAccount.address.country;
+});
+
+const rules = {
+  githubUsername: {},
+  firstName: { required },
+  lastName: { required },
+  companyName: {},
+  vatId: {},
+  address1: { required },
+  address2: {},
+  city: { required },
+  postcode: { required },
+  country: { required },
+};
+
+const $externalResults = ref<Record<string, string[]>>({});
+
+const v$ = useVuelidate(rules, state, {
+  $autoDirty: true,
+  $externalResults,
+});
+
+const update = async () => {
+  const isValid = await get(v$).$validate();
+  if (!isValid) {
+    return;
+  }
+  set(loading, true);
+  const { success, message } = await store.updateProfile(state);
+  if (success) {
+    set(done, true);
+  } else if (message && typeof message !== 'string') {
+    set($externalResults, message);
+  }
+  set(loading, false);
+};
+
+const { countries } = useCountries();
+const css = useCssModule();
+</script>
+
+<template>
+  <CardContainer :class="css.info">
+    <TextHeading subheading> Customer Information</TextHeading>
+    <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="first-name"
+      v-model="state.firstName"
+      :disabled="movedOffline"
+      :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"
+      :disabled="movedOffline"
+      :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"
+      :disabled="movedOffline"
+      :error-messages="v$.companyName.$errors"
+      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"
+      :disabled="movedOffline"
+      :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()"
+    />
+
+    <TextHeading subheading>Address</TextHeading>
+
+    <InputField
+      id="address-1"
+      v-model="state.address1"
+      :disabled="movedOffline"
+      :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"
+      :disabled="movedOffline"
+      :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"
+      :disabled="movedOffline"
+      :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"
+      :disabled="movedOffline"
+      :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"
+      disabled
+      :error-messages="v$.country.$errors"
+      hint="Email us at support@rotki.com if you need to change your billing country."
+      label="Country"
+      autocomplete="country"
+      @blur="v$.country.$touch()"
+    />
+
+    <div class="my-5 border-t border-grey-50" />
+
+    <div class="flex justify-end mt-8">
+      <RuiButton size="lg" :loading="loading" color="primary" @click="update()">
+        Update
+      </RuiButton>
+    </div>
+  </CardContainer>
+</template>
+
+<style lang="scss" module>
+.info {
+  @apply mt-8;
+}
+</style>
diff --git a/components/account/home/ApiKeys.vue b/components/account/home/ApiKeys.vue
index a816fcf3..d48b4263 100644
--- a/components/account/home/ApiKeys.vue
+++ b/components/account/home/ApiKeys.vue
@@ -8,84 +8,55 @@ const { account } = storeToRefs(store);
 const apiKey = computed(() => account.value?.apiKey ?? '');
 const apiSecret = computed(() => account.value?.apiSecret ?? '');
 const hasApiKeys = computed(() => apiKey.value && apiSecret.value);
-const showKey = ref(false);
-const showSecret = ref(false);
 
 const regenerateKeys = async () => await store.updateKeys();
 
-const css = useCssModule();
+const { t } = useI18n();
 </script>
 
 <template>
-  <CardContainer>
-    <TextHeading :class="css.heading" subheading>API Credentials</TextHeading>
-    <div :class="css.entry">
-      <InputField
-        id="api-key"
-        :class="css.input"
-        :model-value="apiKey"
-        :type="showKey ? 'text' : 'password'"
-        label="API Key"
-        readonly
-      />
-      <VisibilityButton v-model="showKey" :class="css.toggle" />
-      <div :class="css.col">
-        <CopyButton :class="css.button" :model-value="apiKey" />
+  <div>
+    <div class="mb-6 flex justify-between items-center">
+      <div class="text-h6">{{ t('account.api_keys.title') }}</div>
+      <div>
+        <RuiButton color="primary" @click="regenerateKeys()">
+          <template #prepend>
+            <RuiIcon name="refresh-line" />
+          </template>
+          {{ hasApiKeys ? t('actions.regenerate') : t('actions.generate') }}
+        </RuiButton>
       </div>
     </div>
-    <div :class="css.entry">
-      <InputField
-        id="api-secret"
-        :class="css.input"
+    <div class="grid grid-cols-2 gap-4">
+      <RuiRevealableTextField
+        id="username"
+        :model-value="apiKey"
+        variant="outlined"
+        :label="t('account.api_keys.api_key')"
+        readonly
+        hide-details
+        color="primary"
+      >
+        <template #append>
+          <div class="h-6 border-r border-rui-grey-400 ml-2 mr-1" />
+          <CopyButton :model-value="apiKey" />
+        </template>
+      </RuiRevealableTextField>
+
+      <RuiRevealableTextField
+        id="username"
         :model-value="apiSecret"
-        :type="showSecret ? 'text' : 'password'"
-        label="API Secret"
+        variant="outlined"
+        :label="t('account.api_keys.api_secret')"
         readonly
-      />
-      <VisibilityButton v-model="showSecret" :class="css.toggle" />
-      <div :class="css.col">
-        <CopyButton :class="css.button" :model-value="apiSecret" />
-      </div>
+        hide-details
+        color="primary"
+      >
+        <template #append>
+          <div class="h-6 border-r border-rui-grey-400 ml-2 mr-1" />
+          <CopyButton :model-value="apiSecret" />
+        </template>
+      </RuiRevealableTextField>
     </div>
-    <RuiButton
-      variant="outlined"
-      size="lg"
-      class="uppercase outline-2 mt-3"
-      rounded
-      color="primary"
-      @click="regenerateKeys()"
-    >
-      {{ hasApiKeys ? 'Regenerate' : 'Generate' }}
-    </RuiButton>
-  </CardContainer>
+  </div>
 </template>
-
-<style lang="scss" module>
-.col {
-  @apply flex flex-col;
-}
-
-.row {
-  @apply py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8;
-}
-
-.entry {
-  @apply flex flex-row min-w-full items-center;
-}
-
-.input {
-  @apply flex-grow;
-}
-
-.button {
-  @apply ml-3 mt-1.5;
-}
-
-.toggle {
-  @apply ml-3 mt-1 mr-0 mb-0;
-}
-
-.heading {
-  @apply my-4;
-}
-</style>
diff --git a/components/account/home/CancelSubscription.vue b/components/account/home/CancelSubscription.vue
index cf4c42f6..e10ed3bf 100644
--- a/components/account/home/CancelSubscription.vue
+++ b/components/account/home/CancelSubscription.vue
@@ -20,7 +20,14 @@ const css = useCssModule();
 
 <template>
   <div>
-    <button :class="css.actionButton" @click="confirm = true">Cancel</button>
+    <RuiButton
+      variant="text"
+      type="button"
+      color="warning"
+      @click="confirm = true"
+    >
+      Cancel
+    </RuiButton>
     <ModalDialog v-model="confirm" padding="1rem">
       <div :class="css.body">
         <h2 :class="css.title">Canceling Your Rotki Subscription</h2>
@@ -108,11 +115,6 @@ const css = useCssModule();
 
 <style lang="scss" module>
 @import '@/assets/css/media.scss';
-
-.actionButton {
-  @apply text-rui-primary hover:text-yellow-500 focus:outline-none;
-}
-
 .title {
   @apply text-rui-text font-bold text-xl;
 }
diff --git a/components/account/home/ChangePassword.vue b/components/account/home/ChangePassword.vue
index 80d0bfb8..b971a399 100644
--- a/components/account/home/ChangePassword.vue
+++ b/components/account/home/ChangePassword.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useVuelidate } from '@vuelidate/core';
 import { minLength, required, sameAs } from '@vuelidate/validators';
-import { storeToRefs } from 'pinia';
+import { get, set } from '@vueuse/core';
 import { useMainStore } from '~/store';
 import { type ActionResult } from '~/types/common';
 
@@ -9,12 +9,6 @@ const loading = ref(false);
 const success = ref(false);
 
 const store = useMainStore();
-const { account } = storeToRefs(store);
-
-const email = computed(() => {
-  const userAccount = account.value;
-  return !userAccount ? '' : userAccount.email;
-});
 
 const state = reactive({
   currentPassword: '',
@@ -41,102 +35,124 @@ const v$ = useVuelidate(rules, state, {
 let pendingTimeout: any;
 
 const changePassword = async () => {
-  loading.value = true;
+  set(loading, true);
   const result: ActionResult = await store.changePassword(state);
-  loading.value = false;
+  set(loading, false);
   if (result.message && typeof result.message !== 'string') {
-    $externalResults.value = result.message;
+    set($externalResults, result.message);
   }
 
   if (result.success) {
-    success.value = true;
+    set(success, true);
     if (pendingTimeout) {
       clearTimeout(pendingTimeout);
       pendingTimeout = undefined;
     }
     pendingTimeout = setTimeout(() => {
-      success.value = false;
+      set(success, false);
     }, 4000);
-    state.currentPassword = '';
-    state.newPassword = '';
-    state.passwordConfirmation = '';
-    v$.value.$reset();
+    reset();
   }
 };
 
-const css = useCssModule();
+const reset = () => {
+  state.currentPassword = '';
+  state.newPassword = '';
+  state.passwordConfirmation = '';
+  get(v$).$reset();
+};
+
+const { t } = useI18n();
 </script>
 
 <template>
-  <CardContainer>
-    <TextHeading subheading>Account Details</TextHeading>
-    <InputField
-      id="email"
-      :model-value="email"
-      disabled
-      hint="At the moment user email can't be changed. Email us support@rotki.com if you need to do so."
-      label="Email"
-      readonly
-      type="email"
-    />
-
-    <TextHeading subheading>Change Password</TextHeading>
-
-    <InputField
-      id="current-password"
-      v-model="state.currentPassword"
-      :error-messages="v$.currentPassword.$errors"
-      hint="Enter your current account password. Only needed if you want to change password"
-      label="Current Password"
-      type="password"
-      autocomplete="current-password"
-    />
-
-    <InputField
-      id="new-password"
-      v-model="state.newPassword"
-      :error-messages="v$.newPassword.$errors"
-      hint="Enter a new password for your account"
-      label="New Password"
-      type="password"
-      autocomplete="new-password"
-    />
-
-    <InputField
-      id="password-confirmation"
-      v-model="state.passwordConfirmation"
-      :error-messages="v$.passwordConfirmation.$errors"
-      hint="Enter the same password as before, for verification."
-      label="Password Confirmation"
-      type="password"
-      autocomplete="new-password"
-    />
-
-    <div class="my-5 border-t border-grey-50" />
-
-    <div class="flex justify-end mt-8">
-      <span v-if="success" :class="css.success">
+  <div>
+    <div class="text-h6 mb-6">{{ t('account.change_password.title') }}</div>
+    <div>
+      <div class="space-y-5">
+        <RuiRevealableTextField
+          id="current-password"
+          v-model="state.currentPassword"
+          variant="outlined"
+          color="primary"
+          :error-messages="toMessages(v$.currentPassword)"
+          :hint="t('account.change_password.current_password.hint')"
+          :label="t('account.change_password.current_password.label')"
+          autocomplete="current-password"
+        />
+
+        <div class="space-y-1">
+          <RuiRevealableTextField
+            id="new-password"
+            v-model="state.newPassword"
+            color="primary"
+            variant="outlined"
+            hide-details
+            :label="t('account.change_password.new_password.label')"
+            autocomplete="new-password"
+            :error-messages="toMessages(v$.newPassword).length > 0 ? [''] : []"
+          />
+
+          <ul
+            class="ml-4 list-disc text-caption"
+            :class="
+              toMessages(v$.newPassword).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>
+
+        <RuiRevealableTextField
+          id="password-confirmation"
+          v-model="state.passwordConfirmation"
+          color="primary"
+          :error-messages="toMessages(v$.passwordConfirmation)"
+          variant="outlined"
+          :label="t('auth.signup.account.form.confirm_password')"
+          :hint="t('auth.common.confirm_hint')"
+          autocomplete="new-password"
+        />
+      </div>
+
+      <div class="mt-10 mb-5 border-t border-grey-50" />
+
+      <div class="flex justify-end gap-3">
+        <RuiButton
+          size="lg"
+          color="primary"
+          variant="outlined"
+          @click="reset()"
+        >
+          {{ t('actions.cancel') }}
+        </RuiButton>
+        <RuiButton
+          :disabled="v$.$invalid"
+          size="lg"
+          :loading="loading"
+          color="primary"
+          @click="changePassword()"
+        >
+          {{ t('actions.update') }}
+        </RuiButton>
+      </div>
+
+      <div v-if="success">
         <CheckMarkIcon /> Your password has been changed.
-      </span>
-      <RuiButton
-        :disabled="v$.$invalid"
-        size="lg"
-        :loading="loading"
-        color="primary"
-        @click="changePassword()"
-      >
-        Change Password
-      </RuiButton>
+      </div>
     </div>
-  </CardContainer>
+  </div>
 </template>
-
-<style lang="scss" module>
-.row {
-  @apply flex-row flex;
-}
-
-.success {
-  @apply flex flex-row mr-4 mt-6 text-rui-grey-800 transition duration-300 ease-in-out;
-}
-</style>
diff --git a/components/account/home/DangerZone.vue b/components/account/home/DangerZone.vue
index 0728c334..76cfb179 100644
--- a/components/account/home/DangerZone.vue
+++ b/components/account/home/DangerZone.vue
@@ -29,24 +29,22 @@ const deleteAccount = async () => {
   }
 };
 
-const css = useCssModule();
+const { t } = useI18n();
 </script>
 
 <template>
-  <CardContainer warning>
-    <TextHeading class="mt-4" no-margin>
-      <div class="text-rui-error">Delete account</div>
-    </TextHeading>
-
-    <p class="text-rui-text-secondary mt-1">
-      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="text-rui-warning">
-      You cannot delete your account while you have an active subscription.
-    </p>
-
+  <RuiCard class="!border-2 !border-rui-error">
+    <div>
+      <div class="text-lg font-semibold text-rui-error">
+        {{ t('account.delete_account.title') }}
+      </div>
+      <div class="text-rui-text-secondary text-sm">
+        {{ t('account.delete_account.description') }}
+      </div>
+    </div>
+    <RuiAlert v-if="isSubscriber" class="mt-4" type="warning">
+      {{ t('account.delete_account.unable_to_delete') }}
+    </RuiAlert>
     <div class="mt-8">
       <RuiButton
         :disabled="isSubscriber"
@@ -54,80 +52,41 @@ const css = useCssModule();
         color="error"
         @click="confirm = true"
       >
-        Delete My Account
+        {{ t('account.delete_account.delete_my_account') }}
       </RuiButton>
     </div>
+  </RuiCard>
+  <RuiDialog v-model="confirm">
+    <template #title>{{ t('account.delete_account.title') }}</template>
+
+    <div class="whitespace-break-spaces mb-4">
+      <i18n-t
+        keypath="account.delete_account.confirmation.description"
+        scope="global"
+      >
+        <template #username>
+          <strong>{{ username }}</strong>
+        </template>
+      </i18n-t>
+    </div>
 
-    <ModalDialog v-model="confirm" padding="1rem">
-      <div :class="css.title">Delete Account</div>
-      <p :class="css.description">
-        By proceeding you will delete your account and all its accompanying data
-        from our servers. This action is not reversible. Are you sure you want
-        to perform the deletion?
-      </p>
-
-      <p>
-        Type your username to continue:
-        <span :class="css.username">{{ username }}</span>
-      </p>
-      <InputField id="user-confirm" v-model="usernameConfirmation" />
+    <RuiTextField
+      v-model="usernameConfirmation"
+      variant="outlined"
+      :label="t('auth.common.username')"
+    />
 
-      <div :class="css.buttons">
-        <RuiButton
-          variant="default"
-          size="lg"
-          class="uppercase"
-          rounded
-          color="warning"
-          @click="confirm = false"
-        >
-          Cancel
-        </RuiButton>
-        <RuiButton
-          variant="outlined"
-          size="lg"
-          class="uppercase outline-2"
-          rounded
-          color="warning"
-          @click="deleteAccount()"
-        >
-          Confirm
-        </RuiButton>
-      </div>
-    </ModalDialog>
-    <ErrorNotification :visible="!!error">
-      <template #title> Account deletion failed </template>
-      <template #description>{{ error }}</template>
-    </ErrorNotification>
-  </CardContainer>
+    <template #actions>
+      <RuiButton variant="text" color="primary" @click="confirm = false">
+        {{ t('actions.cancel') }}}
+      </RuiButton>
+      <RuiButton color="error" @click="deleteAccount()">
+        {{ t('actions.confirm') }}}
+      </RuiButton>
+    </template>
+  </RuiDialog>
+  <ErrorNotification :visible="!!error">
+    <template #title> Account deletion failed </template>
+    <template #description>{{ error }}</template>
+  </ErrorNotification>
 </template>
-
-<style lang="scss" module>
-.text {
-  @apply mt-4 mb-2;
-}
-
-.username {
-  @apply font-bold;
-}
-
-.description {
-  @apply mt-4 mb-2;
-}
-
-.buttons {
-  @apply flex flex-row mt-4 justify-end;
-
-  button:first-child {
-    @apply mr-2;
-  }
-}
-
-.warning {
-  @apply mb-2 text-rui-grey-800 font-bold;
-}
-
-.title {
-  @apply text-rui-text font-bold text-xl;
-}
-</style>
diff --git a/components/account/home/PaymentsTable.vue b/components/account/home/PaymentsTable.vue
index 10b61ea4..25b146fe 100644
--- a/components/account/home/PaymentsTable.vue
+++ b/components/account/home/PaymentsTable.vue
@@ -1,15 +1,36 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
 import { get } from '@vueuse/core';
+import { type TableColumn } from '@rotki/ui-library/dist/components/tables/DataTable.vue';
 import { useMainStore } from '~/store';
-import { type DataTableHeader } from '~/types/common';
 
-const headers: DataTableHeader[] = [
-  { text: 'Plan', value: '' },
-  { text: 'Paid at', value: '', sortable: true },
-  { text: 'Amount in €', value: '', sortable: true },
-  { text: 'Status', value: '' },
-  { text: 'Receipt', value: '', className: 'text-right' },
+const { t } = useI18n();
+
+const headers: TableColumn[] = [
+  {
+    label: t('common.plan'),
+    key: 'plan',
+    cellClass: 'font-bold',
+    class: 'capitalize',
+  },
+  {
+    label: t('account.payments.headers.paid_at'),
+    key: 'paidAt',
+    sortable: true,
+  },
+  {
+    label: t('account.payments.headers.amount_in_symbol', { symbol: '€' }),
+    key: 'eurAmount',
+    sortable: true,
+    align: 'end',
+  },
+  { label: t('common.status'), key: 'status', class: 'capitalize' },
+  {
+    label: t('common.actions'),
+    key: 'actions',
+    align: 'end',
+    class: 'capitalize',
+  },
 ];
 
 const store = useMainStore();
@@ -19,76 +40,40 @@ const payments = computed(() => {
   if (!userAccount) {
     return [];
   }
+
   return userAccount.payments.sort(
     (a, b) => new Date(a.paidAt).getTime() - new Date(b.paidAt).getTime(),
   );
 });
 
-const css = useCssModule();
+const pagination = ref({ limit: 10, page: 1 });
 </script>
 
 <template>
-  <DataTable v-if="payments.length > 0" :headers="headers" :items="payments">
-    <template #title>Your latest payments</template>
-    <template #item="{ item }">
-      <td :class="css.td">
-        {{ item.plan }}
-      </td>
-      <td :class="css.td">
-        <div :class="css.text">
-          {{ item.paidAt }}
-        </div>
-      </td>
-      <td :class="css.td">
-        <div :class="css.text">
-          {{ item.eurAmount }}
-        </div>
-      </td>
+  <div>
+    <div class="text-h6 mb-6">{{ t('account.payments.title') }}</div>
+    <RuiDataTable
+      :pagination="{ ...pagination, total: payments.length }"
+      class="border rounded-xl"
+      :cols="headers"
+      :rows="payments"
+      :empty="{ description: t('account.payments.no_payments_found') }"
+      row-attr="identifier"
+      @update:pagination="pagination = $event"
+    >
+      <template #item.status>
+        <RuiChip size="sm"> {{ t('account.payments.paid') }} </RuiChip>
+      </template>
 
-      <td :class="css.td">
-        <div :class="css.text">Paid</div>
-      </td>
-      <td :class="css.action">
-        <div :class="css.actionContainer">
-          <a
-            :class="css.actionButton"
-            :href="`/webapi/download/receipt/${item.identifier}`"
-            target="_blank"
-            download
-          >
-            <InfoTooltip>
-              <template #activator>
-                <ReceiptIcon />
-              </template>
-              Download Receipt
-            </InfoTooltip>
-          </a>
-        </div>
-      </td>
-    </template>
-  </DataTable>
+      <template #item.actions="{ row }">
+        <ButtonLink
+          :to="`/webapi/download/receipt/${row.identifier}`"
+          color="primary"
+          external
+        >
+          {{ t('actions.download') }}
+        </ButtonLink>
+      </template>
+    </RuiDataTable>
+  </div>
 </template>
-
-<style lang="scss" module>
-@import '@/assets/css/media.scss';
-
-.td {
-  @apply px-6 py-4 whitespace-nowrap;
-}
-
-.text {
-  @apply text-sm text-gray-500;
-}
-
-.action {
-  @apply px-6 py-4 whitespace-nowrap text-right text-sm font-medium;
-}
-
-.actionContainer {
-  @apply flex flex-row-reverse;
-}
-
-.actionButton {
-  @apply text-rui-primary hover:text-yellow-600;
-}
-</style>
diff --git a/components/account/home/PremiumPlaceholder.vue b/components/account/home/PremiumPlaceholder.vue
index e78dce67..cea8b3d1 100644
--- a/components/account/home/PremiumPlaceholder.vue
+++ b/components/account/home/PremiumPlaceholder.vue
@@ -1,42 +1,39 @@
 <script setup lang="ts">
-const css = useCssModule();
+const { t } = useI18n();
 </script>
 
 <template>
-  <CardContainer>
-    <div :class="css.row">
-      <div :class="css.logo">
-        <img alt="rotki" src="/img/logo-small.svg" />
-      </div>
-      <div>
-        <TextHeading subheading> Rotki Premium </TextHeading>
-        <div :class="css.premium">
-          No premium subscription found. Select your
-          <NuxtLink :class="css.link" to="/checkout/plan">
-            premium subscription plan.
-          </NuxtLink>
+  <div>
+    <RuiCard>
+      <div class="flex items-center space-x-4">
+        <div
+          class="rounded-full w-10 h-10 flex items-center justify-center bg-rui-primary/[0.04]"
+        >
+          <RuiLogo class="w-6 h-6" />
+        </div>
+        <div>
+          <div class="text-body-1">
+            {{ t('account.no_premium.title') }}
+          </div>
+          <div class="text-rui-text-secondary">
+            <i18n-t
+              keypath="account.no_premium.no_premium_found"
+              scope="global"
+            >
+              <template #plan>
+                <ButtonLink
+                  inline
+                  color="primary"
+                  to="/checkout/plan"
+                  class="underline"
+                >
+                  {{ t('account.no_premium.plan') }}
+                </ButtonLink>
+              </template>
+            </i18n-t>
+          </div>
         </div>
       </div>
-    </div>
-  </CardContainer>
+    </RuiCard>
+  </div>
 </template>
-
-<style lang="scss" module>
-@import '@/assets/css/media.scss';
-
-.row {
-  @apply flex flex-row items-center;
-}
-
-.premium {
-  @apply mt-2;
-}
-
-.logo {
-  margin: 16px 60px 16px 16px;
-}
-
-.link {
-  @apply hover:text-rui-text-secondary text-rui-primary;
-}
-</style>
diff --git a/components/account/home/SubscriptionTable.vue b/components/account/home/SubscriptionTable.vue
index b88b6796..91c2d96b 100644
--- a/components/account/home/SubscriptionTable.vue
+++ b/components/account/home/SubscriptionTable.vue
@@ -1,30 +1,48 @@
 <script setup lang="ts">
 import { get, useIntervalFn } from '@vueuse/core';
 import { storeToRefs } from 'pinia';
+import { type TableColumn } from '@rotki/ui-library/dist/components/tables/DataTable.vue';
 import { useMainStore } from '~/store';
 import { type Subscription } from '~/types';
-import { type DataTableHeader } from '~/types/common';
-
-const headers: DataTableHeader[] = [
-  { text: 'Plan', value: '' },
-  { text: 'Created', value: '', sortable: true },
-  { text: 'Next Billing', value: '', sortable: true },
-  { text: 'Cost in € per period', value: '', sortable: true },
-  { text: 'Status', value: '' },
-  { text: 'Actions', value: '', className: 'text-right' },
-];
 
-const store = useMainStore();
-const { account, cancellationError } = storeToRefs(store);
+const { t } = useI18n();
 
-const subscriptions = computed(() => {
-  const userAccount = get(account);
-  if (!userAccount) {
-    return [];
-  }
-  return userAccount.subscriptions;
-});
+const headers: TableColumn[] = [
+  {
+    label: t('common.plan'),
+    key: 'planName',
+    cellClass: 'font-bold',
+    class: 'capitalize',
+  },
+  {
+    label: t('account.subscriptions.headers.created'),
+    key: 'createdDate',
+    sortable: true,
+  },
+  {
+    label: t('account.subscriptions.headers.next_billing'),
+    key: 'nextActionDate',
+    sortable: true,
+  },
+  {
+    label: t('account.subscriptions.headers.cost_in_symbol_per_period', {
+      symbol: '€',
+    }),
+    key: 'nextBillingAmount',
+    sortable: true,
+    align: 'end',
+  },
+  { label: t('common.status'), key: 'status', class: 'capitalize' },
+  {
+    label: t('common.actions'),
+    key: 'actions',
+    align: 'end',
+    class: 'capitalize',
+  },
+];
 
+const store = useMainStore();
+const { subscriptions, cancellationError } = storeToRefs(store);
 const pending = computed(() => get(subscriptions).filter((sub) => sub.pending));
 
 const renewableSubscriptions = computed(() =>
@@ -88,11 +106,6 @@ watch(pending, (pending) => {
 
 onUnmounted(() => pause());
 
-const canUsePremium = computed(() => {
-  const arePending = get(pending);
-  return get(account)?.canUsePremium || arePending.length > 0;
-});
-
 const hasAction = (sub: Subscription, action: 'renew' | 'cancel') => {
   if (action === 'cancel') {
     return sub.status !== 'Pending' && sub.actions.includes('cancel');
@@ -105,68 +118,54 @@ const hasAction = (sub: Subscription, action: 'renew' | 'cancel') => {
 const displayActions = (sub: Subscription) =>
   hasAction(sub, 'renew') || hasAction(sub, 'cancel');
 
-const css = useCssModule();
+const getChipStatusColor = (status: string) =>
+  ({
+    Active: 'success',
+    Canceled: 'error',
+    Pending: 'warning',
+    'Past Due': 'warning',
+  })[status];
+
+const pagination = ref({ limit: 10, page: 1 });
 </script>
 
 <template>
   <div>
-    <PremiumPlaceholder v-if="!canUsePremium" :class="css.purchase" />
-    <DataTable
-      v-if="subscriptions.length > 0"
-      :headers="headers"
-      :items="subscriptions"
+    <div class="text-h6 mb-6">{{ t('account.subscriptions.title') }}</div>
+    <RuiDataTable
+      :pagination="{ ...pagination, total: subscriptions.length }"
+      class="border rounded-xl"
+      :cols="headers"
+      :rows="subscriptions"
+      :empty="{
+        description: t('account.subscriptions.no_subscriptions_found'),
+      }"
+      row-attr="identifier"
+      @update:pagination="pagination = $event"
     >
-      <template #title>Subscription History</template>
-      <template #item="{ item }">
-        <td :class="css.td">
-          {{ item.planName }}
-        </td>
-        <td :class="css.td">
-          <div :class="css.text">
-            {{ item.createdDate }}
-          </div>
-        </td>
-        <td :class="css.td">
-          <div :class="css.text">
-            {{ item.nextActionDate }}
-          </div>
-        </td>
-        <td :class="css.td">
-          <div :class="css.text">
-            {{ item.nextBillingAmount }}
-          </div>
-        </td>
-        <td :class="css.td">
-          <span
-            :class="{
-              [css.status]: true,
-              [css.active]: item.status === 'Active',
-              [css.cancelled]: item.status === 'Cancelled',
-              [css.pending]: item.status === 'Pending',
-              [css.pastDue]: item.status === 'Past Due',
-            }"
+      <template #item.status="{ row }">
+        <RuiChip size="sm" :color="getChipStatusColor(row.status)">
+          {{ row.status }}
+        </RuiChip>
+      </template>
+
+      <template #item.actions="{ row }">
+        <div v-if="displayActions(row)" class="flex gap-2">
+          <CancelSubscription
+            v-if="hasAction(row, 'cancel')"
+            :subscription="row"
+          />
+          <ButtonLink
+            v-if="hasAction(row, 'renew')"
+            :to="renewLink"
+            color="primary"
           >
-            {{ item.status }}
-          </span>
-        </td>
-        <td :class="css.action">
-          <div v-if="displayActions(item)">
-            <CancelSubscription
-              v-if="hasAction(item, 'cancel')"
-              :subscription="item"
-            />
-            <NuxtLink
-              v-if="hasAction(item, 'renew')"
-              :class="css.actionButton"
-              :to="renewLink"
-            >
-              Renew
-            </NuxtLink>
-          </div>
-          <div v-else>None</div>
-        </td>
+            {{ t('actions.renew') }}
+          </ButtonLink>
+        </div>
+        <div v-else class="capitalize">{{ t('common.none') }}</div>
       </template>
-    </DataTable>
+    </RuiDataTable>
     <ErrorNotification :visible="!!cancellationError">
       <template #title>Cancellation Failure</template>
       <template #description>
@@ -175,47 +174,3 @@ const css = useCssModule();
     </ErrorNotification>
   </div>
 </template>
-
-<style lang="scss" module>
-@import '@/assets/css/media.scss';
-
-.td {
-  @apply px-6 py-4 whitespace-nowrap;
-}
-
-.text {
-  @apply text-sm text-gray-500;
-}
-
-.action {
-  @apply px-6 py-4 whitespace-nowrap text-right text-sm font-medium;
-}
-
-.actionButton {
-  @apply text-indigo-600 hover:text-indigo-900;
-}
-
-.status {
-  @apply px-2 inline-flex text-xs leading-5 font-semibold rounded-full;
-}
-
-.active {
-  @apply bg-green-100 text-green-800;
-}
-
-.cancelled {
-  @apply bg-red-100 text-red-600;
-}
-
-.pending {
-  @apply bg-yellow-100 text-yellow-600;
-}
-
-.pastDue {
-  @apply bg-yellow-300 text-yellow-800;
-}
-
-.purchase {
-  @apply mb-8;
-}
-</style>
diff --git a/components/account/signup/SignupAddress.vue b/components/account/signup/SignupAddress.vue
index 84aa7704..fa185b92 100644
--- a/components/account/signup/SignupAddress.vue
+++ b/components/account/signup/SignupAddress.vue
@@ -168,25 +168,15 @@ const { t } = useI18n();
         @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')"
+
+      <CountrySelect
+        :model-value="modelValue.country"
         :error-messages="toMessages(v$.country)"
+        dense
         @blur="v$.country.$touch()"
-      >
-        <template #no-data>
-          {{ t('country_select.no_data') }}
-        </template>
-      </RuiAutoComplete>
+        :hint="t('auth.common.required')"
+        @update:model-value="updateValue('country', $event)"
+      />
       <Recaptcha
         id="signup-captcha"
         :invalid="v$.captcha.$invalid && v$.captcha.$dirty"
diff --git a/components/common/CopyButton.vue b/components/common/CopyButton.vue
index 83ee1714..f64fac2a 100644
--- a/components/common/CopyButton.vue
+++ b/components/common/CopyButton.vue
@@ -14,42 +14,26 @@ const copyToClipboard = () => {
   set(copied, true);
   start();
 };
-
-const css = useCssModule();
 </script>
 
 <template>
-  <InfoTooltip>
+  <RuiTooltip>
     <template #activator>
-      <button :class="css.button" @click="copyToClipboard()">
-        <CopyIcon />
-      </button>
+      <RuiButton
+        tabindex="-1"
+        variant="text"
+        type="button"
+        class="!p-2"
+        icon
+        @click="copyToClipboard()"
+      >
+        <RuiIcon
+          class="text-black/[.54] dark:text-white/[.56]"
+          size="20"
+          name="file-copy-line"
+        />
+      </RuiButton>
     </template>
-
-    <span v-if="copied">Copied to clipboard</span>
-    <span v-else> Copy to clipboard </span>
-  </InfoTooltip>
+    {{ copied ? 'Copied to clipboard' : 'Copy to clipboard' }}
+  </RuiTooltip>
 </template>
-
-<style lang="scss" module>
-.button {
-  @apply hover:bg-rui-grey-100 rounded-2xl focus:outline-none;
-
-  padding: 8px;
-}
-
-.ripple {
-  position: absolute;
-  border-radius: 50%;
-  transform: scale(0);
-  animation: ripple 600ms linear;
-  background-color: rgba(255, 255, 255, 0.7);
-}
-
-@keyframes ripple {
-  to {
-    transform: scale(4);
-    opacity: 0;
-  }
-}
-</style>
diff --git a/components/common/DataTable.vue b/components/common/DataTable.vue
deleted file mode 100644
index bbd0939a..00000000
--- a/components/common/DataTable.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<script setup lang="ts">
-import { type DataTableHeader } from '~/types/common';
-
-const props = defineProps<{
-  headers: DataTableHeader[];
-  items: any[];
-}>();
-
-const { items } = toRefs(props);
-const itemsPerPage = 5;
-const page = ref(1);
-const pages = computed(() => Math.ceil(items.value.length / itemsPerPage));
-const visibleItems = computed(() => {
-  const start = (page.value - 1) * itemsPerPage;
-  return items.value.slice(start, start + itemsPerPage);
-});
-
-const css = useCssModule();
-</script>
-
-<template>
-  <CardContainer>
-    <TextHeading :class="css.heading" subheading>
-      <slot name="title" />
-    </TextHeading>
-    <div :class="css.tableWrapper">
-      <table :class="css.table">
-        <thead :class="css.thead">
-          <tr>
-            <th
-              v-for="header in headers"
-              :key="header.text"
-              :class="[header.className, css.header]"
-              scope="col"
-            >
-              {{ header.text }}
-            </th>
-          </tr>
-        </thead>
-        <tbody :class="css.tbody">
-          <tr v-for="(item, index) in visibleItems" :key="index">
-            <slot :item="item" name="item" />
-          </tr>
-        </tbody>
-      </table>
-    </div>
-    <PaginationControl v-model="page" :pages="pages" />
-  </CardContainer>
-</template>
-
-<style lang="scss" module>
-@import '@/assets/css/media.scss';
-
-.table {
-  @apply min-w-full divide-y divide-gray-200 text-left;
-}
-
-.header {
-  @apply px-6 py-3  text-xs font-medium text-gray-500 uppercase tracking-wider;
-}
-
-.heading {
-  @apply text-rui-grey-800 mb-4;
-}
-
-.tableWrapper {
-  @apply overflow-hidden border border-gray-200 sm:rounded-lg;
-}
-
-.thead {
-  @apply bg-gray-50;
-}
-
-.tbody {
-  @apply bg-white divide-y divide-gray-200;
-}
-</style>
diff --git a/components/download/DownloadButton.vue b/components/download/DownloadButton.vue
index eae8e28e..b5fed092 100644
--- a/components/download/DownloadButton.vue
+++ b/components/download/DownloadButton.vue
@@ -11,7 +11,7 @@ const { t } = useI18n();
       rounded
       color="primary"
     >
-      {{ t('actions.download') }}
+      {{ t('actions.start_now_for_free') }}
     </RuiButton>
   </NuxtLink>
 </template>
diff --git a/components/icons/CopyIcon.vue b/components/icons/CopyIcon.vue
deleted file mode 100644
index 77d778ee..00000000
--- a/components/icons/CopyIcon.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <svg
-    height="24"
-    viewBox="0 0 24 24"
-    width="24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
-    />
-  </svg>
-</template>
diff --git a/components/plans/details/FreePlan.vue b/components/plans/details/FreePlan.vue
index 2afbe749..d6be49ad 100644
--- a/components/plans/details/FreePlan.vue
+++ b/components/plans/details/FreePlan.vue
@@ -4,7 +4,7 @@ const css = useCssModule();
 </script>
 
 <template>
-  <PlanBox :action="t('actions.download')" url="/download">
+  <PlanBox :action="t('actions.start_now_for_free')" url="/download">
     <template #title>{{ t('home.plans.details.free.title') }}</template>
     {{ t('home.plans.details.free.subtitle') }}
     <div :class="css.filler" />
diff --git a/layouts/account.vue b/layouts/account.vue
new file mode 100644
index 00000000..84176b8e
--- /dev/null
+++ b/layouts/account.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+import { get } from '@vueuse/core';
+import { useMainStore } from '~/store';
+import { commonAttrs, noIndex } from '~/utils/metadata';
+import Default from '~/layouts/default.vue';
+
+const { t } = useI18n();
+
+const store = useMainStore();
+const { account } = storeToRefs(store);
+
+const username = computed(() => get(account)?.username);
+
+definePageMeta({
+  middleware: ['maintenance', 'authentication'],
+});
+
+useHead({
+  title: 'account',
+  meta: [
+    {
+      key: 'description',
+      name: 'description',
+      content: 'Manage your rotki premium account',
+    },
+    noIndex(),
+  ],
+  ...commonAttrs(),
+});
+
+useAutoLogout();
+</script>
+
+<template>
+  <Default>
+    <div class="py-16">
+      <div class="container">
+        <div class="text-h4 mb-6">
+          {{ t('account.welcome') }} {{ username }}
+        </div>
+        <div class="flex gap-6">
+          <div class="w-[270px]">
+            <div>
+              <ButtonLink to="/home/subscription"> Subscription </ButtonLink>
+            </div>
+            <div>
+              <ButtonLink to="/home/account-details">
+                Account Details
+              </ButtonLink>
+            </div>
+            <div>
+              <ButtonLink to="/home/customer-information">
+                Customer Information
+              </ButtonLink>
+            </div>
+            <div><ButtonLink to="/home/address"> Address </ButtonLink></div>
+          </div>
+
+          <div class="flex-1">
+            <slot />
+          </div>
+        </div>
+      </div>
+    </div>
+  </Default>
+</template>
diff --git a/locales/en.json b/locales/en.json
index 39ea7113..9f6125d9 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -121,24 +121,88 @@
     }
   },
   "account": {
+    "address": {
+      "country": {
+        "hint": "Required. Email us at {email} if you need to change your billing country."
+      }
+    },
+    "api_keys": {
+      "title": "API Credentials",
+      "api_key": "API Key",
+      "api_secret": "API Secret"
+    },
     "unverified_email": {
       "message": "Your e-mail address has not been verified. Check your mailbox for the activation e-mail."
-    }
+    },
+    "no_premium": {
+      "title": "Rotki Premium",
+      "no_premium_found": "No premium subscription found. Select your {plan}.",
+      "plan": "premium subscription plan"
+    },
+    "change_password": {
+      "title": "Change Password",
+      "current_password": {
+        "label": "Current Password",
+        "hint": "Enter your current account password. Only needed if you want to change password"
+      },
+      "new_password": {
+        "label": "New password"
+      }
+    },
+    "delete_account": {
+      "title": "Delete account",
+      "description": "Proceeding will completely delete your account data. If you proceed you will not be able to recover your account!",
+      "unable_to_delete": "You cannot delete your account while you have an active subscription.",
+      "delete_my_account": "Delete my account",
+      "confirmation": {
+        "description": "By proceeding you will delete your account and all its accompanying data from our servers. This action is not reversible. Are you sure you want to perform the deletion?\n\nType your username to continue: {username}"
+      }
+    },
+    "payments": {
+      "no_payments_found": "No payments found",
+      "paid": "Paid",
+      "headers": {
+        "paid_at": "Paid at",
+        "amount_in_symbol": "Amount in {symbol}"
+      },
+      "title": "Your latest payments"
+    },
+    "subscriptions": {
+      "headers": {
+        "created": "Created",
+        "next_billing": "Next Billing",
+        "cost_in_symbol_per_period": "Cost in {symbol} per period"
+      },
+      "no_subscriptions_found": "No subscriptions found",
+      "title": "Subscription History"
+    },
+    "welcome": "Welcome"
   },
   "actions": {
     "apply": "Apply",
     "back": "Back",
+    "cancel": "Cancel",
+    "confirm": "Confirm",
     "continue": "Continue",
-    "download": "Start now for free",
-    "get_premium": "Get Premium",
-    "get_premium_plan": "Get Premium Plan",
+    "download": "Download",
+    "generate": "Generate",
     "get_advanced_plan": "Get Advanced Plan",
     "get_in_touch": "Get In Touch Now",
+    "get_premium": "Get Premium",
+    "get_premium_plan": "Get Premium Plan",
     "go_back_home": "Go back home",
-    "submit": "Submit"
+    "regenerate": "Regenerate",
+    "renew": "Renew",
+    "start_now_for_free": "Start now for free",
+    "submit": "Submit",
+    "update": "Update"
   },
   "common": {
-    "here": "here"
+    "here": "here",
+    "actions": "actions",
+    "status": "status",
+    "none": "none",
+    "plan": "plan"
   },
   "supported_defi": {
     "title": "Dedicated DeFi support for",
diff --git a/modules/ui-library/runtime/plugin.ts b/modules/ui-library/runtime/plugin.ts
index c9528708..22e86807 100644
--- a/modules/ui-library/runtime/plugin.ts
+++ b/modules/ui-library/runtime/plugin.ts
@@ -1,4 +1,5 @@
 import {
+  RiAccountCircleLine,
   RiAppleLine,
   RiArrowDropRightLine,
   RiArrowLeftLine,
@@ -10,16 +11,21 @@ import {
   RiDiscordLine,
   RiDownloadCloud2Line,
   RiExternalLinkLine,
+  RiFileCopyLine,
   RiGithubLine,
   RiHandCoinLine,
+  RiInformationLine,
   RiLightbulbLine,
   RiLogoutBoxRLine,
   RiMailSendLine,
+  RiMapPinLine,
   RiMenuLine,
   RiMoneyDollarCircleLine,
+  RiRefreshLine,
   RiTimer2Line,
   RiTwitterXLine,
   RiUserLocationLine,
+  RiVipCrownLine,
   RiWindowsLine,
   RuiPlugin,
 } from '@rotki/ui-library';
@@ -52,6 +58,12 @@ export default defineNuxtPlugin((nuxtApp) => {
       RiCalendarTodoLine,
       RiHandCoinLine,
       RiChatSmile2Line,
+      RiRefreshLine,
+      RiFileCopyLine,
+      RiVipCrownLine,
+      RiInformationLine,
+      RiAccountCircleLine,
+      RiMapPinLine,
     ],
   });
 });
diff --git a/package.json b/package.json
index 5e30bfe0..814d229a 100644
--- a/package.json
+++ b/package.json
@@ -52,7 +52,7 @@
     "@nuxt/devtools": "0.8.0",
     "@nuxtjs/i18n": "8.0.0-beta.12",
     "@rotki/eslint-config": "1.1.1",
-    "@rotki/ui-library": "0.3.0",
+    "@rotki/ui-library": "file:/Users/lukicenturi/Sites/ui-library",
     "@types/braintree-web": "3.96.1",
     "@types/paypal-checkout-components": "4.0.5",
     "@types/qrcode": "1.5.1",
diff --git a/pages/home.vue b/pages/home.vue
deleted file mode 100644
index 239cd319..00000000
--- a/pages/home.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import { commonAttrs, noIndex } from '~/utils/metadata';
-
-definePageMeta({
-  middleware: ['maintenance', 'authentication'],
-});
-
-useHead({
-  title: 'account',
-  meta: [
-    {
-      key: 'description',
-      name: 'description',
-      content: 'Manage your rotki premium account',
-    },
-    noIndex(),
-  ],
-  ...commonAttrs(),
-});
-
-useAutoLogout();
-</script>
-
-<template>
-  <AccountOverview />
-</template>
-
-<style lang="scss">
-@import '@/assets/css/media.scss';
-@import '@/assets/css/main.scss';
-</style>
diff --git a/pages/home/account-details.vue b/pages/home/account-details.vue
new file mode 100644
index 00000000..6e3b183b
--- /dev/null
+++ b/pages/home/account-details.vue
@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+definePageMeta({
+  layout: 'account',
+  middleware: ['maintenance', 'authentication'],
+});
+</script>
+
+<template>
+  <div class="space-y-10">
+    <AccountDetails />
+    <ChangePassword />
+    <DangerZone />
+  </div>
+</template>
diff --git a/pages/home/address.vue b/pages/home/address.vue
new file mode 100644
index 00000000..e6a11367
--- /dev/null
+++ b/pages/home/address.vue
@@ -0,0 +1,10 @@
+<script lang="ts" setup>
+definePageMeta({
+  layout: 'account',
+  middleware: ['maintenance', 'authentication'],
+});
+</script>
+
+<template>
+  <AccountAddress />
+</template>
diff --git a/pages/home/customer-information.vue b/pages/home/customer-information.vue
new file mode 100644
index 00000000..35ea649b
--- /dev/null
+++ b/pages/home/customer-information.vue
@@ -0,0 +1,10 @@
+<script lang="ts" setup>
+definePageMeta({
+  layout: 'account',
+  middleware: ['maintenance', 'authentication'],
+});
+</script>
+
+<template>
+  <AccountInformation />
+</template>
diff --git a/pages/home/subscription.vue b/pages/home/subscription.vue
new file mode 100644
index 00000000..2a7fbc01
--- /dev/null
+++ b/pages/home/subscription.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { storeToRefs } from 'pinia';
+import { get } from '@vueuse/core';
+import { useMainStore } from '~/store';
+
+const store = useMainStore();
+const { account, subscriptions } = storeToRefs(store);
+
+const premium = computed(() => get(account)?.canUsePremium ?? false);
+const emailConfirmed = computed(() => get(account)?.emailConfirmed ?? false);
+const pending = computed(() => get(subscriptions).filter((sub) => sub.pending));
+
+const canUsePremium = computed(() => {
+  const arePending = get(pending);
+  return get(account)?.canUsePremium || arePending.length > 0;
+});
+
+definePageMeta({
+  layout: 'account',
+  middleware: ['maintenance', 'authentication'],
+});
+</script>
+
+<template>
+  <div class="space-y-10">
+    <UnverifiedEmailWarning v-if="!emailConfirmed" />
+    <PremiumPlaceholder v-if="!canUsePremium" />
+    <ApiKeys v-if="premium" />
+    <SubscriptionTable v-if="emailConfirmed" />
+    <PaymentsTable />
+  </div>
+</template>
diff --git a/plugins/redirect.ts b/plugins/redirect.ts
index d2249e58..4243f5be 100644
--- a/plugins/redirect.ts
+++ b/plugins/redirect.ts
@@ -6,5 +6,12 @@ export default defineNuxtPlugin(() => {
         { redirectCode: 301, replace: true },
       );
     }
+
+    if (to.path === '/home') {
+      return navigateTo(
+        { path: '/home/subscription' },
+        { redirectCode: 301, replace: true },
+      );
+    }
   });
 });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 96554ebe..870913fe 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -86,8 +86,8 @@ devDependencies:
     specifier: 1.1.1
     version: 1.1.1(eslint@8.46.0)(vue@3.3.4)
   '@rotki/ui-library':
-    specifier: 0.3.0
-    version: 0.3.0(@vueuse/core@10.3.0)(@vueuse/shared@10.3.0)(vue@3.3.4)
+    specifier: file:/Users/lukicenturi/Sites/ui-library
+    version: file:../ui-library(@vueuse/core@10.3.0)(@vueuse/shared@10.3.0)(vue@3.3.4)
   '@types/braintree-web':
     specifier: 3.96.1
     version: 3.96.1
@@ -2308,19 +2308,6 @@ packages:
       - vue
     dev: true
 
-  /@rotki/ui-library@0.3.0(@vueuse/core@10.3.0)(@vueuse/shared@10.3.0)(vue@3.3.4):
-    resolution: {integrity: sha512-wXZpx3XXg90Q/M3R/7T2Agb1H5r+Nx+fuXyNXN58lvjSIrH+gchj25DyE22Rq4ohPcBAE9F/v9VKOz7Z/pXaqw==}
-    engines: {pnpm: '>=8 <9'}
-    peerDependencies:
-      '@vueuse/core': '>10.0.0'
-      '@vueuse/shared': '>10.0.0'
-      vue: '>=3.3.4'
-    dependencies:
-      '@vueuse/core': 10.3.0(vue@3.3.4)
-      '@vueuse/shared': 10.3.0(vue@3.3.4)
-      vue: 3.3.4
-    dev: true
-
   /@sideway/address@4.1.4:
     resolution: {integrity: sha512-7vwq+rOHVWjyXxVlR76Agnvhy8I9rpzjosTESvmhNeXOXdZZB15Fl+TI9x1SiHZH5Jv2wTGduSxFDIaq0m3DUw==}
     dependencies:
@@ -13067,3 +13054,18 @@ packages:
   /zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
     dev: true
+
+  file:../ui-library(@vueuse/core@10.3.0)(@vueuse/shared@10.3.0)(vue@3.3.4):
+    resolution: {directory: ../ui-library, type: directory}
+    id: file:../ui-library
+    name: '@rotki/ui-library'
+    engines: {pnpm: '>=8 <9'}
+    peerDependencies:
+      '@vueuse/core': '>10.0.0'
+      '@vueuse/shared': '>10.0.0'
+      vue: '>=3.3.4'
+    dependencies:
+      '@vueuse/core': 10.3.0(vue@3.3.4)
+      '@vueuse/shared': 10.3.0(vue@3.3.4)
+      vue: 3.3.4
+    dev: true
diff --git a/store/index.ts b/store/index.ts
index 2e95613c..e879eb1b 100644
--- a/store/index.ts
+++ b/store/index.ts
@@ -212,6 +212,14 @@ export const useMainStore = defineStore('main', () => {
 
   const { stop, start } = useTimeoutFn(() => set(cancellationError, ''), 7000);
 
+  const subscriptions = computed(() => {
+    const userAccount = get(account);
+    if (!userAccount) {
+      return [];
+    }
+    return userAccount.subscriptions;
+  });
+
   const cancelSubscription = async (subscription: Subscription) => {
     const acc = get(account);
     assert(acc);
@@ -519,6 +527,7 @@ export const useMainStore = defineStore('main', () => {
     account,
     plans,
     cancellationError,
+    subscriptions,
     login,
     getAccount,
     changePassword,
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 8795061e..8f04e026 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,4 +1,6 @@
 module.exports = {
+  mode: 'jit',
+  darkMode: 'class',
   content: [
     './components/**/*.{vue,js,ts}',
     './layouts/**/*.vue',
diff --git a/types/common.ts b/types/common.ts
index ef04e2e9..316be0c1 100644
--- a/types/common.ts
+++ b/types/common.ts
@@ -1,13 +1,6 @@
 import { type Ref } from 'vue';
 import { type ApiError } from '~/types/index';
 
-export type DataTableHeader = {
-  readonly text: string;
-  readonly value: string;
-  readonly className?: string;
-  readonly sortable?: boolean;
-};
-
 export type ActionResult = {
   readonly success: boolean;
   readonly message?: ApiError;