diff --git a/package.json b/package.json
index 3567d84..ce1c1c4 100644
--- a/package.json
+++ b/package.json
@@ -57,7 +57,7 @@
     "prettier": "^2.8.2",
     "prettier-plugin-tailwindcss": "^0.1.13",
     "tailwindcss": "^3.0.23",
-    "typescript": "^4.9.4",
+    "typescript": "^5.0.4",
     "unplugin-icons": "^0.15.1",
     "unplugin-vue-components": "^0.22.12",
     "vite": "^4.0.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 53f5d29..f800a80 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,4 +1,4 @@
-lockfileVersion: '6.1'
+lockfileVersion: '6.0'
 
 settings:
   autoInstallPeers: true
@@ -61,7 +61,7 @@ dependencies:
     version: 0.9.7
   pinia:
     specifier: ^2.0.11
-    version: 2.0.28(typescript@4.9.4)(vue@3.2.45)
+    version: 2.0.28(typescript@5.0.4)(vue@3.2.45)
   query-string:
     specifier: ^7.1.1
     version: 7.1.3
@@ -108,10 +108,10 @@ devDependencies:
     version: 2.0.3
   '@typescript-eslint/eslint-plugin':
     specifier: ^5.56.0
-    version: 5.56.0(@typescript-eslint/parser@5.56.0)(eslint@8.31.0)(typescript@4.9.4)
+    version: 5.56.0(@typescript-eslint/parser@5.56.0)(eslint@8.31.0)(typescript@5.0.4)
   '@typescript-eslint/parser':
     specifier: ^5.56.0
-    version: 5.56.0(eslint@8.31.0)(typescript@4.9.4)
+    version: 5.56.0(eslint@8.31.0)(typescript@5.0.4)
   '@vitejs/plugin-vue':
     specifier: ^4.0.0
     version: 4.0.0(vite@4.0.4)(vue@3.2.45)
@@ -137,8 +137,8 @@ devDependencies:
     specifier: ^3.0.23
     version: 3.2.4(postcss@8.4.21)
   typescript:
-    specifier: ^4.9.4
-    version: 4.9.4
+    specifier: ^5.0.4
+    version: 5.0.4
   unplugin-icons:
     specifier: ^0.15.1
     version: 0.15.1
@@ -153,7 +153,7 @@ devDependencies:
     version: 0.28.0(vite@4.0.4)
   vue-tsc:
     specifier: ^1.0.24
-    version: 1.0.24(typescript@4.9.4)
+    version: 1.0.24(typescript@5.0.4)
 
 packages:
 
@@ -713,7 +713,7 @@ packages:
     resolution: {integrity: sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA==}
     dev: false
 
-  /@typescript-eslint/eslint-plugin@5.56.0(@typescript-eslint/parser@5.56.0)(eslint@8.31.0)(typescript@4.9.4):
+  /@typescript-eslint/eslint-plugin@5.56.0(@typescript-eslint/parser@5.56.0)(eslint@8.31.0)(typescript@5.0.4):
     resolution: {integrity: sha512-ZNW37Ccl3oMZkzxrYDUX4o7cnuPgU+YrcaYXzsRtLB16I1FR5SHMqga3zGsaSliZADCWo2v8qHWqAYIj8nWCCg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -725,23 +725,23 @@ packages:
         optional: true
     dependencies:
       '@eslint-community/regexpp': 4.4.0
-      '@typescript-eslint/parser': 5.56.0(eslint@8.31.0)(typescript@4.9.4)
+      '@typescript-eslint/parser': 5.56.0(eslint@8.31.0)(typescript@5.0.4)
       '@typescript-eslint/scope-manager': 5.56.0
-      '@typescript-eslint/type-utils': 5.56.0(eslint@8.31.0)(typescript@4.9.4)
-      '@typescript-eslint/utils': 5.56.0(eslint@8.31.0)(typescript@4.9.4)
+      '@typescript-eslint/type-utils': 5.56.0(eslint@8.31.0)(typescript@5.0.4)
+      '@typescript-eslint/utils': 5.56.0(eslint@8.31.0)(typescript@5.0.4)
       debug: 4.3.4
       eslint: 8.31.0
       grapheme-splitter: 1.0.4
       ignore: 5.2.4
       natural-compare-lite: 1.4.0
       semver: 7.3.8
-      tsutils: 3.21.0(typescript@4.9.4)
-      typescript: 4.9.4
+      tsutils: 3.21.0(typescript@5.0.4)
+      typescript: 5.0.4
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser@5.56.0(eslint@8.31.0)(typescript@4.9.4):
+  /@typescript-eslint/parser@5.56.0(eslint@8.31.0)(typescript@5.0.4):
     resolution: {integrity: sha512-sn1OZmBxUsgxMmR8a8U5QM/Wl+tyqlH//jTqCg8daTAmhAk26L2PFhcqPLlYBhYUJMZJK276qLXlHN3a83o2cg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -753,10 +753,10 @@ packages:
     dependencies:
       '@typescript-eslint/scope-manager': 5.56.0
       '@typescript-eslint/types': 5.56.0
-      '@typescript-eslint/typescript-estree': 5.56.0(typescript@4.9.4)
+      '@typescript-eslint/typescript-estree': 5.56.0(typescript@5.0.4)
       debug: 4.3.4
       eslint: 8.31.0
-      typescript: 4.9.4
+      typescript: 5.0.4
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -769,7 +769,7 @@ packages:
       '@typescript-eslint/visitor-keys': 5.56.0
     dev: true
 
-  /@typescript-eslint/type-utils@5.56.0(eslint@8.31.0)(typescript@4.9.4):
+  /@typescript-eslint/type-utils@5.56.0(eslint@8.31.0)(typescript@5.0.4):
     resolution: {integrity: sha512-8WxgOgJjWRy6m4xg9KoSHPzBNZeQbGlQOH7l2QEhQID/+YseaFxg5J/DLwWSsi9Axj4e/cCiKx7PVzOq38tY4A==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -779,12 +779,12 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/typescript-estree': 5.56.0(typescript@4.9.4)
-      '@typescript-eslint/utils': 5.56.0(eslint@8.31.0)(typescript@4.9.4)
+      '@typescript-eslint/typescript-estree': 5.56.0(typescript@5.0.4)
+      '@typescript-eslint/utils': 5.56.0(eslint@8.31.0)(typescript@5.0.4)
       debug: 4.3.4
       eslint: 8.31.0
-      tsutils: 3.21.0(typescript@4.9.4)
-      typescript: 4.9.4
+      tsutils: 3.21.0(typescript@5.0.4)
+      typescript: 5.0.4
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -794,7 +794,7 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
-  /@typescript-eslint/typescript-estree@5.56.0(typescript@4.9.4):
+  /@typescript-eslint/typescript-estree@5.56.0(typescript@5.0.4):
     resolution: {integrity: sha512-41CH/GncsLXOJi0jb74SnC7jVPWeVJ0pxQj8bOjH1h2O26jXN3YHKDT1ejkVz5YeTEQPeLCCRY0U2r68tfNOcg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -809,13 +809,13 @@ packages:
       globby: 11.1.0
       is-glob: 4.0.3
       semver: 7.3.8
-      tsutils: 3.21.0(typescript@4.9.4)
-      typescript: 4.9.4
+      tsutils: 3.21.0(typescript@5.0.4)
+      typescript: 5.0.4
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/utils@5.56.0(eslint@8.31.0)(typescript@4.9.4):
+  /@typescript-eslint/utils@5.56.0(eslint@8.31.0)(typescript@5.0.4):
     resolution: {integrity: sha512-XhZDVdLnUJNtbzaJeDSCIYaM+Tgr59gZGbFuELgF7m0IY03PlciidS7UQNKLE0+WpUTn1GlycEr6Ivb/afjbhA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -826,7 +826,7 @@ packages:
       '@types/semver': 7.3.13
       '@typescript-eslint/scope-manager': 5.56.0
       '@typescript-eslint/types': 5.56.0
-      '@typescript-eslint/typescript-estree': 5.56.0(typescript@4.9.4)
+      '@typescript-eslint/typescript-estree': 5.56.0(typescript@5.0.4)
       eslint: 8.31.0
       eslint-scope: 5.1.1
       semver: 7.3.8
@@ -1177,6 +1177,7 @@ packages:
   /autoprefixer@10.4.13(postcss@8.4.21):
     resolution: {integrity: sha512-49vKpMqcZYsJjwotvt4+h/BCjJVnhGwcLpDt5xkcaOG3eLrG/HUYLagrihYsQ+qrIBgIzX1Rw7a6L8I/ZA1Atg==}
     engines: {node: ^10 || ^12 || >=14}
+    hasBin: true
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
@@ -1512,6 +1513,7 @@ packages:
 
   /eslint-config-prettier@8.6.0(eslint@8.31.0):
     resolution: {integrity: sha512-bAF0eLpLVqP5oEVUFKpMA+NnRFICwn9X8B5jrR9FcqnYBuPbqWEjTEspPWMj5ye6czoSLDweCzSo3Ko7gGrZaA==}
+    hasBin: true
     peerDependencies:
       eslint: '>=7.0.0'
     dependencies:
@@ -2388,7 +2390,7 @@ packages:
     resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
     engines: {node: '>=0.10.0'}
 
-  /pinia@2.0.28(typescript@4.9.4)(vue@3.2.45):
+  /pinia@2.0.28(typescript@5.0.4)(vue@3.2.45):
     resolution: {integrity: sha512-YClq9DkqCblq9rlyUual7ezMu/iICWdBtfJrDt4oWU9Zxpijyz7xB2xTwx57DaBQ96UGvvTMORzALr+iO5PVMw==}
     peerDependencies:
       '@vue/composition-api': ^1.4.0
@@ -2401,7 +2403,7 @@ packages:
         optional: true
     dependencies:
       '@vue/devtools-api': 6.4.5
-      typescript: 4.9.4
+      typescript: 5.0.4
       vue: 3.2.45
       vue-demi: 0.13.11(vue@3.2.45)
     dev: false
@@ -2692,6 +2694,7 @@ packages:
   /tailwindcss@3.2.4(postcss@8.4.21):
     resolution: {integrity: sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==}
     engines: {node: '>=12.13.0'}
+    hasBin: true
     peerDependencies:
       postcss: ^8.0.9
     dependencies:
@@ -2742,14 +2745,14 @@ packages:
     resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
     dev: false
 
-  /tsutils@3.21.0(typescript@4.9.4):
+  /tsutils@3.21.0(typescript@5.0.4):
     resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
     engines: {node: '>= 6'}
     peerDependencies:
       typescript: '>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta'
     dependencies:
       tslib: 1.14.1
-      typescript: 4.9.4
+      typescript: 5.0.4
     dev: true
 
   /type-check@0.4.0:
@@ -2764,9 +2767,10 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /typescript@4.9.4:
-    resolution: {integrity: sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==}
-    engines: {node: '>=4.2.0'}
+  /typescript@5.0.4:
+    resolution: {integrity: sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==}
+    engines: {node: '>=12.20'}
+    hasBin: true
 
   /uc.micro@1.0.6:
     resolution: {integrity: sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==}
@@ -2837,6 +2841,7 @@ packages:
 
   /update-browserslist-db@1.0.10(browserslist@4.21.4):
     resolution: {integrity: sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==}
+    hasBin: true
     peerDependencies:
       browserslist: '>= 4.21.0'
     dependencies:
@@ -2879,6 +2884,7 @@ packages:
   /vite@4.0.4(@types/node@18.11.18):
     resolution: {integrity: sha512-xevPU7M8FU0i/80DMR+YhgrzR5KS2ORy1B4xcX/cXLsvnUWvfHuqMmVU6N0YiJ4JWGRJJsLCgjEzKjG9/GKoSw==}
     engines: {node: ^14.18.0 || >=16.0.0}
+    hasBin: true
     peerDependencies:
       '@types/node': '>= 14'
       less: '*'
@@ -2912,6 +2918,7 @@ packages:
   /vue-demi@0.13.11(vue@3.2.45):
     resolution: {integrity: sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==}
     engines: {node: '>=12'}
+    hasBin: true
     requiresBuild: true
     peerDependencies:
       '@vue/composition-api': ^1.0.0-rc.1
@@ -2993,14 +3000,15 @@ packages:
       he: 1.2.0
     dev: true
 
-  /vue-tsc@1.0.24(typescript@4.9.4):
+  /vue-tsc@1.0.24(typescript@5.0.4):
     resolution: {integrity: sha512-mmU1s5SAqE1nByQAiQnao9oU4vX+mSdsgI8H57SfKH6UVzq/jP9+Dbi2GaV+0b4Cn361d2ln8m6xeU60ApiEXg==}
+    hasBin: true
     peerDependencies:
       typescript: '*'
     dependencies:
       '@volar/vue-language-core': 1.0.24
       '@volar/vue-typescript': 1.0.24
-      typescript: 4.9.4
+      typescript: 5.0.4
     dev: true
 
   /vue@3.2.45:
diff --git a/src/constants.ts b/src/constants.ts
index 910c4a9..70580f4 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -52,6 +52,7 @@ export const LOCAL_STORAGE_KEY = {
   MINI_SIDEBAR: "mini-sidebar",
   LOCALE: "locale",
   LAST_USED_LANG: "last-used-lang",
+  ADMIN_TAB: "admin-tab",
 };
 
 export const UNLIMITED_QUOTA = -1;
diff --git a/src/pages/admin.vue b/src/pages/admin.vue
index bcb9d48..75733dc 100644
--- a/src/pages/admin.vue
+++ b/src/pages/admin.vue
@@ -1,23 +1,22 @@
 <script setup lang="ts">
-import { ROLE } from "@/constants";
-import api, { fetcher } from "@/models/api";
 import { useSession } from "@/stores/session";
-import useVuelidate from "@vuelidate/core";
-import { required, maxLength, between, integer, minLength } from "@vuelidate/validators";
-import { useAxios } from "@vueuse/integrations/useAxios";
-import axios from "axios";
-import { computed, ref, watchEffect } from "vue";
+import { watchEffect } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
+import { useStorage, useTitle } from "@vueuse/core";
+import { LOCAL_STORAGE_KEY } from "@/constants";
 
+useTitle("Admin | Normal OJ");
 const route = useRoute();
 const router = useRouter();
 const { t } = useI18n();
-const tabs = [{ text: t("admin.tab.user"), value: "user" }];
+const tab = useStorage(LOCAL_STORAGE_KEY.ADMIN_TAB, "/admin/user");
+const tabs = [{ text: t("admin.tab.user"), value: "/admin/user" }];
 watchEffect(() => {
-  if (!route.query.tab || !tabs.some((d) => d.value === route.query.tab)) {
-    router.push("/admin?tab=user");
+  if (!tabs.some((d) => d.value === route.path)) {
+    router.replace(tab.value);
   }
+  tab.value = route.path;
 });
 const session = useSession();
 watchEffect(() => {
@@ -25,67 +24,6 @@ watchEffect(() => {
     router.replace("/");
   }
 });
-
-const {
-  data: users,
-  error: fetchError,
-  isLoading: fetchLoading,
-  execute,
-} = useAxios<UserInfo[]>("/user", fetcher);
-const searchName = ref("");
-const searchRole = ref(null);
-const filteredUsers = computed(() =>
-  users.value
-    ?.filter((d) => d.username.includes(searchName.value) || d.displayedName.includes(searchName.value))
-    .filter((d) => searchRole.value == null || d.role === searchRole.value),
-);
-
-const edittingUsername = ref("");
-const isLoading = ref(false);
-const errorMsg = ref("");
-const initialUserForm = {
-  displayedName: "",
-  role: 0,
-  password: "",
-};
-const userForm = ref<UserEditionForm>({ ...initialUserForm });
-const rules = {
-  displayedName: { required, maxLength: maxLength(16) },
-  role: { required, between: between(0, 2), integer },
-  password: { minLength: minLength(4) },
-};
-const v$ = useVuelidate(rules, userForm);
-function editUser(username: string) {
-  const originalData = users.value?.find((d) => d.username === username);
-  if (!originalData) return;
-  userForm.value = {
-    displayedName: originalData.displayedName,
-    role: originalData.role,
-    password: "",
-  };
-  edittingUsername.value = username;
-}
-async function submit() {
-  if (!(await v$.value.$validate())) return;
-
-  isLoading.value = true;
-  try {
-    if (!userForm.value.password) userForm.value.password = null;
-    await api.User.modify(edittingUsername.value, { ...userForm.value });
-    execute();
-    userForm.value = { ...initialUserForm };
-    edittingUsername.value = "";
-  } catch (error) {
-    if (axios.isAxiosError(error) && error.response?.data?.message) {
-      errorMsg.value = error.response.data.message;
-    } else {
-      errorMsg.value = t("admin.unknown-error-occurred");
-    }
-    throw error;
-  } finally {
-    isLoading.value = false;
-  }
-}
 </script>
 
 <template>
@@ -96,135 +34,15 @@ async function submit() {
           <router-link
             v-for="tab in tabs"
             :key="tab.value"
-            :class="['tab tab-bordered', $route.query.tab === tab.value && 'tab-active']"
-            :to="`/admin?tab=${tab.value}`"
+            :class="['tab tab-bordered', $route.path === tab.value && 'tab-active']"
+            :to="tab.value"
             >{{ tab.text }}</router-link
           >
         </div>
 
         <div class="my-4" />
 
-        <div class="mb-4 flex items-center gap-x-4">
-          <input
-            v-model="searchName"
-            :placeholder="$t('admin.user.search-name')"
-            type="text"
-            class="input-bordered input"
-          />
-
-          <select v-model="searchRole" class="select-bordered select">
-            <option :value="null">{{ $t("admin.user.select-role") }}</option>
-            <option :value="0">{{ $t("admin.user.admin") }}</option>
-            <option :value="1">{{ $t("admin.user.teacher") }}</option>
-            <option :value="2">{{ $t("admin.user.student") }}</option>
-          </select>
-
-          <span>{{ $t("admin.user.row-count", { n: filteredUsers?.length }) }}</span>
-        </div>
-
-        <data-status-wrapper :error="fetchError" :is-loading="fetchLoading">
-          <template #loading>
-            <skeleton-table :col="3" :row="5" />
-          </template>
-          <template #data>
-            <table class="table-compact table w-full">
-              <thead>
-                <tr>
-                  <th>{{ $t("admin.user.username") }}</th>
-                  <th>{{ $t("admin.user.display-name") }}</th>
-                  <th>{{ $t("admin.user.role") }}</th>
-                  <th></th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr v-for="{ username, displayedName, role } in filteredUsers" :key="username" class="hover">
-                  <td>{{ username }}</td>
-                  <td>{{ displayedName }}</td>
-                  <td>{{ ROLE[role] }}</td>
-                  <td>
-                    <div class="btn btn-ghost btn-sm btn-circle" @click="() => editUser(username)">
-                      <i-uil-pen />
-                    </div>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </template>
-        </data-status-wrapper>
-
-        <ui-dialog :modelValue="!!edittingUsername">
-          <template #title> {{ $t("admin.user.editing", { user: edittingUsername }) }}</template>
-          <template #content>
-            <div v-if="errorMsg" class="alert alert-error shadow-lg">
-              <div>
-                <i-uil-times-circle />
-                <span>{{ errorMsg }}</span>
-              </div>
-            </div>
-
-            <div class="form-control w-full max-w-xs">
-              <label class="label">
-                <span class="label-text">{{ $t("admin.user.username") }}</span>
-              </label>
-              <input
-                :value="edittingUsername"
-                type="text"
-                disabled
-                class="input-bordered input disabled w-full max-w-xs"
-              />
-            </div>
-
-            <div class="form-control w-full max-w-xs">
-              <label class="label">
-                <span class="label-text">{{ $t("admin.user.display-name") }}</span>
-              </label>
-              <input
-                v-model="v$.displayedName.$model"
-                type="text"
-                :class="['input-bordered input w-full max-w-xs', v$.displayedName.$error && 'input-error']"
-              />
-              <label class="label" v-show="v$.displayedName.$error">
-                <span class="label-text-alt text-error" v-text="v$.displayedName.$errors[0]?.$message" />
-              </label>
-            </div>
-
-            <div class="form-control w-full max-w-xs">
-              <label class="label">
-                <span class="label-text">{{ $t("admin.user.role") }}</span>
-              </label>
-              <select v-model="v$.role.$model" class="select-bordered select w-full max-w-xs">
-                <option :value="0">{{ $t("admin.user.admin") }}</option>
-                <option :value="1">{{ $t("admin.user.teacher") }}</option>
-                <option :value="2">{{ $t("admin.user.student") }}</option>
-              </select>
-            </div>
-
-            <div class="form-control w-full max-w-xs">
-              <label class="label">
-                <span class="label-text">{{ $t("admin.user.password") }}</span>
-              </label>
-              <input
-                v-model="v$.password.$model"
-                type="password"
-                :class="['input-bordered input w-full max-w-xs', v$.password.$error && 'input-error']"
-              />
-              <label class="label">
-                <span :class="['label-text-alt', v$.password.$error && 'text-error']">
-                  {{ v$.password.$error ? v$.password.$errors[0]?.$message : $t("admin.user.pwHint") }}
-                </span>
-              </label>
-            </div>
-
-            <div class="mt-8 flex justify-between">
-              <button :class="['btn btn-success', isLoading && 'loading']" @click="submit">
-                <i-uil-file-upload-alt class="mr-1 lg:h-5 lg:w-5" /> {{ $t("admin.user.submit") }}
-              </button>
-              <button :class="['btn btn-ghost']" @click="edittingUsername = ''">
-                {{ $t("admin.user.cancel") }}
-              </button>
-            </div>
-          </template>
-        </ui-dialog>
+        <router-view />
       </div>
     </div>
   </div>
diff --git a/src/pages/admin/user.vue b/src/pages/admin/user.vue
new file mode 100644
index 0000000..27d56ce
--- /dev/null
+++ b/src/pages/admin/user.vue
@@ -0,0 +1,198 @@
+<script setup lang="ts">
+import api, { fetcher } from "@/models/api";
+import useVuelidate from "@vuelidate/core";
+import { required, maxLength, between, integer, minLength } from "@vuelidate/validators";
+import { useAxios } from "@vueuse/integrations/useAxios";
+import axios from "axios";
+import { computed, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { ROLE } from "@/constants";
+import { useTitle } from "@vueuse/core";
+
+useTitle("Admin - User | Normal OJ");
+const { t } = useI18n();
+const {
+  data: users,
+  error: fetchError,
+  isLoading: fetchLoading,
+  execute,
+} = useAxios<UserInfo[]>("/user", fetcher);
+const searchName = ref("");
+const searchRole = ref(null);
+const filteredUsers = computed(() =>
+  users.value
+    ?.filter((d) => d.username.includes(searchName.value) || d.displayedName.includes(searchName.value))
+    .filter((d) => searchRole.value == null || d.role === searchRole.value),
+);
+
+const edittingUsername = ref("");
+const isLoading = ref(false);
+const errorMsg = ref("");
+const initialUserForm = {
+  displayedName: "",
+  role: 0,
+  password: "",
+};
+const userForm = ref<UserEditionForm>({ ...initialUserForm });
+const rules = {
+  displayedName: { required, maxLength: maxLength(16) },
+  role: { required, between: between(0, 2), integer },
+  password: { minLength: minLength(4) },
+};
+const v$ = useVuelidate(rules, userForm);
+function editUser(username: string) {
+  const originalData = users.value?.find((d) => d.username === username);
+  if (!originalData) return;
+  userForm.value = {
+    displayedName: originalData.displayedName,
+    role: originalData.role,
+    password: "",
+  };
+  edittingUsername.value = username;
+}
+async function submit() {
+  if (!(await v$.value.$validate())) return;
+
+  isLoading.value = true;
+  try {
+    if (!userForm.value.password) userForm.value.password = null;
+    await api.User.modify(edittingUsername.value, { ...userForm.value });
+    execute();
+    userForm.value = { ...initialUserForm };
+    edittingUsername.value = "";
+  } catch (error) {
+    if (axios.isAxiosError(error) && error.response?.data?.message) {
+      errorMsg.value = error.response.data.message;
+    } else {
+      errorMsg.value = t("admin.unknown-error-occurred");
+    }
+    throw error;
+  } finally {
+    isLoading.value = false;
+  }
+}
+</script>
+
+<template>
+  <div class="mb-4 flex items-center gap-x-4">
+    <input
+      v-model="searchName"
+      :placeholder="$t('admin.user.search-name')"
+      type="text"
+      class="input-bordered input"
+    />
+
+    <select v-model="searchRole" class="select-bordered select">
+      <option :value="null">{{ $t("admin.user.select-role") }}</option>
+      <option :value="0">{{ $t("admin.user.admin") }}</option>
+      <option :value="1">{{ $t("admin.user.teacher") }}</option>
+      <option :value="2">{{ $t("admin.user.student") }}</option>
+    </select>
+
+    <span>{{ $t("admin.user.row-count", { n: filteredUsers?.length }) }}</span>
+  </div>
+
+  <data-status-wrapper :error="fetchError" :is-loading="fetchLoading">
+    <template #loading>
+      <skeleton-table :col="3" :row="5" />
+    </template>
+    <template #data>
+      <table class="table-compact table w-full">
+        <thead>
+          <tr>
+            <th>{{ $t("admin.user.username") }}</th>
+            <th>{{ $t("admin.user.display-name") }}</th>
+            <th>{{ $t("admin.user.role") }}</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="{ username, displayedName, role } in filteredUsers" :key="username" class="hover">
+            <td>{{ username }}</td>
+            <td>{{ displayedName }}</td>
+            <td>{{ ROLE[role] }}</td>
+            <td>
+              <div class="btn btn-ghost btn-sm btn-circle" @click="() => editUser(username)">
+                <i-uil-pen />
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </template>
+  </data-status-wrapper>
+
+  <ui-dialog :modelValue="!!edittingUsername">
+    <template #title> {{ $t("admin.user.editing", { user: edittingUsername }) }}</template>
+    <template #content>
+      <div v-if="errorMsg" class="alert alert-error shadow-lg">
+        <div>
+          <i-uil-times-circle />
+          <span>{{ errorMsg }}</span>
+        </div>
+      </div>
+
+      <div class="form-control w-full max-w-xs">
+        <label class="label">
+          <span class="label-text">{{ $t("admin.user.username") }}</span>
+        </label>
+        <input
+          :value="edittingUsername"
+          type="text"
+          disabled
+          class="input-bordered input disabled w-full max-w-xs"
+        />
+      </div>
+
+      <div class="form-control w-full max-w-xs">
+        <label class="label">
+          <span class="label-text">{{ $t("admin.user.display-name") }}</span>
+        </label>
+        <input
+          v-model="v$.displayedName.$model"
+          type="text"
+          :class="['input-bordered input w-full max-w-xs', v$.displayedName.$error && 'input-error']"
+        />
+        <label class="label" v-show="v$.displayedName.$error">
+          <span class="label-text-alt text-error" v-text="v$.displayedName.$errors[0]?.$message" />
+        </label>
+      </div>
+
+      <div class="form-control w-full max-w-xs">
+        <label class="label">
+          <span class="label-text">{{ $t("admin.user.role") }}</span>
+        </label>
+        <select v-model="v$.role.$model" class="select-bordered select w-full max-w-xs">
+          <option :value="0">{{ $t("admin.user.admin") }}</option>
+          <option :value="1">{{ $t("admin.user.teacher") }}</option>
+          <option :value="2">{{ $t("admin.user.student") }}</option>
+        </select>
+      </div>
+
+      <div class="form-control w-full max-w-xs">
+        <label class="label">
+          <span class="label-text">{{ $t("admin.user.password") }}</span>
+        </label>
+        <input
+          v-model="v$.password.$model"
+          type="password"
+          :class="['input-bordered input w-full max-w-xs', v$.password.$error && 'input-error']"
+        />
+        <label class="label">
+          <span :class="['label-text-alt', v$.password.$error && 'text-error']">
+            {{ v$.password.$error ? v$.password.$errors[0]?.$message : $t("admin.user.pwHint") }}
+          </span>
+        </label>
+      </div>
+
+      <div class="mt-8 flex justify-between">
+        <button :class="['btn btn-success', isLoading && 'loading']" @click="submit">
+          <i-uil-file-upload-alt class="mr-1 lg:h-5 lg:w-5" /> {{ $t("admin.user.submit") }}
+        </button>
+        <button :class="['btn btn-ghost']" @click="edittingUsername = ''">
+          {{ $t("admin.user.cancel") }}
+        </button>
+      </div>
+    </template>
+  </ui-dialog>
+</template>