diff --git a/src/locales/en.js b/src/locales/en.js
index c87bb5b2..c8569750 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -1069,6 +1069,7 @@ export default {
     'Expense Categories': 'Expense Categories',
     'Income Categories': 'Income Categories',
     'Transfer Categories': 'Transfer Categories',
+    'Primary Categories': 'Primary Categories',
     'Expense Primary Categories': 'Expense Primary Categories',
     'Income Primary Categories': 'Income Primary Categories',
     'Transfer Primary Categories': 'Transfer Primary Categories',
diff --git a/src/locales/zh_Hans.js b/src/locales/zh_Hans.js
index a3507080..e4486b33 100644
--- a/src/locales/zh_Hans.js
+++ b/src/locales/zh_Hans.js
@@ -1069,6 +1069,7 @@ export default {
     'Expense Categories': '支出分类',
     'Income Categories': '收入分类',
     'Transfer Categories': '转账分类',
+    'Primary Categories': '一级分类',
     'Expense Primary Categories': '支出一级分类',
     'Income Primary Categories': '收入一级分类',
     'Transfer Primary Categories': '转账一级分类',
diff --git a/src/views/desktop/TransactionCategoriesPage.vue b/src/views/desktop/TransactionCategoriesPage.vue
index fb8db1f5..e6a87cd0 100644
--- a/src/views/desktop/TransactionCategoriesPage.vue
+++ b/src/views/desktop/TransactionCategoriesPage.vue
@@ -1,13 +1,441 @@
 <template>
     <v-row class="match-height">
-        categories
+        <v-col cols="12">
+            <v-card>
+                <div class="d-flex flex-column flex-md-row">
+                    <div>
+                        <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>
+                        </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>
+                            <template :key="category.id" v-for="category in primaryCategories">
+                                <v-tab :value="category.id" v-if="!category.hidden"
+                                       @click="switchPrimaryCategory(category)">
+                                    <div class="d-flex align-center">
+                                        <span>{{ category.name }}</span>
+                                    </div>
+                                </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"
+                                                   :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-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>
+                                        <td>
+                                            <div class="d-flex align-center">
+                                                <span>{{ $t('No available category') }}</span>
+                                                <v-btn class="ml-3" color="default" variant="outlined"
+                                                       @click="showPresetCategories"
+                                                       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>
+                                                        </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>
+            </v-card>
+        </v-col>
     </v-row>
+
+    <confirm-dialog ref="confirmDialog"/>
+    <snack-bar ref="snackbar" />
 </template>
 
 <script>
-export default {
-    created() {
+import { mapStores } from 'pinia';
+import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
 
+import categoryConstants from '@/consts/category.js';
+
+import {
+    mdiRefresh,
+    mdiPencilOutline,
+    mdiEyeOffOutline,
+    mdiEyeOutline,
+    mdiDeleteOutline,
+    mdiDrag,
+    mdiDotsVertical
+} from '@mdi/js';
+
+export default {
+    data() {
+        return {
+            activeCategoryType: categoryConstants.allCategoryTypes.Expense,
+            activeTab: 'categoryPage',
+            primaryCategoryId: '0',
+            loading: true,
+            updating: false,
+            categoryHiding: {},
+            categoryRemoving: {},
+            displayOrderModified: false,
+            showHidden: false,
+            icons: {
+                refresh: mdiRefresh,
+                edit: mdiPencilOutline,
+                show: mdiEyeOutline,
+                hide: mdiEyeOffOutline,
+                remove: mdiDeleteOutline,
+                drag: mdiDrag,
+                more: mdiDotsVertical
+            }
+        };
+    },
+    computed: {
+        ...mapStores(useTransactionCategoriesStore),
+        allCategoryTypes() {
+            return categoryConstants.allCategoryTypes;
+        },
+        primaryCategories() {
+            if (!this.transactionCategoriesStore.allTransactionCategories || !this.transactionCategoriesStore.allTransactionCategories[this.activeCategoryType]) {
+                return [];
+            }
+
+            return this.transactionCategoriesStore.allTransactionCategories[this.activeCategoryType];
+        },
+        secondaryCategories() {
+            if (!this.transactionCategoriesStore.allTransactionCategoriesMap || !this.transactionCategoriesStore.allTransactionCategoriesMap[this.primaryCategoryId]) {
+                return [];
+            }
+
+            return this.transactionCategoriesStore.allTransactionCategoriesMap[this.primaryCategoryId].subCategories;
+        },
+        hasSubCategories() {
+            return !this.primaryCategoryId || this.primaryCategoryId === '' || this.primaryCategoryId === '0';
+        },
+        categories() {
+            if (this.hasSubCategories) {
+                return this.primaryCategories;
+            } else {
+                return this.secondaryCategories;
+            }
+        },
+        noAvailableCategory() {
+            for (let i = 0; i < this.categories.length; i++) {
+                if (this.showHidden || !this.categories[i].hidden) {
+                    return false;
+                }
+            }
+
+            return true;
+        },
+        noCategory() {
+            return this.categories.length < 1;
+        },
+        availableCategoryCount() {
+            let count = 0;
+
+            for (let i = 0; i < this.categories.length; i++) {
+                if (this.showHidden || !this.categories[i].hidden) {
+                    count++;
+                }
+            }
+
+            return count;
+        }
+    },
+    created() {
+        this.reload(false);
+    },
+    methods: {
+        reload(force) {
+            const self = this;
+
+            self.loading = true;
+
+            self.transactionCategoriesStore.loadAllCategories({
+                force: force
+            }).then(() => {
+                self.loading = false;
+                self.displayOrderModified = false;
+
+                if (force) {
+                    self.$refs.snackbar.showMessage('Category list has been updated');
+                }
+            }).catch(error => {
+                self.loading = false;
+
+                if (!error.processed) {
+                    self.$refs.snackbar.showError(error);
+                }
+            });
+        },
+        onMove(event) {
+            if (!event || !event.moved) {
+                return;
+            }
+
+            const self = this;
+            const moveEvent = event.moved;
+
+            if (!moveEvent.element || !moveEvent.element.id) {
+                self.$refs.snackbar.showMessage('Unable to move category');
+                return;
+            }
+
+            self.transactionCategoriesStore.changeCategoryDisplayOrder({
+                categoryId: moveEvent.element.id,
+                from: moveEvent.oldIndex,
+                to: moveEvent.newIndex
+            }).then(() => {
+                self.displayOrderModified = true;
+            }).catch(error => {
+                self.$refs.snackbar.showError(error);
+            });
+        },
+        saveSortResult() {
+            const self = this;
+
+            if (!self.displayOrderModified) {
+                return;
+            }
+
+            self.loading = true;
+
+            self.transactionCategoriesStore.updateCategoryDisplayOrders({
+                type: self.activeCategoryType,
+                parentId: self.primaryCategoryId,
+            }).then(() => {
+                self.loading = false;
+                self.displayOrderModified = false;
+            }).catch(error => {
+                self.loading = false;
+
+                if (!error.processed) {
+                    self.$refs.snackbar.showError(error);
+                }
+            });
+        },
+        add() {
+
+        },
+        edit() {
+
+        },
+        hide(category, hidden) {
+            const self = this;
+
+            self.updating = true;
+            self.categoryHiding[category.id] = true;
+
+            self.transactionCategoriesStore.hideCategory({
+                category: category,
+                hidden: hidden
+            }).then(() => {
+                self.updating = false;
+                self.categoryHiding[category.id] = false;
+            }).catch(error => {
+                self.updating = false;
+                self.categoryHiding[category.id] = false;
+
+                if (!error.processed) {
+                    self.$refs.snackbar.showError(error);
+                }
+            });
+        },
+        remove(category) {
+            const self = this;
+
+            self.$refs.confirmDialog.open('Are you sure you want to delete this category?').then(() => {
+                self.updating = true;
+                self.categoryRemoving[category.id] = true;
+
+                self.transactionCategoriesStore.deleteCategory({
+                    category: category
+                }).then(() => {
+                    self.updating = false;
+                    self.categoryRemoving[category.id] = false;
+                }).catch(error => {
+                    self.updating = false;
+                    self.categoryRemoving[category.id] = false;
+
+                    if (!error.processed) {
+                        self.$refs.snackbar.showError(error);
+                    }
+                });
+            });
+        },
+        showPresetCategories() {
+
+        },
+        switchActiveCategoryType(activeCategoryType) {
+            if (this.activeCategoryType === activeCategoryType) {
+                return;
+            }
+
+            this.activeCategoryType = activeCategoryType;
+            this.primaryCategoryId = '0';
+        },
+        isCategorySupportSwitch(category) {
+            if (!category || category.hidden) {
+                return false;
+            }
+
+            return !category.parentId || category.parentId === '' || category.parentId === '0';
+        },
+        switchPrimaryCategory(category) {
+            if (!category || category.hidden) {
+                return;
+            }
+
+            if (!category.parentId || category.parentId === '' || category.parentId === '0') {
+                this.primaryCategoryId = category.id;
+            }
+        }
     }
 }
 </script>
+
+<style>
+.transaction-primary-category-skeleton .v-skeleton-loader__text {
+    margin: 0;
+}
+
+.transaction-category-table tr.transaction-category-table-row .hover-display {
+    display: none;
+}
+
+.transaction-category-table tr.transaction-category-table-row:hover .hover-display {
+    display: grid;
+}
+</style>