diff --git a/src/formkit/theme.ts b/src/formkit/theme.ts
index 7b4437cb5..aaa1a3f1a 100644
--- a/src/formkit/theme.ts
+++ b/src/formkit/theme.ts
@@ -26,8 +26,8 @@ const buttonClassification = {
 const theme: Record<string, Record<string, string>> = {
   global: {
     outer: "formkit-disabled:opacity-50",
-    help: "text-xs text-gray-500",
-    messages: "list-none p-0 mt-1 mb-0",
+    help: "text-xs mt-1.5 text-gray-500",
+    messages: "list-none p-0 mt-1.5 mb-0",
     message: "text-red-500 mb-1 text-xs",
     form: "flex flex-col space-y-4",
   },
diff --git a/src/modules/system/roles/RoleDetail.vue b/src/modules/system/roles/RoleDetail.vue
index 56570ac21..c024a8e1a 100644
--- a/src/modules/system/roles/RoleDetail.vue
+++ b/src/modules/system/roles/RoleDetail.vue
@@ -10,27 +10,21 @@ import {
   VTag,
 } from "@halo-dev/components";
 import { useRoute, useRouter } from "vue-router";
-import { computed, onMounted, ref } from "vue";
+import { onMounted, ref } from "vue";
 import { apiClient } from "@halo-dev/admin-shared";
 import type { Role, User } from "@halo-dev/api-client";
-import { pluginLabels, roleLabels } from "@/constants/labels";
+import { pluginLabels } from "@/constants/labels";
 import { rbacAnnotations } from "@/constants/annotations";
-
-interface RoleTemplateGroup {
-  module: string | null | undefined;
-  roles: Role[];
-}
+import { useRoleTemplateSelection } from "@/modules/system/roles/composables/use-role";
 
 interface FormState {
   role: Role;
-  selectedRoleTemplates: string[];
   saving: boolean;
 }
 
 const route = useRoute();
 
 const users = ref<User[]>([]);
-const roles = ref<Role[]>([]);
 const roleActiveId = ref("detail");
 const formState = ref<FormState>({
   role: {
@@ -46,36 +40,11 @@ const formState = ref<FormState>({
     },
     rules: [],
   },
-  selectedRoleTemplates: [],
   saving: false,
 });
 
-const roleTemplates = computed<Role[]>(() => {
-  return roles.value.filter(
-    (role) =>
-      role.metadata.labels?.[roleLabels.TEMPLATE] === "true" &&
-      role.metadata.labels?.["halo.run/hidden"] !== "true"
-  );
-});
-
-const roleTemplateGroups = computed<RoleTemplateGroup[]>(() => {
-  const groups: RoleTemplateGroup[] = [];
-  roleTemplates.value.forEach((role) => {
-    const group = groups.find(
-      (group) =>
-        group.module === role.metadata.annotations?.[rbacAnnotations.MODULE]
-    );
-    if (group) {
-      group.roles.push(role);
-    } else {
-      groups.push({
-        module: role.metadata.annotations?.[rbacAnnotations.MODULE],
-        roles: [role],
-      });
-    }
-  });
-  return groups;
-});
+const { roleTemplateGroups, handleRoleTemplateSelect, selectedRoleTemplates } =
+  useRoleTemplateSelection();
 
 const handleFetchRole = async () => {
   try {
@@ -83,23 +52,17 @@ const handleFetchRole = async () => {
       route.params.name as string
     );
     formState.value.role = response.data;
-    formState.value.selectedRoleTemplates = JSON.parse(
-      response.data.metadata.annotations?.[rbacAnnotations.DEPENDENCIES] || "[]"
+    selectedRoleTemplates.value = new Set(
+      JSON.parse(
+        response.data.metadata.annotations?.[rbacAnnotations.DEPENDENCIES] ||
+          "[]"
+      )
     );
   } catch (error) {
     console.error(error);
   }
 };
 
-const handleFetchRoles = async () => {
-  try {
-    const { data } = await apiClient.extension.role.listv1alpha1Role();
-    roles.value = data.items;
-  } catch (e) {
-    console.error(e);
-  }
-};
-
 const handleFetchUsers = async () => {
   try {
     const { data } = await apiClient.extension.user.listv1alpha1User();
@@ -114,7 +77,7 @@ const handleUpdateRole = async () => {
     formState.value.saving = true;
     if (formState.value.role.metadata.annotations) {
       formState.value.role.metadata.annotations[rbacAnnotations.DEPENDENCIES] =
-        JSON.stringify(formState.value.selectedRoleTemplates);
+        JSON.stringify(Array.from(selectedRoleTemplates.value));
     }
     await apiClient.extension.role.updatev1alpha1Role(
       route.params.name as string,
@@ -136,7 +99,6 @@ const handleRouteToUser = (name: string) => {
 
 onMounted(() => {
   handleFetchRole();
-  handleFetchRoles();
   handleFetchUsers();
 });
 </script>
@@ -337,13 +299,14 @@ onMounted(() => {
                 <ul class="space-y-2">
                   <li v-for="(role, index) in group.roles" :key="index">
                     <label
-                      class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-primary"
+                      class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded-base border p-5 hover:border-primary"
                     >
                       <input
-                        v-model="formState.selectedRoleTemplates"
+                        v-model="selectedRoleTemplates"
                         :value="role.metadata.name"
                         class="h-4 w-4 rounded border-gray-300 text-indigo-600"
                         type="checkbox"
+                        @change="handleRoleTemplateSelect"
                       />
                       <div class="flex flex-1 flex-col gap-y-3">
                         <span class="font-medium text-gray-900">
diff --git a/src/modules/system/roles/RoleList.vue b/src/modules/system/roles/RoleList.vue
index 97f2a1f8a..b34a2549e 100644
--- a/src/modules/system/roles/RoleList.vue
+++ b/src/modules/system/roles/RoleList.vue
@@ -11,7 +11,7 @@ import {
   VSpace,
   VTag,
 } from "@halo-dev/components";
-import RoleCreationModal from "./components/RoleCreationModal.vue";
+import RoleEditingModal from "./components/RoleEditingModal.vue";
 import { useRouter } from "vue-router";
 import { computed, onMounted, ref } from "vue";
 import type { Role } from "@halo-dev/api-client";
@@ -48,10 +48,7 @@ onMounted(() => {
 });
 </script>
 <template>
-  <RoleCreationModal
-    v-model:visible="createVisible"
-    @close="handleFetchRoles"
-  />
+  <RoleEditingModal v-model:visible="createVisible" @close="handleFetchRoles" />
 
   <VPageHeader title="角色">
     <template #icon>
diff --git a/src/modules/system/roles/components/RoleCreationModal.vue b/src/modules/system/roles/components/RoleEditingModal.vue
similarity index 63%
rename from src/modules/system/roles/components/RoleCreationModal.vue
rename to src/modules/system/roles/components/RoleEditingModal.vue
index 742b32ecc..680a88aca 100644
--- a/src/modules/system/roles/components/RoleCreationModal.vue
+++ b/src/modules/system/roles/components/RoleEditingModal.vue
@@ -1,23 +1,17 @@
 <script lang="ts" setup>
 import { VButton, VModal, VTabItem, VTabs } from "@halo-dev/components";
-import { computed, ref, watch } from "vue";
+import { ref } from "vue";
 import { apiClient } from "@halo-dev/admin-shared";
 import type { Role } from "@halo-dev/api-client";
 import { rbacAnnotations } from "@/constants/annotations";
-import { roleLabels } from "@/constants/labels";
+import { useRoleTemplateSelection } from "@/modules/system/roles/composables/use-role";
 
-interface RoleTemplateGroup {
-  module: string | null | undefined;
-  roles: Role[];
-}
-
-interface CreationFormState {
+interface FormState {
   role: Role;
-  selectedRoleTemplates: string[];
   saving: boolean;
 }
 
-const props = defineProps({
+defineProps({
   visible: {
     type: Boolean,
     default: false,
@@ -26,9 +20,11 @@ const props = defineProps({
 
 const emit = defineEmits(["update:visible", "close"]);
 
-const creationActiveId = ref("general");
-const roles = ref<Role[]>([]);
-const creationFormState = ref<CreationFormState>({
+const { roleTemplateGroups, handleRoleTemplateSelect, selectedRoleTemplates } =
+  useRoleTemplateSelection();
+
+const activeId = ref("general");
+const formState = ref<FormState>({
   role: {
     apiVersion: "v1alpha1",
     kind: "Role",
@@ -42,62 +38,22 @@ const creationFormState = ref<CreationFormState>({
     },
     rules: [],
   },
-  selectedRoleTemplates: [],
   saving: false,
 });
 
-const roleTemplates = computed<Role[]>(() => {
-  return roles.value.filter(
-    (role) =>
-      role.metadata.labels?.[roleLabels.TEMPLATE] === "true" &&
-      role.metadata.labels?.["halo.run/hidden"] !== "true"
-  );
-});
-
-const roleTemplateGroups = computed<RoleTemplateGroup[]>(() => {
-  const groups: RoleTemplateGroup[] = [];
-  roleTemplates.value.forEach((role) => {
-    const group = groups.find(
-      (group) =>
-        group.module === role.metadata.annotations?.[rbacAnnotations.MODULE]
-    );
-    if (group) {
-      group.roles.push(role);
-    } else {
-      groups.push({
-        module: role.metadata.annotations?.[rbacAnnotations.MODULE],
-        roles: [role],
-      });
-    }
-  });
-  return groups;
-});
-
-const handleFetchRoles = async () => {
-  try {
-    const { data } = await apiClient.extension.role.listv1alpha1Role();
-    roles.value = data.items;
-  } catch (e) {
-    console.error(e);
-  }
-};
-
 const handleCreateRole = async () => {
   try {
-    creationFormState.value.saving = true;
-    if (creationFormState.value.role.metadata.annotations) {
-      creationFormState.value.role.metadata.annotations[
-        rbacAnnotations.DEPENDENCIES
-      ] = JSON.stringify(creationFormState.value.selectedRoleTemplates);
+    formState.value.saving = true;
+    if (formState.value.role.metadata.annotations) {
+      formState.value.role.metadata.annotations[rbacAnnotations.DEPENDENCIES] =
+        JSON.stringify(Array.from(selectedRoleTemplates.value));
     }
-    await apiClient.extension.role.createv1alpha1Role(
-      creationFormState.value.role
-    );
+    await apiClient.extension.role.createv1alpha1Role(formState.value.role);
     handleVisibleChange(false);
   } catch (e) {
     console.error(e);
   } finally {
-    creationFormState.value.saving = false;
+    formState.value.saving = false;
   }
 };
 
@@ -107,15 +63,6 @@ const handleVisibleChange = (visible: boolean) => {
     emit("close");
   }
 };
-
-watch(
-  () => props.visible,
-  (visible) => {
-    if (visible) {
-      handleFetchRoles();
-    }
-  }
-);
 </script>
 <template>
   <VModal
@@ -124,10 +71,10 @@ watch(
     title="创建角色"
     @update:visible="handleVisibleChange"
   >
-    <VTabs v-model:active-id="creationActiveId" type="outline">
+    <VTabs v-model:active-id="activeId" type="outline">
       <VTabItem id="general" label="基础信息">
         <FormKit
-          v-if="creationFormState.role.metadata.annotations"
+          v-if="formState.role.metadata.annotations"
           id="role-form"
           :actions="false"
           type="form"
@@ -135,16 +82,14 @@ watch(
         >
           <FormKit
             v-model="
-              creationFormState.role.metadata.annotations[
-                rbacAnnotations.DISPLAY_NAME
-              ]
+              formState.role.metadata.annotations[rbacAnnotations.DISPLAY_NAME]
             "
             label="名称"
             type="text"
             validation="required"
           ></FormKit>
           <FormKit
-            v-model="creationFormState.role.metadata.name"
+            v-model="formState.role.metadata.name"
             help="角色别名，用于区分角色，不能重复，创建之后不能修改"
             label="别名"
             type="text"
@@ -167,13 +112,14 @@ watch(
                 <ul class="space-y-2">
                   <li v-for="(role, index) in group.roles" :key="index">
                     <label
-                      class="inline-flex w-full cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-primary"
+                      class="inline-flex w-full cursor-pointer flex-row items-center gap-4 rounded-base border p-5 hover:border-primary"
                     >
                       <input
-                        v-model="creationFormState.selectedRoleTemplates"
+                        v-model="selectedRoleTemplates"
                         :value="role.metadata.name"
                         class="h-4 w-4 rounded border-gray-300 text-indigo-600"
                         type="checkbox"
+                        @change="handleRoleTemplateSelect"
                       />
                       <div class="flex flex-1 flex-col gap-y-3">
                         <span class="font-medium text-gray-900">
@@ -212,7 +158,7 @@ watch(
     </VTabs>
     <template #footer>
       <VButton
-        :loading="creationFormState.saving"
+        :loading="formState.saving"
         type="secondary"
         @click="$formkit.submit('role-form')"
         >创建
diff --git a/src/modules/system/roles/composables/use-role.ts b/src/modules/system/roles/composables/use-role.ts
new file mode 100644
index 000000000..57ad6e19b
--- /dev/null
+++ b/src/modules/system/roles/composables/use-role.ts
@@ -0,0 +1,160 @@
+import type { Role } from "@halo-dev/api-client";
+import { computed, onMounted, ref } from "vue";
+import { roleLabels } from "@/constants/labels";
+import { rbacAnnotations } from "@/constants/annotations";
+import { apiClient } from "@halo-dev/admin-shared";
+
+interface RoleTemplateGroup {
+  module: string | null | undefined;
+  roles: Role[];
+}
+
+export function useRoleTemplateSelection() {
+  const rawRoles = ref<Role[]>([] as Role[]);
+  const selectedRoleTemplates = ref<Set<string>>(new Set());
+
+  // Get all role templates based on the condition that `metadata.labels.[halo.run/role-template] === 'true'`
+  const roleTemplates = computed<Role[]>(() => {
+    return rawRoles.value.filter(
+      (role) =>
+        role.metadata.labels?.[roleLabels.TEMPLATE] === "true" &&
+        role.metadata.labels?.["halo.run/hidden"] !== "true"
+    );
+  });
+
+  /**
+   * Grouping role templates by module
+   * Example:
+   * {
+   *   "module": "Users Management",
+   *   "roles": [
+   *     {
+   *       "rules": [
+   *         {
+   *           "apiGroups": [
+   *             ""
+   *           ],
+   *           "resources": [
+   *             "users"
+   *           ],
+   *           "resourceNames": [],
+   *           "nonResourceURLs": [],
+   *           "verbs": [
+   *             "create",
+   *             "patch",
+   *             "update",
+   *             "delete",
+   *             "deletecollection"
+   *           ]
+   *         }
+   *       ],
+   *       "apiVersion": "v1alpha1",
+   *       "kind": "Role",
+   *       "metadata": {
+   *         "name": "role-template-manage-users",
+   *         "labels": {
+   *           "halo.run/role-template": "true"
+   *         },
+   *         "annotations": {
+   *           "rbac.authorization.halo.run/dependencies": "[ \"role-template-view-users\", \"role-template-change-password\" ]\n",
+   *           "rbac.authorization.halo.run/module": "Users Management",
+   *           "rbac.authorization.halo.run/display-name": "User manage",
+   *           "rbac.authorization.halo.run/ui-permissions": "[\"system:users:manage\"]\n",
+   *           "rbac.authorization.halo.run/dependency-rules": "[{\"apiGroups\":[\"\"],\"resources\":[\"users\"],\"resourceNames\":[],\"nonResourceURLs\":[],\"verbs\":[\"get\",\"list\"]},{\"apiGroups\":[\"api.halo.run\"],\"resources\":[\"users/password\"],\"resourceNames\":[],\"nonResourceURLs\":[],\"verbs\":[\"update\"]}]",
+   *           "rbac.authorization.halo.run/ui-permissions-aggregated": "[\"system:users:view\"]"
+   *         },
+   *         "version": 9
+   *       }
+   *     },
+   *     {
+   *       "rules": [
+   *         {
+   *           "apiGroups": [
+   *             ""
+   *           ],
+   *           "resources": [
+   *             "users"
+   *           ],
+   *           "resourceNames": [],
+   *           "nonResourceURLs": [],
+   *           "verbs": [
+   *             "get",
+   *             "list"
+   *           ]
+   *         }
+   *       ],
+   *       "apiVersion": "v1alpha1",
+   *       "kind": "Role",
+   *       "metadata": {
+   *         "name": "role-template-view-users",
+   *         "labels": {
+   *           "halo.run/role-template": "true"
+   *         },
+   *         "annotations": {
+   *           "rbac.authorization.halo.run/module": "Users Management",
+   *           "rbac.authorization.halo.run/display-name": "User View",
+   *           "rbac.authorization.halo.run/ui-permissions": "[\"system:users:view\"]\n",
+   *           "rbac.authorization.halo.run/dependency-rules": "[]",
+   *           "rbac.authorization.halo.run/ui-permissions-aggregated": "[]"
+   *         },
+   *         "version": 9
+   *       }
+   *     }
+   *   ]
+   * }
+   */
+  const roleTemplateGroups = computed<RoleTemplateGroup[]>(() => {
+    const groups: RoleTemplateGroup[] = [];
+    roleTemplates.value.forEach((role) => {
+      const group = groups.find(
+        (group) =>
+          group.module === role.metadata.annotations?.[rbacAnnotations.MODULE]
+      );
+      if (group) {
+        group.roles.push(role);
+      } else {
+        groups.push({
+          module: role.metadata.annotations?.[rbacAnnotations.MODULE],
+          roles: [role],
+        });
+      }
+    });
+    return groups;
+  });
+
+  const handleFetchRoles = async () => {
+    try {
+      const { data } = await apiClient.extension.role.listv1alpha1Role();
+      rawRoles.value = data.items;
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  const handleRoleTemplateSelect = async (e: Event) => {
+    const { checked, value } = e.target as HTMLInputElement;
+    if (!checked) {
+      return;
+    }
+    const role = rawRoles.value.find((role) => role.metadata.name === value);
+    const dependencies =
+      role?.metadata.annotations?.[rbacAnnotations.DEPENDENCIES];
+    if (!dependencies) {
+      return;
+    }
+    const dependenciesArray = JSON.parse(dependencies);
+    dependenciesArray.forEach((role) => {
+      selectedRoleTemplates.value.add(role);
+    });
+  };
+
+  onMounted(handleFetchRoles);
+
+  return {
+    rawRoles,
+    selectedRoleTemplates,
+    roleTemplates,
+    roleTemplateGroups,
+    handleRoleTemplateSelect,
+  };
+}