diff --git a/src/components/desktop/BtnVerticalGroup.vue b/src/components/desktop/BtnVerticalGroup.vue
new file mode 100644
index 00000000..33082f79
--- /dev/null
+++ b/src/components/desktop/BtnVerticalGroup.vue
@@ -0,0 +1,51 @@
+<template>
+    <div class="btn-vertical-group d-flex flex-column">
+        <v-btn border :key="idx"
+               :color="value === button.value ? 'primary' : 'default'"
+               :variant="value === button.value ? 'tonal' : 'outlined'" :disabled="disabled"
+               v-for="(button, idx) in buttons"
+               @click="value = button.value">
+            {{ button.name }}
+        </v-btn>
+    </div>
+</template>
+
+<script>
+export default {
+    props: [
+        'disabled',
+        'buttons',
+        'modelValue'
+    ],
+    emits: [
+        'update:modelValue'
+    ],
+    computed: {
+        value: {
+            get: function () {
+                return this.modelValue;
+            },
+            set: function (value) {
+                if (value === this.modelValue) {
+                    return;
+                }
+
+                this.$emit('update:modelValue', value);
+            }
+        }
+    }
+}
+</script>
+
+<style>
+.btn-vertical-group .v-btn:not(:first-child) {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+}
+
+.btn-vertical-group .v-btn:not(:last-child) {
+    border-bottom: 0;
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+}
+</style>
diff --git a/src/desktop-main.js b/src/desktop-main.js
index 1603ce34..83212db6 100644
--- a/src/desktop-main.js
+++ b/src/desktop-main.js
@@ -23,8 +23,11 @@ import { VIcon } from 'vuetify/components/VIcon';
 import { VImg } from 'vuetify/components/VImg';
 import { VInput } from 'vuetify/components/VInput';
 import { VLabel } from 'vuetify/components/VLabel';
+import { VLayout } from 'vuetify/components/VLayout';
 import { VList, VListGroup, VListImg, VListItem, VListItemAction, VListItemMedia, VListItemSubtitle, VListItemTitle, VListSubheader } from 'vuetify/components/VList';
+import { VMain } from 'vuetify/components/VMain';
 import { VMenu } from 'vuetify/components/VMenu';
+import { VNavigationDrawer } from 'vuetify/components/VNavigationDrawer';
 import { VOverlay } from 'vuetify/components/VOverlay';
 import { VPagination } from 'vuetify/components/VPagination';
 import { VProgressCircular } from 'vuetify/components/VProgressCircular';
@@ -77,6 +80,7 @@ import {
 import PinCodeInput from '@/components/common/PinCodeInput.vue';
 
 import ItemIcon from '@/components/desktop/ItemIcon.vue';
+import BtnVerticalGroup from '@/components/desktop/BtnVerticalGroup.vue';
 import AmountInput from '@/components/desktop/AmountInput.vue';
 import StepsBar from '@/components/desktop/StepsBar.vue';
 import ConfirmDialog from '@/components/desktop/ConfirmDialog.vue';
@@ -132,6 +136,7 @@ const vuetify = createVuetify({
         VImg,
         VInput,
         VLabel,
+        VLayout,
         VList,
         VListGroup,
         VListImg,
@@ -141,7 +146,9 @@ const vuetify = createVuetify({
         VListItemSubtitle,
         VListItemTitle,
         VListSubheader,
+        VMain,
         VMenu,
+        VNavigationDrawer,
         VOverlay,
         VPagination,
         VProgressCircular,
@@ -168,7 +175,6 @@ const vuetify = createVuetify({
             mdi
         }
     },
-
     defaults: {
         VAlert: {
             VBtn: {
@@ -384,6 +390,7 @@ app.component('DraggableList', draggable);
 app.component('PinCodeInput', PinCodeInput);
 
 app.component('ItemIcon', ItemIcon);
+app.component('BtnVerticalGroup', BtnVerticalGroup);
 app.component('AmountInput', AmountInput);
 app.component('StepsBar', StepsBar);
 app.component('ConfirmDialog', ConfirmDialog);
diff --git a/src/styles/desktop/global.scss b/src/styles/desktop/global.scss
index 9ab17348..4882595f 100644
--- a/src/styles/desktop/global.scss
+++ b/src/styles/desktop/global.scss
@@ -100,8 +100,10 @@ input[type=number] {
     min-inline-size: 100%;
 }
 
-.w-100-window-container.v-window > .v-window__container {
-    width: 100%;
+.title-and-toolbar {
+    min-height: 38px;
+    flex-wrap: wrap;
+    row-gap: 1rem;
 }
 
 /** Common class for replacing the default style of vuetify **/
@@ -153,6 +155,18 @@ input[type=number] {
     height: 1rem;
 }
 
+.w-100-window-container.v-window > .v-window__container {
+    width: 100%;
+}
+
+.tab-text-truncate.v-tab > .v-btn__content {
+    overflow-x: hidden;
+}
+
+.skeleton-no-margin .v-skeleton-loader__text {
+    margin: 0;
+}
+
 /** Common class for replacing the default style of Materio **/
 .v-application,
 .text-body-1,
@@ -195,6 +209,10 @@ input[type=number] {
     }
 }
 
+.v-btn-group--density-comfortable.v-btn-group {
+    height: 38px;
+}
+
 /** Replacing the default style of @vuepic/vue-datepicker **/
 .dp__theme_light {
     --dp-primary-color: #c67e48;
diff --git a/src/views/desktop/ExchangeRatesPage.vue b/src/views/desktop/ExchangeRatesPage.vue
index 76026021..32838530 100644
--- a/src/views/desktop/ExchangeRatesPage.vue
+++ b/src/views/desktop/ExchangeRatesPage.vue
@@ -2,8 +2,8 @@
     <v-row class="match-height">
         <v-col cols="12">
             <v-card>
-                <div class="d-flex flex-column flex-md-row">
-                    <div>
+                <v-layout>
+                    <v-navigation-drawer :permanent="alwaysShowNav" v-model="showNav">
                         <div class="mx-6 my-4">
                             <small>{{ $t('Data source') }}</small>
                             <p class="text-body-1 mt-1 mb-3">
@@ -11,14 +11,14 @@
                                 <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-3 mb-4" 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>
-                            <small v-if="exchangeRatesDataUpdateTime">{{ $t('Last Updated') }}</small>
-                            <p class="text-body-1 mt-1" v-if="exchangeRatesDataUpdateTime">
+                            <small v-if="exchangeRatesDataUpdateTime || loading">{{ $t('Last Updated') }}</small>
+                            <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="exchange-rates-summary-skeleton mt-3 mb-5" type="text" :loading="true"></v-skeleton-loader>
+                                    <v-skeleton-loader class="skeleton-no-margin mt-3 mb-5" type="text" :loading="true"></v-skeleton-loader>
                                 </span>
                             </p>
                         </div>
@@ -35,82 +35,93 @@
                         <v-tabs show-arrows class="mb-4" direction="vertical"
                                 :disabled="loading" v-model="baseCurrency"
                                 v-if="exchangeRatesData && exchangeRatesData.exchangeRates && exchangeRatesData.exchangeRates.length">
-                            <v-tab :key="exchangeRate.currencyCode" :value="exchangeRate.currencyCode"
+                            <v-tab class="tab-text-truncate" :key="exchangeRate.currencyCode" :value="exchangeRate.currencyCode"
                                    v-for="exchangeRate in availableExchangeRates">
-                                {{ exchangeRate.currencyDisplayName }}
-                                <small class="smaller ml-1">{{ exchangeRate.currencyCode }}</small>
+                                <div class="text-truncate">
+                                    <span>{{ exchangeRate.currencyDisplayName }}</span>
+                                    <small class="smaller ml-1">{{ exchangeRate.currencyCode }}</small>
+                                </div>
                             </v-tab>
                         </v-tabs>
                         <div class="mx-6 mt-2 mb-4"
                              v-else-if="!exchangeRatesData || !exchangeRatesData.exchangeRates || !exchangeRatesData.exchangeRates.length">
                             <span v-if="!loading">{{ $t('None') }}</span>
-                            <v-skeleton-loader type="paragraph" :loading="loading" v-else-if="loading"></v-skeleton-loader>
+                            <span v-else-if="loading">
+                                <v-skeleton-loader class="skeleton-no-margin pt-2 pb-5" type="text"
+                                                   :key="itemIdx" :loading="loading"
+                                                   v-for="itemIdx in [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]"></v-skeleton-loader>
+                            </span>
                         </div>
-                    </div>
+                    </v-navigation-drawer>
+                    <v-main>
+                        <v-window class="d-flex flex-grow-1 disable-tab-transition w-100-window-container" v-model="activeTab">
+                            <v-window-item value="exchangeRatesPage">
+                                <v-card variant="flat">
+                                    <template #title>
+                                        <div class="title-and-toolbar d-flex align-center">
+                                            <v-btn class="mr-3 d-md-none" density="compact" color="default" variant="plain"
+                                                   :ripple="false" :icon="true" @click="showNav = !showNav">
+                                                <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-icon :icon="icons.refresh" size="24" />
+                                                <v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip>
+                                            </v-btn>
+                                            <v-progress-circular indeterminate size="24" class="ml-2" v-if="loading"></v-progress-circular>
+                                        </div>
+                                    </template>
 
-                    <v-window class="d-flex flex-grow-1 ml-md-5 disable-tab-transition w-100-window-container" v-model="activeTab">
-                        <v-window-item value="exchangeRatesPage">
-                            <v-card variant="flat">
-                                <template #title>
-                                    <div class="d-flex align-center">
-                                        <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-icon :icon="icons.refresh" size="24" />
-                                            <v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip>
-                                        </v-btn>
-                                        <v-progress-circular indeterminate size="24" class="ml-2" v-if="loading"></v-progress-circular>
-                                    </div>
-                                </template>
+                                    <v-table class="exchange-rates-table table-striped" :hover="!loading">
+                                        <thead>
+                                        <tr>
+                                            <th class="text-uppercase">
+                                                <div class="d-flex align-center">
+                                                    <span>{{ $t('Currency') }}</span>
+                                                    <v-spacer/>
+                                                    <span>{{ $t('Amount') }}</span>
+                                                </div>
+                                            </th>
+                                        </tr>
+                                        </thead>
 
-                                <v-table class="exchange-rates-table table-striped" :hover="!loading">
-                                    <thead>
-                                    <tr>
-                                        <th class="text-uppercase">
-                                            <div class="d-flex align-center">
-                                                <span>{{ $t('Currency') }}</span>
-                                                <v-spacer/>
-                                                <span>{{ $t('Amount') }}</span>
-                                            </div>
-                                        </th>
-                                    </tr>
-                                    </thead>
+                                        <tbody>
+                                        <tr :key="itemIdx"
+                                            v-for="itemIdx in (loading && (!exchangeRatesData || !exchangeRatesData.exchangeRates || exchangeRatesData.exchangeRates.length < 1) ? [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ] : [])">
+                                            <td class="px-0">
+                                                <v-skeleton-loader type="text" :loading="true"></v-skeleton-loader>
+                                            </td>
+                                        </tr>
 
-                                    <tbody>
-                                    <tr :key="itemIdx"
-                                        v-for="itemIdx in (loading && (!exchangeRatesData || !exchangeRatesData.exchangeRates || exchangeRatesData.exchangeRates.length < 1) ? [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ] : [])">
-                                        <td class="px-0">
-                                            <v-skeleton-loader type="text" :loading="true"></v-skeleton-loader>
-                                        </td>
-                                    </tr>
+                                        <tr v-if="!loading && (!exchangeRatesData || !exchangeRatesData.exchangeRates || !exchangeRatesData.exchangeRates.length)">
+                                            <td>{{ $t('No exchange rates data') }}</td>
+                                        </tr>
 
-                                    <tr v-if="!loading && (!exchangeRatesData || !exchangeRatesData.exchangeRates || !exchangeRatesData.exchangeRates.length)">
-                                        <td>{{ $t('No exchange rates data') }}</td>
-                                    </tr>
-
-                                    <tr class="exchange-rates-table-row-data" :key="exchangeRate.currencyCode"
-                                        v-for="exchangeRate in availableExchangeRates">
-                                        <td>
-                                            <div class="d-flex align-center">
-                                                <span class="text-sm">{{ exchangeRate.currencyDisplayName }}</span>
-                                                <span class="text-caption ml-1">{{ exchangeRate.currencyCode }}</span>
-                                                <v-spacer/>
-                                                <v-btn class="hover-display px-2 ml-2 mr-3" color="default"
-                                                       density="comfortable" variant="text"
-                                                       @click="setAsBaseline(exchangeRate.currencyCode, exchangeRate)">
-                                                    {{ $t('Set As Baseline') }}
-                                                </v-btn>
-                                                <span>{{ getDisplayConvertedAmount(exchangeRate, isEnableThousandsSeparator) }}</span>
-                                            </div>
-                                        </td>
-                                    </tr>
-                                    </tbody>
-                                </v-table>
-                            </v-card>
-                        </v-window-item>
-                    </v-window>
-                </div>
+                                        <tr class="exchange-rates-table-row-data" :key="exchangeRate.currencyCode"
+                                            v-for="exchangeRate in availableExchangeRates">
+                                            <td>
+                                                <div class="d-flex align-center">
+                                                    <span class="text-sm">{{ exchangeRate.currencyDisplayName }}</span>
+                                                    <span class="text-caption ml-1">{{ exchangeRate.currencyCode }}</span>
+                                                    <v-spacer/>
+                                                    <v-btn class="hover-display px-2 ml-2 mr-3" color="default"
+                                                           density="comfortable" variant="text"
+                                                           @click="setAsBaseline(exchangeRate.currencyCode, exchangeRate)">
+                                                        {{ $t('Set As Baseline') }}
+                                                    </v-btn>
+                                                    <span>{{ getDisplayConvertedAmount(exchangeRate, isEnableThousandsSeparator) }}</span>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                        </tbody>
+                                    </v-table>
+                                </v-card>
+                            </v-window-item>
+                        </v-window>
+                    </v-main>
+                </v-layout>
             </v-card>
         </v-col>
     </v-row>
@@ -119,6 +130,8 @@
 </template>
 
 <script>
+import { useDisplay } from 'vuetify';
+
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/setting.js';
 import { useUserStore } from '@/stores/user.js';
@@ -130,11 +143,13 @@ import {
 } from '@/lib/currency.js';
 
 import {
-    mdiRefresh
+    mdiRefresh,
+    mdiMenu
 } from '@mdi/js';
 
 export default {
     data() {
+        const { mdAndUp } = useDisplay();
         const userStore = useUserStore();
 
         return {
@@ -142,8 +157,11 @@ export default {
             baseCurrency: userStore.currentUserDefaultCurrency,
             baseAmount: '1',
             loading: true,
+            alwaysShowNav: mdAndUp.value,
+            showNav: mdAndUp.value,
             icons: {
-                refresh: mdiRefresh
+                refresh: mdiRefresh,
+                menu: mdiMenu
             }
         };
     },
@@ -166,6 +184,22 @@ export default {
     created() {
         this.reload(false);
     },
+    setup() {
+        const display = useDisplay();
+
+        return {
+            display: display
+        };
+    },
+    watch: {
+        'display.mdAndUp.value': function (newValue) {
+            this.alwaysShowNav = newValue;
+
+            if (!this.showNav) {
+                this.showNav = newValue;
+            }
+        }
+    },
     methods: {
         reload(force) {
             const self = this;
@@ -234,10 +268,6 @@ export default {
 </script>
 
 <style>
-.exchange-rates-summary-skeleton .v-skeleton-loader__text {
-    margin: 0;
-}
-
 .exchange-rates-table tr.exchange-rates-table-row-data .hover-display {
     display: none;
 }
diff --git a/src/views/desktop/HomePage.vue b/src/views/desktop/HomePage.vue
index d35747cd..f8ac6e23 100644
--- a/src/views/desktop/HomePage.vue
+++ b/src/views/desktop/HomePage.vue
@@ -22,7 +22,7 @@
                 <v-card-text>
                     <h5 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 overview-card-skeleton mt-4" 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-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" />
@@ -31,7 +31,7 @@
                     <div class="mt-2 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 overview-card-skeleton" 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-1" 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"/>
@@ -48,7 +48,8 @@
 
                 <v-card-text>
                     <h6 class="text-sm font-weight-medium mb-6">
-                        <span>{{ $t('format.misc.youHaveAccounts', { count: allAccounts.length }) }}</span>
+                        <span 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>
 
                     <v-row>
@@ -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>
-                                    <v-skeleton-loader class="overview-card-skeleton mt-3 mb-2" width="120px" type="text" :loading="true" v-else-if="loadingOverview && (!allAccounts || !allAccounts.length)"></v-skeleton-loader>
+                                    <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>
                         </v-col>
@@ -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>
-                                    <v-skeleton-loader class="overview-card-skeleton mt-3 mb-2" width="120px" type="text" :loading="true" v-else-if="loadingOverview && (!allAccounts || !allAccounts.length)"></v-skeleton-loader>
+                                    <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>
                         </v-col>
@@ -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>
-                                    <v-skeleton-loader class="overview-card-skeleton mt-3 mb-2" width="120px" type="text" :loading="true" v-else-if="loadingOverview && (!allAccounts || !allAccounts.length)"></v-skeleton-loader>
+                                    <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>
                         </v-col>
@@ -425,8 +426,4 @@ export default {
     inset-block-end: 0.5rem;
     inset-inline-end: 1rem;
 }
-
-.overview-card-skeleton .v-skeleton-loader__text {
-    margin: 0;
-}
 </style>
diff --git a/src/views/desktop/accounts/ListPage.vue b/src/views/desktop/accounts/ListPage.vue
index 96929b3b..ba1f6c08 100644
--- a/src/views/desktop/accounts/ListPage.vue
+++ b/src/views/desktop/accounts/ListPage.vue
@@ -2,209 +2,214 @@
     <v-row class="match-height">
         <v-col cols="12">
             <v-card>
-                <div class="d-flex flex-column flex-md-row">
-                    <div>
+                <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 mt-1 mb-3">
+                            <p class="text-body-1 text-income text-truncate mt-1 mb-3">
                                 <span v-if="!loading">{{ netAssets }}</span>
                                 <span v-else-if="loading">
-                                    <v-skeleton-loader class="accounts-summary-skeleton mt-3 mb-4" type="text" :loading="true"></v-skeleton-loader>
+                                    <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 mt-1 mb-3">
+                            <p class="text-body-1 text-expense text-truncate mt-1 mb-3">
                                 <span v-if="!loading">{{ totalLiabilities }}</span>
                                 <span v-else-if="loading">
-                                    <v-skeleton-loader class="accounts-summary-skeleton mt-3 mb-4" type="text" :loading="true"></v-skeleton-loader>
+                                    <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 v-if="!loading">{{ totalAssets }}</span>
                                 <span v-else-if="loading">
-                                    <v-skeleton-loader class="accounts-summary-skeleton mt-3 mb-5" type="text" :loading="true"></v-skeleton-loader>
+                                    <v-skeleton-loader class="skeleton-no-margin pt-2 pb-1" type="text" :loading="true"></v-skeleton-loader>
                                 </span>
                             </p>
                         </div>
                         <v-divider />
                         <v-tabs show-arrows class="account-category-tabs my-4" direction="vertical"
                                 :disabled="loading" v-model="activeAccountCategoryId">
-                            <v-tab :key="accountCategory.id" :value="accountCategory.id"
+                            <v-tab class="tab-text-truncate" :key="accountCategory.id" :value="accountCategory.id"
                                    v-for="accountCategory in allAccountCategories">
                                 <ItemIcon icon-type="account" :icon-id="accountCategory.defaultAccountIconId" />
-                                <div class="ml-2 d-flex flex-column">
-                                    <small class="text-left smaller">{{ accountCategoryTotalBalance(accountCategory) }}</small>
-                                    <div class="text-left">{{ $t(accountCategory.name) }}</div>
+                                <div class="d-flex flex-column text-truncate ml-2">
+                                    <small class="text-truncate text-left smaller">{{ accountCategoryTotalBalance(accountCategory) }}</small>
+                                    <span class="text-truncate text-left">{{ $t(accountCategory.name) }}</span>
                                 </div>
                             </v-tab>
                         </v-tabs>
-                    </div>
-                    <v-window class="d-flex flex-grow-1 ml-md-5 disable-tab-transition w-100-window-container" v-model="activeTab">
-                        <v-window-item value="accountPage">
-                            <v-card variant="flat">
-                                <template #title>
-                                    <div class="d-flex align-center">
-                                        <span>{{ $t('Account List') }}</span>
-                                        <v-btn class="ml-3" color="default" variant="outlined"
-                                               :disabled="loading" @click="add">{{ $t('Add') }}</v-btn>
-                                        <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-icon :icon="icons.refresh" size="24" />
-                                            <v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip>
-                                        </v-btn>
-                                        <v-progress-circular indeterminate size="24" class="ml-2" v-if="loading"></v-progress-circular>
-                                        <v-spacer/>
-                                        <v-btn density="comfortable" color="default" variant="text" class="ml-2"
-                                               :disabled="loading" :icon="true">
-                                            <v-icon :icon="icons.more" />
-                                            <v-menu activator="parent">
-                                                <v-list>
-                                                    <v-list-item :prepend-icon="icons.show"
-                                                                 :title="$t('Show Hidden Account')"
-                                                                 v-if="!showHidden" @click="showHidden = true"></v-list-item>
-                                                    <v-list-item :prepend-icon="icons.hide"
-                                                                 :title="$t('Hide Hidden Account')"
-                                                                 v-if="showHidden" @click="showHidden = false"></v-list-item>
-                                                </v-list>
-                                            </v-menu>
+                    </v-navigation-drawer>
+                    <v-main>
+                        <v-window class="d-flex flex-grow-1 disable-tab-transition w-100-window-container" v-model="activeTab">
+                            <v-window-item value="accountPage">
+                                <v-card variant="flat" min-height="680">
+                                    <template #title>
+                                        <div class="title-and-toolbar d-flex align-center">
+                                            <v-btn class="mr-3 d-md-none" density="compact" color="default" variant="plain"
+                                                   :ripple="false" :icon="true" @click="showNav = !showNav">
+                                                <v-icon :icon="icons.menu" size="24" />
+                                            </v-btn>
+                                            <span>{{ $t('Account List') }}</span>
+                                            <v-btn class="ml-3" color="default" variant="outlined"
+                                                   :disabled="loading" @click="add">{{ $t('Add') }}</v-btn>
+                                            <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-icon :icon="icons.refresh" size="24" />
+                                                <v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip>
+                                            </v-btn>
+                                            <v-progress-circular indeterminate size="24" class="ml-2" v-if="loading"></v-progress-circular>
+                                            <v-spacer/>
+                                            <v-btn density="comfortable" color="default" variant="text" class="ml-2"
+                                                   :disabled="loading" :icon="true">
+                                                <v-icon :icon="icons.more" />
+                                                <v-menu activator="parent">
+                                                    <v-list>
+                                                        <v-list-item :prepend-icon="icons.show"
+                                                                     :title="$t('Show Hidden Account')"
+                                                                     v-if="!showHidden" @click="showHidden = true"></v-list-item>
+                                                        <v-list-item :prepend-icon="icons.hide"
+                                                                     :title="$t('Hide Hidden Account')"
+                                                                     v-if="showHidden" @click="showHidden = false"></v-list-item>
+                                                    </v-list>
+                                                </v-menu>
+                                            </v-btn>
+                                        </div>
+                                    </template>
+
+                                    <v-card-text class="accounts-overview-title text-truncate pt-0">
+                                        <span class="text-subtitle-1">{{ $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"
+                                               :icon="true" :disabled="loading"
+                                               @click="showAccountBalance = !showAccountBalance">
+                                            <v-icon :icon="showAccountBalance ? icons.eyeSlash : icons.eye" size="20" />
+                                            <v-tooltip activator="parent">{{ showAccountBalance ? $t('Hide Account Balance') : $t('Show Account Balance') }}</v-tooltip>
                                         </v-btn>
+                                    </v-card-text>
+
+                                    <div class="pl-2 pr-2 pr-md-4 mt-n4" v-if="loading && !hasAccount(activeAccountCategory)">
+                                        <v-skeleton-loader type="paragraph" :loading="loading"
+                                                           :key="itemIdx" v-for="itemIdx in [ 1, 2, 3 ]"></v-skeleton-loader>
                                     </div>
-                                </template>
 
-                                <v-card-text class="accounts-overview-title pt-0">
-                                    <span class="text-subtitle-1">{{ $t('Balance') }}</span>
-                                    <span class="accounts-overview-amount ml-3">
-                                        {{ activeAccountCategoryTotalBalance }}
-                                    </span>
-                                    <v-btn class="ml-2" density="compact" color="default" variant="text"
-                                           :icon="true" :disabled="loading"
-                                           @click="showAccountBalance = !showAccountBalance">
-                                        <v-icon :icon="showAccountBalance ? icons.eyeSlash : icons.eye" size="20" />
-                                        <v-tooltip activator="parent">{{ showAccountBalance ? $t('Hide Account Balance') : $t('Show Account Balance') }}</v-tooltip>
-                                    </v-btn>
-                                </v-card-text>
+                                    <v-row class="pl-2 pr-2 pr-md-4" v-if="!loading && !hasAccount(activeAccountCategory)">
+                                        <v-col cols="12">
+                                            {{ $t('No available account') }}
+                                        </v-col>
+                                    </v-row>
 
-                                <div v-if="loading && !hasAccount(activeAccountCategory)">
-                                    <v-skeleton-loader type="paragraph" :loading="loading"
-                                                       :key="itemIdx" v-for="itemIdx in [ 1, 2, 3 ]"></v-skeleton-loader>
-                                </div>
+                                    <v-row class="pl-6 pr-6 pr-md-8">
+                                        <v-col cols="12">
+                                            <draggable-list
+                                                class="list-group"
+                                                item-key="id"
+                                                handle=".drag-handle"
+                                                ghost-class="dragging-item"
+                                                :disabled="activeAccountCategoryVisibleAccountCount <= 1"
+                                                :list="categorizedAccounts[activeAccountCategory.id].accounts"
+                                                v-if="categorizedAccounts[activeAccountCategory.id] && categorizedAccounts[activeAccountCategory.id].accounts && categorizedAccounts[activeAccountCategory.id].accounts.length"
+                                                @change="onMove"
+                                            >
+                                                <template #item="{ element }">
+                                                    <div class="list-group-item">
+                                                        <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 size="1.5rem" icon-type="account" :icon-id="element.icon"
+                                                                              :color="element.color" :hidden-status="element.hidden" />
+                                                                    <span class="account-name text-truncate ml-2">{{ element.name }}</span>
+                                                                    <small class="account-currency text-truncate ml-2">
+                                                                        {{ accountCurrency(element) }}
+                                                                    </small>
+                                                                    <v-spacer/>
+                                                                    <span class="align-self-center">
+                                                                        <v-icon :class="!loading && activeAccountCategoryVisibleAccountCount > 1 ? 'drag-handle' : 'disabled'"
+                                                                                :icon="icons.drag"/>
+                                                                        <v-tooltip activator="parent" v-if="!loading && activeAccountCategoryVisibleAccountCount > 1">{{ $t('Drag and Drop to Change Order') }}</v-tooltip>
+                                                                    </span>
+                                                                </div>
 
-                                <v-row class="pl-4 pr-4 pr-md-8" v-if="!loading && !hasAccount(activeAccountCategory)">
-                                    <v-col cols="12">
-                                        {{ $t('No available account') }}
-                                    </v-col>
-                                </v-row>
+                                                                <div class="mt-4" v-if="element.type === allAccountTypes.MultiSubAccounts">
+                                                                    <v-btn-toggle
+                                                                        class="account-subaccounts"
+                                                                        variant="outlined"
+                                                                        color="primary"
+                                                                        density="compact"
+                                                                        mandatory="force"
+                                                                        divided rounded="xl"
+                                                                        :disabled="loading"
+                                                                        v-model="activeSubAccount[element.id]"
+                                                                    >
+                                                                        <v-btn :value="undefined">
+                                                                            <span>{{ $t('All') }}</span>
+                                                                        </v-btn>
+                                                                        <v-btn :key="subAccount.id" :value="subAccount.id"
+                                                                               v-for="subAccount in element.subAccounts"
+                                                                               v-show="showHidden || !subAccount.hidden">
+                                                                            <ItemIcon size="1.5rem" icon-type="account" :icon-id="subAccount.icon"
+                                                                                      :color="subAccount.color" :hidden-status="subAccount.hidden" />
+                                                                            <span class="ml-2">{{ subAccount.name }}</span>
+                                                                        </v-btn>
+                                                                    </v-btn-toggle>
+                                                                </div>
+                                                            </template>
 
-                                <v-row class="pl-4 pr-4 pr-md-8">
-                                    <v-col cols="12">
-                                        <draggable-list
-                                            class="list-group"
-                                            item-key="id"
-                                            handle=".drag-handle"
-                                            ghost-class="dragging-item"
-                                            :disabled="activeAccountCategoryVisibleAccountCount <= 1"
-                                            :list="categorizedAccounts[activeAccountCategory.id].accounts"
-                                            v-if="categorizedAccounts[activeAccountCategory.id] && categorizedAccounts[activeAccountCategory.id].accounts && categorizedAccounts[activeAccountCategory.id].accounts.length"
-                                            @change="onMove"
-                                        >
-                                            <template #item="{ element }">
-                                                <div class="list-group-item">
-                                                    <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 size="1.5rem" icon-type="account" :icon-id="element.icon"
-                                                                          :color="element.color" :hidden-status="element.hidden" />
-                                                                <span class="account-name ml-2">{{ element.name }}</span>
-                                                                <small class="account-currency ml-2">
-                                                                    {{ accountCurrency(element) }}
-                                                                </small>
-                                                                <v-spacer/>
-                                                                <span class="align-self-center">
-                                                                    <v-icon :class="!loading && activeAccountCategoryVisibleAccountCount > 1 ? 'drag-handle' : 'disabled'"
-                                                                            :icon="icons.drag"/>
-                                                                    <v-tooltip activator="parent" v-if="!loading && activeAccountCategoryVisibleAccountCount > 1">{{ $t('Drag and Drop to Change Order') }}</v-tooltip>
-                                                                </span>
-                                                            </div>
+                                                            <v-divider/>
 
-                                                            <div class="mt-4" v-if="element.type === allAccountTypes.MultiSubAccounts">
-                                                                <v-btn-toggle
-                                                                    class="account-subaccounts"
-                                                                    variant="outlined"
-                                                                    color="primary"
-                                                                    density="compact"
-                                                                    mandatory="force"
-                                                                    divided rounded="xl"
-                                                                    :disabled="loading"
-                                                                    v-model="activeSubAccount[element.id]"
-                                                                >
-                                                                    <v-btn :value="undefined">
-                                                                        <span>{{ $t('All') }}</span>
+                                                            <v-card-text v-if="accountComment(element)">
+                                                                {{ accountComment(element) }}
+                                                            </v-card-text>
+
+                                                            <v-card-text>
+                                                                <div class="d-flex account-toolbar align-center">
+                                                                    <v-btn class="px-2" density="comfortable" color="default" variant="text"
+                                                                           :disabled="loading" :prepend-icon="icons.transactions"
+                                                                           :to="`/transaction/list?accountId=${accountOrSubAccountId(element)}`">
+                                                                        {{ $t('Transaction List') }}
                                                                     </v-btn>
-                                                                    <v-btn :key="subAccount.id" :value="subAccount.id"
-                                                                           v-for="subAccount in element.subAccounts"
-                                                                           v-show="showHidden || !subAccount.hidden">
-                                                                        <ItemIcon size="1.5rem" icon-type="account" :icon-id="subAccount.icon"
-                                                                                  :color="subAccount.color" :hidden-status="subAccount.hidden" />
-                                                                        <span class="ml-2">{{ subAccount.name }}</span>
+                                                                    <v-btn class="hover-display px-2 ml-2" density="comfortable" color="default" variant="text"
+                                                                           :disabled="loading" :prepend-icon="icons.edit"
+                                                                           @click="edit(element)">
+                                                                        {{ $t('Edit') }}
                                                                     </v-btn>
-                                                                </v-btn-toggle>
-                                                            </div>
-                                                        </template>
-
-                                                        <v-divider/>
-
-                                                        <v-card-text v-if="accountComment(element)">
-                                                            {{ accountComment(element) }}
-                                                        </v-card-text>
-
-                                                        <v-card-text>
-                                                            <div class="d-flex account-toolbar align-center">
-                                                                <v-btn class="px-2" density="comfortable" color="default" variant="text"
-                                                                       :disabled="loading" :prepend-icon="icons.transactions"
-                                                                       :to="`/transaction/list?accountId=${accountOrSubAccountId(element)}`">
-                                                                    {{ $t('Transaction List') }}
-                                                                </v-btn>
-                                                                <v-btn class="hover-display px-2 ml-2" density="comfortable" color="default" variant="text"
-                                                                       :disabled="loading" :prepend-icon="icons.edit"
-                                                                       @click="edit(element)">
-                                                                    {{ $t('Edit') }}
-                                                                </v-btn>
-                                                                <v-btn class="hover-display px-2 ml-2" density="comfortable" color="default" variant="text"
-                                                                       :disabled="loading" :prepend-icon="icons.hide"
-                                                                       v-if="!element.hidden"
-                                                                       @click="hide(element, true)">
-                                                                    {{ $t('Hide') }}
-                                                                </v-btn>
-                                                                <v-btn class="hover-display px-2 ml-2" density="comfortable" color="default" variant="text"
-                                                                       :disabled="loading" :prepend-icon="icons.show"
-                                                                       v-if="element.hidden"
-                                                                       @click="hide(element, false)">
-                                                                    {{ $t('Show') }}
-                                                                </v-btn>
-                                                                <v-btn class="hover-display px-2 ml-2" density="comfortable" color="default" variant="text"
-                                                                       :disabled="loading" :prepend-icon="icons.remove"
-                                                                       @click="remove(element)">
-                                                                    {{ $t('Delete') }}
-                                                                </v-btn>
-                                                                <v-spacer/>
-                                                                <span class="account-balance ml-2">{{ accountBalance(element) }}</span>
-                                                            </div>
-                                                        </v-card-text>
-                                                    </v-card>
-                                                </div>
-                                            </template>
-                                        </draggable-list>
-                                    </v-col>
-                                </v-row>
-                            </v-card>
-                        </v-window-item>
-                    </v-window>
-                </div>
+                                                                    <v-btn class="hover-display px-2 ml-2" density="comfortable" color="default" variant="text"
+                                                                           :disabled="loading" :prepend-icon="icons.hide"
+                                                                           v-if="!element.hidden"
+                                                                           @click="hide(element, true)">
+                                                                        {{ $t('Hide') }}
+                                                                    </v-btn>
+                                                                    <v-btn class="hover-display px-2 ml-2" density="comfortable" color="default" variant="text"
+                                                                           :disabled="loading" :prepend-icon="icons.show"
+                                                                           v-if="element.hidden"
+                                                                           @click="hide(element, false)">
+                                                                        {{ $t('Show') }}
+                                                                    </v-btn>
+                                                                    <v-btn class="hover-display px-2 ml-2" density="comfortable" color="default" variant="text"
+                                                                           :disabled="loading" :prepend-icon="icons.remove"
+                                                                           @click="remove(element)">
+                                                                        {{ $t('Delete') }}
+                                                                    </v-btn>
+                                                                    <v-spacer/>
+                                                                    <span class="account-balance ml-2">{{ accountBalance(element) }}</span>
+                                                                </div>
+                                                            </v-card-text>
+                                                        </v-card>
+                                                    </div>
+                                                </template>
+                                            </draggable-list>
+                                        </v-col>
+                                    </v-row>
+                                </v-card>
+                            </v-window-item>
+                        </v-window>
+                    </v-main>
+                </v-layout>
             </v-card>
         </v-col>
     </v-row>
@@ -214,6 +219,8 @@
 </template>
 
 <script>
+import { useDisplay } from 'vuetify';
+
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/setting.js';
 import { useUserStore } from '@/stores/user.js';
@@ -233,6 +240,7 @@ import {
     mdiEyeOutline,
     mdiEyeOffOutline,
     mdiRefresh,
+    mdiMenu,
     mdiPencilOutline,
     mdiDeleteOutline,
     mdiListBoxOutline,
@@ -242,17 +250,22 @@ import {
 
 export default {
     data() {
+        const { mdAndUp } = useDisplay();
+
         return {
             activeAccountCategoryId: accountConstants.allCategories[0].id,
             activeTab: 'accountPage',
             activeSubAccount: {},
             loading: true,
             displayOrderModified: false,
+            alwaysShowNav: mdAndUp.value,
+            showNav: mdAndUp.value,
             showHidden: false,
             icons: {
                 eye: mdiEyeOutline,
                 eyeSlash: mdiEyeOffOutline,
                 refresh: mdiRefresh,
+                menu: mdiMenu,
                 edit: mdiPencilOutline,
                 show: mdiEyeOutline,
                 hide: mdiEyeOffOutline,
@@ -328,6 +341,22 @@ export default {
     created() {
         this.reload(false);
     },
+    setup() {
+        const display = useDisplay();
+
+        return {
+            display: display
+        };
+    },
+    watch: {
+        'display.mdAndUp.value': function (newValue) {
+            this.alwaysShowNav = newValue;
+
+            if (!this.showNav) {
+                this.showNav = newValue;
+            }
+        }
+    },
     methods: {
         reload(force) {
             const self = this;
@@ -500,17 +529,13 @@ export default {
 </script>
 
 <style>
-.accounts-summary-skeleton .v-skeleton-loader__text {
-    margin: 0;
-}
-
-.account-category-tabs .v-tab.v-tab {
+.account-category-tabs .v-tab {
     --v-btn-height: calc(var(--v-tabs-height) * 1.5);
 }
 
 .accounts-overview-title {
     line-height: 2rem !important;
-    height: 46px;
+    min-height: 52px;
     display: flex;
     align-items: flex-end;
 }
diff --git a/src/views/desktop/categories/ListPage.vue b/src/views/desktop/categories/ListPage.vue
index bed88c67..4e957603 100644
--- a/src/views/desktop/categories/ListPage.vue
+++ b/src/views/desktop/categories/ListPage.vue
@@ -2,178 +2,170 @@
     <v-row class="match-height">
         <v-col cols="12">
             <v-card>
-                <div class="d-flex flex-column flex-md-row">
-                    <div>
+                <v-layout>
+                    <v-navigation-drawer ref="navbar" :permanent="alwaysShowNav" v-model="showNav">
                         <div class="mx-6 my-4">
-                            <div class="transaction-type-buttons d-flex flex-column">
-                                <v-btn border :color="activeCategoryType === allCategoryTypes.Expense ? 'primary' : 'default'"
-                                       :variant="activeCategoryType === allCategoryTypes.Expense ? 'tonal' : 'outlined'" :disabled="loading"
-                                       @click="switchActiveCategoryType(allCategoryTypes.Expense)">
-                                    {{ $t('Expense') }}
-                                </v-btn>
-                                <v-btn border :color="activeCategoryType === allCategoryTypes.Income ? 'primary' : 'default'"
-                                       :variant="activeCategoryType === allCategoryTypes.Income  ? 'tonal' : 'outlined'" :disabled="loading"
-                                       @click="switchActiveCategoryType(allCategoryTypes.Income)">
-                                    {{ $t('Income') }}
-                                </v-btn>
-                                <v-btn border :color="activeCategoryType === allCategoryTypes.Transfer ? 'primary' : 'default'"
-                                       :variant="activeCategoryType === allCategoryTypes.Transfer ? 'tonal' : 'outlined'" :disabled="loading"
-                                       @click="switchActiveCategoryType(allCategoryTypes.Transfer)">
-                                    {{ $t('Transfer') }}
-                                </v-btn>
-                            </div>
+                            <btn-vertical-group :disabled="loading" :buttons="[
+                                { name: $t('Expense'), value: allCategoryTypes.Expense },
+                                { name: $t('Income'), value: allCategoryTypes.Income },
+                                { name: $t('Transfer'), value: allCategoryTypes.Transfer }
+                            ]" v-model="activeCategoryType" @update:modelValue="switchActiveCategoryType" />
                         </div>
                         <v-divider />
                         <v-tabs show-arrows class="my-4" direction="vertical"
                                 :disabled="loading" v-model="primaryCategoryId">
-                            <v-tab value="0" @click="primaryCategoryId = '0'">
-                                {{ $t('Primary Categories') }}
+                            <v-tab class="tab-text-truncate" value="0" @click="primaryCategoryId = '0'">
+                                <span class="text-truncate">{{ $t('Primary Categories') }}</span>
                             </v-tab>
                             <template :key="category.id" v-for="category in primaryCategories">
-                                <v-tab :value="category.id" v-if="!category.hidden"
+                                <v-tab class="tab-text-truncate" :value="category.id" v-if="!category.hidden"
                                        @click="switchPrimaryCategory(category)">
-                                    <div class="d-flex align-center">
-                                        <span>{{ category.name }}</span>
-                                    </div>
+                                    <span class="text-truncate">{{ category.name }}</span>
                                 </v-tab>
                             </template>
                             <template v-if="loading && (!primaryCategories || primaryCategories.length < 1)">
-                                <v-skeleton-loader class="transaction-primary-category-skeleton mx-5 mt-4 mb-3" type="text"
+                                <v-skeleton-loader class="skeleton-no-margin mx-5 mt-4 mb-3" type="text"
                                                    :key="itemIdx" :loading="true" v-for="itemIdx in [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]"></v-skeleton-loader>
                             </template>
                         </v-tabs>
-                    </div>
-                    <v-window class="d-flex flex-grow-1 ml-md-5 disable-tab-transition w-100-window-container" v-model="activeTab">
-                        <v-window-item value="categoryPage">
-                            <v-card variant="flat">
-                                <template #title>
-                                    <div class="d-flex align-center">
-                                        <span>{{ $t('Transaction Categories') }}</span>
-                                        <v-btn class="ml-3" color="default" variant="outlined"
-                                               :disabled="loading || updating" @click="add">{{ $t('Add') }}</v-btn>
-                                        <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-icon :icon="icons.refresh" size="24" />
-                                            <v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip>
-                                        </v-btn>
-                                        <v-progress-circular indeterminate size="24" class="ml-2" v-if="loading"></v-progress-circular>
-                                        <v-spacer/>
-                                        <v-btn density="comfortable" color="default" variant="text" class="ml-2"
-                                               :disabled="loading || updating" :icon="true">
-                                            <v-icon :icon="icons.more" />
-                                            <v-menu activator="parent">
-                                                <v-list>
-                                                    <v-list-item :prepend-icon="icons.show"
-                                                                 :title="$t('Show Hidden Transaction Category')"
-                                                                 v-if="!showHidden" @click="showHidden = true"></v-list-item>
-                                                    <v-list-item :prepend-icon="icons.hide"
-                                                                 :title="$t('Hide Hidden Transaction Category')"
-                                                                 v-if="showHidden" @click="showHidden = false"></v-list-item>
-                                                </v-list>
-                                            </v-menu>
-                                        </v-btn>
-                                    </div>
-                                </template>
+                    </v-navigation-drawer>
+                    <v-main>
+                        <v-window class="d-flex flex-grow-1 disable-tab-transition w-100-window-container" v-model="activeTab">
+                            <v-window-item value="categoryPage">
+                                <v-card variant="flat" :min-height="cardMinHeight">
+                                    <template #title>
+                                        <div class="title-and-toolbar d-flex align-center">
+                                            <v-btn class="mr-3 d-md-none" density="compact" color="default" variant="plain"
+                                                   :ripple="false" :icon="true" @click="showNav = !showNav">
+                                                <v-icon :icon="icons.menu" size="24" />
+                                            </v-btn>
+                                            <span>{{ $t('Transaction Categories') }}</span>
+                                            <v-btn class="ml-3" color="default" variant="outlined"
+                                                   :disabled="loading || updating" @click="add">{{ $t('Add') }}</v-btn>
+                                            <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-icon :icon="icons.refresh" size="24" />
+                                                <v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip>
+                                            </v-btn>
+                                            <v-progress-circular indeterminate size="24" class="ml-2" v-if="loading"></v-progress-circular>
+                                            <v-spacer/>
+                                            <v-btn density="comfortable" color="default" variant="text" class="ml-2"
+                                                   :disabled="loading || updating" :icon="true">
+                                                <v-icon :icon="icons.more" />
+                                                <v-menu activator="parent">
+                                                    <v-list>
+                                                        <v-list-item :prepend-icon="icons.show"
+                                                                     :title="$t('Show Hidden Transaction Category')"
+                                                                     v-if="!showHidden" @click="showHidden = true"></v-list-item>
+                                                        <v-list-item :prepend-icon="icons.hide"
+                                                                     :title="$t('Hide Hidden Transaction Category')"
+                                                                     v-if="showHidden" @click="showHidden = false"></v-list-item>
+                                                    </v-list>
+                                                </v-menu>
+                                            </v-btn>
+                                        </div>
+                                    </template>
 
-                                <v-table class="transaction-category-table table-striped" :hover="!loading">
-                                    <thead>
-                                    <tr>
-                                        <th class="text-uppercase">
-                                            <div class="d-flex align-center">
-                                                <span>{{ $t('Category Name') }}</span>
-                                                <v-spacer/>
-                                                <span>{{ $t('Operation') }}</span>
-                                            </div>
-                                        </th>
-                                    </tr>
-                                    </thead>
+                                    <v-table class="transaction-category-table table-striped" :hover="!loading">
+                                        <thead>
+                                        <tr>
+                                            <th class="text-uppercase">
+                                                <div class="d-flex align-center">
+                                                    <span>{{ $t('Category Name') }}</span>
+                                                    <v-spacer/>
+                                                    <span>{{ $t('Operation') }}</span>
+                                                </div>
+                                            </th>
+                                        </tr>
+                                        </thead>
 
-                                    <tbody v-if="loading && noAvailableCategory">
-                                    <tr :key="itemIdx" v-for="itemIdx in [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]">
-                                        <td class="px-0">
-                                            <v-skeleton-loader type="text" :loading="true"></v-skeleton-loader>
-                                        </td>
-                                    </tr>
-                                    </tbody>
+                                        <tbody v-if="loading && noAvailableCategory">
+                                        <tr :key="itemIdx" v-for="itemIdx in [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]">
+                                            <td class="px-0">
+                                                <v-skeleton-loader type="text" :loading="true"></v-skeleton-loader>
+                                            </td>
+                                        </tr>
+                                        </tbody>
 
-                                    <tbody v-if="!loading && noAvailableCategory">
-                                    <tr>
-                                        <td>
-                                            <div class="d-flex align-center">
-                                                <span>{{ $t('No available category') }}</span>
-                                                <v-btn class="ml-3" color="default" variant="outlined"
-                                                       @click="showPresetDialog = true"
-                                                       v-if="hasSubCategories && noCategory">
-                                                    {{ $t('Add Default Categories') }}
-                                                </v-btn>
-                                            </div>
-                                        </td>
-                                    </tr>
-                                    </tbody>
+                                        <tbody v-if="!loading && noAvailableCategory">
+                                        <tr>
+                                            <td>
+                                                <div class="d-flex align-center">
+                                                    <span>{{ $t('No available category') }}</span>
+                                                    <v-btn class="ml-3" color="default" variant="outlined"
+                                                           @click="showPresetDialog = true"
+                                                           v-if="hasSubCategories && noCategory">
+                                                        {{ $t('Add Default Categories') }}
+                                                    </v-btn>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                        </tbody>
 
-                                    <draggable-list tag="tbody"
-                                                    item-key="id"
-                                                    handle=".drag-handle"
-                                                    ghost-class="dragging-item"
-                                                    :disabled="noAvailableCategory"
-                                                    v-model="categories"
-                                                    @change="onMove">
-                                        <template #item="{ element }">
-                                            <tr class="transaction-category-table-row text-sm" v-if="showHidden || !element.hidden">
-                                                <td>
-                                                    <div class="d-flex align-center">
-                                                        <div class="d-flex align-center" :class="{ 'cursor-pointer': isCategorySupportSwitch(element) }"
-                                                             @click="switchPrimaryCategory(element)">
-                                                            <ItemIcon icon-type="category"
-                                                                      :icon-id="element.icon" :color="element.color"
-                                                                      :hidden-status="element.hidden" />
-                                                            <span class="ml-2">{{ element.name }}</span>
+                                        <draggable-list tag="tbody"
+                                                        item-key="id"
+                                                        handle=".drag-handle"
+                                                        ghost-class="dragging-item"
+                                                        :disabled="noAvailableCategory"
+                                                        v-model="categories"
+                                                        @change="onMove">
+                                            <template #item="{ element }">
+                                                <tr class="transaction-category-table-row text-sm" v-if="showHidden || !element.hidden">
+                                                    <td>
+                                                        <div class="d-flex align-center">
+                                                            <div class="d-flex align-center" :class="{ 'cursor-pointer': isCategorySupportSwitch(element) }"
+                                                                 @click="switchPrimaryCategory(element)">
+                                                                <ItemIcon icon-type="category"
+                                                                          :icon-id="element.icon" :color="element.color"
+                                                                          :hidden-status="element.hidden" />
+                                                                <span class="ml-2">{{ element.name }}</span>
+                                                            </div>
+
+                                                            <v-spacer/>
+
+                                                            <v-btn class="hover-display px-2" color="default"
+                                                                   density="comfortable" variant="text"
+                                                                   :prepend-icon="icons.edit"
+                                                                   :disabled="loading || updating"
+                                                                   @click="edit(element)">
+                                                                {{ $t('Edit') }}
+                                                            </v-btn>
+                                                            <v-btn class="hover-display px-2 ml-2" color="default"
+                                                                   density="comfortable" variant="text"
+                                                                   :prepend-icon="element.hidden ? icons.show : icons.hide"
+                                                                   :loading="categoryHiding[element.id]"
+                                                                   :disabled="loading || updating"
+                                                                   @click="hide(element, !element.hidden)">
+                                                                {{ element.hidden ? $t('Show') : $t('Hide') }}
+                                                            </v-btn>
+                                                            <v-btn class="hover-display px-2 ml-2" color="default"
+                                                                   density="comfortable" variant="text"
+                                                                   :prepend-icon="icons.remove"
+                                                                   :loading="categoryRemoving[element.id]"
+                                                                   :disabled="loading || updating"
+                                                                   @click="remove(element)">
+                                                                {{ $t('Delete') }}
+                                                            </v-btn>
+                                                            <span>
+                                                                <v-icon :class="!loading && !updating && availableCategoryCount > 1 ? 'drag-handle' : 'disabled'"
+                                                                        :icon="icons.drag"/>
+                                                                <v-tooltip activator="parent" v-if="!loading && !updating && availableCategoryCount > 1">{{ $t('Drag and Drop to Change Order') }}</v-tooltip>
+                                                            </span>
                                                         </div>
-
-                                                        <v-spacer/>
-
-                                                        <v-btn class="hover-display px-2" color="default"
-                                                               density="comfortable" variant="text"
-                                                               :prepend-icon="icons.edit"
-                                                               :disabled="loading || updating"
-                                                               @click="edit(element)">
-                                                            {{ $t('Edit') }}
-                                                        </v-btn>
-                                                        <v-btn class="hover-display px-2 ml-2" color="default"
-                                                               density="comfortable" variant="text"
-                                                               :prepend-icon="element.hidden ? icons.show : icons.hide"
-                                                               :loading="categoryHiding[element.id]"
-                                                               :disabled="loading || updating"
-                                                               @click="hide(element, !element.hidden)">
-                                                            {{ element.hidden ? $t('Show') : $t('Hide') }}
-                                                        </v-btn>
-                                                        <v-btn class="hover-display px-2 ml-2" color="default"
-                                                               density="comfortable" variant="text"
-                                                               :prepend-icon="icons.remove"
-                                                               :loading="categoryRemoving[element.id]"
-                                                               :disabled="loading || updating"
-                                                               @click="remove(element)">
-                                                            {{ $t('Delete') }}
-                                                        </v-btn>
-                                                        <span>
-                                                            <v-icon :class="!loading && !updating && availableCategoryCount > 1 ? 'drag-handle' : 'disabled'"
-                                                                    :icon="icons.drag"/>
-                                                            <v-tooltip activator="parent" v-if="!loading && !updating && availableCategoryCount > 1">{{ $t('Drag and Drop to Change Order') }}</v-tooltip>
-                                                        </span>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                        </template>
-                                    </draggable-list>
-                                </v-table>
-                            </v-card>
-                        </v-window-item>
-                    </v-window>
-                </div>
+                                                    </td>
+                                                </tr>
+                                            </template>
+                                        </draggable-list>
+                                    </v-table>
+                                </v-card>
+                            </v-window-item>
+                        </v-window>
+                    </v-main>
+                </v-layout>
             </v-card>
         </v-col>
     </v-row>
@@ -188,13 +180,17 @@
 <script>
 import PresetCategoryDialog from './list/dialogs/PresetCategoryDialog.vue';
 
+import { useDisplay } from 'vuetify';
+
 import { mapStores } from 'pinia';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
 
 import categoryConstants from '@/consts/category.js';
+import { getOuterHeight } from '@/lib/ui.desktop.js';
 
 import {
     mdiRefresh,
+    mdiMenu,
     mdiPencilOutline,
     mdiEyeOffOutline,
     mdiEyeOutline,
@@ -208,6 +204,8 @@ export default {
         PresetCategoryDialog
     },
     data() {
+        const { mdAndUp } = useDisplay();
+
         return {
             activeCategoryType: categoryConstants.allCategoryTypes.Expense,
             activeTab: 'categoryPage',
@@ -217,10 +215,14 @@ export default {
             categoryHiding: {},
             categoryRemoving: {},
             displayOrderModified: false,
+            cardMinHeight: 680,
+            alwaysShowNav: mdAndUp.value,
+            showNav: mdAndUp.value,
             showHidden: false,
             showPresetDialog: false,
             icons: {
                 refresh: mdiRefresh,
+                menu: mdiMenu,
                 edit: mdiPencilOutline,
                 show: mdiEyeOutline,
                 hide: mdiEyeOffOutline,
@@ -286,6 +288,22 @@ export default {
     created() {
         this.reload(false);
     },
+    setup() {
+        const display = useDisplay();
+
+        return {
+            display: display
+        };
+    },
+    watch: {
+        'display.mdAndUp.value': function (newValue) {
+            this.alwaysShowNav = newValue;
+
+            if (!this.showNav) {
+                this.showNav = newValue;
+            }
+        }
+    },
     methods: {
         reload(force) {
             const self = this;
@@ -301,6 +319,8 @@ export default {
                 if (force) {
                     self.$refs.snackbar.showMessage('Category list has been updated');
                 }
+
+                self.updateCardMinHeight();
             }).catch(error => {
                 self.loading = false;
 
@@ -410,13 +430,9 @@ export default {
                 this.reload(false);
             }
         },
-        switchActiveCategoryType(activeCategoryType) {
-            if (this.activeCategoryType === activeCategoryType) {
-                return;
-            }
-
-            this.activeCategoryType = activeCategoryType;
+        switchActiveCategoryType() {
             this.primaryCategoryId = '0';
+            this.updateCardMinHeight();
         },
         isCategorySupportSwitch(category) {
             if (!category || category.hidden) {
@@ -433,16 +449,25 @@ export default {
             if (!category.parentId || category.parentId === '' || category.parentId === '0') {
                 this.primaryCategoryId = category.id;
             }
+        },
+        updateCardMinHeight() {
+            const self = this
+
+            self.$nextTick(() => {
+                if (self.$refs.navbar && self.$refs.navbar.$el && self.$refs.navbar.$el.nextElementSibling) {
+                    let navbarHeight = getOuterHeight(self.$refs.navbar.$el.nextElementSibling);
+
+                    if (navbarHeight > self.cardMinHeight) {
+                        self.cardMinHeight = navbarHeight;
+                    }
+                }
+            });
         }
     }
 }
 </script>
 
 <style>
-.transaction-primary-category-skeleton .v-skeleton-loader__text {
-    margin: 0;
-}
-
 .transaction-category-table tr.transaction-category-table-row .hover-display {
     display: none;
 }
diff --git a/src/views/desktop/overview/cards/IncomeExpenseOverviewCard.vue b/src/views/desktop/overview/cards/IncomeExpenseOverviewCard.vue
index 022d6e97..44935543 100644
--- a/src/views/desktop/overview/cards/IncomeExpenseOverviewCard.vue
+++ b/src/views/desktop/overview/cards/IncomeExpenseOverviewCard.vue
@@ -17,9 +17,9 @@
         </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-skeleton-loader class="income-expense-overview-card-skeleton mt-4 mb-6" type="text" width="120px" :loading="true" v-else-if="loading && !incomeAmount"></v-skeleton-loader>
+            <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="income-expense-overview-card-skeleton mb-2" type="text" width="120px" :loading="true" v-else-if="loading && !expenseAmount"></v-skeleton-loader>
+            <v-skeleton-loader class="skeleton-no-margin mb-2" 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>
@@ -51,9 +51,3 @@ export default {
     }
 }
 </script>
-
-<style>
-.income-expense-overview-card-skeleton .v-skeleton-loader__text {
-    margin: 0;
-}
-</style>
diff --git a/src/views/desktop/statistics/TransactionPage.vue b/src/views/desktop/statistics/TransactionPage.vue
index 5d2fa059..fe10c41f 100644
--- a/src/views/desktop/statistics/TransactionPage.vue
+++ b/src/views/desktop/statistics/TransactionPage.vue
@@ -2,43 +2,36 @@
     <v-row class="match-height">
         <v-col cols="12">
             <v-card>
-                <div class="d-flex flex-column flex-md-row">
-                    <div>
+                <v-layout>
+                    <v-navigation-drawer :permanent="alwaysShowNav" v-model="showNav">
                         <div class="mx-6 my-4">
-                            <v-btn-toggle
-                                variant="outlined"
-                                color="primary"
-                                density="comfortable"
-                                mandatory="force"
-                                divided
-                                :disabled="loading"
-                                v-model="query.chartType"
-                            >
-                                <v-btn :value="allChartTypes.Pie" @click="setChartType(allChartTypes.Pie)">
-                                    {{ $t('Pie Chart') }}
-                                </v-btn>
-                                <v-btn :value="allChartTypes.Bar" @click="setChartType(allChartTypes.Bar)">
-                                    {{ $t('Bar Chart') }}
-                                </v-btn>
-                            </v-btn-toggle>
+                            <btn-vertical-group :disabled="loading" :buttons="[
+                                { name: $t('Pie Chart'), value: allChartTypes.Pie },
+                                { name: $t('Bar Chart'), value: allChartTypes.Bar }
+                            ]" v-model="query.chartType" @update:modelValue="setChartType" />
                         </div>
                         <v-divider />
                         <v-tabs show-arrows class="my-4" direction="vertical"
                                 :disabled="loading" v-model="query.chartDataType">
-                            <v-tab :key="dataType.type" :value="dataType.type"
+                            <v-tab class="tab-text-truncate" :key="dataType.type" :value="dataType.type"
                                    v-for="dataType in allChartDataTypes">
-                                {{ $t(dataType.name) }}
+                                <span class="text-truncate">{{ $t(dataType.name) }}</span>
+                                <v-tooltip activator="parent" location="right">{{ $t(dataType.name) }}</v-tooltip>
                             </v-tab>
                         </v-tabs>
-                    </div>
-                    <v-window class="d-flex flex-grow-1 ml-md-5 disable-tab-transition w-100-window-container" v-model="activeTab">
-                        <v-window-item value="statisticsPage">
-                            <v-card variant="flat">
-                                <template #title>
-                                    <div class="statistics-title d-flex align-center">
-                                        <span>{{ $t('Statistics Data') }}</span>
-                                        <div class="ml-4">
-                                            <v-btn-group color="default" density="comfortable" variant="outlined" divided>
+                    </v-navigation-drawer>
+                    <v-main>
+                        <v-window class="d-flex flex-grow-1 disable-tab-transition w-100-window-container" v-model="activeTab">
+                            <v-window-item value="statisticsPage">
+                                <v-card variant="flat" min-height="680">
+                                    <template #title>
+                                        <div class="title-and-toolbar d-flex align-center">
+                                            <v-btn class="mr-3 d-md-none" density="compact" color="default" variant="plain"
+                                                   :ripple="false" :icon="true" @click="showNav = !showNav">
+                                                <v-icon :icon="icons.menu" size="24" />
+                                            </v-btn>
+                                            <span>{{ $t('Statistics Data') }}</span>
+                                            <v-btn-group class="ml-4" color="default" density="comfortable" variant="outlined" divided>
                                                 <v-btn :icon="icons.left"
                                                        :disabled="loading || query.dateType === allDateRanges.All.type || query.chartDataType === allChartDataTypes.AccountTotalAssets.type || query.chartDataType === allChartDataTypes.AccountTotalLiabilities.type"
                                                        @click="shiftDateRange(query.startTime, query.endTime, -1)"/>
@@ -90,108 +83,108 @@
                                                     </v-list-item>
                                                 </v-list>
                                             </v-menu>
+                                            <v-btn density="compact" color="default" variant="text"
+                                                   class="ml-2" :icon="true" :disabled="loading"
+                                                   v-if="!loading" @click="reload">
+                                                <v-icon :icon="icons.refresh" size="24" />
+                                                <v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip>
+                                            </v-btn>
+                                            <v-progress-circular indeterminate size="24" class="ml-2" v-if="loading"></v-progress-circular>
+                                            <v-spacer/>
+                                            <v-btn density="comfortable" color="default" variant="text" class="ml-2"
+                                                   :disabled="loading" :icon="true">
+                                                <v-icon :icon="icons.more" />
+                                                <v-menu activator="parent">
+                                                    <v-list>
+                                                        <v-list-item :prepend-icon="icons.filter"
+                                                                     :title="$t('Filter Accounts')"
+                                                                     @click="showFilterAccountDialog = true"></v-list-item>
+                                                        <v-list-item :prepend-icon="icons.filter"
+                                                                     :title="$t('Filter Transaction Categories')"
+                                                                     @click="showFilterCategoryDialog = true"></v-list-item>
+                                                        <v-divider class="my-2"/>
+                                                        <v-list-item to="/app/settings?tab=statisticsSetting"
+                                                                     :prepend-icon="icons.filterSettings"
+                                                                     :title="$t('Settings')"></v-list-item>
+                                                    </v-list>
+                                                </v-menu>
+                                            </v-btn>
                                         </div>
-                                        <v-btn density="compact" color="default" variant="text"
-                                               class="ml-2" :icon="true" :disabled="loading"
-                                               v-if="!loading" @click="reload">
-                                            <v-icon :icon="icons.refresh" size="24" />
-                                            <v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip>
-                                        </v-btn>
-                                        <v-progress-circular indeterminate size="24" class="ml-2" v-if="loading"></v-progress-circular>
-                                        <v-spacer/>
-                                        <v-btn density="comfortable" color="default" variant="text" class="ml-2"
-                                               :disabled="loading" :icon="true">
-                                            <v-icon :icon="icons.more" />
-                                            <v-menu activator="parent">
-                                                <v-list>
-                                                    <v-list-item :prepend-icon="icons.filter"
-                                                                 :title="$t('Filter Accounts')"
-                                                                 @click="showFilterAccountDialog = true"></v-list-item>
-                                                    <v-list-item :prepend-icon="icons.filter"
-                                                                 :title="$t('Filter Transaction Categories')"
-                                                                 @click="showFilterCategoryDialog = true"></v-list-item>
-                                                    <v-divider class="my-2"/>
-                                                    <v-list-item to="/app/settings?tab=statisticsSetting"
-                                                                 :prepend-icon="icons.filterSettings"
-                                                                 :title="$t('Settings')"></v-list-item>
-                                                </v-list>
-                                            </v-menu>
-                                        </v-btn>
+                                    </template>
+
+                                    <div v-if="initing">
+                                        <v-skeleton-loader type="paragraph" :loading="initing"
+                                                           :key="itemIdx" v-for="itemIdx in [ 1, 2, 3, 4 ]"></v-skeleton-loader>
                                     </div>
-                                </template>
 
-                                <div v-if="initing">
-                                    <v-skeleton-loader type="paragraph" :loading="initing"
-                                                       :key="itemIdx" v-for="itemIdx in [ 1, 2, 3, 4 ]"></v-skeleton-loader>
-                                </div>
+                                    <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-overview-amount ml-3" :class="statisticsTextColor">
+                                            {{ getDisplayAmount(statisticsData.totalAmount, defaultCurrency) }}
+                                        </span>
+                                    </v-card-text>
 
-                                <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-overview-amount ml-3" :class="statisticsTextColor">
-                                        {{ getDisplayAmount(statisticsData.totalAmount, defaultCurrency) }}
-                                    </span>
-                                </v-card-text>
+                                    <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>
+                                    </v-card-text>
 
-                                <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>
-                                </v-card-text>
+                                    <v-card-text :class="{ 'readonly': loading }" v-if="!initing && query.chartType === allChartTypes.Pie">
+                                        <pie-chart
+                                            :items="statisticsData && statisticsData.items && statisticsData.items.length ? statisticsData.items : []"
+                                            :min-valid-percent="0.0001"
+                                            :show-value="showAmountInChart"
+                                            :enable-click-item="true"
+                                            :default-currency="defaultCurrency"
+                                            id-field="id"
+                                            name-field="name"
+                                            value-field="totalAmount"
+                                            percent-field="percent"
+                                            currency-field="currency"
+                                            hidden-field="hidden"
+                                            @click="clickPieChartItem"
+                                        />
+                                    </v-card-text>
 
-                                <v-card-text :class="{ 'readonly': loading }" v-if="!initing && query.chartType === allChartTypes.Pie">
-                                    <pie-chart
-                                        :items="statisticsData && statisticsData.items && statisticsData.items.length ? statisticsData.items : []"
-                                        :min-valid-percent="0.0001"
-                                        :show-value="showAmountInChart"
-                                        :enable-click-item="true"
-                                        :default-currency="defaultCurrency"
-                                        id-field="id"
-                                        name-field="name"
-                                        value-field="totalAmount"
-                                        percent-field="percent"
-                                        currency-field="currency"
-                                        hidden-field="hidden"
-                                        @click="clickPieChartItem"
-                                    />
-                                </v-card-text>
-
-                                <v-card-text :class="{ 'readonly': loading }" v-if="!initing && query.chartType === allChartTypes.Bar">
-                                    <v-list rounded lines="two"
-                                            v-if="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">
-                                                <template #prepend>
+                                    <v-card-text :class="{ 'readonly': loading }" v-if="!initing && query.chartType === allChartTypes.Bar">
+                                        <v-list rounded lines="two"
+                                                v-if="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">
+                                                    <template #prepend>
+                                                        <router-link class="statistics-list-item" :to="getItemLinkUrl(item)">
+                                                            <ItemIcon :icon-type="queryChartDataCategory" size="34px"
+                                                                      :icon-id="item.icon"
+                                                                      :color="item.color"></ItemIcon>
+                                                        </router-link>
+                                                    </template>
                                                     <router-link class="statistics-list-item" :to="getItemLinkUrl(item)">
-                                                        <ItemIcon :icon-type="queryChartDataCategory" size="34px"
-                                                                  :icon-id="item.icon"
-                                                                  :color="item.color"></ItemIcon>
+                                                        <div class="d-flex flex-column ml-2">
+                                                            <div class="d-flex">
+                                                                <span>{{ item.name }}</span>
+                                                                <small class="statistics-percent" v-if="item.percent >= 0">{{ getDisplayPercent(item.percent, 2, '&lt;0.01') }}</small>
+                                                                <v-spacer/>
+                                                                <span class="statistics-amount">{{ getDisplayAmount(item.totalAmount, (item.currency || defaultCurrency)) }}</span>
+                                                            </div>
+                                                            <div>
+                                                                <v-progress-linear :color="item.color ? '#' + item.color : 'primary'"
+                                                                                   :model-value="item.percent >= 0 ? item.percent : 0"
+                                                                                   :height="4"></v-progress-linear>
+                                                            </div>
+                                                        </div>
                                                     </router-link>
-                                                </template>
-                                                <router-link class="statistics-list-item" :to="getItemLinkUrl(item)">
-                                                    <div class="d-flex flex-column ml-2">
-                                                        <div class="d-flex">
-                                                            <span>{{ item.name }}</span>
-                                                            <small class="statistics-percent" v-if="item.percent >= 0">{{ getDisplayPercent(item.percent, 2, '&lt;0.01') }}</small>
-                                                            <v-spacer/>
-                                                            <span class="statistics-amount">{{ getDisplayAmount(item.totalAmount, (item.currency || defaultCurrency)) }}</span>
-                                                        </div>
-                                                        <div>
-                                                            <v-progress-linear :color="item.color ? '#' + item.color : 'primary'"
-                                                                               :model-value="item.percent >= 0 ? item.percent : 0"
-                                                                               :height="4"></v-progress-linear>
-                                                        </div>
-                                                    </div>
-                                                </router-link>
-                                            </v-list-item>
-                                            <v-divider v-if="!item.hidden && idx !== statisticsData.items.length - 1"/>
-                                        </template>
-                                    </v-list>
-                                </v-card-text>
-                            </v-card>
-                        </v-window-item>
-                    </v-window>
-                </div>
+                                                </v-list-item>
+                                                <v-divider v-if="!item.hidden && idx !== statisticsData.items.length - 1"/>
+                                            </template>
+                                        </v-list>
+                                    </v-card-text>
+                                </v-card>
+                            </v-window-item>
+                        </v-window>
+                    </v-main>
+                </v-layout>
             </v-card>
         </v-col>
     </v-row>
@@ -218,6 +211,8 @@
 </template>
 
 <script>
+import { useDisplay } from 'vuetify';
+
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/setting.js';
 import { useUserStore } from '@/stores/user.js';
@@ -239,6 +234,7 @@ import {
     mdiArrowRight,
     mdiSort,
     mdiRefresh,
+    mdiMenu,
     mdiFilterOutline,
     mdiFilterCogOutline,
     mdiPencilOutline,
@@ -254,10 +250,14 @@ export default {
         CategoryFilterSettingsCard
     },
     data() {
+        const { mdAndUp } = useDisplay();
+
         return {
             activeTab: 'statisticsPage',
             initing: true,
             loading: true,
+            alwaysShowNav: mdAndUp.value,
+            showNav: mdAndUp.value,
             showCustomDateRangeDialog: false,
             showFilterAccountDialog: false,
             showFilterCategoryDialog: false,
@@ -267,6 +267,7 @@ export default {
                 right: mdiArrowRight,
                 sort: mdiSort,
                 refresh: mdiRefresh,
+                menu: mdiMenu,
                 filter: mdiFilterOutline,
                 filterSettings: mdiFilterCogOutline,
                 pencil: mdiPencilOutline,
@@ -360,6 +361,13 @@ export default {
             this.statisticsStore.updateTransactionStatisticsFilter({
                 chartDataType: newValue
             });
+        },
+        'display.mdAndUp.value': function (newValue) {
+            this.alwaysShowNav = newValue;
+
+            if (!this.showNav) {
+                this.showNav = newValue;
+            }
         }
     },
     created() {
@@ -386,6 +394,13 @@ export default {
             }
         });
     },
+    setup() {
+        const display = useDisplay();
+
+        return {
+            display: display
+        };
+    },
     methods: {
         reload(force) {
             const self = this;
@@ -537,11 +552,6 @@ export default {
 </script>
 
 <style>
-.statistics-title {
-    overflow-x: auto;
-    white-space: nowrap;
-}
-
 .statistics-custom-datetime-range {
     font-size: 0.7rem;
     color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity)) !important;
diff --git a/src/views/desktop/tags/ListPage.vue b/src/views/desktop/tags/ListPage.vue
index 7c9d7d68..f14d7fd0 100644
--- a/src/views/desktop/tags/ListPage.vue
+++ b/src/views/desktop/tags/ListPage.vue
@@ -3,7 +3,7 @@
         <v-col cols="12">
             <v-card>
                 <template #title>
-                    <div class="d-flex align-center">
+                    <div class="title-and-toolbar d-flex align-center">
                         <span>{{ $t('Transaction Tags') }}</span>
                         <v-btn class="ml-3" color="default" variant="outlined"
                                :disabled="loading || updating || hasEditingTag" @click="add">{{ $t('Add') }}</v-btn>
diff --git a/src/views/desktop/transactions/ListPage.vue b/src/views/desktop/transactions/ListPage.vue
index a849936c..d5478af7 100644
--- a/src/views/desktop/transactions/ListPage.vue
+++ b/src/views/desktop/transactions/ListPage.vue
@@ -2,321 +2,307 @@
     <v-row class="match-height">
         <v-col cols="12">
             <v-card>
-                <div class="d-flex flex-column flex-md-row">
-                    <div>
+                <v-layout>
+                    <v-navigation-drawer :permanent="alwaysShowNav" v-model="showNav">
                         <div class="mx-6 my-4">
-                            <div class="transaction-type-buttons d-flex flex-column">
-                                <v-btn border :color="query.type === 0 ? 'primary' : 'default'"
-                                       :variant="query.type === 0 ? 'tonal' : 'outlined'" :disabled="loading"
-                                       @click="changeTypeFilter(0)">
-                                    {{ $t('All Types') }}
-                                </v-btn>
-                                <v-btn border :color="query.type === 1 ? 'primary' : 'default'"
-                                       :variant="query.type === 1 ? 'tonal' : 'outlined'" :disabled="loading"
-                                       @click="changeTypeFilter(1)">
-                                    {{ $t('Modify Balance') }}
-                                </v-btn>
-                                <v-btn border :color="query.type === 2 ? 'primary' : 'default'"
-                                       :variant="query.type === 2 ? 'tonal' : 'outlined'" :disabled="loading"
-                                       @click="changeTypeFilter(2)">
-                                    {{ $t('Income') }}
-                                </v-btn>
-                                <v-btn border :color="query.type === 3 ? 'primary' : 'default'"
-                                       :variant="query.type === 3 ? 'tonal' : 'outlined'" :disabled="loading"
-                                       @click="changeTypeFilter(3)">
-                                    {{ $t('Expense') }}
-                                </v-btn>
-                                <v-btn border :color="query.type === 4 ? 'primary' : 'default'"
-                                       :variant="query.type === 4 ? 'tonal' : 'outlined'" :disabled="loading"
-                                       @click="changeTypeFilter(4)">
-                                    {{ $t('Transfer') }}
-                                </v-btn>
-                            </div>
+                            <btn-vertical-group :disabled="loading" :buttons="[
+                                { name: $t('All Types'), value: 0 },
+                                { name: $t('Modify Balance'), value: 1 },
+                                { name: $t('Income'), value: 2 },
+                                { name: $t('Expense'), value: 3 },
+                                { name: $t('Transfer'), value: 4 }
+                            ]" v-model="query.type" @update:modelValue="changeTypeFilter" />
                         </div>
                         <v-divider />
                         <v-tabs show-arrows class="my-4" direction="vertical"
                                 :disabled="loading" v-model="recentDateRangeType">
-                            <v-tab :key="idx" :value="idx" v-for="(recentDateRange, idx) in recentMonthDateRanges"
+                            <v-tab class="tab-text-truncate" :key="idx" :value="idx" v-for="(recentDateRange, idx) in recentMonthDateRanges"
                                    @click="changeDateFilter(recentDateRange)">
-                                {{ recentDateRange.displayName }}
+                                <span class="text-truncate">{{ recentDateRange.displayName }}</span>
                             </v-tab>
                         </v-tabs>
-                    </div>
-                    <v-window class="d-flex flex-grow-1 ml-md-5 disable-tab-transition w-100-window-container" v-model="activeTab">
-                        <v-window-item value="transactionPage">
-                            <v-card variant="flat">
-                                <template #title>
-                                    <div class="transaction-list-title d-flex align-center text-no-wrap">
-                                        <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-icon :icon="icons.refresh" size="24" />
-                                            <v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip>
-                                        </v-btn>
-                                        <v-progress-circular indeterminate size="24" class="ml-2" v-if="loading"></v-progress-circular>
-                                        <v-spacer/>
-                                        <div class="transaction-keyword-filter ml-2">
-                                            <v-text-field density="compact" :disabled="loading"
-                                                          :prepend-inner-icon="icons.search"
-                                                          :append-inner-icon="searchKeyword !== query.keyword ? icons.check : null"
-                                                          :placeholder="$t('Search transaction description')"
-                                                          v-model="searchKeyword"
-                                                          @click:append-inner="changeKeywordFilter(searchKeyword)"
-                                                          @keyup.enter="changeKeywordFilter(searchKeyword)"
-                                            />
+                    </v-navigation-drawer>
+                    <v-main>
+                        <v-window class="d-flex flex-grow-1 disable-tab-transition w-100-window-container" v-model="activeTab">
+                            <v-window-item value="transactionPage">
+                                <v-card variant="flat" min-height="830">
+                                    <template #title>
+                                        <div class="title-and-toolbar d-flex align-center text-no-wrap">
+                                            <v-btn class="mr-3 d-md-none" density="compact" color="default" variant="plain"
+                                                   :ripple="false" :icon="true" @click="showNav = !showNav">
+                                                <v-icon :icon="icons.menu" size="24" />
+                                            </v-btn>
+                                            <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-icon :icon="icons.refresh" size="24" />
+                                                <v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip>
+                                            </v-btn>
+                                            <v-progress-circular indeterminate size="24" class="ml-2" v-if="loading"></v-progress-circular>
+                                            <v-spacer/>
+                                            <div class="transaction-keyword-filter ml-2">
+                                                <v-text-field density="compact" :disabled="loading"
+                                                              :prepend-inner-icon="icons.search"
+                                                              :append-inner-icon="searchKeyword !== query.keyword ? icons.check : null"
+                                                              :placeholder="$t('Search transaction description')"
+                                                              v-model="searchKeyword"
+                                                              @click:append-inner="changeKeywordFilter(searchKeyword)"
+                                                              @keyup.enter="changeKeywordFilter(searchKeyword)"
+                                                />
+                                            </div>
                                         </div>
-                                    </div>
-                                </template>
+                                    </template>
 
-                                <v-card-text class="pt-0">
-                                    <div class="transaction-list-datetime-range d-flex align-center">
-                                        <span class="text-body-1">{{ $t('Date Range') }}</span>
-                                        <span class="text-body-1 transaction-list-datetime-range-text ml-2">
-                                            <span v-if="!this.query.minTime && !this.query.maxTime">{{ $t('All') }}</span>
-                                            <span v-else-if="this.query.minTime || this.query.maxTime">{{ `${queryMinTime} - ${queryMaxTime}` }}</span>
-                                        </span>
-                                        <v-spacer/>
-                                        <div class="transaction-list-total-amount-text d-flex align-center" v-if="showTotalAmountInTransactionListPage && currentMonthTotalAmount">
-                                            <span class="ml-2 text-subtitle-1">{{ $t('Total Income') }}</span>
-                                            <span class="text-income ml-2" v-if="loading">
-                                                <v-skeleton-loader type="text" style="width: 60px" :loading="true"></v-skeleton-loader>
-                                            </span>
-                                            <span class="text-income ml-2" v-else-if="!loading">
-                                                {{ currentMonthTotalAmount.income }}
-                                            </span>
-                                            <span class="text-subtitle-1 ml-3">{{ $t('Total Expense') }}</span>
-                                            <span class="text-income ml-2" v-if="loading">
-                                                <v-skeleton-loader type="text" style="width: 60px" :loading="true"></v-skeleton-loader>
-                                            </span>
-                                            <span class="text-expense ml-2" v-else-if="!loading">
-                                                {{ currentMonthTotalAmount.expense }}
+                                    <v-card-text class="pt-0">
+                                        <div class="transaction-list-datetime-range d-flex align-center">
+                                            <span class="text-body-1">{{ $t('Date Range') }}</span>
+                                            <span class="text-body-1 transaction-list-datetime-range-text ml-2">
+                                                <span class="text-sm" v-if="!this.query.minTime && !this.query.maxTime">{{ $t('All') }}</span>
+                                                <span class="text-sm" v-else-if="this.query.minTime || this.query.maxTime">{{ `${queryMinTime} - ${queryMaxTime}` }}</span>
                                             </span>
+                                            <v-spacer/>
+                                            <div class="skeleton-no-margin d-flex align-center" v-if="showTotalAmountInTransactionListPage && currentMonthTotalAmount">
+                                                <span class="ml-2 text-subtitle-1">{{ $t('Total Income') }}</span>
+                                                <span class="text-income ml-2" v-if="loading">
+                                                    <v-skeleton-loader type="text" style="width: 60px" :loading="true"></v-skeleton-loader>
+                                                </span>
+                                                <span class="text-income ml-2" v-else-if="!loading">
+                                                    {{ currentMonthTotalAmount.income }}
+                                                </span>
+                                                <span class="text-subtitle-1 ml-3">{{ $t('Total Expense') }}</span>
+                                                <span class="text-income ml-2" v-if="loading">
+                                                    <v-skeleton-loader type="text" style="width: 60px" :loading="true"></v-skeleton-loader>
+                                                </span>
+                                                <span class="text-expense ml-2" v-else-if="!loading">
+                                                    {{ currentMonthTotalAmount.expense }}
+                                                </span>
+                                            </div>
                                         </div>
-                                    </div>
-                                </v-card-text>
+                                    </v-card-text>
 
-                                <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">
-                                            <v-menu ref="categoryFilterMenu" class="transaction-category-menu"
-                                                    eager location="bottom" max-height="500"
-                                                    :disabled="query.type === 1"
-                                                    :close-on-content-click="false"
-                                                    @update:model-value="scrollCategoryMenuToSelectedItem">
-                                                <template #activator="{ props }">
-                                                    <div class="d-flex align-center"
-                                                        :class="{ 'readonly': loading, 'cursor-pointer': query.type !== 1, 'text-primary': query.categoryId > 0 }" v-bind="props">
-                                                        <span>{{ queryCategoryName }}</span>
-                                                        <v-icon :icon="icons.dropdownMenu" v-show="query.type !== 1" />
-                                                    </div>
-                                                </template>
-                                                <v-list :selected="[query.categoryId]">
-                                                    <v-list-item key="0" value="0" class="text-sm" density="compact"
-                                                                 :class="{ 'list-item-selected': query.categoryId === '0' }"
-                                                                 :append-icon="(query.categoryId === '0' ? icons.check : null)">
-                                                        <v-list-item-title class="cursor-pointer"
-                                                                           @click="changeCategoryFilter('0')">
-                                                            <div class="d-flex align-center">
-                                                                <v-icon :icon="icons.all" />
-                                                                <span class="text-sm ml-3">{{ $t('All') }}</span>
-                                                            </div>
-                                                        </v-list-item-title>
-                                                    </v-list-item>
-
-                                                    <template :key="categoryType"
-                                                              v-for="(categories, categoryType) in allPrimaryCategories">
-                                                        <v-list-item density="compact">
-                                                            <v-list-item-title>
-                                                                <span class="text-sm">{{ getTransactionTypeName(getTransactionTypeFromCategoryType(categoryType), 'Type') }}</span>
-                                                            </v-list-item-title>
-                                                        </v-list-item>
-
-                                                        <v-list-group :key="category.id" v-for="category in categories">
-                                                            <template #activator="{ props }" v-if="!category.hidden">
-                                                                <v-divider />
-                                                                <v-list-item class="text-sm" density="compact"
-                                                                             :class="getCategoryListItemCheckedClass(category, query.categoryId)"
-                                                                             v-bind="props">
-                                                                    <v-list-item-title>
-                                                                        <div class="d-flex align-center">
-                                                                            <ItemIcon icon-type="category" size="24px" :icon-id="category.icon" :color="category.color"></ItemIcon>
-                                                                            <span class="text-sm ml-3">{{ category.name }}</span>
-                                                                        </div>
-                                                                    </v-list-item-title>
-                                                                </v-list-item>
-                                                            </template>
-
-                                                            <v-divider />
-                                                            <v-list-item class="text-sm" density="compact"
-                                                                         :value="category.id"
-                                                                         :append-icon="(query.categoryId === category.id ? icons.check : null)">
-                                                                <v-list-item-title class="cursor-pointer"
-                                                                                   @click="changeCategoryFilter(category.id)">
-                                                                    <div class="d-flex align-center">
-                                                                        <v-icon :icon="icons.all" />
-                                                                        <span class="text-sm ml-3">{{ $t('All') }}</span>
-                                                                    </div>
-                                                                </v-list-item-title>
-                                                            </v-list-item>
-
-                                                            <template :key="subCategory.id"
-                                                                      v-for="subCategory in category.subCategories">
-                                                                <v-divider v-if="!subCategory.hidden" />
-                                                                <v-list-item class="text-sm" density="compact"
-                                                                             :value="subCategory.id"
-                                                                             :class="{ 'list-item-selected': query.categoryId === subCategory.id }"
-                                                                             :append-icon="(query.categoryId === subCategory.id ? icons.check : null)"
-                                                                             v-if="!subCategory.hidden">
-                                                                    <v-list-item-title class="cursor-pointer"
-                                                                                       @click="changeCategoryFilter(subCategory.id)">
-                                                                        <div class="d-flex align-center">
-                                                                            <ItemIcon icon-type="category" size="24px" :icon-id="subCategory.icon" :color="subCategory.color"></ItemIcon>
-                                                                            <span class="text-sm ml-3">{{ subCategory.name }}</span>
-                                                                        </div>
-                                                                    </v-list-item-title>
-                                                                </v-list-item>
-                                                            </template>
-                                                        </v-list-group>
+                                    <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">
+                                                <v-menu ref="categoryFilterMenu" class="transaction-category-menu"
+                                                        eager location="bottom" max-height="500"
+                                                        :disabled="query.type === 1"
+                                                        :close-on-content-click="false"
+                                                        @update:model-value="scrollCategoryMenuToSelectedItem">
+                                                    <template #activator="{ props }">
+                                                        <div class="d-flex align-center"
+                                                            :class="{ 'readonly': loading, 'cursor-pointer': query.type !== 1, 'text-primary': query.categoryId > 0 }" v-bind="props">
+                                                            <span>{{ queryCategoryName }}</span>
+                                                            <v-icon :icon="icons.dropdownMenu" v-show="query.type !== 1" />
+                                                        </div>
                                                     </template>
-                                                </v-list>
-                                            </v-menu>
-                                        </th>
-                                        <th class="transaction-table-column-amount text-uppercase">{{ $t('Amount') }}</th>
-                                        <th class="transaction-table-column-account text-uppercase">
-                                            <v-menu ref="accountFilterMenu" class="transaction-account-menu"
-                                                    eager location="bottom" max-height="500"
-                                                    @update:model-value="scrollAccountMenuToSelectedItem">
-                                                <template #activator="{ props }">
-                                                    <div class="d-flex align-center cursor-pointer"
-                                                         :class="{ 'readonly': loading, 'text-primary': query.accountId > 0 }" v-bind="props">
-                                                        <span>{{ queryAccountName }}</span>
-                                                        <v-icon :icon="icons.dropdownMenu" />
-                                                    </div>
-                                                </template>
-                                                <v-list :selected="[query.accountId]">
-                                                    <v-list-item key="0" value="0" class="text-sm" density="compact"
-                                                                 :class="{ 'list-item-selected': query.accountId === '0' }"
-                                                                 :append-icon="(query.accountId === '0' ? icons.check : null)">
-                                                        <v-list-item-title class="cursor-pointer"
-                                                                           @click="changeAccountFilter('0')">
-                                                            <div class="d-flex align-center">
-                                                                <v-icon :icon="icons.all" />
-                                                                <span class="text-sm ml-3">{{ $t('All') }}</span>
-                                                            </div>
-                                                        </v-list-item-title>
-                                                    </v-list-item>
-                                                    <template :key="account.id"
-                                                              v-for="account in allAccounts">
-                                                        <v-divider v-if="!account.hidden" />
-                                                        <v-list-item class="text-sm" density="compact"
-                                                                     :value="account.id"
-                                                                     :class="{ 'list-item-selected': query.accountId === account.id }"
-                                                                     :append-icon="(query.accountId === account.id ? icons.check : null)"
-                                                                     v-if="!account.hidden">
+                                                    <v-list :selected="[query.categoryId]">
+                                                        <v-list-item key="0" value="0" class="text-sm" density="compact"
+                                                                     :class="{ 'list-item-selected': query.categoryId === '0' }"
+                                                                     :append-icon="(query.categoryId === '0' ? icons.check : null)">
                                                             <v-list-item-title class="cursor-pointer"
-                                                                               @click="changeAccountFilter(account.id)">
+                                                                               @click="changeCategoryFilter('0')">
                                                                 <div class="d-flex align-center">
-                                                                    <ItemIcon icon-type="account" size="24px" :icon-id="account.icon" :color="account.color"></ItemIcon>
-                                                                    <span class="text-sm ml-3">{{ account.name }}</span>
+                                                                    <v-icon :icon="icons.all" />
+                                                                    <span class="text-sm ml-3">{{ $t('All') }}</span>
                                                                 </div>
                                                             </v-list-item-title>
                                                         </v-list-item>
+
+                                                        <template :key="categoryType"
+                                                                  v-for="(categories, categoryType) in allPrimaryCategories">
+                                                            <v-list-item density="compact">
+                                                                <v-list-item-title>
+                                                                    <span class="text-sm">{{ getTransactionTypeName(getTransactionTypeFromCategoryType(categoryType), 'Type') }}</span>
+                                                                </v-list-item-title>
+                                                            </v-list-item>
+
+                                                            <v-list-group :key="category.id" v-for="category in categories">
+                                                                <template #activator="{ props }" v-if="!category.hidden">
+                                                                    <v-divider />
+                                                                    <v-list-item class="text-sm" density="compact"
+                                                                                 :class="getCategoryListItemCheckedClass(category, query.categoryId)"
+                                                                                 v-bind="props">
+                                                                        <v-list-item-title>
+                                                                            <div class="d-flex align-center">
+                                                                                <ItemIcon icon-type="category" size="24px" :icon-id="category.icon" :color="category.color"></ItemIcon>
+                                                                                <span class="text-sm ml-3">{{ category.name }}</span>
+                                                                            </div>
+                                                                        </v-list-item-title>
+                                                                    </v-list-item>
+                                                                </template>
+
+                                                                <v-divider />
+                                                                <v-list-item class="text-sm" density="compact"
+                                                                             :value="category.id"
+                                                                             :append-icon="(query.categoryId === category.id ? icons.check : null)">
+                                                                    <v-list-item-title class="cursor-pointer"
+                                                                                       @click="changeCategoryFilter(category.id)">
+                                                                        <div class="d-flex align-center">
+                                                                            <v-icon :icon="icons.all" />
+                                                                            <span class="text-sm ml-3">{{ $t('All') }}</span>
+                                                                        </div>
+                                                                    </v-list-item-title>
+                                                                </v-list-item>
+
+                                                                <template :key="subCategory.id"
+                                                                          v-for="subCategory in category.subCategories">
+                                                                    <v-divider v-if="!subCategory.hidden" />
+                                                                    <v-list-item class="text-sm" density="compact"
+                                                                                 :value="subCategory.id"
+                                                                                 :class="{ 'list-item-selected': query.categoryId === subCategory.id }"
+                                                                                 :append-icon="(query.categoryId === subCategory.id ? icons.check : null)"
+                                                                                 v-if="!subCategory.hidden">
+                                                                        <v-list-item-title class="cursor-pointer"
+                                                                                           @click="changeCategoryFilter(subCategory.id)">
+                                                                            <div class="d-flex align-center">
+                                                                                <ItemIcon icon-type="category" size="24px" :icon-id="subCategory.icon" :color="subCategory.color"></ItemIcon>
+                                                                                <span class="text-sm ml-3">{{ subCategory.name }}</span>
+                                                                            </div>
+                                                                        </v-list-item-title>
+                                                                    </v-list-item>
+                                                                </template>
+                                                            </v-list-group>
+                                                        </template>
+                                                    </v-list>
+                                                </v-menu>
+                                            </th>
+                                            <th class="transaction-table-column-amount text-uppercase">{{ $t('Amount') }}</th>
+                                            <th class="transaction-table-column-account text-uppercase">
+                                                <v-menu ref="accountFilterMenu" class="transaction-account-menu"
+                                                        eager location="bottom" max-height="500"
+                                                        @update:model-value="scrollAccountMenuToSelectedItem">
+                                                    <template #activator="{ props }">
+                                                        <div class="d-flex align-center cursor-pointer"
+                                                             :class="{ 'readonly': loading, 'text-primary': query.accountId > 0 }" v-bind="props">
+                                                            <span>{{ queryAccountName }}</span>
+                                                            <v-icon :icon="icons.dropdownMenu" />
+                                                        </div>
                                                     </template>
-                                                </v-list>
-                                            </v-menu>
-                                        </th>
-                                        <th class="transaction-table-column-description text-uppercase">{{ $t('Description') }}</th>
-                                    </tr>
-                                    </thead>
+                                                    <v-list :selected="[query.accountId]">
+                                                        <v-list-item key="0" value="0" class="text-sm" density="compact"
+                                                                     :class="{ 'list-item-selected': query.accountId === '0' }"
+                                                                     :append-icon="(query.accountId === '0' ? icons.check : null)">
+                                                            <v-list-item-title class="cursor-pointer"
+                                                                               @click="changeAccountFilter('0')">
+                                                                <div class="d-flex align-center">
+                                                                    <v-icon :icon="icons.all" />
+                                                                    <span class="text-sm ml-3">{{ $t('All') }}</span>
+                                                                </div>
+                                                            </v-list-item-title>
+                                                        </v-list-item>
+                                                        <template :key="account.id"
+                                                                  v-for="account in allAccounts">
+                                                            <v-divider v-if="!account.hidden" />
+                                                            <v-list-item class="text-sm" density="compact"
+                                                                         :value="account.id"
+                                                                         :class="{ 'list-item-selected': query.accountId === account.id }"
+                                                                         :append-icon="(query.accountId === account.id ? icons.check : null)"
+                                                                         v-if="!account.hidden">
+                                                                <v-list-item-title class="cursor-pointer"
+                                                                                   @click="changeAccountFilter(account.id)">
+                                                                    <div class="d-flex align-center">
+                                                                        <ItemIcon icon-type="account" size="24px" :icon-id="account.icon" :color="account.color"></ItemIcon>
+                                                                        <span class="text-sm ml-3">{{ account.name }}</span>
+                                                                    </div>
+                                                                </v-list-item-title>
+                                                            </v-list-item>
+                                                        </template>
+                                                    </v-list>
+                                                </v-menu>
+                                            </th>
+                                            <th class="transaction-table-column-description text-uppercase">{{ $t('Description') }}</th>
+                                        </tr>
+                                        </thead>
 
-                                    <tbody v-if="loading && (!transactions || !transactions.length || transactions.length < 1)">
-                                    <tr :key="itemIdx" v-for="itemIdx in [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 ]">
-                                        <td class="px-0" colspan="5">
-                                            <v-skeleton-loader type="text" :loading="true"></v-skeleton-loader>
-                                        </td>
-                                    </tr>
-                                    </tbody>
-
-                                    <tbody v-if="!loading && (!transactions || !transactions.length || transactions.length < 1)">
-                                    <tr>
-                                        <td colspan="5">{{ $t('No transaction data') }}</td>
-                                    </tr>
-                                    </tbody>
-
-                                    <tbody :key="transaction.id"
-                                           :class="{ 'disabled': loading, 'has-bottom-border': idx < transactions.length - 1 }"
-                                           v-for="(transaction, idx) in transactions">
-                                        <tr class="transaction-list-row-date no-hover text-sm"
-                                            v-if="idx === 0 || (idx > 0 && (transaction.date !== transactions[idx - 1].date))">
-                                            <td colspan="5" class="font-weight-bold">
-                                                <div class="d-flex align-center">
-                                                    <span>{{ getLongDate(transaction) }}</span>
-                                                    <v-chip class="ml-1" color="default" size="x-small">
-                                                        {{ getWeekdayLongName(transaction) }}
-                                                    </v-chip>
-                                                </div>
+                                        <tbody v-if="loading && (!transactions || !transactions.length || transactions.length < 1)">
+                                        <tr :key="itemIdx" v-for="itemIdx in [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 ]">
+                                            <td class="px-0" colspan="5">
+                                                <v-skeleton-loader type="text" :loading="true"></v-skeleton-loader>
                                             </td>
                                         </tr>
-                                        <tr class="transaction-table-row-data text-sm cursor-pointer"
-                                            @click="show(transaction)">
-                                            <td class="transaction-table-column-time">
-                                                <div class="d-flex flex-column">
-                                                    <span>{{ getDisplayTime(transaction) }}</span>
-                                                    <span class="text-caption" v-if="transaction.utcOffset !== currentTimezoneOffsetMinutes">{{ getDisplayTimezone(transaction) }}</span>
-                                                </div>
-                                            </td>
-                                            <td class="transaction-table-column-category">
-                                                <div class="d-flex align-center">
-                                                    <ItemIcon size="24px" icon-type="category"
-                                                              :icon-id="transaction.category.icon"
-                                                              :color="transaction.category.color"
-                                                              v-if="transaction.category && transaction.category.color"></ItemIcon>
-                                                    <v-icon size="24" :icon="icons.modifyBalance" v-else-if="!transaction.category || !transaction.category.color" />
-                                                    <span class="ml-2" v-if="transaction.type === allTransactionTypes.ModifyBalance">
-                                                        {{ $t('Modify Balance') }}
-                                                    </span>
-                                                    <span class="ml-2" v-else-if="transaction.type !== allTransactionTypes.ModifyBalance && transaction.category">
-                                                        {{ transaction.category.name }}
-                                                    </span>
-                                                    <span class="ml-2" v-else-if="transaction.type !== allTransactionTypes.ModifyBalance && !transaction.category">
-                                                        {{ getTransactionTypeName(transaction.type, 'Transaction') }}
-                                                    </span>
-                                                </div>
-                                            </td>
-                                            <td class="transaction-table-column-amount" :class="{ 'text-expense': transaction.type === allTransactionTypes.Expense, 'text-income': transaction.type === allTransactionTypes.Income }">
-                                                <div v-if="transaction.sourceAccount">
-                                                    <span v-if="!query.accountId || query.accountId === '0' || (transaction.sourceAccount && (transaction.sourceAccount.id === query.accountId || transaction.sourceAccount.parentId === query.accountId))">{{ getDisplayAmount(transaction.sourceAmount, transaction.sourceAccount.currency, transaction.hideAmount) }}</span>
-                                                    <span v-else-if="query.accountId && query.accountId !== '0' && transaction.destinationAccount && (transaction.destinationAccount.id === query.accountId || transaction.destinationAccount.parentId === query.accountId)">{{ getDisplayAmount(transaction.destinationAmount, transaction.destinationAccount.currency, transaction.hideAmount) }}</span>
-                                                    <span v-else></span>
-                                                </div>
-                                            </td>
-                                            <td class="transaction-table-column-account">
-                                                <div class="d-flex align-center">
-                                                    <span v-if="transaction.sourceAccount">{{ transaction.sourceAccount.name }}</span>
-                                                    <v-icon class="mx-1" size="13" :icon="icons.arrowRight" v-if="transaction.sourceAccount && transaction.type === allTransactionTypes.Transfer && transaction.destinationAccount && transaction.sourceAccount.id !== transaction.destinationAccount.id"></v-icon>
-                                                    <span v-if="transaction.sourceAccount && transaction.type === allTransactionTypes.Transfer && transaction.destinationAccount && transaction.sourceAccount.id !== transaction.destinationAccount.id">{{ transaction.destinationAccount.name }}</span>
-                                                </div>
-                                            </td>
-                                            <td class="transaction-table-column-description text-truncate">
-                                                {{ transaction.comment }}
-                                            </td>
-                                        </tr>
-                                    </tbody>
-                                </v-table>
+                                        </tbody>
 
-                                <div class="mt-2 mb-4">
-                                    <v-pagination :total-visible="6" :length="totalPageCount"
-                                                  v-model="paginationCurrentPage"></v-pagination>
-                                </div>
-                            </v-card>
-                        </v-window-item>
-                    </v-window>
-                </div>
+                                        <tbody v-if="!loading && (!transactions || !transactions.length || transactions.length < 1)">
+                                        <tr>
+                                            <td colspan="5">{{ $t('No transaction data') }}</td>
+                                        </tr>
+                                        </tbody>
+
+                                        <tbody :key="transaction.id"
+                                               :class="{ 'disabled': loading, 'has-bottom-border': idx < transactions.length - 1 }"
+                                               v-for="(transaction, idx) in transactions">
+                                            <tr class="transaction-list-row-date no-hover text-sm"
+                                                v-if="idx === 0 || (idx > 0 && (transaction.date !== transactions[idx - 1].date))">
+                                                <td colspan="5" class="font-weight-bold">
+                                                    <div class="d-flex align-center">
+                                                        <span>{{ getLongDate(transaction) }}</span>
+                                                        <v-chip class="ml-1" color="default" size="x-small">
+                                                            {{ getWeekdayLongName(transaction) }}
+                                                        </v-chip>
+                                                    </div>
+                                                </td>
+                                            </tr>
+                                            <tr class="transaction-table-row-data text-sm cursor-pointer"
+                                                @click="show(transaction)">
+                                                <td class="transaction-table-column-time">
+                                                    <div class="d-flex flex-column">
+                                                        <span>{{ getDisplayTime(transaction) }}</span>
+                                                        <span class="text-caption" v-if="transaction.utcOffset !== currentTimezoneOffsetMinutes">{{ getDisplayTimezone(transaction) }}</span>
+                                                    </div>
+                                                </td>
+                                                <td class="transaction-table-column-category">
+                                                    <div class="d-flex align-center">
+                                                        <ItemIcon size="24px" icon-type="category"
+                                                                  :icon-id="transaction.category.icon"
+                                                                  :color="transaction.category.color"
+                                                                  v-if="transaction.category && transaction.category.color"></ItemIcon>
+                                                        <v-icon size="24" :icon="icons.modifyBalance" v-else-if="!transaction.category || !transaction.category.color" />
+                                                        <span class="ml-2" v-if="transaction.type === allTransactionTypes.ModifyBalance">
+                                                            {{ $t('Modify Balance') }}
+                                                        </span>
+                                                        <span class="ml-2" v-else-if="transaction.type !== allTransactionTypes.ModifyBalance && transaction.category">
+                                                            {{ transaction.category.name }}
+                                                        </span>
+                                                        <span class="ml-2" v-else-if="transaction.type !== allTransactionTypes.ModifyBalance && !transaction.category">
+                                                            {{ getTransactionTypeName(transaction.type, 'Transaction') }}
+                                                        </span>
+                                                    </div>
+                                                </td>
+                                                <td class="transaction-table-column-amount" :class="{ 'text-expense': transaction.type === allTransactionTypes.Expense, 'text-income': transaction.type === allTransactionTypes.Income }">
+                                                    <div v-if="transaction.sourceAccount">
+                                                        <span v-if="!query.accountId || query.accountId === '0' || (transaction.sourceAccount && (transaction.sourceAccount.id === query.accountId || transaction.sourceAccount.parentId === query.accountId))">{{ getDisplayAmount(transaction.sourceAmount, transaction.sourceAccount.currency, transaction.hideAmount) }}</span>
+                                                        <span v-else-if="query.accountId && query.accountId !== '0' && transaction.destinationAccount && (transaction.destinationAccount.id === query.accountId || transaction.destinationAccount.parentId === query.accountId)">{{ getDisplayAmount(transaction.destinationAmount, transaction.destinationAccount.currency, transaction.hideAmount) }}</span>
+                                                        <span v-else></span>
+                                                    </div>
+                                                </td>
+                                                <td class="transaction-table-column-account">
+                                                    <div class="d-flex align-center">
+                                                        <span v-if="transaction.sourceAccount">{{ transaction.sourceAccount.name }}</span>
+                                                        <v-icon class="mx-1" size="13" :icon="icons.arrowRight" v-if="transaction.sourceAccount && transaction.type === allTransactionTypes.Transfer && transaction.destinationAccount && transaction.sourceAccount.id !== transaction.destinationAccount.id"></v-icon>
+                                                        <span v-if="transaction.sourceAccount && transaction.type === allTransactionTypes.Transfer && transaction.destinationAccount && transaction.sourceAccount.id !== transaction.destinationAccount.id">{{ transaction.destinationAccount.name }}</span>
+                                                    </div>
+                                                </td>
+                                                <td class="transaction-table-column-description text-truncate">
+                                                    {{ transaction.comment }}
+                                                </td>
+                                            </tr>
+                                        </tbody>
+                                    </v-table>
+
+                                    <div class="mt-2 mb-4">
+                                        <v-pagination :total-visible="6" :length="totalPageCount"
+                                                      v-model="paginationCurrentPage"></v-pagination>
+                                    </div>
+                                </v-card>
+                            </v-window-item>
+                        </v-window>
+                    </v-main>
+                </v-layout>
             </v-card>
         </v-col>
     </v-row>
@@ -332,6 +318,8 @@
 </template>
 
 <script>
+import { useDisplay } from 'vuetify';
+
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/setting.js';
 import { useUserStore } from '@/stores/user.js';
@@ -370,6 +358,7 @@ import {
     mdiCheck,
     mdiTextBoxCheckOutline,
     mdiRefresh,
+    mdiMenu,
     mdiMenuDown,
     mdiPencilBoxOutline,
     mdiArrowRight,
@@ -387,6 +376,8 @@ export default {
         'initAccountId'
     ],
     data() {
+        const { mdAndUp } = useDisplay();
+
         return {
             loading: true,
             updating: false,
@@ -396,6 +387,8 @@ export default {
             searchKeyword: '',
             currentPageTransactions: [],
             totalPageCount: 1,
+            alwaysShowNav: mdAndUp.value,
+            showNav: mdAndUp.value,
             showCustomDateRangeDialog: false,
             transactionRemoving: {},
             icons: {
@@ -403,6 +396,7 @@ export default {
                 check: mdiCheck,
                 all: mdiTextBoxCheckOutline,
                 refresh: mdiRefresh,
+                menu: mdiMenu,
                 dropdownMenu: mdiMenuDown,
                 modifyBalance: mdiPencilBoxOutline,
                 arrowRight: mdiArrowRight,
@@ -577,6 +571,22 @@ export default {
             accountId: this.initAccountId
         });
     },
+    setup() {
+        const display = useDisplay();
+
+        return {
+            display: display
+        };
+    },
+    watch: {
+        'display.mdAndUp.value': function (newValue) {
+            this.alwaysShowNav = newValue;
+
+            if (!this.showNav) {
+                this.showNav = newValue;
+            }
+        }
+    },
     beforeRouteUpdate(to) {
         if (to.query) {
             this.init({
@@ -707,10 +717,6 @@ export default {
             this.$router.push(this.getFilterLinkUrl());
         },
         changeTypeFilter(type) {
-            if (this.query.type === type) {
-                return;
-            }
-
             let removeCategoryFilter = false;
 
             if (type && this.query.categoryId) {
@@ -888,42 +894,24 @@ export default {
 
 <style>
 .transaction-keyword-filter .v-input--density-compact {
-    --v-input-control-height: 36px;
-    --v-input-padding-top: 5px;
-    --v-input-padding-bottom: 5px;
+    --v-input-control-height: 36px !important;
+    --v-input-padding-top: 5px !important;
+    --v-input-padding-bottom: 5px !important;
+    --v-input-chips-margin-top: 0px !important;
+    --v-input-chips-margin-bottom: 0px !important;
     inline-size: 20rem;
 }
 
-.transaction-type-buttons .v-btn:not(:first-child) {
-    border-top-left-radius: inherit;
-    border-top-right-radius: inherit;
-}
-
-.transaction-type-buttons .v-btn:not(:last-child) {
-    border-bottom: 0;
-    border-bottom-left-radius: inherit;
-    border-bottom-right-radius: inherit;
-}
-
-.transaction-list-title {
-    overflow-x: auto;
-    white-space: nowrap;
-}
-
 .transaction-list-datetime-range {
-    height: 28px;
-    overflow-x: auto;
-    white-space: nowrap;
+    min-height: 28px;
+    flex-wrap: wrap;
+    row-gap: 1rem;
 }
 
 .transaction-list-datetime-range .transaction-list-datetime-range-text {
     color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity)) !important;
 }
 
-.transaction-list-total-amount-text .v-skeleton-loader__text {
-    margin: 0;
-}
-
 .v-table.transaction-table .transaction-list-row-date > td {
     height: 40px !important;
 }