From e10917a02b02c94e10be6d5a1c52a3d44c8ea596 Mon Sep 17 00:00:00 2001
From: lukicenturi <lukicenturi@gmail.com>
Date: Mon, 28 Aug 2023 13:18:48 +0700
Subject: [PATCH] feat: revamp profile pages

---
 components/account/CountrySelect.vue          | 293 ++----------------
 components/account/home/AccountAddress.vue    | 192 ++++++++++++
 components/account/home/AccountDetails.vue    | 137 +++++++-
 .../account/home/AccountInformation.vue       | 280 +++++++----------
 components/account/home/AccountOverview.vue   |  49 ---
 components/account/home/ApiKeys.vue           | 109 +++----
 .../account/home/CancelSubscription.vue       | 213 ++++++-------
 components/account/home/ChangePassword.vue    | 195 ++++++------
 components/account/home/DangerZone.vue        | 155 ++++-----
 components/account/home/ErrorNotification.vue |  41 ---
 .../account/home/FloatingNotification.vue     |  34 ++
 components/account/home/PaymentsTable.vue     | 125 ++++----
 .../account/home/PremiumPlaceholder.vue       |  67 ++--
 components/account/home/SubscriptionTable.vue | 209 +++++--------
 components/account/signup/SignupAddress.vue   |  37 +--
 components/checkout/pay/PaypalPayment.vue     |   8 +-
 components/common/ButtonLink.vue              |   5 +-
 components/common/CopyButton.vue              |  50 +--
 components/common/DataTable.vue               |  77 -----
 components/common/NotificationMessage.vue     |  25 --
 components/download/DownloadButton.vue        |   2 +-
 components/icons/CheckMarkIcon.vue            |  12 -
 components/icons/CopyIcon.vue                 |  12 -
 components/icons/ErrorIcon.vue                |  20 --
 components/plans/details/FreePlan.vue         |   2 +-
 layouts/account.vue                           | 109 +++++++
 locales/en.json                               | 114 ++++++-
 modules/ui-library/runtime/plugin.ts          |  12 +
 nuxt.config.ts                                |   1 +
 package.json                                  |   2 +-
 pages/home.vue                                |  31 --
 pages/home/account-details.vue                |  14 +
 pages/home/address.vue                        |  10 +
 pages/home/customer-information.vue           |  10 +
 pages/home/subscription.vue                   |  32 ++
 plugins/redirect.ts                           |   7 +
 pnpm-lock.yaml                                |  16 +-
 store/index.ts                                |   9 +
 tailwind.config.cjs                           |   2 +
 types/common.ts                               |   7 -
 40 files changed, 1338 insertions(+), 1387 deletions(-)
 create mode 100644 components/account/home/AccountAddress.vue
 delete mode 100644 components/account/home/AccountOverview.vue
 delete mode 100644 components/account/home/ErrorNotification.vue
 create mode 100644 components/account/home/FloatingNotification.vue
 delete mode 100644 components/common/DataTable.vue
 delete mode 100644 components/common/NotificationMessage.vue
 delete mode 100644 components/icons/CheckMarkIcon.vue
 delete mode 100644 components/icons/CopyIcon.vue
 delete mode 100644 components/icons/ErrorIcon.vue
 create mode 100644 layouts/account.vue
 delete mode 100644 pages/home.vue
 create mode 100644 pages/home/account-details.vue
 create mode 100644 pages/home/address.vue
 create mode 100644 pages/home/customer-information.vue
 create mode 100644 pages/home/subscription.vue

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..99458eb1
--- /dev/null
+++ b/components/account/home/AccountAddress.vue
@@ -0,0 +1,192 @@
+<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 {
+  public: {
+    contact: { supportEmail },
+  },
+} = useRuntimeConfig();
+
+const reset = () => {
+  const userAccount = get(account);
+
+  if (!userAccount) {
+    return;
+  }
+
+  const offline = t('account.moved_offline', { email: supportEmail });
+  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: supportEmail })"
+        @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>
+
+  <FloatingNotification
+    type="success"
+    closeable
+    :visible="done"
+    @dismiss="done = false"
+  >
+    {{ t('notifications.changes_saved') }}
+  </FloatingNotification>
+</template>
diff --git a/components/account/home/AccountDetails.vue b/components/account/home/AccountDetails.vue
index c9513df7..fdeed67a 100644
--- a/components/account/home/AccountDetails.vue
+++ b/components/account/home/AccountDetails.vue
@@ -1,6 +1,139 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+import { get, objectOmit, set } from '@vueuse/core';
+import { useVuelidate } from '@vuelidate/core';
+import { useMainStore } from '~/store';
+
+const store = useMainStore();
+const { account } = storeToRefs(store);
+
+const email = computed(() => {
+  const userAccount = account.value;
+  return !userAccount ? '' : userAccount.email;
+});
+
+const state = reactive({
+  githubUsername: '',
+});
+
+onMounted(() => {
+  reset();
+});
+
+const rules = {
+  githubUsername: {},
+};
+
+const $externalResults = ref<Record<string, string[]>>({});
+
+const v$ = useVuelidate(rules, state, {
+  $autoDirty: true,
+  $externalResults,
+});
+
+const reset = () => {
+  const userAccount = get(account);
+
+  if (!userAccount) {
+    return;
+  }
+
+  state.githubUsername = userAccount.githubUsername;
+
+  get(v$).$reset();
+};
+
+const loading = ref(false);
+const done = ref(false);
+
+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(
+    {
+      ...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>
-    <ChangePassword />
-    <AccountInformation />
+    <div class="text-h6 mb-6">Details</div>
+    <div>
+      <div class="space-y-5">
+        <RuiTextField
+          id="email"
+          v-model="email"
+          disabled
+          variant="outlined"
+          :label="t('auth.common.email')"
+          hide-details
+          color="primary"
+        />
+
+        <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)"
+        />
+      </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>
   </div>
+
+  <FloatingNotification
+    type="success"
+    closeable
+    :visible="done"
+    @dismiss="done = false"
+  >
+    {{ t('notifications.changes_saved') }}
+  </FloatingNotification>
 </template>
diff --git a/components/account/home/AccountInformation.vue b/components/account/home/AccountInformation.vue
index b86bcca4..8f00c000 100644
--- a/components/account/home/AccountInformation.vue
+++ b/components/account/home/AccountInformation.vue
@@ -1,22 +1,16 @@
 <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';
 
 const store = useMainStore();
 const state = reactive({
-  githubUsername: '',
   firstName: '',
   lastName: '',
   companyName: '',
   vatId: '',
-  address1: '',
-  address2: '',
-  city: '',
-  postcode: '',
-  country: '',
 });
 
 const loading = ref(false);
@@ -29,39 +23,14 @@ const movedOffline = computed(
 );
 
 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;
+  reset();
 });
 
 const rules = {
-  githubUsername: {},
   firstName: { required },
   lastName: { required },
   companyName: {},
   vatId: {},
-  address1: { required },
-  address2: {},
-  city: { required },
-  postcode: { required },
-  country: { required },
 };
 
 const $externalResults = ref<Record<string, string[]>>({});
@@ -71,13 +40,51 @@ const v$ = useVuelidate(rules, state, {
   $externalResults,
 });
 
+const {
+  public: {
+    contact: { supportEmail },
+  },
+} = useRuntimeConfig();
+
+const reset = () => {
+  const userAccount = get(account);
+
+  if (!userAccount) {
+    return;
+  }
+
+  const offline = t('account.moved_offline', { email: supportEmail });
+  const unavailable = get(movedOffline);
+
+  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;
+
+  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 { success, message } = await store.updateProfile(state);
+
+  const payload = objectOmit(
+    {
+      ...userAccount.address,
+      githubUsername: userAccount.githubUsername,
+      ...state,
+    },
+    ['movedOffline'],
+  );
+  const { success, message } = await store.updateProfile(payload);
   if (success) {
     set(done, true);
   } else if (message && typeof message !== 'string') {
@@ -86,135 +93,88 @@ 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="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>
+
+  <FloatingNotification
+    type="success"
+    closeable
+    :visible="done"
+    @dismiss="done = false"
+  >
+    {{ t('notifications.changes_saved') }}
+  </FloatingNotification>
 </template>
-
-<style lang="scss" module>
-.info {
-  @apply mt-8;
-}
-</style>
diff --git a/components/account/home/AccountOverview.vue b/components/account/home/AccountOverview.vue
deleted file mode 100644
index 585e4b23..00000000
--- a/components/account/home/AccountOverview.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<script setup lang="ts">
-import { get } from '@vueuse/core';
-import { storeToRefs } from 'pinia';
-import { useMainStore } from '~/store';
-
-const store = useMainStore();
-const { account } = storeToRefs(store);
-
-const premium = computed(() => get(account)?.canUsePremium ?? false);
-
-const username = computed(() => get(account)?.username);
-
-const emailConfirmed = computed(() => get(account)?.emailConfirmed ?? false);
-
-const logout = async () => {
-  await store.logout(true);
-  await navigateTo('/login');
-};
-
-const css = useCssModule();
-</script>
-
-<template>
-  <PageContainer wide>
-    <template #title> Account Management</template>
-    <template #links>
-      <LinkText class="cursor-pointer">
-        <span @click="logout()">Logout</span>
-      </LinkText>
-    </template>
-    <TextHeading :class="css.header"> Welcome {{ username }}</TextHeading>
-    <UnverifiedEmailWarning v-if="!emailConfirmed" />
-    <SubscriptionTable v-else :class="css.category" />
-    <PaymentsTable :class="css.category" />
-    <ApiKeys v-if="premium" :class="css.category" />
-    <AccountDetails :class="css.category" />
-    <DangerZone :class="css.category" />
-  </PageContainer>
-</template>
-
-<style lang="scss" module>
-.category {
-  @apply mt-8;
-}
-
-.header {
-  @apply pb-2;
-}
-</style>
diff --git a/components/account/home/ApiKeys.vue b/components/account/home/ApiKeys.vue
index a816fcf3..2d3b543a 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 md: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..fc428c79 100644
--- a/components/account/home/CancelSubscription.vue
+++ b/components/account/home/CancelSubscription.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { get, set } from '@vueuse/core';
+import { storeToRefs } from 'pinia';
 import { type Subscription } from '~/types';
 import { useMainStore } from '~/store';
 
@@ -7,131 +9,112 @@ const props = defineProps<{
 }>();
 
 const { subscription } = toRefs(props);
-const isPending = computed(() => subscription.value.status === 'Pending');
+const isPending = computed(() => get(subscription).status === 'Pending');
 const confirm = ref(false);
 const store = useMainStore();
+const { cancellationError } = storeToRefs(store);
+
 const cancelSubscription = async () => {
-  confirm.value = false;
-  await store.cancelSubscription(subscription.value);
+  set(confirm, false);
+  await store.cancelSubscription(get(subscription));
 };
 
-const css = useCssModule();
+const { t } = useI18n();
 </script>
 
 <template>
   <div>
-    <button :class="css.actionButton" @click="confirm = true">Cancel</button>
-    <ModalDialog v-model="confirm" padding="1rem">
-      <div :class="css.body">
-        <h2 :class="css.title">Canceling Your Rotki Subscription</h2>
-        <p :class="css.text">
-          Are you sure you want to cancel your currently running subscription?
-          Here are some reasons to make you stay with us:
-        </p>
-        <ul
-          :class="{
-            [css.text]: true,
-            [css.list]: true,
-          }"
+    <RuiButton
+      variant="text"
+      type="button"
+      color="warning"
+      @click="confirm = true"
+    >
+      {{ t('actions.cancel') }}
+    </RuiButton>
+
+    <RuiDialog v-model="confirm">
+      <template #title>
+        {{ t('account.subscriptions.cancellation.title') }}
+      </template>
+
+      <div class="whitespace-break-spaces mb-4">
+        <i18n-t
+          keypath="account.subscriptions.cancellation.description"
+          scope="global"
         >
-          <li>
-            Rotki is open-source software and your subscription really helps
-            towards its development.
-          </li>
-          <li>
-            Did you know that as a premium user by providing your Github
-            username you have priority for all issues reported in our
-            <ButtonLink
-              inline
-              color="primary"
-              external
-              to="https://github.com/rotki/rotki/issues"
-            >
-              bug tracker
-            </ButtonLink>
-            ? The same applies to any feature requests.
-          </li>
-          <li>
-            After your canceled subscription expires you will no longer be able
-            to use any Rotki premium features
-          </li>
-          <li>
-            A lot more premium features are in development and will soon be
-            released to our premium subscribers
-          </li>
-        </ul>
-
-        <h2 :class="css.title">Subscription</h2>
-
-        <p v-if="isPending" :class="css.text">
-          Your pending subscription which was created on
-          {{ subscription.createdDate }} will never be billed if you cancel. We
-          are sad to see you go. Are you sure you want to cancel the
-          subscription?
-        </p>
-        <p v-else :class="css.text">
-          Your subscription which was created on
-          {{ subscription.createdDate }} will run until
-          {{ subscription.nextActionDate }}
-          if you cancel. Until then you will be able to fully utilize the Rotki
-          premium features. We are sad to see you go. Are you sure you want to
-          cancel the subscription?
-        </p>
-
-        <div :class="css.buttons">
-          <RuiButton
-            variant="default"
-            size="lg"
-            class="uppercase"
-            rounded
-            color="primary"
-            @click="confirm = false"
-          >
-            No don't cancel
-          </RuiButton>
-
-          <RuiButton
-            variant="outlined"
-            size="lg"
-            class="uppercase outline-2"
-            rounded
-            color="warning"
-            @click="cancelSubscription()"
-          >
-            Yes, cancel my subscription
-          </RuiButton>
-        </div>
+          <template #benefits>
+            <ul class="list-disc ml-5">
+              <li>{{ t('account.subscriptions.cancellation.benefits.1') }}</li>
+              <li>
+                <i18n-t
+                  keypath="account.subscriptions.cancellation.benefits.2"
+                  scope="global"
+                >
+                  <template #bug_tracker>
+                    <ButtonLink
+                      inline
+                      color="primary"
+                      external
+                      class="underline"
+                      to="https://github.com/rotki/rotki/issues"
+                    >
+                      {{ t('account.subscriptions.cancellation.bug_tracker') }}
+                    </ButtonLink>
+                  </template>
+                </i18n-t>
+              </li>
+              <li>{{ t('account.subscriptions.cancellation.benefits.3') }}</li>
+              <li>{{ t('account.subscriptions.cancellation.benefits.4') }}</li>
+            </ul>
+          </template>
+
+          <template #subscription_status>
+            <span v-if="!isPending">
+              {{
+                t(
+                  'account.subscriptions.cancellation.subscription_status.normal',
+                  {
+                    start_date: subscription.createdDate,
+                    end_date: subscription.nextActionDate,
+                  },
+                )
+              }}
+            </span>
+            <span v-else>
+              {{
+                t(
+                  'account.subscriptions.cancellation.subscription_status.pending',
+                  {
+                    start_date: subscription.createdDate,
+                  },
+                )
+              }}
+            </span>
+          </template>
+        </i18n-t>
       </div>
-    </ModalDialog>
+
+      <template #actions>
+        <RuiButton variant="text" color="primary" @click="confirm = false">
+          {{ t('account.subscriptions.cancellation.actions.no') }}
+        </RuiButton>
+
+        <RuiButton color="error" @click="cancelSubscription()">
+          {{ t('account.subscriptions.cancellation.actions.yes') }}
+        </RuiButton>
+      </template>
+    </RuiDialog>
+
+    <FloatingNotification
+      closeable
+      :visible="!!cancellationError"
+      @close="cancellationError = ''"
+    >
+      <template #title>
+        {{ t('account.subscriptions.cancellation.notification.title') }}
+      </template>
+      {{ cancellationError }}
+    </FloatingNotification>
   </div>
 </template>
-
-<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;
-}
-
-.text {
-  @apply text-rui-text whitespace-normal mt-4;
-
-  @include text-size(16px, 24px);
-}
-
-.list {
-  @apply list-disc pl-6 mb-1;
-}
-
-.body {
-  @apply text-left;
-}
-
-.buttons {
-  @apply flex flex-row mt-4 justify-end space-x-2;
-}
-</style>
diff --git a/components/account/home/ChangePassword.vue b/components/account/home/ChangePassword.vue
index 80d0bfb8..69ed3f4e 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,129 @@ 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">
-        <CheckMarkIcon /> Your password has been changed.
-      </span>
-      <RuiButton
-        :disabled="v$.$invalid"
-        size="lg"
-        :loading="loading"
-        color="primary"
-        @click="changePassword()"
-      >
-        Change Password
-      </RuiButton>
+  <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>
-  </CardContainer>
+  </div>
+
+  <FloatingNotification
+    type="success"
+    closeable
+    :visible="success"
+    @dismiss="success = false"
+  >
+    {{ t('account.change_password.message.success') }}
+  </FloatingNotification>
 </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..63d3dd25 100644
--- a/components/account/home/DangerZone.vue
+++ b/components/account/home/DangerZone.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
+import { get, set } from '@vueuse/core';
 import { useMainStore } from '~/store';
 import { type ActionResult } from '~/types/common';
 
@@ -10,43 +11,47 @@ const error = ref('');
 const store = useMainStore();
 const { account } = storeToRefs(store);
 
-const username = computed(() => account.value?.username);
+const username = computed(() => get(account)?.username);
 const isSubscriber = computed(
-  () => account.value?.hasActiveSubscription ?? false,
+  () => !get(account)?.hasActiveSubscription ?? false,
 );
 
 const deleteAccount = async () => {
-  confirm.value = false;
+  set(confirm, false);
   const result: ActionResult = await store.deleteAccount({
-    username: usernameConfirmation.value,
+    username: get(usernameConfirmation),
   });
   if (result.success) {
     await store.logout();
     await navigateTo('/account-deleted');
   } else {
-    error.value = typeof result.message === 'string' ? result.message : '';
-    setTimeout(() => (error.value = ''), 4500);
+    set(error, typeof result.message === 'string' ? result.message : '');
+    setTimeout(() => set(error, ''), 4500);
   }
 };
 
-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" :class="{ '!border-rui-error': !isSubscriber }">
+    <div>
+      <div
+        class="text-lg font-semibold"
+        :class="isSubscriber ? 'text-rui-text-disabled' : 'text-rui-error'"
+      >
+        {{ t('account.delete_account.title') }}
+      </div>
+      <div class="text-rui-text-secondary text-body-1">
+        {{ t('account.delete_account.description') }}
+      </div>
+    </div>
+    <div
+      v-if="isSubscriber"
+      class="text-body-1 font-bold text-rui-text-secondary mt-1"
+    >
+      {{ t('account.delete_account.unable_to_delete') }}
+    </div>
     <div class="mt-8">
       <RuiButton
         :disabled="isSubscriber"
@@ -54,80 +59,44 @@ 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>
+
+  <FloatingNotification closeable :visible="!!error" @dismiss="error = ''">
+    <template #title>
+      {{ t('account.delete_account.notification.title') }}
+    </template>
+    {{ error }}
+  </FloatingNotification>
 </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/ErrorNotification.vue b/components/account/home/ErrorNotification.vue
deleted file mode 100644
index f3c7564d..00000000
--- a/components/account/home/ErrorNotification.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<script setup lang="ts">
-defineProps<{ visible: boolean }>();
-
-const css = useCssModule();
-</script>
-
-<template>
-  <Transition name="fade">
-    <NotificationMessage v-if="visible">
-      <div :class="css.icon">
-        <ErrorIcon />
-      </div>
-      <div :class="css.errorText">
-        <div :class="css.errorTitle">
-          <slot name="title" />
-        </div>
-        <div :class="css.errorDescription">
-          <slot name="description" />
-        </div>
-      </div>
-    </NotificationMessage>
-  </Transition>
-</template>
-
-<style lang="scss" module>
-.icon {
-  @apply flex items-center;
-}
-
-.errorText {
-  @apply ml-2;
-}
-
-.errorTitle {
-  @apply font-bold;
-}
-
-.errorDescription {
-  @apply text-rui-grey-800;
-}
-</style>
diff --git a/components/account/home/FloatingNotification.vue b/components/account/home/FloatingNotification.vue
new file mode 100644
index 00000000..d1947006
--- /dev/null
+++ b/components/account/home/FloatingNotification.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { type ContextColorsType } from '@rotki/ui-library/dist/consts/colors';
+
+withDefaults(
+  defineProps<{
+    visible: boolean;
+    closeable?: boolean;
+    type?: ContextColorsType;
+  }>(),
+  {
+    closeable: false,
+    type: 'error',
+  },
+);
+
+const emit = defineEmits<{
+  (e: 'dismiss'): void;
+}>();
+
+const slots = useSlots();
+</script>
+
+<template>
+  <Transition name="fade">
+    <div v-if="visible" class="fixed top-20 right-2 w-11/12 md:w-[520px]">
+      <RuiAlert :type="type" :closeable="closeable" @close="emit('dismiss')">
+        <template v-if="slots.title" #title>
+          <slot name="title" />
+        </template>
+        <slot />
+      </RuiAlert>
+    </div>
+  </Transition>
+</template>
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..1fb3dc9d 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 } = 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,117 +118,55 @@ 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',
-            }"
-          >
-            {{ 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>
+      <template #item.status="{ row }">
+        <RuiChip size="sm" :color="getChipStatusColor(row.status)">
+          {{ row.status }}
+        </RuiChip>
       </template>
-    </DataTable>
-    <ErrorNotification :visible="!!cancellationError">
-      <template #title>Cancellation Failure</template>
-      <template #description>
-        {{ cancellationError }}
+
+      <template #item.actions="{ row }">
+        <div v-if="displayActions(row)" class="flex gap-2 justify-end">
+          <CancelSubscription
+            v-if="hasAction(row, 'cancel')"
+            :subscription="row"
+          />
+          <ButtonLink
+            v-if="hasAction(row, 'renew')"
+            :to="renewLink"
+            color="primary"
+          >
+            {{ t('actions.renew') }}
+          </ButtonLink>
+        </div>
+        <div v-else class="capitalize">{{ t('common.none') }}</div>
       </template>
-    </ErrorNotification>
+    </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;
-}
-
-.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..7455246f 100644
--- a/components/account/signup/SignupAddress.vue
+++ b/components/account/signup/SignupAddress.vue
@@ -4,7 +4,6 @@ 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<{
@@ -84,20 +83,6 @@ const updateValue = (field: string, value: any) => {
   });
 };
 
-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);
 };
@@ -168,25 +153,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"
+
+      <CountrySelect
+        :model-value="modelValue.country"
+        :error-messages="toMessages(v$.country)"
         dense
-        :label="t('auth.signup.address.form.country')"
         :hint="t('auth.common.required')"
-        :error-messages="toMessages(v$.country)"
         @blur="v$.country.$touch()"
-      >
-        <template #no-data>
-          {{ t('country_select.no_data') }}
-        </template>
-      </RuiAutoComplete>
+        @update:model-value="updateValue('country', $event)"
+      />
       <Recaptcha
         id="signup-captcha"
         :invalid="v$.captcha.$invalid && v$.captcha.$dirty"
diff --git a/components/checkout/pay/PaypalPayment.vue b/components/checkout/pay/PaypalPayment.vue
index f674d85f..c8626b8a 100644
--- a/components/checkout/pay/PaypalPayment.vue
+++ b/components/checkout/pay/PaypalPayment.vue
@@ -126,12 +126,10 @@ const css = useCssModule();
     <div id="paypal-button" :class="css.buttons" />
     <SelectedPlanOverview :plan="plan" />
     <AcceptRefundPolicy v-model="accepted" />
-    <ErrorNotification :visible="mustAcceptRefund">
+    <FloatingNotification :visible="mustAcceptRefund">
       <template #title> Refund policy </template>
-      <template #description>
-        You need to accept the refund policy before proceeding
-      </template>
-    </ErrorNotification>
+      You need to accept the refund policy before proceeding
+    </FloatingNotification>
   </div>
 </template>
 
diff --git a/components/common/ButtonLink.vue b/components/common/ButtonLink.vue
index 7db60b15..36974f41 100644
--- a/components/common/ButtonLink.vue
+++ b/components/common/ButtonLink.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { get } from '@vueuse/core';
+import { type RouteLocationRaw } from 'vue-router';
 
 defineOptions({
   inheritAttrs: false,
@@ -7,7 +8,7 @@ defineOptions({
 
 const props = withDefaults(
   defineProps<{
-    to: string;
+    to: RouteLocationRaw;
     external?: boolean;
     inline?: boolean;
     highlightActive?: boolean;
@@ -56,7 +57,7 @@ const getColor = (active: boolean, exact: boolean) => {
       :class="{ ['inline-flex py-0 !px-1 !text-[1em]']: inline }"
     >
       <slot>
-        {{ to }}
+        {{ link?.href }}
       </slot>
       <template #append>
         <slot name="append" />
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/common/NotificationMessage.vue b/components/common/NotificationMessage.vue
deleted file mode 100644
index 6971e875..00000000
--- a/components/common/NotificationMessage.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<script setup lang="ts">
-const emit = defineEmits<{ (e: 'dismiss'): void }>();
-
-const dismiss = () => {
-  emit('dismiss');
-};
-const css = useCssModule();
-</script>
-
-<template>
-  <div :class="css.container">
-    <div :class="css.box" @click="dismiss()">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<style lang="scss" module>
-.container {
-  @apply fixed top-2 right-2 w-11/12 md:w-1/4;
-}
-.box {
-  @apply bg-white rounded-lg border-gray-300 border p-3 shadow-md flex flex-row;
-}
-</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/CheckMarkIcon.vue b/components/icons/CheckMarkIcon.vue
deleted file mode 100644
index 09c14209..00000000
--- a/components/icons/CheckMarkIcon.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <svg
-    class="-ml-1 mr-2 h-5 w-5"
-    height="24"
-    viewBox="0 0 24 24"
-    width="24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path d="M0 0h24v24H0z" fill="none" />
-    <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="green" />
-  </svg>
-</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/icons/ErrorIcon.vue b/components/icons/ErrorIcon.vue
deleted file mode 100644
index 49eb5506..00000000
--- a/components/icons/ErrorIcon.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import { defaultIconSize } from '~/utils/icon-size';
-
-const css = useCssModule();
-</script>
-
-<template>
-  <svg :class="css.warning" :style="defaultIconSize()" viewBox="0 0 24 24">
-    <path
-      d="M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
-      fill="currentColor"
-    />
-  </svg>
-</template>
-
-<style lang="scss" module>
-.warning {
-  color: red;
-}
-</style>
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..43d1be71
--- /dev/null
+++ b/layouts/account.vue
@@ -0,0 +1,109 @@
+<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);
+
+useHead({
+  title: 'account',
+  meta: [
+    {
+      key: 'description',
+      name: 'description',
+      content: 'Manage your rotki premium account',
+    },
+    noIndex(),
+  ],
+  ...commonAttrs(),
+});
+
+useAutoLogout();
+const tabModelValue = ref();
+</script>
+
+<template>
+  <Default>
+    <div class="py-16">
+      <div class="container">
+        <div class="text-h4 mb-6">
+          {{ t('account.welcome') }} {{ username }}
+        </div>
+        <div class="flex flex-col lg:flex-row gap-6">
+          <div class="hidden lg:block w-[270px] shrink-0">
+            <RuiTabs
+              v-model="tabModelValue"
+              vertical
+              align="start"
+              color="primary"
+            >
+              <RuiTab link to="/home/subscription">
+                <template #prepend>
+                  <RuiIcon name="vip-crown-line" />
+                </template>
+                {{ t('account.tabs.subscription') }}
+              </RuiTab>
+              <RuiTab link to="/home/account-details">
+                <template #prepend>
+                  <RuiIcon name="account-circle-line" />
+                </template>
+                {{ t('account.tabs.account_details') }}
+              </RuiTab>
+              <RuiTab link to="/home/customer-information">
+                <template #prepend>
+                  <RuiIcon name="information-line" />
+                </template>
+                {{ t('account.tabs.customer_information') }}
+              </RuiTab>
+              <RuiTab link to="/home/address">
+                <template #prepend>
+                  <RuiIcon name="map-pin-line" />
+                </template>
+                {{ t('account.tabs.address') }}
+              </RuiTab>
+            </RuiTabs>
+          </div>
+          <div class="lg:hidden">
+            <RuiTabs v-model="tabModelValue" grow color="primary">
+              <RuiTab link to="/home/subscription">
+                <template #prepend>
+                  <RuiIcon class="shrink-0" name="vip-crown-line" />
+                </template>
+                {{ t('account.tabs.subscription') }}
+              </RuiTab>
+              <RuiTab link to="/home/account-details">
+                <template #prepend>
+                  <RuiIcon class="shrink-0" name="account-circle-line" />
+                </template>
+                {{ t('account.tabs.account_details') }}
+              </RuiTab>
+              <RuiTab link to="/home/customer-information">
+                <template #prepend>
+                  <RuiIcon class="shrink-0" name="information-line" />
+                </template>
+                {{ t('account.tabs.customer_information') }}
+              </RuiTab>
+              <RuiTab link to="/home/address">
+                <template #prepend>
+                  <RuiIcon class="shrink-0" name="map-pin-line" />
+                </template>
+                {{ t('account.tabs.address') }}
+              </RuiTab>
+            </RuiTabs>
+          </div>
+
+          <div class="flex-1 overflow-x-auto pt-2">
+            <slot />
+          </div>
+        </div>
+      </div>
+    </div>
+  </Default>
+</template>
diff --git a/locales/en.json b/locales/en.json
index 39ea7113..50142073 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -121,24 +121,123 @@
     }
   },
   "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."
-    }
+    },
+    "moved_offline": "Moved offline. For editing please contact {email}.",
+    "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"
+      },
+      "message": {
+        "success": "Your password has been changed."
+      }
+    },
+    "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}"
+      },
+      "notification": {
+        "title": "Account deletion failed"
+      }
+    },
+    "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": {
+      "cancellation": {
+        "actions": {
+          "no": "No, don't cancel",
+          "yes": "Yes, cancel my subsciption"
+        },
+        "title": "Canceling Your Rotki Subscription",
+        "description": "We're sorry to see you go. Before you cancel, we'd like to remind you of some benefits of being a Rotki premium user: \n {benefits} \n{subscription_status} \n\nAre you absolutely sure you want to cancel your subscription? Your support has been greatly appreciated, and we'd love to keep you as part of the Rotki community.",
+        "bug_tracker": "bug tracker",
+        "subscription_status": {
+          "normal": "Please note that your current subscription, which was created on {start_date}, will run until {end_date}. Until then, you will be able to fully utilize all Rotki premium features.",
+          "pending": "Please note that your pending subscription, which was created on {start_date} will never be billed if you cancel. We are sad to see you go."
+        },
+        "benefits": {
+          "1": "Rotki is open-source software, and your subscription helps support its development.",
+          "2": "As a premium user, you have priority for all issues reported in our {bug_tracker} when you provide your Github username. The same applies to any feature requests you may have.",
+          "3": "If you cancel your subscription, you will no longer be able to use any Rotki premium features until you subscribe again.",
+          "4": "We're constantly developing new premium features that will soon be available to our subscribers."
+        },
+        "notification": {
+          "title": "Cancellation Failure"
+        }
+      },
+      "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"
+    },
+    "tabs": {
+      "subscription": "Subscription",
+      "account_details": "Account Details",
+      "customer_information": "Customer Information",
+      "address": "Address"
+    },
+    "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",
@@ -380,5 +479,8 @@
         "description": "Contribute code/issues."
       }
     }
+  },
+  "notifications": {
+    "changes_saved": "Your changes have been successfully saved!"
   }
 }
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/nuxt.config.ts b/nuxt.config.ts
index 2b039751..8f1eb46c 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -135,6 +135,7 @@ export default defineNuxtConfig({
       contact: {
         emailMailto: 'mailto:info@rotki.com',
         email: 'info@rotki.com',
+        supportEmail: 'support@rotki.com',
         twitter: 'https://twitter.com/rotkiapp',
         discord: 'https://discord.rotki.com',
         github: 'https://github.com/rotki',
diff --git a/package.json b/package.json
index 5e30bfe0..0962bc41 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": "0.4.0",
     "@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..c65d2a13 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: 0.4.0
+    version: 0.4.0(@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
@@ -1287,8 +1287,8 @@ packages:
     engines: {node: '>= 14'}
     dev: true
 
-  /@intlify/shared@9.3.0-beta.26:
-    resolution: {integrity: sha512-RpCtfSYIg4tSskrazTr5+WCHyw6qpgwdIxC+x3nCnrPGxyk+en9FoSbadVfx/w7uDTdyhKslEw4d2+qhNc0s4Q==}
+  /@intlify/shared@9.4.0:
+    resolution: {integrity: sha512-AFqymip2kToqA0B6KZPg5jSrdcVHoli9t/VhGKE2iiMq9utFuMoGdDC/JOCIZgwxo6aXAk86QyU2XtzEoMuZ6A==}
     engines: {node: '>= 16'}
     dev: true
 
@@ -2308,8 +2308,8 @@ 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==}
+  /@rotki/ui-library@0.4.0(@vueuse/core@10.3.0)(@vueuse/shared@10.3.0)(vue@3.3.4):
+    resolution: {integrity: sha512-xMEK0zSMWsA24ude+417bk7OO88rAQn/1M4HfyF8QhXUeC19RPLD1iB5Y/bQmwckOJs69k3ivgyX1q/NoS59zw==}
     engines: {pnpm: '>=8 <9'}
     peerDependencies:
       '@vueuse/core': '>10.0.0'
@@ -2319,6 +2319,8 @@ packages:
       '@vueuse/core': 10.3.0(vue@3.3.4)
       '@vueuse/shared': 10.3.0(vue@3.3.4)
       vue: 3.3.4
+    optionalDependencies:
+      vue-router: 4.2.4(vue@3.3.4)
     dev: true
 
   /@sideway/address@4.1.4:
@@ -12586,7 +12588,7 @@ packages:
       vue-router:
         optional: true
     dependencies:
-      '@intlify/shared': 9.3.0-beta.26
+      '@intlify/shared': 9.4.0
       '@intlify/vue-i18n-bridge': 0.8.0(vue-i18n@9.3.0-beta.17)
       '@intlify/vue-router-bridge': 0.8.0(vue-router@4.2.4)(vue@3.3.4)
       ufo: 1.1.2
diff --git a/store/index.ts b/store/index.ts
index 2e95613c..ce284c9a 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: ComputedRef<Subscription[]> = 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;