diff --git a/src/components/add-role-dialogue/index.tsx b/src/components/add-role-dialogue/index.tsx
index 2e3fc2c..dfa3d13 100644
--- a/src/components/add-role-dialogue/index.tsx
+++ b/src/components/add-role-dialogue/index.tsx
@@ -10,6 +10,7 @@ export default function AddRoleDialogue({ form }: AddRoleDialogueProps) {
     <RoleDisplayForm
       form={form}
       initialValues={{
+        id: null,
         name: "",
         code: "",
         sort: 0,
@@ -17,6 +18,7 @@ export default function AddRoleDialogue({ form }: AddRoleDialogueProps) {
         defaultValue: false,
         status: "ACTIVE",
       }}
+      mode="add"
     />
   )
 }
diff --git a/src/components/edit-role-dialogue/index.tsx b/src/components/edit-role-dialogue/index.tsx
index e4169e9..e1db88b 100644
--- a/src/components/edit-role-dialogue/index.tsx
+++ b/src/components/edit-role-dialogue/index.tsx
@@ -1,5 +1,6 @@
 import type { FormInstance } from "antd"
 import RoleDisplayForm, { type RoleFormValues } from "@/components/role-display-form"
+import type { Role } from "@/types/entity"
 
 export interface EditRoleDialogueProps {
   form: FormInstance<RoleFormValues>
@@ -7,5 +8,5 @@ export interface EditRoleDialogueProps {
 }
 
 export default function EditRoleDialogue({ form, initialValues }: EditRoleDialogueProps) {
-  return <RoleDisplayForm form={form} initialValues={initialValues} />
+  return <RoleDisplayForm form={form} initialValues={initialValues} mode="edit" />
 }
diff --git a/src/components/role-display-form/index.tsx b/src/components/role-display-form/index.tsx
index 9b9b771..498acb5 100644
--- a/src/components/role-display-form/index.tsx
+++ b/src/components/role-display-form/index.tsx
@@ -1,10 +1,13 @@
 import { App, Form, type FormInstance, Input, InputNumber, Select, Switch } from "antd"
 import { type Status, StatusOptions } from "@/types/constant"
+import type { FormMode } from "@/types/form"
+import { useEffect, useMemo } from "react"
 
 /**
  * Role form values.
  */
 export interface RoleFormValues {
+  id: number | string | null
   name: string
   code: string
   sort: number
@@ -18,12 +21,22 @@ export interface RoleFormValues {
  */
 export interface RoleDisplayFormProps {
   initialValues?: RoleFormValues
-  isEditing?: boolean
   form: FormInstance<RoleFormValues>
-  isAdding?: boolean
+  mode: FormMode
 }
 
-export default function RoleDisplayForm({ initialValues, form }: RoleDisplayFormProps) {
+export default function RoleDisplayForm({ initialValues, form, mode }: RoleDisplayFormProps) {
+  const isEditing = useMemo<boolean>(() => mode == "edit", [mode])
+
+  // Initialise form values
+  useEffect(() => {
+    if (initialValues) {
+      form.setFieldsValue(initialValues)
+    } else {
+      form.resetFields()
+    }
+  }, [initialValues, form])
+
   return (
     <Form<RoleFormValues>
       form={form}
@@ -31,6 +44,9 @@ export default function RoleDisplayForm({ initialValues, form }: RoleDisplayForm
       layout="vertical"
       labelAlign="right"
       validateTrigger="onBlur">
+      <Form.Item<RoleFormValues> label="角色编号" hidden={!isEditing} name="id">
+        <Input disabled />
+      </Form.Item>
       <Form.Item<RoleFormValues>
         label="角色名称"
         name="name"
@@ -56,7 +72,7 @@ export default function RoleDisplayForm({ initialValues, form }: RoleDisplayForm
         <InputNumber />
       </Form.Item>
       <Form.Item<RoleFormValues> label="是否为默认角色" name="defaultValue">
-        <Switch />
+        <Switch disabled={isEditing}/>
       </Form.Item>
       <Form.Item<RoleFormValues> label="角色状态" name="status">
         <Select<Status> options={StatusOptions} />
diff --git a/src/page/role/index.tsx b/src/page/role/index.tsx
index e3c5b76..e568369 100644
--- a/src/page/role/index.tsx
+++ b/src/page/role/index.tsx
@@ -17,6 +17,8 @@ import type { QueryRoleForm } from "@/types/form"
 import type { Status } from "@/types/constant"
 import AddRoleDialogue from "@/components/add-role-dialogue"
 import type { RoleFormValues } from "@/components/role-display-form"
+import EditRoleDialogue from "@/components/edit-role-dialogue"
+import { addRole } from "@/api/role"
 
 export default function RolePage() {
   const { message, modal } = App.useApp()
@@ -94,6 +96,48 @@ export default function RolePage() {
           console.error("用户取消添加角色")
         }
       )
+      .finally(() => {
+        addRoleForm.resetFields()
+      })
+  }
+
+  const onEditRoleFinish = async () => {
+    try {
+      const values = await editRoleForm.validateFields()
+      console.log(values)
+      // await RoleApi.addRole(values)
+      void message.success(`角色 ${values.name} 修改成功`)
+      return true
+    } catch (error: unknown) {
+      if (error instanceof Error && error.message.includes("Validation Failed")) {
+        return false
+      } else if (axios.isAxiosError<GeneralErrorResponse>(error)) {
+        void message.error(error.response?.data.message ?? "创建失败，请稍后再试")
+      }
+      return false
+    }
+  }
+
+  const handleEditRole = (role: Role) => {
+    modal
+      .confirm({
+        title: "修改用户",
+        content: <EditRoleDialogue form={editRoleForm} initialValues={role} />,
+        width: 600,
+        onOk: onEditRoleFinish,
+      })
+      .then(
+        () => {
+          const formValues = queryForm.getFieldsValue()
+          queryRoles(pageNum, pageSize, formValues)
+        },
+        () => {
+          console.error("用户取消添加角色")
+        }
+      )
+      .finally(() => {
+        editRoleForm.resetFields()
+      })
   }
 
   useEffect(() => {
@@ -194,7 +238,7 @@ export default function RolePage() {
             render: (role: Role) => (
               <>
                 <Space.Compact>
-                  <Button variant="solid" onClick={() => {}}>
+                  <Button variant="solid" onClick={() => handleEditRole(role)}>
                     修改
                   </Button>
                   <Button variant="solid" danger>
diff --git a/src/types/form/index.ts b/src/types/form/index.ts
index 29db71c..b26689e 100644
--- a/src/types/form/index.ts
+++ b/src/types/form/index.ts
@@ -3,6 +3,8 @@ import type { CountryCode as RegionAbbreviation } from "libphonenumber-js"
 import type { Status } from "@/types/constant"
 import type { Dayjs } from "dayjs"
 
+export type FormMode = "add" | "edit"
+
 export interface UserFormValues extends Omit<
   User,
   "id" | "password" | "regionAbbreviation" | "departmentId" | "positionId" | "createdAt" | "updatedAt"