diff --git a/src/modules/contents/attachments/AttachmentList.vue b/src/modules/contents/attachments/AttachmentList.vue
index 5f0b5037..bc1763e7 100644
--- a/src/modules/contents/attachments/AttachmentList.vue
+++ b/src/modules/contents/attachments/AttachmentList.vue
@@ -16,12 +16,13 @@ import {
   VSpace,
   VTag,
 } from "@halo-dev/components";
-import { ref } from "vue";
-import { users } from "@/modules/system/users/users-mock";
+import { onMounted, ref } from "vue";
 import vueFilePond from "vue-filepond";
 import "filepond/dist/filepond.min.css";
 import FilePondPluginImagePreview from "filepond-plugin-image-preview";
 import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css";
+import type { User } from "@/types/extension";
+import { axiosInstance } from "@halo-dev/admin-shared";
 
 const viewTypes = [
   {
@@ -43,6 +44,7 @@ const attachmentSelectVisible = ref(false);
 const uploadVisible = ref(false);
 const detailVisible = ref(false);
 const checkAll = ref(false);
+const users = ref<User[]>([]);
 
 const strategies = ref([
   {
@@ -76,6 +78,19 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
     };
   }
 );
+
+const handleFetchUsers = async () => {
+  try {
+    const { data } = await axiosInstance.get("/api/v1alpha1/users");
+    users.value = data;
+  } catch (e) {
+    console.error(e);
+  }
+};
+
+onMounted(() => {
+  handleFetchUsers();
+});
 </script>
 <template>
   <VPageHeader title="附件库">
@@ -455,8 +470,8 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
                                   </div>
                                   <div class="flex-shrink-0">
                                     <img
-                                      :alt="user.name"
-                                      :src="user.avatar"
+                                      :alt="user.spec.displayName"
+                                      :src="user.spec.avatar"
                                       class="h-10 w-10 rounded"
                                     />
                                   </div>
@@ -464,10 +479,10 @@ const attachments = Array.from(new Array(50), (_, index) => index).map(
                                     <p
                                       class="truncate text-sm font-medium text-gray-900"
                                     >
-                                      {{ user.name }}
+                                      {{ user.spec.displayName }}
                                     </p>
                                     <p class="truncate text-sm text-gray-500">
-                                      @{{ user.username }}
+                                      @{{ user.metadata.name }}
                                     </p>
                                   </div>
                                   <div>
diff --git a/src/modules/contents/pages/PageList.vue b/src/modules/contents/pages/PageList.vue
index e951e56f..cf4734a0 100644
--- a/src/modules/contents/pages/PageList.vue
+++ b/src/modules/contents/pages/PageList.vue
@@ -12,10 +12,11 @@ import {
   VTabbar,
   VTag,
 } from "@halo-dev/components";
-import { ref } from "vue";
-import { users } from "@/modules/system/users/users-mock";
+import { onMounted, ref } from "vue";
 import type { PagesPublicState } from "@halo-dev/admin-shared";
+import { axiosInstance } from "@halo-dev/admin-shared";
 import { useExtensionPointsState } from "@/composables/usePlugins";
+import type { User } from "@/types/extension";
 
 const pagesRef = ref([
   {
@@ -38,6 +39,8 @@ const pagesRef = ref([
   },
 ]);
 
+const users = ref<User[]>([]);
+
 const activeId = ref("functional");
 const checkAll = ref(false);
 const pagesPublicState = ref<PagesPublicState>({
@@ -45,6 +48,19 @@ const pagesPublicState = ref<PagesPublicState>({
 });
 
 useExtensionPointsState("PAGES", pagesPublicState);
+
+const handleFetchUsers = async () => {
+  try {
+    const { data } = await axiosInstance.get("/api/v1alpha1/users");
+    users.value = data;
+  } catch (e) {
+    console.error(e);
+  }
+};
+
+onMounted(() => {
+  handleFetchUsers();
+});
 </script>
 <template>
   <VPageHeader title="页面">
@@ -173,8 +189,8 @@ useExtensionPointsState("PAGES", pagesPublicState);
                                   </div>
                                   <div class="flex-shrink-0">
                                     <img
-                                      :alt="user.name"
-                                      :src="user.avatar"
+                                      :alt="user.spec.displayName"
+                                      :src="user.spec.avatar"
                                       class="h-10 w-10 rounded"
                                     />
                                   </div>
@@ -182,10 +198,10 @@ useExtensionPointsState("PAGES", pagesPublicState);
                                     <p
                                       class="truncate text-sm font-medium text-gray-900"
                                     >
-                                      {{ user.name }}
+                                      {{ user.spec.displayName }}
                                     </p>
                                     <p class="truncate text-sm text-gray-500">
-                                      @{{ user.username }}
+                                      @{{ user.metadata.name }}
                                     </p>
                                   </div>
                                   <div>
diff --git a/src/modules/contents/posts/PostList.vue b/src/modules/contents/posts/PostList.vue
index 4ab61721..8c4bf4b9 100644
--- a/src/modules/contents/posts/PostList.vue
+++ b/src/modules/contents/posts/PostList.vue
@@ -19,10 +19,11 @@ import {
   VTextarea,
 } from "@halo-dev/components";
 import { posts } from "./posts-mock";
-import { computed, ref } from "vue";
+import { computed, onMounted, ref } from "vue";
 import { useRouter } from "vue-router";
 import type { Post } from "@halo-dev/admin-api";
-import { users } from "@/modules/system/users/users-mock";
+import { axiosInstance } from "@halo-dev/admin-shared";
+import type { User } from "@/types/extension";
 
 const postsRef = ref(
   // eslint-disable-next-line
@@ -41,11 +42,21 @@ const settingActiveId = ref("general");
 // eslint-disable-next-line
 const selected = ref<Post | Record<string, any>>({});
 const saving = ref(false);
+const users = ref<User[]>([]);
 
 const checkedCount = computed(() => {
   return postsRef.value.filter((post) => post.checked).length;
 });
 
+const handleFetchUsers = async () => {
+  try {
+    const { data } = await axiosInstance.get("/api/v1alpha1/users");
+    users.value = data;
+  } catch (e) {
+    console.error(e);
+  }
+};
+
 const handleCheckAll = () => {
   postsRef.value.forEach((item) => {
     item.checked = checkAll.value;
@@ -81,6 +92,10 @@ const handleRouteToEditor = (post: any) => {
     },
   });
 };
+
+onMounted(() => {
+  handleFetchUsers();
+});
 </script>
 <template>
   <VModal v-model:visible="postSettings" :width="680" title="文章设置">
@@ -452,8 +467,8 @@ const handleRouteToEditor = (post: any) => {
                               </div>
                               <div class="flex-shrink-0">
                                 <img
-                                  :alt="user.name"
-                                  :src="user.avatar"
+                                  :alt="user.spec.displayName"
+                                  :src="user.spec.avatar"
                                   class="h-10 w-10 rounded"
                                 />
                               </div>
@@ -461,10 +476,10 @@ const handleRouteToEditor = (post: any) => {
                                 <p
                                   class="truncate text-sm font-medium text-gray-900"
                                 >
-                                  {{ user.name }}
+                                  {{ user.spec.displayName }}
                                 </p>
                                 <p class="truncate text-sm text-gray-500">
-                                  @{{ user.username }}
+                                  @{{ user.metadata.name }}
                                 </p>
                               </div>
                               <div>
diff --git a/src/modules/dashboard/widgets/RecentLoginWidget.vue b/src/modules/dashboard/widgets/RecentLoginWidget.vue
index 0e18418e..61c31a2b 100644
--- a/src/modules/dashboard/widgets/RecentLoginWidget.vue
+++ b/src/modules/dashboard/widgets/RecentLoginWidget.vue
@@ -1,6 +1,22 @@
 <script lang="ts" name="RecentLoginWidget" setup>
 import { VCard } from "@halo-dev/components";
-import { users } from "@/modules/system/users/users-mock";
+import { onMounted, ref } from "vue";
+import type { User } from "@/types/extension";
+import { axiosInstance } from "@halo-dev/admin-shared";
+
+const users = ref<User[]>([]);
+
+const handleFetchUsers = async () => {
+  try {
+    const { data } = await axiosInstance.get("/api/v1alpha1/users");
+    users.value = data;
+  } catch (e) {
+    console.error(e);
+  }
+};
+onMounted(() => {
+  handleFetchUsers();
+});
 </script>
 <template>
   <VCard
@@ -18,16 +34,18 @@ import { users } from "@/modules/system/users/users-mock";
           <div class="flex items-center space-x-4">
             <div class="flex-shrink-0">
               <img
-                :alt="user.name"
-                :src="user.avatar"
+                :alt="user.spec.displayName"
+                :src="user.spec.avatar"
                 class="h-10 w-10 rounded"
               />
             </div>
             <div class="min-w-0 flex-1">
               <p class="truncate text-sm font-medium text-gray-900">
-                {{ user.name }}
+                {{ user.spec.displayName }}
+              </p>
+              <p class="truncate text-sm text-gray-500">
+                @{{ user.metadata.name }}
               </p>
-              <p class="truncate text-sm text-gray-500">@{{ user.username }}</p>
             </div>
             <div>
               <time class="text-sm text-gray-500" datetime="2020-01-07 20:00">
diff --git a/src/modules/system/roles/RoleDetail.vue b/src/modules/system/roles/RoleDetail.vue
index f4f7a574..8957747c 100644
--- a/src/modules/system/roles/RoleDetail.vue
+++ b/src/modules/system/roles/RoleDetail.vue
@@ -11,12 +11,12 @@ import {
 } from "@halo-dev/components";
 import { useRoute, useRouter } from "vue-router";
 import { onMounted, ref } from "vue";
-import { users } from "@/modules/system/users/users-mock";
 import { axiosInstance } from "@halo-dev/admin-shared";
-import type { Role } from "@/types/extension";
+import type { Role, User } from "@/types/extension";
 
 const route = useRoute();
 
+const users = ref<User[]>([]);
 const role = ref<Role>();
 const roleActiveId = ref("detail");
 
@@ -31,14 +31,24 @@ const handleFetchRole = async () => {
   }
 };
 
+const handleFetchUsers = async () => {
+  try {
+    const { data } = await axiosInstance.get("/api/v1alpha1/users");
+    users.value = data;
+  } catch (e) {
+    console.error(e);
+  }
+};
+
 const router = useRouter();
 
-const handleRouteToUser = (username: string) => {
-  router.push({ name: "UserDetail", params: { username } });
+const handleRouteToUser = (name: string) => {
+  router.push({ name: "UserDetail", params: { name } });
 };
 
 onMounted(() => {
   handleFetchRole();
+  handleFetchUsers();
 });
 </script>
 <template>
@@ -132,7 +142,7 @@ onMounted(() => {
                       v-for="(user, index) in users"
                       :key="index"
                       class="block cursor-pointer hover:bg-gray-50"
-                      @click="handleRouteToUser(user.username)"
+                      @click="handleRouteToUser(user.metadata.name)"
                     >
                       <div class="flex items-center px-4 py-4">
                         <div class="flex min-w-0 flex-1 items-center">
@@ -142,8 +152,8 @@ onMounted(() => {
                                 class="overflow-hidden rounded border bg-white hover:shadow-sm"
                               >
                                 <img
-                                  :alt="user.name"
-                                  :src="user.avatar"
+                                  :alt="user.spec.displayName"
+                                  :src="user.spec.avatar"
                                   class="h-full w-full"
                                 />
                               </div>
@@ -156,11 +166,11 @@ onMounted(() => {
                               <p
                                 class="truncate text-sm font-medium text-gray-900"
                               >
-                                {{ user.name }}
+                                {{ user.spec.displayName }}
                               </p>
                               <p class="mt-2 flex items-center">
                                 <span class="text-xs text-gray-500">
-                                  {{ user.username }}
+                                  {{ user.metadata.name }}
                                 </span>
                               </p>
                             </div>
diff --git a/src/modules/system/users/users-mock.ts b/src/modules/system/users/users-mock.ts
deleted file mode 100644
index 72b28cbf..00000000
--- a/src/modules/system/users/users-mock.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-export const users = [
-  {
-    id: 1,
-    name: "Ryan Wang",
-    username: "ryanwang",
-    role: "Super Administrator",
-    email: "i@ryanc.cc",
-    avatar: "https://ryanc.cc/avatar",
-    cover: "from-gray-800 to-red-500",
-  },
-  {
-    id: 2,
-    name: "JohnNiang",
-    username: "johnniang",
-    role: "Super Administrator",
-    email: "johnniang@halo.run",
-    avatar: "https://johnniang.me/avatar",
-    cover: "from-gray-800 to-green-500",
-  },
-  {
-    id: 3,
-    name: "guqing",
-    username: "guqing",
-    role: "Super Administrator",
-    email: "guqing@halo.run",
-    avatar: "https://guqing.xyz/avatar",
-    cover: "from-gray-800 to-blue-500",
-  },
-  {
-    id: 4,
-    name: "Johnson",
-    username: "johnson",
-    role: "Administrator",
-    email: "",
-    avatar: "https://i.pravatar.cc/300?name=johnson",
-  },
-  {
-    id: 5,
-    name: "Mary Jane",
-    username: "maryjane",
-    role: "Editor",
-    email: "",
-    avatar: "https://i.pravatar.cc/300?name=maryjane",
-  },
-  {
-    id: 5,
-    name: "Berry Allen",
-    username: "flash",
-    role: "Guest",
-    email: "",
-    avatar: "https://i.pravatar.cc/300?name=flash",
-  },
-];