diff --git a/src/views/desktop/app/AppSettingsPage.vue b/src/views/desktop/app/AppSettingsPage.vue
index da0098a5..e695500a 100644
--- a/src/views/desktop/app/AppSettingsPage.vue
+++ b/src/views/desktop/app/AppSettingsPage.vue
@@ -1,13 +1,62 @@
 <template>
-    <v-row class="match-height">
-        app settings
-    </v-row>
+    <div>
+        <v-tabs show-arrows class="text-uppercase" v-model="activeTab">
+            <v-tab value="basicSetting">
+                <v-icon size="20" start :icon="icons.basicSetting"/>
+                {{ $t('Basic') }}
+            </v-tab>
+            <v-tab value="applicationLockSetting">
+                <v-icon size="20" start :icon="icons.applicationLockSetting"/>
+                {{ $t('Application Lock') }}
+            </v-tab>
+            <v-tab value="statisticsSetting">
+                <v-icon size="20" start :icon="icons.statisticsSetting"/>
+                {{ $t('Statistics') }}
+            </v-tab>
+        </v-tabs>
+        <v-divider />
+        <v-window class="mt-5 disable-tab-transition" v-model="activeTab">
+            <v-window-item value="basicSetting">
+                <app-basic-setting-tab/>
+            </v-window-item>
+
+            <v-window-item value="applicationLockSetting">
+                <app-lock-seting-tab/>
+            </v-window-item>
+
+            <v-window-item value="statisticsSetting">
+                <app-statistics-setting-tab/>
+            </v-window-item>
+        </v-window>
+    </div>
 </template>
 
 <script>
-export default {
-    created() {
+import AppBasicSettingTab from './settings/AppBasicSettingTab.vue';
+import AppLockSetingTab from './settings/AppLockSetingTab.vue';
+import AppStatisticsSettingTab from './settings/AppStatisticsSettingTab.vue';
 
+import {
+    mdiCogOutline,
+    mdiLockOpenOutline,
+    mdiChartPieOutline
+} from '@mdi/js';
+
+export default {
+    components: {
+        AppBasicSettingTab,
+        AppLockSetingTab,
+        AppStatisticsSettingTab
+    },
+    data() {
+        return {
+            activeTab: 'basicSetting',
+            icons: {
+                basicSetting: mdiCogOutline,
+                applicationLockSetting: mdiLockOpenOutline,
+                statisticsSetting: mdiChartPieOutline
+            }
+        };
     }
 }
 </script>
diff --git a/src/views/desktop/app/settings/AppBasicSettingTab.vue b/src/views/desktop/app/settings/AppBasicSettingTab.vue
new file mode 100644
index 00000000..1a305fb3
--- /dev/null
+++ b/src/views/desktop/app/settings/AppBasicSettingTab.vue
@@ -0,0 +1,273 @@
+<template>
+    <v-row>
+        <v-col cols="12">
+            <v-card :title="$t('Basic Settings')">
+                <v-form>
+                    <v-card-text>
+                        <v-row>
+                            <v-col cols="12" md="6">
+                                <v-select
+                                    item-title="displayName"
+                                    item-value="value"
+                                    :label="$t('Theme')"
+                                    :placeholder="$t('Theme')"
+                                    :items="[
+                                        { value: 'auto', displayName: $t('System Default') },
+                                        { value: 'light', displayName: $t('Light') },
+                                        { value: 'dark', displayName: $t('Dark') }
+                                    ]"
+                                    v-model="theme"
+                                />
+                            </v-col>
+
+                            <v-col cols="12" md="6">
+                                <v-autocomplete
+                                    item-title="displayNameWithUtcOffset"
+                                    item-value="name"
+                                    :label="$t('Timezone')"
+                                    :placeholder="$t('Timezone')"
+                                    :items="allTimezones"
+                                    :no-data-text="$t('No results')"
+                                    v-model="timeZone"
+                                />
+                            </v-col>
+
+                            <v-col cols="12" md="6">
+                                <v-select
+                                    item-title="displayName"
+                                    item-value="value"
+                                    :label="$t('Auto-update Exchange Rates Data')"
+                                    :placeholder="$t('Auto-update Exchange Rates Data')"
+                                    :items="enableDisableOptions"
+                                    v-model="isAutoUpdateExchangeRatesData"
+                                />
+                            </v-col>
+
+                            <v-col cols="12" md="6">
+                                <v-select
+                                    item-title="displayName"
+                                    item-value="value"
+                                    :label="$t('Enable Thousands Separator')"
+                                    :placeholder="$t('Enable Thousands Separator')"
+                                    :items="enableDisableOptions"
+                                    v-model="isEnableThousandsSeparator"
+                                />
+                            </v-col>
+
+                            <v-col cols="12" md="6">
+                                <v-select
+                                    item-title="displayName"
+                                    item-value="value"
+                                    :label="$t('Currency Display Mode')"
+                                    :placeholder="$t('Currency Display Mode')"
+                                    :items="[
+                                        { value: allCurrencyDisplayModes.None, displayName: $t('None') },
+                                        { value: allCurrencyDisplayModes.Symbol, displayName: $t('Currency Symbol') },
+                                        { value: allCurrencyDisplayModes.Code, displayName: $t('Currency Code') },
+                                        { value: allCurrencyDisplayModes.Name, displayName: $t('Currency Name') }
+                                    ]"
+                                    v-model="currencyDisplayMode"
+                                />
+                            </v-col>
+
+                            <v-col cols="12" md="6">
+                                <v-select
+                                    item-title="displayName"
+                                    item-value="value"
+                                    :label="$t('Show Account Balance')"
+                                    :placeholder="$t('Show Account Balance')"
+                                    :items="enableDisableOptions"
+                                    v-model="showAccountBalance"
+                                />
+                            </v-col>
+                        </v-row>
+                    </v-card-text>
+                </v-form>
+            </v-card>
+        </v-col>
+
+        <v-col cols="12">
+            <v-card :title="$t('Overview Page')">
+                <v-form>
+                    <v-card-text>
+                        <v-row>
+                            <v-col cols="12" md="6">
+                                <v-select
+                                    item-title="displayName"
+                                    item-value="value"
+                                    :label="$t('Show Amount')"
+                                    :placeholder="$t('Show Amount')"
+                                    :items="enableDisableOptions"
+                                    v-model="showAmountInHomePage"
+                                />
+                            </v-col>
+                        </v-row>
+                    </v-card-text>
+                </v-form>
+            </v-card>
+        </v-col>
+
+        <v-col cols="12">
+            <v-card :title="$t('Transaction List Page')">
+                <v-form>
+                    <v-card-text>
+                        <v-row>
+                            <v-col cols="12" md="6">
+                                <v-select
+                                    item-title="displayName"
+                                    item-value="value"
+                                    :label="$t('Show Monthly Total Amount')"
+                                    :placeholder="$t('Show Monthly Total Amount')"
+                                    :items="enableDisableOptions"
+                                    v-model="showTotalAmountInTransactionListPage"
+                                />
+                            </v-col>
+                        </v-row>
+                    </v-card-text>
+                </v-form>
+            </v-card>
+        </v-col>
+
+        <v-col cols="12">
+            <v-card :title="$t('Transaction Edit Page')">
+                <v-form>
+                    <v-card-text>
+                        <v-row>
+                            <v-col cols="12" md="6">
+                                <v-select
+                                    item-title="displayName"
+                                    item-value="value"
+                                    :label="$t('Automatically Add Geolocation')"
+                                    :placeholder="$t('Automatically Add Geolocation')"
+                                    :items="enableDisableOptions"
+                                    v-model="isAutoGetCurrentGeoLocation"
+                                />
+                            </v-col>
+                        </v-row>
+                    </v-card-text>
+                </v-form>
+            </v-card>
+        </v-col>
+    </v-row>
+</template>
+
+<script>
+import { useTheme } from 'vuetify';
+
+import { mapStores } from 'pinia';
+import { useRootStore } from '@/stores/index.js';
+import { useSettingsStore } from '@/stores/setting.js';
+import { useUserStore } from '@/stores/user.js';
+import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
+
+import currencyConstants from '@/consts/currency.js';
+import { getSystemTheme } from '@/lib/ui.js';
+
+export default {
+    computed: {
+        ...mapStores(useRootStore, useSettingsStore, useUserStore, useExchangeRatesStore),
+        enableDisableOptions() {
+            return [{
+                value: true,
+                displayName: this.$t('Enable')
+            },{
+                value: false,
+                displayName: this.$t('Disable')
+            }];
+        },
+        allTimezones() {
+            return this.$locale.getAllTimezones(true);
+        },
+        allCurrencyDisplayModes() {
+            return currencyConstants.allCurrencyDisplayModes;
+        },
+        theme: {
+            get: function () {
+                return this.settingsStore.appSettings.theme;
+            },
+            set: function (value) {
+                if (value !== this.settingsStore.appSettings.theme) {
+                    this.settingsStore.setTheme(value);
+
+                    if (value === 'light' || value === 'dark') {
+                        this.globalTheme.global.name.value = value;
+                    } else {
+                        this.globalTheme.global.name.value = getSystemTheme();
+                    }
+                }
+            }
+        },
+        timeZone: {
+            get: function () {
+                return this.settingsStore.appSettings.timeZone;
+            },
+            set: function (value) {
+                this.settingsStore.setTimeZone(value);
+            }
+        },
+        isAutoUpdateExchangeRatesData: {
+            get: function () {
+                return this.settingsStore.appSettings.autoUpdateExchangeRatesData;
+            },
+            set: function (value) {
+                this.settingsStore.setAutoUpdateExchangeRatesData(value);
+            }
+        },
+        isEnableThousandsSeparator: {
+            get: function () {
+                return this.settingsStore.appSettings.thousandsSeparator;
+            },
+            set: function (value) {
+                this.settingsStore.setEnableThousandsSeparator(value);
+            }
+        },
+        currencyDisplayMode: {
+            get: function () {
+                return this.settingsStore.appSettings.currencyDisplayMode;
+            },
+            set: function (value) {
+                this.settingsStore.setCurrencyDisplayMode(value);
+            }
+        },
+        showAccountBalance: {
+            get: function () {
+                return this.settingsStore.appSettings.showAccountBalance;
+            },
+            set: function (value) {
+                this.settingsStore.setShowAccountBalance(value);
+            }
+        },
+        showAmountInHomePage: {
+            get: function () {
+                return this.settingsStore.appSettings.showAmountInHomePage;
+            },
+            set: function (value) {
+                this.settingsStore.setShowAmountInHomePage(value);
+            }
+        },
+        showTotalAmountInTransactionListPage: {
+            get: function () {
+                return this.settingsStore.appSettings.showTotalAmountInTransactionListPage;
+            },
+            set: function (value) {
+                this.settingsStore.setShowTotalAmountInTransactionListPage(value);
+            }
+        },
+        isAutoGetCurrentGeoLocation: {
+            get: function () {
+                return this.settingsStore.appSettings.autoGetCurrentGeoLocation;
+            },
+            set: function (value) {
+                this.settingsStore.setAutoGetCurrentGeoLocation(value);
+            }
+        }
+    },
+    setup () {
+        const theme = useTheme();
+
+        return {
+            globalTheme: theme
+        };
+    }
+};
+</script>
diff --git a/src/views/desktop/app/settings/AppLockSetingTab.vue b/src/views/desktop/app/settings/AppLockSetingTab.vue
new file mode 100644
index 00000000..a77b0349
--- /dev/null
+++ b/src/views/desktop/app/settings/AppLockSetingTab.vue
@@ -0,0 +1,17 @@
+<template>
+    <v-row>
+        <v-col cols="12">
+            <v-card :title="$t('Application Lock')">
+                <v-form>
+                    <v-card-text>
+                    </v-card-text>
+                </v-form>
+            </v-card>
+        </v-col>
+    </v-row>
+</template>
+
+<script>
+
+</script>
+
diff --git a/src/views/desktop/app/settings/AppStatisticsSettingTab.vue b/src/views/desktop/app/settings/AppStatisticsSettingTab.vue
new file mode 100644
index 00000000..dba5d861
--- /dev/null
+++ b/src/views/desktop/app/settings/AppStatisticsSettingTab.vue
@@ -0,0 +1,17 @@
+<template>
+    <v-row>
+        <v-col cols="12">
+            <v-card :title="$t('Statistics Settings')">
+                <v-form>
+                    <v-card-text>
+                    </v-card-text>
+                </v-form>
+            </v-card>
+        </v-col>
+    </v-row>
+</template>
+
+<script>
+
+</script>
+