diff --git a/src/desktop-main.js b/src/desktop-main.js
index efd2059c..4ac4b6ec 100644
--- a/src/desktop-main.js
+++ b/src/desktop-main.js
@@ -227,6 +227,9 @@ const vuetify = createVuetify({
         VSnackbar: {
             timeout: 3000
         },
+        VTable: {
+            hover: true
+        },
         VTabs: {
             color: 'primary',
             VSlideGroup: {
diff --git a/src/styles/desktop/global.scss b/src/styles/desktop/global.scss
index 218ac8c3..8eb8756c 100644
--- a/src/styles/desktop/global.scss
+++ b/src/styles/desktop/global.scss
@@ -109,6 +109,30 @@ input[type=number] {
     th {
         background: rgb(var(--v-table-header-background)) !important;
     }
+
+    tr:nth-child(even) {
+        background: #fcfcfc;
+    }
+
+    tr.even-row {
+        background: #fcfcfc;
+    }
+
+    tbody.has-bottom-border > tr:last-child > td {
+        border-bottom: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
+    }
+}
+
+.v-theme--dark {
+    .v-table {
+        tr:nth-child(even) {
+            background: #161616;
+        }
+
+        tr.even-row {
+            background: #161616;
+        }
+    }
 }
 
 .right-bottom-icon .v-badge__badge {
@@ -126,6 +150,10 @@ input[type=number] {
     color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
 }
 
+.text-caption {
+    color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
+}
+
 .v-label {
     &:not(.v-field-label--floating) {
         color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
diff --git a/src/views/desktop/AboutPage.vue b/src/views/desktop/AboutPage.vue
index 07b6387c..c680081f 100644
--- a/src/views/desktop/AboutPage.vue
+++ b/src/views/desktop/AboutPage.vue
@@ -5,26 +5,26 @@
                 <v-card-text>
                     <v-row no-gutters>
                         <v-col cols="12" md="2">
-                            <span class="text-subtitle-1">{{ $t('Version') }}</span>
+                            <span class="text-body-1">{{ $t('Version') }}</span>
                         </v-col>
                         <v-col cols="12" md="10" class="mb-6">
-                            <span class="text-subtitle-1">{{ version }}</span>
+                            <span class="text-body-1">{{ version }}</span>
                         </v-col>
                     </v-row>
                     <v-row no-gutters v-if="buildTime">
                         <v-col cols="12" md="2">
-                            <span class="text-subtitle-1">{{ $t('Build Time') }}</span>
+                            <span class="text-body-1">{{ $t('Build Time') }}</span>
                         </v-col>
                         <v-col cols="12" md="10" class="mb-6">
-                            <span class="text-subtitle-1">{{ buildTime }}</span>
+                            <span class="text-body-1">{{ buildTime }}</span>
                         </v-col>
                     </v-row>
                     <v-row no-gutters>
                         <v-col cols="12" md="2">
-                            <span class="text-subtitle-1">{{ $t('Official Website') }}</span>
+                            <span class="text-body-1">{{ $t('Official Website') }}</span>
                         </v-col>
                         <v-col cols="12" md="10" class="mb-6">
-                            <a class="text-subtitle-1" href="https://github.com/mayswind/ezbookkeeping" target="_blank">
+                            <a class="text-body-1" href="https://github.com/mayswind/ezbookkeeping" target="_blank">
                                 https://github.com/mayswind/ezbookkeeping
                             </a>
                         </v-col>
diff --git a/src/views/desktop/AccountsPage.vue b/src/views/desktop/AccountsPage.vue
index 660a1cd6..282d1e2d 100644
--- a/src/views/desktop/AccountsPage.vue
+++ b/src/views/desktop/AccountsPage.vue
@@ -6,24 +6,24 @@
                     <div>
                         <div class="mx-6 my-4">
                             <small>{{ $t('Net assets') }}</small>
-                            <p class="text-subtitle-1 text-income mb-2">
+                            <p class="text-body-1 text-income mt-1 mb-3">
                                 <span v-if="!loading">{{ netAssets }}</span>
                                 <span v-else-if="loading">
-                                    <v-skeleton-loader class="accounts-summary-skeleton mt-2 mb-4" type="text" :loading="true"></v-skeleton-loader>
+                                    <v-skeleton-loader class="accounts-summary-skeleton mt-3 mb-4" type="text" :loading="true"></v-skeleton-loader>
                                 </span>
                             </p>
                             <small>{{ $t('Total liabilities') }}</small>
-                            <p class="text-subtitle-1 text-expense mb-2">
+                            <p class="text-body-1 text-expense mt-1 mb-3">
                                 <span v-if="!loading">{{ totalLiabilities }}</span>
                                 <span v-else-if="loading">
-                                    <v-skeleton-loader class="accounts-summary-skeleton mt-2 mb-4" type="text" :loading="true"></v-skeleton-loader>
+                                    <v-skeleton-loader class="accounts-summary-skeleton mt-3 mb-4" type="text" :loading="true"></v-skeleton-loader>
                                 </span>
                             </p>
                             <small>{{ $t('Total assets') }}</small>
-                            <p class="text-subtitle-1">
+                            <p class="text-body-1 mt-1">
                                 <span v-if="!loading">{{ totalAssets }}</span>
                                 <span v-else-if="loading">
-                                    <v-skeleton-loader class="accounts-summary-skeleton mt-2 mb-6" type="text" :loading="true"></v-skeleton-loader>
+                                    <v-skeleton-loader class="accounts-summary-skeleton mt-3 mb-5" type="text" :loading="true"></v-skeleton-loader>
                                 </span>
                             </p>
                         </div>
@@ -116,10 +116,10 @@
                                                     <v-card border class="card-title-with-bg account-card mb-8 h-auto" v-if="showHidden || !element.hidden">
                                                         <template #title>
                                                             <div class="account-title d-flex align-baseline">
-                                                                <ItemIcon icon-type="account" :icon-id="element.icon"
+                                                                <ItemIcon size="1.5rem" icon-type="account" :icon-id="element.icon"
                                                                           :color="element.color" :hidden-status="element.hidden" />
-                                                                <span class="account-name ml-3">{{ element.name }}</span>
-                                                                <small class="account-currency ml-3">
+                                                                <span class="account-name ml-2">{{ element.name }}</span>
+                                                                <small class="account-currency ml-2">
                                                                     {{ accountCurrency(element) }}
                                                                 </small>
                                                                 <v-spacer/>
@@ -147,9 +147,9 @@
                                                                     <v-btn :key="subAccount.id" :value="subAccount.id"
                                                                            v-for="subAccount in element.subAccounts"
                                                                            v-show="showHidden || !subAccount.hidden">
-                                                                        <ItemIcon icon-type="account" :icon-id="subAccount.icon"
+                                                                        <ItemIcon size="1.5rem" icon-type="account" :icon-id="subAccount.icon"
                                                                                   :color="subAccount.color" :hidden-status="subAccount.hidden" />
-                                                                        <span class="ml-3">{{ subAccount.name }}</span>
+                                                                        <span class="ml-2">{{ subAccount.name }}</span>
                                                                     </v-btn>
                                                                 </v-btn-toggle>
                                                             </div>
@@ -521,7 +521,13 @@ export default {
     text-overflow: ellipsis;
 }
 
+.account-card > .v-card-item {
+    padding-top: 0.875rem;
+    padding-bottom: 0.875rem;
+}
+
 .account-card .account-title {
+    font-size: 1rem;
     line-height: 1.5rem !important;
 }
 
@@ -545,7 +551,7 @@ export default {
 }
 
 .account-card .account-balance {
-    font-size: 1.5rem;
+    font-size: 1.25rem;
     color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
 }
 </style>
diff --git a/src/views/desktop/ExchangeRatesPage.vue b/src/views/desktop/ExchangeRatesPage.vue
index 5a668dd1..c070a1cc 100644
--- a/src/views/desktop/ExchangeRatesPage.vue
+++ b/src/views/desktop/ExchangeRatesPage.vue
@@ -6,19 +6,19 @@
                     <div>
                         <div class="mx-6 my-4">
                             <small>{{ $t('Data source') }}</small>
-                            <p class="text-subtitle-1 mb-2">
+                            <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>
                                 <span v-else-if="!loading && !exchangeRatesData">{{ $t('None') }}</span>
                                 <span v-else-if="loading">
-                                    <v-skeleton-loader class="exchange-rates-summary-skeleton mt-2 mb-4" type="text" :loading="true"></v-skeleton-loader>
+                                    <v-skeleton-loader class="exchange-rates-summary-skeleton mt-3 mb-4" type="text" :loading="true"></v-skeleton-loader>
                                 </span>
                             </p>
                             <small v-if="exchangeRatesDataUpdateTime">{{ $t('Last Updated') }}</small>
-                            <p class="text-subtitle-1" v-if="exchangeRatesDataUpdateTime">
+                            <p class="text-body-1 mt-1" v-if="exchangeRatesDataUpdateTime">
                                 <span v-if="!loading">{{ exchangeRatesDataUpdateTime }}</span>
                                 <span v-if="loading">
-                                    <v-skeleton-loader class="exchange-rates-summary-skeleton mt-2 mb-6" type="text" :loading="true"></v-skeleton-loader>
+                                    <v-skeleton-loader class="exchange-rates-summary-skeleton mt-3 mb-5" type="text" :loading="true"></v-skeleton-loader>
                                 </span>
                             </p>
                         </div>
@@ -86,10 +86,10 @@
 
                                     <tr :key="exchangeRate.currencyCode" v-for="exchangeRate in availableExchangeRates">
                                         <td>
-                                            <span>{{ exchangeRate.currencyDisplayName }}</span>
-                                            <small class="smaller ml-1">{{ exchangeRate.currencyCode }}</small>
+                                            <span class="text-sm">{{ exchangeRate.currencyDisplayName }}</span>
+                                            <span class="text-caption ml-1">{{ exchangeRate.currencyCode }}</span>
                                         </td>
-                                        <td class="text-right">{{ getDisplayConvertedAmount(exchangeRate) }}</td>
+                                        <td class="text-sm text-right">{{ getDisplayConvertedAmount(exchangeRate) }}</td>
                                     </tr>
                                     </tbody>
                                 </v-table>
diff --git a/src/views/desktop/TransactionTagsPage.vue b/src/views/desktop/TransactionTagsPage.vue
index 2d0086fb..7f0246aa 100644
--- a/src/views/desktop/TransactionTagsPage.vue
+++ b/src/views/desktop/TransactionTagsPage.vue
@@ -8,7 +8,7 @@
                         <v-btn class="ml-3" color="default" variant="outlined"
                                :disabled="loading || updating || hasEditingTag" @click="add">{{ $t('Add') }}</v-btn>
                         <v-btn class="ml-3" color="primary" variant="tonal"
-                               :disabled="loading" @click="saveSortResult"
+                               :disabled="loading || updating || hasEditingTag" @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 || hasEditingTag"
@@ -61,19 +61,20 @@
                                     item-key="id"
                                     handle=".drag-handle"
                                     ghost-class="dragging-item"
+                                    :class="{ 'has-bottom-border': newTag }"
                                     :disabled="noAvailableTag"
                                     v-model="tags"
                                     @change="onMove">
                         <template #item="{ element }">
-                            <tr v-show="showHidden || !element.hidden">
+                            <tr class="text-sm" v-if="showHidden || !element.hidden">
                                 <td>
                                     <div class="d-flex align-center" v-if="editingTag.id !== element.id">
                                         <v-badge class="right-bottom-icon" color="secondary"
                                                  location="bottom right" offset-x="8" :icon="icons.hide"
                                                  v-if="element.hidden">
-                                            <v-icon size="24" start :icon="icons.tag"/>
+                                            <v-icon size="20" start :icon="icons.tag"/>
                                         </v-badge>
-                                        <v-icon size="24" start :icon="icons.tag" v-else-if="!element.hidden"/>
+                                        <v-icon size="20" start :icon="icons.tag" v-else-if="!element.hidden"/>
                                         {{ element.name }}
                                     </div>
                                     <v-text-field
@@ -91,9 +92,9 @@
                                             <v-badge class="right-bottom-icon" color="secondary"
                                                      location="bottom right" offset-x="8" :icon="icons.hide"
                                                      v-if="element.hidden">
-                                                <v-icon size="24" start :icon="icons.tag"/>
+                                                <v-icon size="20" start :icon="icons.tag"/>
                                             </v-badge>
-                                            <v-icon size="24" start :icon="icons.tag" v-else-if="!element.hidden"/>
+                                            <v-icon size="20" start :icon="icons.tag" v-else-if="!element.hidden"/>
                                         </template>
                                     </v-text-field>
                                 </td>
@@ -151,14 +152,14 @@
                     </draggable-list>
 
                     <tbody v-if="newTag">
-                    <tr>
+                    <tr class="text-sm" :class="{ 'even-row': availableTagCount & 1 === 1}">
                         <td>
                             <v-text-field type="text" color="primary" clearable
                                           density="compact" variant="underlined"
                                           :disabled="loading || updating" :placeholder="$t('Tag Title')"
                                           v-model="newTag.name" @keyup.enter="save(newTag)">
                                 <template #prepend>
-                                    <v-icon size="24" start :icon="icons.tag"/>
+                                    <v-icon size="20" start :icon="icons.tag"/>
                                 </template>
                             </v-text-field>
                         </td>
@@ -462,15 +463,16 @@ export default {
 }
 
 .transaction-tags-table .v-text-field.v-text-field--plain-underlined .v-input__prepend {
-    padding-top: 10px;
+    padding-top: 12px;
 }
 
 .transaction-tags-table tr:last-child .v-text-field.v-text-field--plain-underlined .v-input__prepend {
-    padding-top: 9px;
+    padding-top: 11px;
 }
 
 .transaction-tags-table .v-text-field .v-field__input {
-    padding-top: 2px;
+    font-size: 0.875rem;
+    padding-top: 1px;
     color: rgba(var(--v-theme-on-surface));
 }
 </style>
diff --git a/src/views/desktop/app/settings/AppLockSettingTab.vue b/src/views/desktop/app/settings/AppLockSettingTab.vue
index a184adee..60512792 100644
--- a/src/views/desktop/app/settings/AppLockSettingTab.vue
+++ b/src/views/desktop/app/settings/AppLockSettingTab.vue
@@ -3,10 +3,10 @@
         <v-col cols="12">
             <v-card :title="$t('Application Lock')">
                 <v-card-text class="pb-0">
-                    <p class="text-subtitle-1 font-weight-semibold" v-if="!isEnableApplicationLock">
+                    <p class="text-body-1 font-weight-semibold" v-if="!isEnableApplicationLock">
                         {{ $t('Application lock is not enabled') }}
                     </p>
-                    <p class="text-subtitle-1" v-if="isEnableApplicationLock">
+                    <p class="text-body-1" v-if="isEnableApplicationLock">
                         {{ $t('Application lock has been enabled') }}
                     </p>
                 </v-card-text>
@@ -22,10 +22,10 @@
                 </v-card-text>
 
                 <v-card-text class="pb-0">
-                    <p class="text-subtitle-1 font-weight-semibold" v-if="!isEnableApplicationLock">
+                    <p class="text-body-1 font-weight-semibold" v-if="!isEnableApplicationLock">
                         {{ $t('Please input a new 6-digit PIN code. PIN code would encrypt your local data, so you need input this PIN code when you launch this app. If this PIN code is lost, you should re-login.') }}
                     </p>
-                    <p class="text-subtitle-1 font-weight-semibold" v-if="isEnableApplicationLock">
+                    <p class="text-body-1 font-weight-semibold" v-if="isEnableApplicationLock">
                         {{ $t('Please enter your current PIN code when disable application lock.') }}
                     </p>
                 </v-card-text>
diff --git a/src/views/desktop/statistics/AccountFilterSettingsCard.vue b/src/views/desktop/statistics/AccountFilterSettingsCard.vue
index 941e9a10..4b634688 100644
--- a/src/views/desktop/statistics/AccountFilterSettingsCard.vue
+++ b/src/views/desktop/statistics/AccountFilterSettingsCard.vue
@@ -52,7 +52,7 @@
         </div>
 
         <v-card-text v-if="!loading && !hasAnyAvailableAccount">
-            <span class="text-subtitle-1">{{ $t('No available account') }}</span>
+            <span class="text-body-1">{{ $t('No available account') }}</span>
         </v-card-text>
 
         <v-card-text v-else-if="!loading && hasAnyAvailableAccount">
diff --git a/src/views/desktop/user/settings/UserDataManagementSettingTab.vue b/src/views/desktop/user/settings/UserDataManagementSettingTab.vue
index 26d3c7d6..d3a3a334 100644
--- a/src/views/desktop/user/settings/UserDataManagementSettingTab.vue
+++ b/src/views/desktop/user/settings/UserDataManagementSettingTab.vue
@@ -81,7 +81,7 @@
         <v-col cols="12" v-if="isDataExportingEnabled">
             <v-card :class="{ 'disabled': exportingData }" :title="$t('Export Data')">
                 <v-card-text>
-                    <span class="text-subtitle-1">{{ $t('Export all data to csv file.') }}&nbsp;{{ $t('It may take a long time, please wait for a few minutes.') }}</span>
+                    <span class="text-body-1">{{ $t('Export all data to csv file.') }}&nbsp;{{ $t('It may take a long time, please wait for a few minutes.') }}</span>
                 </v-card-text>
 
                 <v-card-text class="d-flex flex-wrap gap-4">
@@ -101,7 +101,7 @@
 
                 <v-form>
                     <v-card-text class="py-0">
-                    <span class="text-subtitle-1 text-error">
+                    <span class="text-body-1 text-error">
                         <v-icon :icon="icons.alert"/>
                         {{ $t('You CANNOT undo this action. This will clear your accounts, categories, tags and transactions data. Please input your current password to confirm.') }}
                     </span>
diff --git a/src/views/desktop/user/settings/UserSecuritySettingTab.vue b/src/views/desktop/user/settings/UserSecuritySettingTab.vue
index 8c969502..088a1dd1 100644
--- a/src/views/desktop/user/settings/UserSecuritySettingTab.vue
+++ b/src/views/desktop/user/settings/UserSecuritySettingTab.vue
@@ -4,7 +4,7 @@
             <v-card :class="{ 'disabled': updatingPassword }" :title="$t('Modify Password')">
                 <v-form>
                     <v-card-text class="pt-0">
-                        <span class="text-subtitle-1">{{ $t('After the password is changed, other devices will be logged out, please log in again on other devices by using the new password.') }}</span>
+                        <span class="text-body-1">{{ $t('After the password is changed, other devices will be logged out, please log in again on other devices by using the new password.') }}</span>
                     </v-card-text>
 
                     <v-card-text>
diff --git a/src/views/desktop/user/settings/UserTwoFactorAuthSettingTab.vue b/src/views/desktop/user/settings/UserTwoFactorAuthSettingTab.vue
index c720c513..923be0b1 100644
--- a/src/views/desktop/user/settings/UserTwoFactorAuthSettingTab.vue
+++ b/src/views/desktop/user/settings/UserTwoFactorAuthSettingTab.vue
@@ -8,13 +8,13 @@
                 </template>
 
                 <v-card-text class="pb-0">
-                    <p class="text-subtitle-1 font-weight-semibold" v-if="!new2FAQRCode">
+                    <p class="text-body-1 font-weight-semibold" v-if="!new2FAQRCode">
                         {{ status === true ? $t('Two-factor authentication has been enabled.') : $t('Two-factor authentication is not enabled yet.') }}
                     </p>
-                    <p class="text-subtitle-1" v-if="new2FAQRCode">
+                    <p class="text-body-1" v-if="new2FAQRCode">
                         {{ $t('Please use two factor authentication app scan the below qrcode and input current passcode') }}
                     </p>
-                    <p class="text-subtitle-1" v-if="status === true">
+                    <p class="text-body-1" v-if="status === true">
                         {{ $t('Please enter your current password when disable two factor authentication or regenerate two factor authentication backup codes. If you regenerate backup codes, the old codes will be invalidated.') }}
                     </p>
                 </v-card-text>
@@ -91,7 +91,7 @@
                 </template>
 
                 <v-card-text>
-                    <p class="text-subtitle-1" v-if="status === true">
+                    <p class="text-body-1" v-if="status === true">
                         {{ $t('Please copy these backup codes to safe place, the below codes can only be shown once. If these codes were lost, you can regenerate backup codes at any time.') }}
                     </p>
                     <v-textarea class="backup-code" readonly="readonly" :rows="10" :value="currentBackupCode"/>