diff --git a/console/src/formkit/formkit.config.ts b/console/src/formkit/formkit.config.ts
index 2b519b000..47f143593 100644
--- a/console/src/formkit/formkit.config.ts
+++ b/console/src/formkit/formkit.config.ts
@@ -15,6 +15,7 @@ import { tagSelect } from "./inputs/tag-select";
 import { categorySelect } from "./inputs/category-select";
 import { categoryCheckbox } from "./inputs/category-checkbox";
 import { tagCheckbox } from "./inputs/tag-checkbox";
+import { roleSelect } from "./inputs/role-select";
 
 import radioAlt from "./plugins/radio-alt";
 import stopImplicitSubmission from "./plugins/stop-implicit-submission";
@@ -39,6 +40,7 @@ const config: DefaultConfigOptions = {
     singlePageSelect,
     categoryCheckbox,
     tagCheckbox,
+    roleSelect,
   },
   locales: { zh, en },
   locale: "zh",
diff --git a/console/src/formkit/inputs/role-select.ts b/console/src/formkit/inputs/role-select.ts
new file mode 100644
index 000000000..8ad62a127
--- /dev/null
+++ b/console/src/formkit/inputs/role-select.ts
@@ -0,0 +1,40 @@
+import { rbacAnnotations } from "@/constants/annotations";
+import { roleLabels } from "@/constants/labels";
+import { apiClient } from "@/utils/api-client";
+import type { FormKitNode, FormKitTypeDefinition } from "@formkit/core";
+import { select, selects, defaultIcon } from "@formkit/inputs";
+import { i18n } from "@/locales";
+
+function optionsHandler(node: FormKitNode) {
+  node.on("created", async () => {
+    const { data } = await apiClient.extension.role.listv1alpha1Role({
+      page: 0,
+      size: 0,
+      labelSelector: [`!${roleLabels.TEMPLATE}`],
+    });
+
+    node.props.options = [
+      {
+        label: i18n.global.t(
+          "core.user.grant_permission_modal.fields.role.placeholder"
+        ),
+        value: "",
+      },
+      ...data.items.map((role) => {
+        return {
+          label:
+            role.metadata?.annotations?.[rbacAnnotations.DISPLAY_NAME] ||
+            role.metadata.name,
+          value: role.metadata?.name,
+        };
+      }),
+    ];
+  });
+}
+
+export const roleSelect: FormKitTypeDefinition = {
+  ...select,
+  props: ["placeholder"],
+  forceTypeProp: "select",
+  features: [optionsHandler, selects, defaultIcon("select", "select")],
+};
diff --git a/console/src/modules/system/users/components/GrantPermissionModal.vue b/console/src/modules/system/users/components/GrantPermissionModal.vue
index d80933411..917519dad 100644
--- a/console/src/modules/system/users/components/GrantPermissionModal.vue
+++ b/console/src/modules/system/users/components/GrantPermissionModal.vue
@@ -1,15 +1,9 @@
 <script lang="ts" setup>
-import { rbacAnnotations } from "@/constants/annotations";
 import { apiClient } from "@/utils/api-client";
-import type { FormKitOptionsList } from "@formkit/inputs";
 import type { User } from "@halo-dev/api-client";
 import { VModal, VSpace, VButton } from "@halo-dev/components";
 import SubmitButton from "@/components/button/SubmitButton.vue";
-import { computed, ref } from "vue";
-import { useFetchRole } from "../../roles/composables/use-role";
-import { useI18n } from "vue-i18n";
-
-const { t } = useI18n();
+import { ref } from "vue";
 
 const props = withDefaults(
   defineProps<{
@@ -30,24 +24,6 @@ const emit = defineEmits<{
 const selectedRole = ref("");
 const saving = ref(false);
 
-const { roles } = useFetchRole();
-const rolesMap = computed<FormKitOptionsList>(() => {
-  return [
-    {
-      label: t("core.user.grant_permission_modal.fields.role.placeholder"),
-      value: "",
-    },
-    ...roles.value.map((role) => {
-      return {
-        label:
-          role.metadata?.annotations?.[rbacAnnotations.DISPLAY_NAME] ||
-          role.metadata.name,
-        value: role.metadata?.name,
-      };
-    }),
-  ];
-});
-
 const handleGrantPermission = async () => {
   try {
     saving.value = true;
@@ -89,9 +65,8 @@ const onVisibleChange = (visible: boolean) => {
     >
       <FormKit
         v-model="selectedRole"
-        :options="rolesMap"
         :label="$t('core.user.grant_permission_modal.fields.role.label')"
-        type="select"
+        type="roleSelect"
       ></FormKit>
     </FormKit>
     <template #footer>