From 2a2cb3acc91b38b7639077bfc8d19198fd8a554e Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Fri, 5 Apr 2024 03:16:27 +0800
Subject: [PATCH] modify style

---
 src/components/desktop/AmountInput.vue        | 12 +++-
 src/components/desktop/ConfirmDialog.vue      |  4 +-
 .../desktop/DateRangeSelectionDialog.vue      |  2 +-
 .../desktop/SwitchToMobileDialog.vue          |  4 +-
 src/desktop-main.js                           | 39 +++++++-----
 src/styles/desktop/global.scss                | 53 ++++++++++++++--
 .../desktop/template/vuetify/_overrides.scss  |  2 +-
 .../desktop/template/vuetify/index.scss       |  2 +-
 src/views/desktop/ExchangeRatesPage.vue       | 21 ++++---
 src/views/desktop/ForgetPasswordPage.vue      |  2 +-
 src/views/desktop/HomePage.vue                | 31 ++++-----
 src/views/desktop/LoginPage.vue               |  2 +-
 src/views/desktop/MainLayout.vue              | 12 ++--
 src/views/desktop/ResetPasswordPage.vue       |  2 +-
 src/views/desktop/SignupPage.vue              | 11 ++--
 src/views/desktop/UnlockPage.vue              |  2 +-
 src/views/desktop/VerifyEmailPage.vue         |  2 +-
 src/views/desktop/accounts/ListPage.vue       | 63 +++++++++++++++----
 .../accounts/list/dialogs/EditDialog.vue      |  6 +-
 src/views/desktop/app/AppSettingsPage.vue     |  2 +-
 .../app/settings/tabs/AppLockSettingTab.vue   |  5 +-
 src/views/desktop/categories/ListPage.vue     | 11 ++--
 .../categories/list/dialogs/EditDialog.vue    |  8 +--
 .../categories/list/dialogs/PresetDialog.vue  |  4 +-
 .../cards/IncomeExpenseOverviewCard.vue       | 10 +--
 .../desktop/statistics/TransactionPage.vue    | 24 ++++---
 .../cards/AccountFilterSettingsCard.vue       |  7 ++-
 .../cards/CategoryFilterSettingsCard.vue      |  7 ++-
 src/views/desktop/tags/ListPage.vue           | 34 +++++++---
 src/views/desktop/transactions/ListPage.vue   | 29 ++++-----
 .../transactions/list/dialogs/EditDialog.vue  |  4 +-
 src/views/desktop/user/UserSettingsPage.vue   |  2 +-
 .../tabs/UserDataManagementSettingTab.vue     | 25 ++++----
 .../settings/tabs/UserSecuritySettingTab.vue  | 17 ++---
 .../tabs/UserTwoFactorAuthSettingTab.vue      |  6 +-
 35 files changed, 307 insertions(+), 160 deletions(-)

diff --git a/src/components/desktop/AmountInput.vue b/src/components/desktop/AmountInput.vue
index d2f99a00..342e4d32 100644
--- a/src/components/desktop/AmountInput.vue
+++ b/src/components/desktop/AmountInput.vue
@@ -8,7 +8,7 @@
                   :rules="enableRules ? rules : []" v-model="currentValue"
                   @keydown="onKeyUpDown" @keyup="onKeyUpDown">
         <template #prepend-inner v-if="currency && prependText">
-            <div style="margin-top: 2px">{{ prependText }}</div>
+            <div>{{ prependText }}</div>
         </template>
         <template #append-inner v-if="currency && appendText">
             <div class="text-no-wrap">{{ appendText }}</div>
@@ -71,6 +71,10 @@ export default {
                 finalClass += ` text-${this.color}`;
             }
 
+            if (this.currency && this.prependText) {
+                finalClass += ` has-pretend-text`;
+            }
+
             return finalClass;
         },
         prependText() {
@@ -168,3 +172,9 @@ export default {
     }
 }
 </script>
+
+<style>
+.text-field-with-colored-label.has-pretend-text .v-field__input {
+    padding-left: 0.5rem;
+}
+</style>
diff --git a/src/components/desktop/ConfirmDialog.vue b/src/components/desktop/ConfirmDialog.vue
index 9bd07ee3..b82d2ff1 100644
--- a/src/components/desktop/ConfirmDialog.vue
+++ b/src/components/desktop/ConfirmDialog.vue
@@ -4,8 +4,8 @@
             <v-toolbar :color="finalColor">
                 <v-toolbar-title>{{ titleContent }}</v-toolbar-title>
             </v-toolbar>
-            <v-card-text v-if="textContent" class="pa-4">{{ textContent }}</v-card-text>
-            <v-card-actions>
+            <v-card-text v-if="textContent" class="pa-4 pb-6">{{ textContent }}</v-card-text>
+            <v-card-actions class="px-4 pb-4">
                 <v-spacer></v-spacer>
                 <v-btn color="gray" @click="cancel">{{ $t('Cancel') }}</v-btn>
                 <v-btn :color="finalColor" @click="confirm">{{ $t('OK') }}</v-btn>
diff --git a/src/components/desktop/DateRangeSelectionDialog.vue b/src/components/desktop/DateRangeSelectionDialog.vue
index 0525c634..41b005c2 100644
--- a/src/components/desktop/DateRangeSelectionDialog.vue
+++ b/src/components/desktop/DateRangeSelectionDialog.vue
@@ -3,7 +3,7 @@
         <v-card class="pa-2 pa-sm-4 pa-md-4">
             <template #title>
                 <div class="d-flex align-center justify-center">
-                    <h5 class="text-h5">{{ title }}</h5>
+                    <h4 class="text-h4">{{ title }}</h4>
                 </div>
             </template>
             <template #subtitle>
diff --git a/src/components/desktop/SwitchToMobileDialog.vue b/src/components/desktop/SwitchToMobileDialog.vue
index 044dee49..1f53c827 100644
--- a/src/components/desktop/SwitchToMobileDialog.vue
+++ b/src/components/desktop/SwitchToMobileDialog.vue
@@ -3,11 +3,11 @@
         <v-card class="pa-2 pa-sm-4 pa-md-4">
             <template #title>
                 <div class="d-flex align-center justify-center">
-                    <h5 class="text-h5">{{ $t('Use on Mobile Device') }}</h5>
+                    <h4 class="text-h4">{{ $t('Use on Mobile Device') }}</h4>
                 </div>
             </template>
             <template #subtitle>
-                <div class="text-body-1 text-center text-wrap mt-6">{{ $t('You can scan the below QR code on your mobile device.') }}</div>
+                <div class="text-body-1 text-center text-wrap mt-4">{{ $t('You can scan the below QR code on your mobile device.') }}</div>
             </template>
             <v-card-text class="mb-md-4">
                 <v-row>
diff --git a/src/desktop-main.js b/src/desktop-main.js
index 85ededcb..f2f71bfb 100644
--- a/src/desktop-main.js
+++ b/src/desktop-main.js
@@ -190,6 +190,7 @@ const vuetify = createVuetify({
         },
         VAutocomplete: {
             variant: 'outlined',
+            density: 'comfortable',
             color: 'primary',
             hideDetails: 'auto'
         },
@@ -216,14 +217,17 @@ const vuetify = createVuetify({
             color: 'primary'
         },
         VPagination: {
+            density: 'comfortable',
             activeColor: 'primary'
         },
         VRadio: {
+            density: 'comfortable',
             color: 'primary',
             hideDetails: 'auto'
         },
         VSelect: {
             variant: 'outlined',
+            density: 'comfortable',
             color: 'primary',
             hideDetails: 'auto'
         },
@@ -232,6 +236,7 @@ const vuetify = createVuetify({
             hideDetails: 'auto'
         },
         VSwitch: {
+            inset: true,
             color: 'primary',
             hideDetails: 'auto'
         },
@@ -252,11 +257,13 @@ const vuetify = createVuetify({
         },
         VTextarea: {
             variant: 'outlined',
+            density: 'comfortable',
             color: 'primary',
             hideDetails: 'auto'
         },
         VTextField: {
             variant: 'outlined',
+            density: 'comfortable',
             color: 'primary',
             hideDetails: 'auto'
         },
@@ -274,22 +281,22 @@ const vuetify = createVuetify({
                 dark: false,
                 colors: {
                     'primary': '#c67e48',
-                    'primary-darken-1': '#9a6238',
+                    'primary-darken-1': '#b67443',
                     'on-primary': '#ffffff',
                     'secondary': '#8a8d93',
                     'secondary-darken-1': '#545659',
                     'on-secondary': '#ffffff',
                     'success': '#4cd964',
-                    'success-darken-1': '#3ba64d',
+                    'success-darken-1': '#40b654',
                     'on-success': '#ffffff',
                     'info': '#2196f3',
-                    'info-darken-1': '#1a74bd',
+                    'info-darken-1': '#1e85d7',
                     'on-info': '#ffffff',
                     'warning': '#ff9500',
-                    'warning-darken-1': '#d07a01',
+                    'warning-darken-1': '#de8201',
                     'on-warning': '#ffffff',
                     'error': '#ff3b30',
-                    'error-darken-1': '#c73027',
+                    'error-darken-1': '#e1342b',
                     'on-error': '#ffffff',
                     'income': '#ff3b30',
                     'expense': '#009688',
@@ -315,7 +322,7 @@ const vuetify = createVuetify({
                 variables: {
                     'code-color': '#ff8000',
                     'overlay-scrim-background': '#413935',
-                    'tooltip-background': '#1A0E33',
+                    'tooltip-background': '#212121',
                     'overlay-scrim-opacity': 0.5,
                     'hover-opacity': 0.04,
                     'focus-opacity': 0.1,
@@ -326,12 +333,12 @@ const vuetify = createVuetify({
                     'disabled-opacity': 0.4,
                     'border-color': '#413f3b',
                     'border-opacity': 0.12,
-                    'table-header-color': '#F6F7FB',
+                    'table-header-color': '#fdfcf9',
                     'high-emphasis-opacity': 0.9,
                     'medium-emphasis-opacity': 0.7,
 
                     // 👉 shadows
-                    'shadow-key-umbra-color': '#2E263D',
+                    'shadow-key-umbra-color': '#413935',
                     'shadow-xs-opacity': '0.16',
                     'shadow-sm-opacity': '0.18',
                     'shadow-md-opacity': '0.20',
@@ -343,22 +350,22 @@ const vuetify = createVuetify({
                 dark: true,
                 colors: {
                     'primary': '#c67e48',
-                    'primary-darken-1': '#9a6238',
+                    'primary-darken-1': '#b67443',
                     'on-primary': '#ffffff',
                     'secondary': '#8a8d93',
                     'secondary-darken-1': '#545659',
                     'on-secondary': '#fff',
                     'success': '#4cd964',
-                    'success-darken-1': '#3ba64d',
+                    'success-darken-1': '#40b654',
                     'on-success': '#ffffff',
                     'info': '#2196f3',
-                    'info-darken-1': '#1a74bd',
+                    'info-darken-1': '#1e85d7',
                     'on-info': '#ffffff',
                     'warning': '#ff9500',
-                    'warning-darken-1': '#d07a01',
+                    'warning-darken-1': '#de8201',
                     'on-warning': '#ffffff',
                     'error': '#ff3b30',
-                    'error-darken-1': '#c73027',
+                    'error-darken-1': '#e1342b',
                     'on-error': '#ffffff',
                     'income': '#ff3b30',
                     'expense': '#009688',
@@ -384,7 +391,7 @@ const vuetify = createVuetify({
                 variables: {
                     'code-color': '#ff8000',
                     'overlay-scrim-background': '#1c1c1d',
-                    'tooltip-background': '#F7F4FF',
+                    'tooltip-background': '#212121',
                     'overlay-scrim-opacity': 0.5,
                     'hover-opacity': 0.04,
                     'focus-opacity': 0.1,
@@ -395,12 +402,12 @@ const vuetify = createVuetify({
                     'dragged-opacity': 0.1,
                     'border-color': '#edece9',
                     'border-opacity': 0.12,
-                    'table-header-color': '#3D3759',
+                    'table-header-color': '#312f2b',
                     'high-emphasis-opacity': 0.9,
                     'medium-emphasis-opacity': 0.7,
 
                     // 👉 Shadows
-                    'shadow-key-umbra-color': '#131120',
+                    'shadow-key-umbra-color': '#67615d',
                     'shadow-xs-opacity': '0.20',
                     'shadow-sm-opacity': '0.22',
                     'shadow-md-opacity': '0.24',
diff --git a/src/styles/desktop/global.scss b/src/styles/desktop/global.scss
index 625b1c64..dca755cb 100644
--- a/src/styles/desktop/global.scss
+++ b/src/styles/desktop/global.scss
@@ -241,10 +241,6 @@ input[type=number] {
     }
 }
 
-.v-btn-group--density-comfortable.v-btn-group {
-    height: 38px;
-}
-
 .text-field-with-colored-label.v-text-field.text-primary .v-field-label.v-label {
     color: rgba(var(--v-theme-primary), var(--v-medium-emphasis-opacity)) !important;
 }
@@ -257,6 +253,55 @@ input[type=number] {
     color: rgba(var(--v-theme-income), var(--v-medium-emphasis-opacity)) !important;
 }
 
+.v-switch.v-switch--inset {
+    .v-switch__track {
+        min-width: 1.875rem !important;
+    }
+}
+
+body .v-tabs:not(.v-tabs-pill) {
+    &.v-tabs--vertical {
+        .v-tab__slider {
+            inset-inline-end: unset;
+            inset-inline-start: 0;
+        }
+    }
+
+    .v-tab {
+        &.v-tab--selected {
+            &.v-btn.v-btn--variant-text {
+                &:hover, &:active, &:focus {
+                    .v-btn__overlay {
+                        --v-hover-opacity: 0.04;
+                    }
+                }
+            }
+        }
+
+        &:not(.v-tab--selected) {
+            &.v-btn.v-btn--variant-text {
+                &:hover, &:active, &:focus {
+                    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+
+                    .v-btn__overlay {
+                        --v-hover-opacity: 0.04;
+                    }
+                }
+            }
+        }
+    }
+}
+
+body .v-btn-group {
+    &.v-btn-group--density-comfortable {
+        height: 38px;
+    }
+
+    &.v-btn-group--divided .v-btn:not(:last-child) {
+        border-inline-end-color: rgba(var(--v-border-color), var(--v-border-opacity));
+    }
+}
+
 /** Replacing the default style of @vuepic/vue-datepicker **/
 .dp__theme_light {
     --dp-primary-color: #c67e48;
diff --git a/src/styles/desktop/template/vuetify/_overrides.scss b/src/styles/desktop/template/vuetify/_overrides.scss
index 51d1ee8d..5f18c379 100644
--- a/src/styles/desktop/template/vuetify/_overrides.scss
+++ b/src/styles/desktop/template/vuetify/_overrides.scss
@@ -1,4 +1,4 @@
-/** Materio Template Vuetify variables **/
+/** Materio Template Vuetify override styles **/
 /** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
 
 @use "@/styles/desktop/template/base/utils";
diff --git a/src/styles/desktop/template/vuetify/index.scss b/src/styles/desktop/template/vuetify/index.scss
index 7fef5703..7b7ad6bd 100644
--- a/src/styles/desktop/template/vuetify/index.scss
+++ b/src/styles/desktop/template/vuetify/index.scss
@@ -1,4 +1,4 @@
-/** Materio Template Vuetify variables **/
+/** Materio Template Vuetify styles **/
 /** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
 
 @use "@/styles/desktop/template/base/libs/vuetify";
diff --git a/src/views/desktop/ExchangeRatesPage.vue b/src/views/desktop/ExchangeRatesPage.vue
index 63b32cae..c13d3279 100644
--- a/src/views/desktop/ExchangeRatesPage.vue
+++ b/src/views/desktop/ExchangeRatesPage.vue
@@ -5,7 +5,7 @@
                 <v-layout>
                     <v-navigation-drawer :permanent="alwaysShowNav" v-model="showNav">
                         <div class="mx-6 my-4">
-                            <small>{{ $t('Data source') }}</small>
+                            <span class="text-subtitle-2">{{ $t('Data source') }}</span>
                             <p class="text-body-1 mt-1 mb-3">
                                 <a tabindex="-1" target="_blank" :href="exchangeRatesData.referenceUrl" v-if="!loading && exchangeRatesData && exchangeRatesData.referenceUrl">{{ exchangeRatesData.dataSource }}</a>
                                 <span v-else-if="!loading && exchangeRatesData && !exchangeRatesData.referenceUrl">{{ exchangeRatesData.dataSource }}</span>
@@ -14,23 +14,23 @@
                                     <v-skeleton-loader class="skeleton-no-margin mt-3 mb-4" type="text" :loading="true"></v-skeleton-loader>
                                 </span>
                             </p>
-                            <small v-if="exchangeRatesDataUpdateTime || loading">{{ $t('Last Updated') }}</small>
+                            <span class="text-subtitle-2" v-if="exchangeRatesDataUpdateTime || loading">{{ $t('Last Updated') }}</span>
                             <p class="text-body-1 mt-1" v-if="exchangeRatesDataUpdateTime || loading">
                                 <span v-if="!loading">{{ exchangeRatesDataUpdateTime }}</span>
                                 <span v-if="loading">
-                                    <v-skeleton-loader class="skeleton-no-margin mt-3 mb-5" type="text" :loading="true"></v-skeleton-loader>
+                                    <v-skeleton-loader class="skeleton-no-margin mt-3 mb-4" type="text" :loading="true"></v-skeleton-loader>
                                 </span>
                             </p>
                         </div>
                         <v-divider />
                         <div class="mx-6 mt-4">
-                            <small>{{ $t('Base Amount') }}</small>
+                            <span class="text-subtitle-2">{{ $t('Base Amount') }}</span>
                             <amount-input class="mt-2" density="compact"
                                           :disabled="loading || !exchangeRatesData || !exchangeRatesData.exchangeRates || !exchangeRatesData.exchangeRates.length"
                                           v-model="baseAmount"/>
                         </div>
                         <div class="mx-6 mt-4">
-                            <small>{{ $t('Base Currency') }}</small>
+                            <span class="text-subtitle-2">{{ $t('Base Currency') }}</span>
                         </div>
                         <v-tabs show-arrows class="mb-4" direction="vertical"
                                 :disabled="loading" v-model="baseCurrency"
@@ -64,20 +64,21 @@
                                                 <v-icon :icon="icons.menu" size="24" />
                                             </v-btn>
                                             <span>{{ $t('Exchange Rates Data') }}</span>
-                                            <v-btn density="compact" color="default" variant="text"
-                                                   class="ml-2" :icon="true"
-                                                   v-if="!loading" @click="reload">
+                                            <v-btn density="compact" color="default" variant="text" size="24"
+                                                   class="ml-2" :icon="true" :loading="loading" @click="reload">
+                                                <template #loader>
+                                                    <v-progress-circular indeterminate size="20"/>
+                                                </template>
                                                 <v-icon :icon="icons.refresh" size="24" />
                                                 <v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip>
                                             </v-btn>
-                                            <v-progress-circular indeterminate size="20" class="ml-3" v-if="loading"></v-progress-circular>
                                         </div>
                                     </template>
 
                                     <v-table class="exchange-rates-table table-striped" :hover="!loading">
                                         <thead>
                                         <tr>
-                                            <th class="text-uppercase">
+                                            <th>
                                                 <div class="d-flex align-center">
                                                     <span>{{ $t('Currency') }}</span>
                                                     <v-spacer/>
diff --git a/src/views/desktop/ForgetPasswordPage.vue b/src/views/desktop/ForgetPasswordPage.vue
index 7bc2a454..81d29cb9 100644
--- a/src/views/desktop/ForgetPasswordPage.vue
+++ b/src/views/desktop/ForgetPasswordPage.vue
@@ -22,7 +22,7 @@
                 <div class="d-flex align-center justify-center h-100">
                     <v-card variant="flat" class="w-100 mt-0 px-4 pt-12" max-width="500">
                         <v-card-text>
-                            <h5 class="text-h5 mb-3">{{ $t('Forget Password?') }}</h5>
+                            <h4 class="text-h4 mb-2">{{ $t('Forget Password?') }}</h4>
                             <p class="mb-0">{{ $t('Please input your email address used for registration and we\'ll send you an email with reset password link') }}</p>
                         </v-card-text>
 
diff --git a/src/views/desktop/HomePage.vue b/src/views/desktop/HomePage.vue
index 28bfcf78..b4ad4022 100644
--- a/src/views/desktop/HomePage.vue
+++ b/src/views/desktop/HomePage.vue
@@ -7,31 +7,32 @@
                         <div class="d-flex align-baseline">
                             <span class="text-2xl font-weight-bold">{{ displayDateRange.thisMonth.displayTime }}</span>
                             <span>·</span>
-                            <small>{{ $t('Expense') }}</small>
+                            <span style="font-size: 1rem">{{ $t('Expense') }}</span>
                         </div>
-                        <v-btn density="compact" color="default" variant="text"
-                               class="ml-2" :icon="true"
-                               v-if="!loadingOverview" @click="reload(true)">
+                        <v-btn density="compact" color="default" variant="text" size="24"
+                               class="ml-2" :icon="true" :loading="loadingOverview" @click="reload(true)">
+                            <template #loader>
+                                <v-progress-circular indeterminate size="20"/>
+                            </template>
                             <v-icon :icon="icons.refresh" size="24" />
                             <v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip>
                         </v-btn>
-                        <v-progress-circular indeterminate size="20" class="ml-3" v-if="loadingOverview"></v-progress-circular>
                     </div>
                 </template>
 
                 <v-card-text>
-                    <h5 class="text-2xl font-weight-medium text-primary">
+                    <h4 class="text-2xl font-weight-medium text-primary">
                         <span v-if="!loadingOverview || (transactionOverview && transactionOverview.thisMonth && transactionOverview.thisMonth.valid)">{{ transactionOverview && transactionOverview.thisMonth ? getDisplayExpenseAmount(transactionOverview.thisMonth) : '-' }}</span>
                         <v-skeleton-loader class="d-inline-block skeleton-no-margin mt-3 pb-1" width="120px" type="text" :loading="true" v-else-if="loadingOverview && (!transactionOverview || !transactionOverview.thisMonth || !transactionOverview.thisMonth.valid)"></v-skeleton-loader>
                         <v-btn class="ml-1" density="compact" color="default" variant="text"
                                :icon="true" @click="showAmountInHomePage = !showAmountInHomePage">
                             <v-icon :icon="showAmountInHomePage ? icons.eyeSlash : icons.eye" size="20" />
                         </v-btn>
-                    </h5>
-                    <div class="mt-2 mb-3">
+                    </h4>
+                    <div class="mt-1 mb-3">
                         <span class="mr-2">{{ $t('Monthly income') }}</span>
                         <span v-if="!loadingOverview || (transactionOverview && transactionOverview.thisMonth && transactionOverview.thisMonth.valid)">{{ transactionOverview && transactionOverview.thisMonth ? getDisplayIncomeAmount(transactionOverview.thisMonth) : '-' }}</span>
-                        <v-skeleton-loader class="d-inline-block skeleton-no-margin mt-1" width="120px" type="text" :loading="true" v-else-if="loadingOverview && (!transactionOverview || !transactionOverview.thisMonth || !transactionOverview.thisMonth.valid)"></v-skeleton-loader>
+                        <v-skeleton-loader class="d-inline-block skeleton-no-margin mt-2" width="120px" type="text" :loading="true" v-else-if="loadingOverview && (!transactionOverview || !transactionOverview.thisMonth || !transactionOverview.thisMonth.valid)"></v-skeleton-loader>
                     </div>
                     <v-btn size="small" to="/transaction/list?dateType=7">{{ $t('View Details') }}</v-btn>
                     <v-img class="overview-card-background" src="img/desktop/card-background.png"/>
@@ -47,10 +48,10 @@
                 </template>
 
                 <v-card-text>
-                    <h6 class="text-sm font-weight-medium mb-6">
-                        <span v-if="!loadingOverview || (allAccounts && allAccounts.length)">{{ $t('format.misc.youHaveAccounts', { count: allAccounts.length }) }}</span>
+                    <div class="mb-8">
+                        <span class="text-body-1" v-if="!loadingOverview || (allAccounts && allAccounts.length)">{{ $t('format.misc.youHaveAccounts', { count: allAccounts.length }) }}</span>
                         <v-skeleton-loader class="skeleton-no-margin mt-1 mb-2 pb-1" width="200px" type="text" :loading="true" v-else-if="loadingOverview && (!allAccounts || !allAccounts.length)"></v-skeleton-loader>
-                    </h6>
+                    </div>
 
                     <v-row>
                         <v-col cols="12" md="4">
@@ -63,7 +64,7 @@
 
                                 <div class="d-flex flex-column">
                                     <span class="text-caption">{{ $t('Total assets') }}</span>
-                                    <span class="text-h6" v-if="!loadingOverview || (allAccounts && allAccounts.length)">{{ totalAssets }}</span>
+                                    <span class="text-h5" v-if="!loadingOverview || (allAccounts && allAccounts.length)">{{ totalAssets }}</span>
                                     <v-skeleton-loader class="skeleton-no-margin mt-3 mb-2" width="120px" type="text" :loading="true" v-else-if="loadingOverview && (!allAccounts || !allAccounts.length)"></v-skeleton-loader>
                                 </div>
                             </div>
@@ -79,7 +80,7 @@
 
                                 <div class="d-flex flex-column">
                                     <span class="text-caption">{{ $t('Total liabilities') }}</span>
-                                    <span class="text-h6" v-if="!loadingOverview || (allAccounts && allAccounts.length)">{{ totalLiabilities }}</span>
+                                    <span class="text-h5" v-if="!loadingOverview || (allAccounts && allAccounts.length)">{{ totalLiabilities }}</span>
                                     <v-skeleton-loader class="skeleton-no-margin mt-3 mb-2" width="120px" type="text" :loading="true" v-else-if="loadingOverview && (!allAccounts || !allAccounts.length)"></v-skeleton-loader>
                                 </div>
                             </div>
@@ -95,7 +96,7 @@
 
                                 <div class="d-flex flex-column">
                                     <span class="text-caption">{{ $t('Net assets') }}</span>
-                                    <span class="text-h6" v-if="!loadingOverview || (allAccounts && allAccounts.length)">{{ netAssets }}</span>
+                                    <span class="text-h5" v-if="!loadingOverview || (allAccounts && allAccounts.length)">{{ netAssets }}</span>
                                     <v-skeleton-loader class="skeleton-no-margin mt-3 mb-2" width="120px" type="text" :loading="true" v-else-if="loadingOverview && (!allAccounts || !allAccounts.length)"></v-skeleton-loader>
                                 </div>
                             </div>
diff --git a/src/views/desktop/LoginPage.vue b/src/views/desktop/LoginPage.vue
index bf12d703..351163b0 100644
--- a/src/views/desktop/LoginPage.vue
+++ b/src/views/desktop/LoginPage.vue
@@ -22,7 +22,7 @@
                 <div class="d-flex align-center justify-center h-100">
                     <v-card variant="flat" class="w-100 mt-0 px-4 pt-12" max-width="500">
                         <v-card-text>
-                            <h5 class="text-h5 mb-3">{{ $t('Welcome to ezBookkeeping') }}</h5>
+                            <h4 class="text-h4 mb-2">{{ $t('Welcome to ezBookkeeping') }}</h4>
                             <p class="mb-0">{{ $t('Please log in with your ezBookkeeping account') }}</p>
                         </v-card-text>
 
diff --git a/src/views/desktop/MainLayout.vue b/src/views/desktop/MainLayout.vue
index ce9a9050..cc9fadfe 100644
--- a/src/views/desktop/MainLayout.vue
+++ b/src/views/desktop/MainLayout.vue
@@ -15,7 +15,7 @@
                 :options="{ wheelPropagation: false }"
                 @ps-scroll-y="handleNavScroll"
             >
-                <li class="nav-link">
+                <li class="nav-link home-link">
                     <router-link to="/">
                         <v-icon class="nav-item-icon" :icon="icons.overview"/>
                         <span class="nav-item-title">{{ $t('Overview') }}</span>
@@ -119,7 +119,7 @@
                                 <v-list>
                                     <v-list-item>
                                         <template #prepend>
-                                            <v-list-item-action start>
+                                            <v-list-item-action>
                                                 <v-avatar color="primary" variant="tonal">
                                                     <v-img :src="currentUserAvatar" v-if="currentUserAvatar">
                                                         <template #placeholder>
@@ -322,7 +322,11 @@ export default {
 
 <style>
 .main-logo {
-    width: 1.8em;
-    height: 1.8em;
+    width: 1.75rem;
+    height: 1.75rem;
+}
+
+.nav-link.home-link > a:not(.router-link-exact-active):hover::before {
+    opacity: calc(var(--v-hover-opacity)* var(--v-theme-overlay-multiplier));
 }
 </style>
diff --git a/src/views/desktop/ResetPasswordPage.vue b/src/views/desktop/ResetPasswordPage.vue
index ab94e17b..a04d470e 100644
--- a/src/views/desktop/ResetPasswordPage.vue
+++ b/src/views/desktop/ResetPasswordPage.vue
@@ -22,7 +22,7 @@
                 <div class="d-flex align-center justify-center h-100">
                     <v-card variant="flat" class="w-100 mt-0 px-4 pt-12" max-width="500">
                         <v-card-text>
-                            <h5 class="text-h5 mb-3">{{ $t('Reset Password') }}</h5>
+                            <h4 class="text-h4 mb-2">{{ $t('Reset Password') }}</h4>
                             <p class="mb-0">{{ $t('Please input your email address again, and input the new password.') }}</p>
                         </v-card-text>
 
diff --git a/src/views/desktop/SignupPage.vue b/src/views/desktop/SignupPage.vue
index 63568a92..4e276826 100644
--- a/src/views/desktop/SignupPage.vue
+++ b/src/views/desktop/SignupPage.vue
@@ -25,7 +25,7 @@
                     <v-window class="mt-5 disable-tab-transition" style="max-width: 700px" v-model="currentStep">
                         <v-form>
                             <v-window-item value="basicSetting">
-                                <h5 class="text-h5 mb-1">{{ $t('Basic Information') }}</h5>
+                                <h4 class="text-h4 mb-1">{{ $t('Basic Information') }}</h4>
                                 <p class="text-sm mt-2 mb-5">
                                     <span>{{ $t('Already have an account?') }}</span>
                                     <router-link class="ml-1" to="/login">{{ $t('Click here to log in') }}</router-link>
@@ -145,13 +145,12 @@
                             </v-window-item>
 
                             <v-window-item value="presetCategories" class="signup-preset-categories">
-                                <h5 class="text-h5 mb-1">{{ $t('Preset Categories') }}</h5>
+                                <h4 class="text-h4 mb-1">{{ $t('Preset Categories') }}</h4>
                                 <p class="text-sm mt-2 mb-5">{{ $t('Set Whether You Use The Preset Transaction Categories') }}</p>
 
-                                <v-row class="mb-5">
+                                <v-row>
                                     <v-col cols="12" sm="6">
-                                        <v-switch inset
-                                                  :disabled="submitting || navigateToHomePage"
+                                        <v-switch :disabled="submitting || navigateToHomePage"
                                                   :label="$t('Use Preset Transaction Categories')"
                                                   v-model="usePresetCategories"/>
                                     </v-col>
@@ -208,7 +207,7 @@
                             </v-window-item>
 
                             <v-window-item value="finalResult" v-if="finalResultMessage">
-                                <h5 class="text-h5 mb-1">{{ $t('Registration Complete') }}</h5>
+                                <h4 class="text-h4 mb-1">{{ $t('Registration Complete') }}</h4>
                                 <p class="my-5">{{ finalResultMessage }}</p>
                             </v-window-item>
                         </v-form>
diff --git a/src/views/desktop/UnlockPage.vue b/src/views/desktop/UnlockPage.vue
index 2482f02f..fb692b66 100644
--- a/src/views/desktop/UnlockPage.vue
+++ b/src/views/desktop/UnlockPage.vue
@@ -22,7 +22,7 @@
                 <div class="d-flex align-center justify-center h-100">
                     <v-card variant="flat" class="w-100 mt-0 px-4 pt-12" max-width="500">
                         <v-card-text>
-                            <h5 class="text-h5 mb-3">{{ $t('Unlock Application') }}</h5>
+                            <h4 class="text-h4 mb-2">{{ $t('Unlock Application') }}</h4>
                             <p class="mb-0" v-if="isWebAuthnAvailable">{{ $t('Please input your PIN code or use WebAuthn to unlock application') }}</p>
                             <p class="mb-0" v-else-if="!isWebAuthnAvailable">{{ $t('Please input your PIN code to unlock application') }}</p>
                         </v-card-text>
diff --git a/src/views/desktop/VerifyEmailPage.vue b/src/views/desktop/VerifyEmailPage.vue
index 9795d624..aae1d185 100644
--- a/src/views/desktop/VerifyEmailPage.vue
+++ b/src/views/desktop/VerifyEmailPage.vue
@@ -22,7 +22,7 @@
                 <div class="d-flex align-center justify-center h-100">
                     <v-card variant="flat" class="w-100 mt-0 px-4 pt-12" max-width="500">
                         <v-card-text>
-                            <h5 class="text-h5 mb-3">{{ $t('Verify your email') }}</h5>
+                            <h4 class="text-h4 mb-2">{{ $t('Verify your email') }}</h4>
                             <p class="mb-0" v-if="token && loading">{{ $t('Verifying...') }}</p>
                             <p class="mb-0" v-if="token && verified">{{ $t('Email has been verified') }}</p>
                             <p class="mb-0" v-if="token && !verified && errorMessage">{{ errorMessage }}</p>
diff --git a/src/views/desktop/accounts/ListPage.vue b/src/views/desktop/accounts/ListPage.vue
index 25f968f2..bf0e6504 100644
--- a/src/views/desktop/accounts/ListPage.vue
+++ b/src/views/desktop/accounts/ListPage.vue
@@ -5,22 +5,22 @@
                 <v-layout>
                     <v-navigation-drawer :permanent="alwaysShowNav" v-model="showNav">
                         <div class="mx-6 my-4">
-                            <small>{{ $t('Net assets') }}</small>
-                            <p class="text-body-1 text-income text-truncate mt-1 mb-3">
+                            <span class="text-subtitle-2">{{ $t('Net assets') }}</span>
+                            <p class="account-statistic-item-value text-income text-truncate mt-1 mb-3">
                                 <span v-if="!loading || allAccountCount > 0">{{ netAssets }}</span>
                                 <span v-else-if="loading && allAccountCount <= 0">
                                     <v-skeleton-loader class="skeleton-no-margin pt-2 pb-1" type="text" :loading="true"></v-skeleton-loader>
                                 </span>
                             </p>
-                            <small>{{ $t('Total liabilities') }}</small>
-                            <p class="text-body-1 text-expense text-truncate mt-1 mb-3">
+                            <span class="text-subtitle-2">{{ $t('Total liabilities') }}</span>
+                            <p class="account-statistic-item-value text-expense text-truncate mt-1 mb-3">
                                 <span v-if="!loading || allAccountCount > 0">{{ totalLiabilities }}</span>
                                 <span v-else-if="loading && allAccountCount <= 0">
                                     <v-skeleton-loader class="skeleton-no-margin pt-2 pb-1" type="text" :loading="true"></v-skeleton-loader>
                                 </span>
                             </p>
-                            <small>{{ $t('Total assets') }}</small>
-                            <p class="text-body-1 mt-1">
+                            <span class="text-subtitle-2">{{ $t('Total assets') }}</span>
+                            <p class="account-statistic-item-value mt-1">
                                 <span v-if="!loading || allAccountCount > 0">{{ totalAssets }}</span>
                                 <span v-else-if="loading && allAccountCount <= 0">
                                     <v-skeleton-loader class="skeleton-no-margin pt-2 pb-1" type="text" :loading="true"></v-skeleton-loader>
@@ -35,7 +35,7 @@
                                 <ItemIcon icon-type="account" :icon-id="accountCategory.defaultAccountIconId" />
                                 <div class="d-flex flex-column text-truncate ml-2">
                                     <small class="text-truncate text-left smaller" v-if="!loading || allAccountCount > 0">{{ accountCategoryTotalBalance(accountCategory) }}</small>
-                                    <small class="text-truncate text-left smaller" v-else-if="loading && allAccountCount <= 0">
+                                    <small class="text-truncate text-left smaller my-1" v-else-if="loading && allAccountCount <= 0">
                                         <v-skeleton-loader class="skeleton-no-margin"
                                                            width="100px" height="16" type="text" :loading="true"></v-skeleton-loader>
                                     </small>
@@ -60,13 +60,14 @@
                                             <v-btn class="ml-3" color="primary" variant="tonal"
                                                    :disabled="loading" @click="saveSortResult"
                                                    v-if="displayOrderModified">{{ $t('Save Display Order') }}</v-btn>
-                                            <v-btn density="compact" color="default" variant="text"
-                                                   class="ml-2" :icon="true" :disabled="loading"
-                                                   v-if="!loading" @click="reload">
+                                            <v-btn density="compact" color="default" variant="text" size="24"
+                                                   class="ml-2" :icon="true" :loading="loading" @click="reload">
+                                                <template #loader>
+                                                    <v-progress-circular indeterminate size="20"/>
+                                                </template>
                                                 <v-icon :icon="icons.refresh" size="24" />
                                                 <v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip>
                                             </v-btn>
-                                            <v-progress-circular indeterminate size="20" class="ml-3" v-if="loading"></v-progress-circular>
                                             <v-spacer/>
                                             <v-btn density="comfortable" color="default" variant="text" class="ml-2"
                                                    :disabled="loading" :icon="true">
@@ -86,7 +87,7 @@
                                     </template>
 
                                     <v-card-text class="accounts-overview-title text-truncate pt-0">
-                                        <span class="text-subtitle-1">{{ $t('Balance') }}</span>
+                                        <span class="accounts-overview-subtitle">{{ $t('Balance') }}</span>
                                         <v-skeleton-loader class="skeleton-no-margin ml-3 mb-2" width="120px" type="text" :loading="true" v-if="loading && !hasAccount(activeAccountCategory)"></v-skeleton-loader>
                                         <span class="accounts-overview-amount ml-3" v-else-if="!loading || hasAccount(activeAccountCategory)">{{ activeAccountCategoryTotalBalance }}</span>
                                         <v-btn class="ml-2" density="compact" color="default" variant="text"
@@ -603,6 +604,10 @@ export default {
 </script>
 
 <style>
+.account-statistic-item-value {
+    font-size: 1rem;
+}
+
 .account-category-tabs .v-tab.v-tab.v-btn {
     height: calc(var(--v-tabs-height) * 1.5);
 }
@@ -621,6 +626,11 @@ export default {
     text-overflow: ellipsis;
 }
 
+.accounts-overview-subtitle {
+    font-size: 1rem;
+    line-height: 1.75rem;
+}
+
 .account-card > .v-card-item {
     padding-top: 0.875rem;
     padding-bottom: 0.875rem;
@@ -645,6 +655,35 @@ export default {
     white-space: nowrap;
 }
 
+.account-card .account-subaccounts.v-btn-toggle {
+    height: auto !important;
+    padding: 0;
+    border: none;
+}
+
+.account-card .account-subaccounts.v-btn-toggle > .v-btn {
+    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+}
+
+.account-card .account-subaccounts.v-btn-toggle > .v-btn:not(:first-child) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-left: none;
+}
+
+.account-card .account-subaccounts.v-btn-toggle > .v-btn:not(:last-child) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.account-card .account-subaccounts.v-btn-toggle > .v-btn {
+    border: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
+}
+
+.account-card .account-subaccounts.v-btn-toggle button.v-btn {
+    width: auto !important;
+}
+
 .account-card .account-toolbar {
     overflow-x: auto;
     white-space: nowrap;
diff --git a/src/views/desktop/accounts/list/dialogs/EditDialog.vue b/src/views/desktop/accounts/list/dialogs/EditDialog.vue
index 5dfc78f4..fc758dee 100644
--- a/src/views/desktop/accounts/list/dialogs/EditDialog.vue
+++ b/src/views/desktop/accounts/list/dialogs/EditDialog.vue
@@ -4,7 +4,7 @@
             <template #title>
                 <div class="d-flex align-center justify-center">
                     <div class="d-flex w-100 align-center justify-center">
-                        <h5 class="text-h5">{{ $t(title) }}</h5>
+                        <h4 class="text-h4">{{ $t(title) }}</h4>
                         <v-progress-circular indeterminate size="22" class="ml-2" v-if="loading"></v-progress-circular>
                     </div>
                     <v-btn density="comfortable" color="default" variant="text" class="ml-2" :icon="true"
@@ -20,7 +20,7 @@
                     </v-btn>
                 </div>
             </template>
-            <v-card-text class="d-flex flex-column flex-md-row mt-2 mt-md-4">
+            <v-card-text class="d-flex flex-column flex-md-row mt-md-4 pt-0">
                 <div class="mb-4" v-if="account.type === allAccountTypes.MultiSubAccounts">
                     <v-tabs direction="vertical" :disabled="loading || submitting" v-model="currentAccountIndex">
                         <v-tab :value="-1">
@@ -147,7 +147,7 @@
                                     />
                                 </v-col>
                                 <v-col class="py-0" cols="12" md="12" v-if="editAccountId">
-                                    <v-switch inset :disabled="loading || submitting"
+                                    <v-switch :disabled="loading || submitting"
                                               :label="$t('Visible')" v-model="selectedAccount.visible"/>
                                 </v-col>
                             </v-row>
diff --git a/src/views/desktop/app/AppSettingsPage.vue b/src/views/desktop/app/AppSettingsPage.vue
index 90dbeb27..7085ce58 100644
--- a/src/views/desktop/app/AppSettingsPage.vue
+++ b/src/views/desktop/app/AppSettingsPage.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <v-tabs show-arrows class="v-tabs-pill text-uppercase" v-model="activeTab">
+        <v-tabs show-arrows v-model="activeTab">
             <v-tab value="basicSetting" @click="pushRouter('basicSetting')">
                 <v-icon size="20" start :icon="icons.basicSetting"/>
                 {{ $t('Basic') }}
diff --git a/src/views/desktop/app/settings/tabs/AppLockSettingTab.vue b/src/views/desktop/app/settings/tabs/AppLockSettingTab.vue
index a35f4880..71461b54 100644
--- a/src/views/desktop/app/settings/tabs/AppLockSettingTab.vue
+++ b/src/views/desktop/app/settings/tabs/AppLockSettingTab.vue
@@ -12,11 +12,10 @@
                 </v-card-text>
 
                 <v-card-text v-if="isEnableApplicationLock">
-                    <v-switch inset :disabled="true"
+                    <v-switch :disabled="true"
                               :label="$t('Unlock By PIN Code')"
                               v-model="isEnableApplicationLock"/>
-                    <v-switch inset
-                              :label="$t('Unlock By WebAuthn')"
+                    <v-switch class="mt-2" :label="$t('Unlock By WebAuthn')"
                               :loading="enablingWebAuthn"
                               v-model="isEnableApplicationLockWebAuthn"/>
                 </v-card-text>
diff --git a/src/views/desktop/categories/ListPage.vue b/src/views/desktop/categories/ListPage.vue
index bb49b69d..3262a255 100644
--- a/src/views/desktop/categories/ListPage.vue
+++ b/src/views/desktop/categories/ListPage.vue
@@ -45,13 +45,14 @@
                                             <v-btn class="ml-3" color="primary" variant="tonal"
                                                    :disabled="loading || updating" @click="saveSortResult"
                                                    v-if="displayOrderModified">{{ $t('Save Display Order') }}</v-btn>
-                                            <v-btn density="compact" color="default" variant="text"
-                                                   class="ml-2" :icon="true" :disabled="loading || updating"
-                                                   v-if="!loading" @click="reload">
+                                            <v-btn density="compact" color="default" variant="text" size="24"
+                                                   class="ml-2" :icon="true" :loading="loading || updating" @click="reload">
+                                                <template #loader>
+                                                    <v-progress-circular indeterminate size="20"/>
+                                                </template>
                                                 <v-icon :icon="icons.refresh" size="24" />
                                                 <v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip>
                                             </v-btn>
-                                            <v-progress-circular indeterminate size="20" class="ml-3" v-if="loading"></v-progress-circular>
                                             <v-spacer/>
                                             <v-btn density="comfortable" color="default" variant="text" class="ml-2"
                                                    :disabled="loading || updating" :icon="true">
@@ -73,7 +74,7 @@
                                     <v-table class="transaction-category-table table-striped" :hover="!loading">
                                         <thead>
                                         <tr>
-                                            <th class="text-uppercase">
+                                            <th>
                                                 <div class="d-flex align-center">
                                                     <span>{{ $t('Category Name') }}</span>
                                                     <v-spacer/>
diff --git a/src/views/desktop/categories/list/dialogs/EditDialog.vue b/src/views/desktop/categories/list/dialogs/EditDialog.vue
index cb735cff..a390f328 100644
--- a/src/views/desktop/categories/list/dialogs/EditDialog.vue
+++ b/src/views/desktop/categories/list/dialogs/EditDialog.vue
@@ -3,12 +3,12 @@
         <v-card class="pa-2 pa-sm-4 pa-md-8">
             <template #title>
                 <div class="d-flex align-center justify-center">
-                    <h5 class="text-h5">{{ $t(title) }}</h5>
+                    <h4 class="text-h4">{{ $t(title) }}</h4>
                     <v-progress-circular indeterminate size="22" class="ml-2" v-if="loading"></v-progress-circular>
                 </div>
             </template>
-            <v-card-text>
-                <v-form class="mt-2 mt-md-6">
+            <v-card-text class="pt-0">
+                <v-form class="mt-md-6">
                     <v-row>
                         <v-col cols="12" md="12">
                             <v-text-field
@@ -47,7 +47,7 @@
                             />
                         </v-col>
                         <v-col class="py-0" cols="12" md="12" v-if="editCategoryId">
-                            <v-switch inset :disabled="loading || submitting"
+                            <v-switch :disabled="loading || submitting"
                                       :label="$t('Visible')" v-model="category.visible"/>
                         </v-col>
                     </v-row>
diff --git a/src/views/desktop/categories/list/dialogs/PresetDialog.vue b/src/views/desktop/categories/list/dialogs/PresetDialog.vue
index 3bdd933d..b82ad5e8 100644
--- a/src/views/desktop/categories/list/dialogs/PresetDialog.vue
+++ b/src/views/desktop/categories/list/dialogs/PresetDialog.vue
@@ -3,10 +3,10 @@
         <v-card class="pa-2 pa-sm-4 pa-md-8">
             <template #title>
                 <div class="d-flex align-center justify-center">
-                    <h5 class="text-h5">{{ $t('Default Categories') }}</h5>
+                    <h4 class="text-h4">{{ $t('Default Categories') }}</h4>
                 </div>
             </template>
-            <v-card-text class="preset-transaction-categories mt-0 mt-sm-2 mt-md-4 pb-4">
+            <v-card-text class="preset-transaction-categories mt-sm-2 mt-md-4 pt-0">
                 <template :key="categoryType" v-for="(categories, categoryType) in allPresetCategories">
                     <div class="d-flex align-center mb-1">
                         <h4>{{ getCategoryTypeName(categoryType) }}</h4>
diff --git a/src/views/desktop/overview/cards/IncomeExpenseOverviewCard.vue b/src/views/desktop/overview/cards/IncomeExpenseOverviewCard.vue
index 44935543..4756f4ce 100644
--- a/src/views/desktop/overview/cards/IncomeExpenseOverviewCard.vue
+++ b/src/views/desktop/overview/cards/IncomeExpenseOverviewCard.vue
@@ -4,7 +4,7 @@
             <v-avatar color="secondary" size="38">
                 <v-icon size="24" :icon="icon" />
             </v-avatar>
-            <span class="text-base font-weight-bold ml-3">{{ title }}</span>
+            <span class="font-weight-bold ml-3">{{ title }}</span>
             <v-spacer/>
             <v-btn density="comfortable" color="default" variant="text" class="ml-2" :icon="true">
                 <v-icon :icon="icons.more" />
@@ -15,11 +15,11 @@
                 </v-menu>
             </v-btn>
         </v-card-text>
-        <v-card-text class="mt-1 pb-2">
-            <div class="font-weight-semibold text-truncate text-red text-h5 text-income me-2 mb-2" v-if="!loading || incomeAmount">{{ incomeAmount }}</div>
+        <v-card-text class="mt-1 pb-1">
+            <div class="font-weight-semibold text-truncate text-red text-h4 text-income me-2 mb-2" v-if="!loading || incomeAmount">{{ incomeAmount }}</div>
             <v-skeleton-loader class="skeleton-no-margin mt-4 mb-7" type="text" width="120px" :loading="true" v-else-if="loading && !incomeAmount"></v-skeleton-loader>
-            <div class="text-truncate text-h6 text-expense" v-if="!loading || expenseAmount">{{ expenseAmount }}</div>
-            <v-skeleton-loader class="skeleton-no-margin mb-2" type="text" width="120px" :loading="true" v-else-if="loading && !expenseAmount"></v-skeleton-loader>
+            <div class="text-truncate text-h5 text-expense" v-if="!loading || expenseAmount">{{ expenseAmount }}</div>
+            <v-skeleton-loader class="skeleton-no-margin mb-1" type="text" width="120px" :loading="true" v-else-if="loading && !expenseAmount"></v-skeleton-loader>
         </v-card-text>
         <v-card-text class="mt-6">
             <span class="text-caption">{{ datetime }}</span>
diff --git a/src/views/desktop/statistics/TransactionPage.vue b/src/views/desktop/statistics/TransactionPage.vue
index 10dd291f..e7e02283 100644
--- a/src/views/desktop/statistics/TransactionPage.vue
+++ b/src/views/desktop/statistics/TransactionPage.vue
@@ -11,7 +11,7 @@
                         </div>
                         <v-divider />
                         <div class="mx-6 mt-4" v-if="activeTab === 'categoricalAnalysis'">
-                            <small>{{ $t('Chart Type') }}</small>
+                            <span class="text-subtitle-2">{{ $t('Chart Type') }}</span>
                             <v-select
                                 item-title="name"
                                 item-value="type"
@@ -31,7 +31,7 @@
                             </v-select>
                         </div>
                         <div class="mx-6 mt-4" v-if="activeTab === 'categoricalAnalysis'">
-                            <small>{{ $t('Sort By') }}</small>
+                            <span class="text-subtitle-2">{{ $t('Sort By') }}</span>
                             <v-select
                                 item-title="name"
                                 item-value="type"
@@ -103,13 +103,14 @@
                                                        @click="shiftDateRange(query.startTime, query.endTime, 1)"/>
                                             </v-btn-group>
 
-                                            <v-btn density="compact" color="default" variant="text"
-                                                   class="ml-2" :icon="true" :disabled="loading"
-                                                   v-if="!loading" @click="reload">
+                                            <v-btn density="compact" color="default" variant="text" size="24"
+                                                   class="ml-2" :icon="true" :loading="loading" @click="reload">
+                                                <template #loader>
+                                                    <v-progress-circular indeterminate size="20"/>
+                                                </template>
                                                 <v-icon :icon="icons.refresh" size="24" />
                                                 <v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip>
                                             </v-btn>
-                                            <v-progress-circular indeterminate size="20" class="ml-3" v-if="loading"></v-progress-circular>
                                             <v-spacer/>
                                             <v-btn density="comfortable" color="default" variant="text" class="ml-2"
                                                    :disabled="loading" :icon="true">
@@ -134,7 +135,7 @@
 
                                     <v-card-text class="statistics-overview-title pt-0" :class="{ 'disabled': loading }"
                                                  v-if="initing || (statisticsData && statisticsData.items && statisticsData.items.length)">
-                                        <span class="text-subtitle-1">{{ totalAmountName }}</span>
+                                        <span class="statistics-subtitle">{{ totalAmountName }}</span>
                                         <span class="statistics-overview-amount ml-3"
                                               :class="statisticsTextColor"
                                               v-if="!initing && statisticsData && statisticsData.items && statisticsData.items.length">
@@ -147,7 +148,7 @@
 
                                     <v-card-text class="statistics-overview-title pt-0"
                                                  v-else-if="!initing && (!statisticsData || !statisticsData.items || !statisticsData.items.length)">
-                                        <span class="text-subtitle-1 statistics-overview-empty-tip">{{ $t('No transaction data') }}</span>
+                                        <span class="statistics-subtitle statistics-overview-empty-tip">{{ $t('No transaction data') }}</span>
                                     </v-card-text>
 
                                     <v-card-text :class="{ 'readonly': loading }" v-if="query.chartType === allChartTypes.Pie">
@@ -203,7 +204,7 @@
                                                 <v-divider v-if="itemIdx < 3"/>
                                             </template>
                                         </v-list>
-                                        <v-list rounded lines="two" v-else-if="!initing && statisticsData && statisticsData.items && statisticsData.items.length">
+                                        <v-list class="py-0" rounded lines="two" v-else-if="!initing && statisticsData && statisticsData.items && statisticsData.items.length">
                                             <template :key="idx"
                                                       v-for="(item, idx) in statisticsData.items">
                                                 <v-list-item class="pl-0" v-if="!item.hidden">
@@ -660,6 +661,11 @@ export default {
     text-overflow: ellipsis;
 }
 
+.statistics-subtitle {
+    font-size: 1rem;
+    line-height: 1.75rem
+}
+
 .statistics-overview-empty-tip {
     color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity)) !important;
 }
diff --git a/src/views/desktop/statistics/settings/cards/AccountFilterSettingsCard.vue b/src/views/desktop/statistics/settings/cards/AccountFilterSettingsCard.vue
index 317f51e8..b1f2bddd 100644
--- a/src/views/desktop/statistics/settings/cards/AccountFilterSettingsCard.vue
+++ b/src/views/desktop/statistics/settings/cards/AccountFilterSettingsCard.vue
@@ -3,7 +3,7 @@
         <template #title>
             <div class="d-flex align-center justify-center" v-if="dialogMode">
                 <div class="w-100 text-center">
-                    <h5 class="text-h5">{{ $t(title) }}</h5>
+                    <h4 class="text-h4">{{ $t(title) }}</h4>
                 </div>
                 <v-btn density="comfortable" color="default" variant="text" class="ml-2"
                        :disabled="loading || !hasAnyAvailableAccount" :icon="true">
@@ -307,4 +307,9 @@ export default {
 .account-categories .v-expansion-panel-text__wrapper {
     padding: 0 0 0 20px;
 }
+
+.account-categories .v-expansion-panel--active:not(:first-child),
+.account-categories .v-expansion-panel--active + .v-expansion-panel {
+    margin-top: 1rem;
+}
 </style>
diff --git a/src/views/desktop/statistics/settings/cards/CategoryFilterSettingsCard.vue b/src/views/desktop/statistics/settings/cards/CategoryFilterSettingsCard.vue
index e4efae1d..d93f8ad3 100644
--- a/src/views/desktop/statistics/settings/cards/CategoryFilterSettingsCard.vue
+++ b/src/views/desktop/statistics/settings/cards/CategoryFilterSettingsCard.vue
@@ -3,7 +3,7 @@
         <template #title>
             <div class="d-flex align-center justify-center" v-if="dialogMode">
                 <div class="w-100 text-center">
-                    <h5 class="text-h5">{{ $t(title) }}</h5>
+                    <h4 class="text-h4">{{ $t(title) }}</h4>
                 </div>
                 <v-btn density="comfortable" color="default" variant="text" class="ml-2"
                        :disabled="loading || !hasAnyAvailableCategory" :icon="true">
@@ -327,5 +327,10 @@ export default {
 .category-types .v-expansion-panel-text__wrapper {
     padding: 0 0 0 20px;
 }
+
+.category-types .v-expansion-panel--active:not(:first-child),
+.category-types .v-expansion-panel--active + .v-expansion-panel {
+    margin-top: 1rem;
+}
 </style>
 
diff --git a/src/views/desktop/tags/ListPage.vue b/src/views/desktop/tags/ListPage.vue
index e55aa366..abab9d3b 100644
--- a/src/views/desktop/tags/ListPage.vue
+++ b/src/views/desktop/tags/ListPage.vue
@@ -10,13 +10,15 @@
                         <v-btn class="ml-3" color="primary" variant="tonal"
                                :disabled="loading || updating || hasEditingTag" @click="saveSortResult"
                                v-if="displayOrderModified">{{ $t('Save Display Order') }}</v-btn>
-                        <v-btn density="compact" color="default" variant="text"
+                        <v-btn density="compact" color="default" variant="text" size="24"
                                class="ml-2" :icon="true" :disabled="loading || updating || hasEditingTag"
-                               v-if="!loading" @click="reload">
+                               :loading="loading" @click="reload">
+                            <template #loader>
+                                <v-progress-circular indeterminate size="20"/>
+                            </template>
                             <v-icon :icon="icons.refresh" size="24" />
                             <v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip>
                         </v-btn>
-                        <v-progress-circular indeterminate size="20" class="ml-3" v-if="loading"></v-progress-circular>
                         <v-spacer/>
                         <v-btn density="comfortable" color="default" variant="text" class="ml-2"
                                :disabled="loading || updating || hasEditingTag" :icon="true">
@@ -38,7 +40,7 @@
                 <v-table class="transaction-tags-table table-striped" :hover="!loading">
                     <thead>
                     <tr>
-                        <th class="text-uppercase">
+                        <th>
                             <div class="d-flex align-center">
                                 <span>{{ $t('Tag Title') }}</span>
                                 <v-spacer/>
@@ -81,7 +83,7 @@
                                                 <v-icon size="20" start :icon="icons.tag"/>
                                             </v-badge>
                                             <v-icon size="20" start :icon="icons.tag" v-else-if="!element.hidden"/>
-                                            <span>{{ element.name }}</span>
+                                            <span class="transaction-tag-name">{{ element.name }}</span>
                                         </div>
 
                                         <v-text-field class="w-100 mr-2" type="text"
@@ -470,7 +472,19 @@ export default {
 }
 
 .transaction-tags-table tr.transaction-tags-table-row-tag:hover .hover-display {
-    display: grid;
+    display: inline-grid;
+}
+
+.transaction-tags-table tr:not(:last-child) > td > div {
+    padding-bottom: 1px;
+}
+
+.transaction-tags-table .has-bottom-border tr:last-child > td > div {
+    padding-bottom: 1px;
+}
+
+.transaction-tags-table tr.transaction-tags-table-row-tag .right-bottom-icon .v-badge__badge {
+    padding-bottom: 1px;
 }
 
 .transaction-tags-table .v-text-field .v-input__prepend {
@@ -483,7 +497,7 @@ export default {
 }
 
 .transaction-tags-table .v-text-field.v-input--plain-underlined .v-input__prepend {
-    padding-top: 6px;
+    padding-top: 10px;
 }
 
 .transaction-tags-table .v-text-field .v-field__input {
@@ -492,7 +506,11 @@ export default {
     color: rgba(var(--v-theme-on-surface));
 }
 
-.transaction-tags-table tr:last-child .v-text-field .v-field__input {
+.transaction-tags-table .transaction-tag-name {
+    font-size: 0.875rem;
+}
+
+.transaction-tags-table tr .v-text-field .v-field__input {
     padding-bottom: 1px;
 }
 
diff --git a/src/views/desktop/transactions/ListPage.vue b/src/views/desktop/transactions/ListPage.vue
index 08e20a04..638a0ae2 100644
--- a/src/views/desktop/transactions/ListPage.vue
+++ b/src/views/desktop/transactions/ListPage.vue
@@ -15,7 +15,7 @@
                         </div>
                         <v-divider />
                         <div class="mx-6 mt-4">
-                            <small>{{ $t('Transactions Per Page') }}</small>
+                            <span class="text-subtitle-2">{{ $t('Transactions Per Page') }}</span>
                             <v-select class="mt-2" density="compact" :disabled="loading"
                                       :items="[ 5, 10, 15, 20, 25, 30, 50 ]"
                                       v-model="countPerPage"
@@ -42,13 +42,14 @@
                                             <span>{{ $t('Transaction List') }}</span>
                                             <v-btn class="ml-3" color="default" variant="outlined"
                                                    :disabled="loading || !canAddTransaction" @click="add">{{ $t('Add') }}</v-btn>
-                                            <v-btn density="compact" color="default" variant="text"
-                                                   class="ml-2" :icon="true" :disabled="loading"
-                                                   v-if="!loading" @click="reload">
+                                            <v-btn density="compact" color="default" variant="text" size="24"
+                                                   class="ml-2" :icon="true" :loading="loading" @click="reload">
+                                                <template #loader>
+                                                    <v-progress-circular indeterminate size="20"/>
+                                                </template>
                                                 <v-icon :icon="icons.refresh" size="24" />
                                                 <v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip>
                                             </v-btn>
-                                            <v-progress-circular indeterminate size="20" class="ml-3" v-if="loading"></v-progress-circular>
                                             <v-spacer/>
                                             <div class="transaction-keyword-filter ml-2">
                                                 <v-text-field density="compact" :disabled="loading"
@@ -72,13 +73,13 @@
                                             </span>
                                             <span class="text-body-1 transaction-list-datetime-range-text ml-2"
                                                   v-else-if="query.minTime || query.maxTime">
-                                                <v-btn class="mr-1" size="small"
-                                                       density="comfortable" color="default" variant="outlined"
+                                                <v-btn class="mr-1" size="x-small"
+                                                       density="compact" color="default" variant="outlined"
                                                        :icon="icons.arrowLeft" :disabled="loading"
                                                        @click="shiftDateRange(query.minTime, query.maxTime, -1)"/>
                                                 <span class="text-sm">{{ `${queryMinTime} - ${queryMaxTime}` }}</span>
-                                                <v-btn class="ml-1" size="small"
-                                                       density="comfortable" color="default" variant="outlined"
+                                                <v-btn class="ml-1" size="x-small"
+                                                       density="compact" color="default" variant="outlined"
                                                        :icon="icons.arrowRight" :disabled="loading"
                                                        @click="shiftDateRange(query.minTime, query.maxTime, 1)"/>
                                             </span>
@@ -105,8 +106,8 @@
                                     <v-table class="transaction-table" :hover="!loading">
                                         <thead>
                                         <tr>
-                                            <th class="transaction-table-column-time text-uppercase">{{ $t('Time') }}</th>
-                                            <th class="transaction-table-column-category text-uppercase">
+                                            <th class="transaction-table-column-time">{{ $t('Time') }}</th>
+                                            <th class="transaction-table-column-category">
                                                 <v-menu ref="categoryFilterMenu" class="transaction-category-menu"
                                                         eager location="bottom" max-height="500"
                                                         :disabled="query.type === 1"
@@ -191,8 +192,8 @@
                                                     </v-list>
                                                 </v-menu>
                                             </th>
-                                            <th class="transaction-table-column-amount text-uppercase">{{ $t('Amount') }}</th>
-                                            <th class="transaction-table-column-account text-uppercase">
+                                            <th class="transaction-table-column-amount">{{ $t('Amount') }}</th>
+                                            <th class="transaction-table-column-account">
                                                 <v-menu ref="accountFilterMenu" class="transaction-account-menu"
                                                         eager location="bottom" max-height="500"
                                                         @update:model-value="scrollAccountMenuToSelectedItem">
@@ -235,7 +236,7 @@
                                                     </v-list>
                                                 </v-menu>
                                             </th>
-                                            <th class="transaction-table-column-description text-uppercase">{{ $t('Description') }}</th>
+                                            <th class="transaction-table-column-description">{{ $t('Description') }}</th>
                                         </tr>
                                         </thead>
 
diff --git a/src/views/desktop/transactions/list/dialogs/EditDialog.vue b/src/views/desktop/transactions/list/dialogs/EditDialog.vue
index 1c787a78..bd9ead30 100644
--- a/src/views/desktop/transactions/list/dialogs/EditDialog.vue
+++ b/src/views/desktop/transactions/list/dialogs/EditDialog.vue
@@ -4,7 +4,7 @@
             <template #title>
                 <div class="d-flex align-center justify-center">
                     <div class="d-flex w-100 align-center justify-center">
-                        <h5 class="text-h5">{{ $t(title) }}</h5>
+                        <h4 class="text-h4">{{ $t(title) }}</h4>
                         <v-progress-circular indeterminate size="22" class="ml-2" v-if="loading"></v-progress-circular>
                     </div>
                     <v-btn density="comfortable" color="default" variant="text" class="ml-2" :icon="true"
@@ -36,7 +36,7 @@
                     </v-btn>
                 </div>
             </template>
-            <v-card-text class="d-flex flex-column flex-md-row mt-2 mt-md-4">
+            <v-card-text class="d-flex flex-column flex-md-row mt-md-4 pt-0">
                 <div class="mb-4">
                     <v-tabs class="v-tabs-pill" direction="vertical" :class="{ 'readonly': mode !== 'add' }"
                             :disabled="loading || submitting" v-model="transaction.type">
diff --git a/src/views/desktop/user/UserSettingsPage.vue b/src/views/desktop/user/UserSettingsPage.vue
index e1fa002e..fbb0febe 100644
--- a/src/views/desktop/user/UserSettingsPage.vue
+++ b/src/views/desktop/user/UserSettingsPage.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <v-tabs show-arrows class="v-tabs-pill text-uppercase" v-model="activeTab">
+        <v-tabs show-arrows v-model="activeTab">
             <v-tab value="basicSetting" @click="pushRouter('basicSetting')">
                 <v-icon size="20" start :icon="icons.basicSetting"/>
                 {{ $t('Basic') }}
diff --git a/src/views/desktop/user/settings/tabs/UserDataManagementSettingTab.vue b/src/views/desktop/user/settings/tabs/UserDataManagementSettingTab.vue
index 13786725..3bd993ea 100644
--- a/src/views/desktop/user/settings/tabs/UserDataManagementSettingTab.vue
+++ b/src/views/desktop/user/settings/tabs/UserDataManagementSettingTab.vue
@@ -5,13 +5,14 @@
                 <template #title>
                     <div class="d-flex align-center">
                         <span>{{ $t('Data Management') }}</span>
-                        <v-btn density="compact" color="default" variant="text"
-                               class="ml-2" :icon="true"
-                               v-if="!loadingDataStatistics" @click="reloadUserDataStatistics(true)">
+                        <v-btn density="compact" color="default" variant="text" size="24"
+                               class="ml-2" :icon="true" :loading="loadingDataStatistics" @click="reloadUserDataStatistics(true)">
+                            <template #loader>
+                                <v-progress-circular indeterminate size="20"/>
+                            </template>
                             <v-icon :icon="icons.refresh" size="24" />
                             <v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip>
                         </v-btn>
-                        <v-progress-circular indeterminate size="20" class="ml-3" v-if="loadingDataStatistics"></v-progress-circular>
                     </div>
                 </template>
 
@@ -27,8 +28,8 @@
 
                                 <div class="d-flex flex-column">
                                     <span class="text-caption">{{ $t('Transaction') }}</span>
-                                    <v-skeleton-loader class="skeleton-no-margin pt-3 pb-2" type="text" style="width: 60px" :loading="true" v-if="loadingDataStatistics"></v-skeleton-loader>
-                                    <span class="text-h6" v-if="!loadingDataStatistics">{{ displayDataStatistics ? displayDataStatistics.totalTransactionCount : '-' }}</span>
+                                    <v-skeleton-loader class="skeleton-no-margin pt-2 pb-2" type="text" style="width: 60px" :loading="true" v-if="loadingDataStatistics"></v-skeleton-loader>
+                                    <span class="text-xl" v-if="!loadingDataStatistics">{{ displayDataStatistics ? displayDataStatistics.totalTransactionCount : '-' }}</span>
                                 </div>
                             </div>
                         </v-col>
@@ -42,8 +43,8 @@
 
                                 <div class="d-flex flex-column">
                                     <span class="text-caption">{{ $t('Accounts') }}</span>
-                                    <v-skeleton-loader class="skeleton-no-margin pt-3 pb-2" type="text" style="width: 60px" :loading="true" v-if="loadingDataStatistics"></v-skeleton-loader>
-                                    <span class="text-h6" v-if="!loadingDataStatistics">{{ displayDataStatistics ? displayDataStatistics.totalAccountCount : '-' }}</span>
+                                    <v-skeleton-loader class="skeleton-no-margin pt-2 pb-2" type="text" style="width: 60px" :loading="true" v-if="loadingDataStatistics"></v-skeleton-loader>
+                                    <span class="text-xl" v-if="!loadingDataStatistics">{{ displayDataStatistics ? displayDataStatistics.totalAccountCount : '-' }}</span>
                                 </div>
                             </div>
                         </v-col>
@@ -57,8 +58,8 @@
 
                                 <div class="d-flex flex-column">
                                     <span class="text-caption">{{ $t('Transaction Categories') }}</span>
-                                    <v-skeleton-loader class="skeleton-no-margin pt-3 pb-2" type="text" style="width: 60px" :loading="true" v-if="loadingDataStatistics"></v-skeleton-loader>
-                                    <span class="text-h6" v-if="!loadingDataStatistics">{{ displayDataStatistics ? displayDataStatistics.totalTransactionCategoryCount : '-' }}</span>
+                                    <v-skeleton-loader class="skeleton-no-margin pt-2 pb-2" type="text" style="width: 60px" :loading="true" v-if="loadingDataStatistics"></v-skeleton-loader>
+                                    <span class="text-xl" v-if="!loadingDataStatistics">{{ displayDataStatistics ? displayDataStatistics.totalTransactionCategoryCount : '-' }}</span>
                                 </div>
                             </div>
                         </v-col>
@@ -72,8 +73,8 @@
 
                                 <div class="d-flex flex-column">
                                     <span class="text-caption">{{ $t('Transaction Tags') }}</span>
-                                    <v-skeleton-loader class="skeleton-no-margin pt-3 pb-2" type="text" style="width: 60px" :loading="true" v-if="loadingDataStatistics"></v-skeleton-loader>
-                                    <span class="text-h6" v-if="!loadingDataStatistics">{{ displayDataStatistics ? displayDataStatistics.totalTransactionTagCount : '-' }}</span>
+                                    <v-skeleton-loader class="skeleton-no-margin pt-2 pb-2" type="text" style="width: 60px" :loading="true" v-if="loadingDataStatistics"></v-skeleton-loader>
+                                    <span class="text-xl" v-if="!loadingDataStatistics">{{ displayDataStatistics ? displayDataStatistics.totalTransactionTagCount : '-' }}</span>
                                 </div>
                             </div>
                         </v-col>
diff --git a/src/views/desktop/user/settings/tabs/UserSecuritySettingTab.vue b/src/views/desktop/user/settings/tabs/UserSecuritySettingTab.vue
index 505879df..4b49733f 100644
--- a/src/views/desktop/user/settings/tabs/UserSecuritySettingTab.vue
+++ b/src/views/desktop/user/settings/tabs/UserSecuritySettingTab.vue
@@ -77,23 +77,24 @@
                 <template #title>
                     <div class="d-flex align-center">
                         <span>{{ $t('Device & Sessions') }}</span>
-                        <v-btn density="compact" color="default" variant="text"
-                               class="ml-2" :icon="true"
-                               v-if="!loadingSession" @click="reloadSessions">
+                        <v-btn density="compact" color="default" variant="text" size="24"
+                               class="ml-2" :icon="true" :loading="loadingSession" @click="reloadSessions">
+                            <template #loader>
+                                <v-progress-circular indeterminate size="20"/>
+                            </template>
                             <v-icon :icon="icons.refresh" size="24" />
                             <v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip>
                         </v-btn>
-                        <v-progress-circular indeterminate size="20" class="ml-3" v-if="loadingSession"></v-progress-circular>
                     </div>
                 </template>
 
                 <v-table class="table-striped text-no-wrap" :hover="!loadingSession">
                     <thead>
                     <tr>
-                        <th class="text-uppercase">{{ $t('Type') }}</th>
-                        <th class="text-uppercase">{{ $t('Device Info') }}</th>
-                        <th class="text-uppercase">{{ $t('Last Activity Time') }}</th>
-                        <th class="text-uppercase text-right">
+                        <th>{{ $t('Type') }}</th>
+                        <th>{{ $t('Device Info') }}</th>
+                        <th>{{ $t('Last Activity Time') }}</th>
+                        <th class="text-right">
                             <v-btn density="comfortable" color="error" variant="tonal"
                                    :disabled="sessions.length < 2 || loadingSession"
                                    @click="revokeAllSessions">
diff --git a/src/views/desktop/user/settings/tabs/UserTwoFactorAuthSettingTab.vue b/src/views/desktop/user/settings/tabs/UserTwoFactorAuthSettingTab.vue
index a6b16b3f..fb59feea 100644
--- a/src/views/desktop/user/settings/tabs/UserTwoFactorAuthSettingTab.vue
+++ b/src/views/desktop/user/settings/tabs/UserTwoFactorAuthSettingTab.vue
@@ -84,7 +84,7 @@
                 <template #title>
                     <span>{{ $t('Backup Code') }}</span>
                     <v-btn id="copy-to-clipboard-icon" ref="copyToClipboardIcon"
-                           density="compact" color="default" variant="text"
+                           density="compact" color="default" variant="text" size="24"
                            class="ml-2" :icon="true">
                         <v-icon :icon="icons.copy" size="20" />
                         <v-tooltip activator="parent">{{ $t('Copy') }}</v-tooltip>
@@ -349,4 +349,8 @@ export default {
 .backup-code {
     font-family: monospace;
 }
+
+.backup-code textarea {
+    resize: none;
+}
 </style>