diff --git a/apps/cs/app/(with-base-layout)/role/register/[roleId]/page.tsx b/apps/cs/app/(with-base-layout)/role/register/[roleId]/page.tsx
new file mode 100644
index 000000000..53ba411c8
--- /dev/null
+++ b/apps/cs/app/(with-base-layout)/role/register/[roleId]/page.tsx
@@ -0,0 +1,10 @@
+import { ModifyPage as VMModifyPage } from "@/pages/role";
+
+export default async function ModifyPage({
+  params,
+}: {
+  params: Promise<{ roleId: string }>;
+}) {
+  const { roleId } = await params;
+  return <VMModifyPage roleId={roleId} />;
+}
diff --git a/apps/cs/src/pages/role/api/role-service.ts b/apps/cs/src/pages/role/api/role-service.ts
index 2d5e93462..d2db7e5bc 100644
--- a/apps/cs/src/pages/role/api/role-service.ts
+++ b/apps/cs/src/pages/role/api/role-service.ts
@@ -1,10 +1,11 @@
 import { client } from "@/shared/api";
 import { ENDPOINT } from "@/shared/config";
 import type {
-  RoleService,
+  Role,
   RoleList,
   RoleParams,
   RoleFormData,
+  RoleService,
 } from "../model/role-interface";
 
 export class RoleApiService implements RoleService {
@@ -15,10 +16,25 @@ export class RoleApiService implements RoleService {
     return response.data;
   }
 
+  public async getRoleInfo(roleId: string): Promise<Role> {
+    const response = await client.get<Role>(
+      `${ENDPOINT.USER_SERVICE.ROLES}/${roleId}`,
+    );
+    return response.data;
+  }
+
   public async createRole(data: RoleFormData): Promise<void> {
     await client.post(ENDPOINT.USER_SERVICE.ROLES, data);
   }
 
+  public async updateRole(roleId: string, data: RoleFormData): Promise<void> {
+    await client.put(`${ENDPOINT.USER_SERVICE.ROLES}/${roleId}`, data);
+  }
+
+  public async deleteRole(roleId: string): Promise<void> {
+    await client.delete(`${ENDPOINT.USER_SERVICE.ROLES}/${roleId}`);
+  }
+
   public async checkDuplicateRoleId(roleId: string): Promise<boolean> {
     const response = await client.get(
       `${ENDPOINT.USER_SERVICE.ROLES}/check/dup`,
diff --git a/apps/cs/src/pages/role/index.ts b/apps/cs/src/pages/role/index.ts
index 361a5fc10..06df5e23e 100644
--- a/apps/cs/src/pages/role/index.ts
+++ b/apps/cs/src/pages/role/index.ts
@@ -1,2 +1,3 @@
 export { RolePage } from "./ui/role-page";
 export { CreatePage } from "./ui/create-page";
+export { ModifyPage } from "./ui/modify-page";
diff --git a/apps/cs/src/pages/role/model/role-interface.ts b/apps/cs/src/pages/role/model/role-interface.ts
index a412912b6..1b9b8eea2 100644
--- a/apps/cs/src/pages/role/model/role-interface.ts
+++ b/apps/cs/src/pages/role/model/role-interface.ts
@@ -29,6 +29,9 @@ export type RoleFormData = z.infer<typeof roleFormSchema>;
 
 export interface RoleService {
   getRoles: (params: RoleParams) => Promise<RoleList>;
+  getRoleInfo: (roleId: string) => Promise<Role>;
   createRole: (data: RoleFormData) => Promise<void>;
+  updateRole: (roleId: string, data: RoleFormData) => Promise<void>;
+  deleteRole: (roleId: string) => Promise<void>;
   checkDuplicateRoleId: (roleId: string) => Promise<boolean>;
 }
diff --git a/apps/cs/src/pages/role/ui/modify-page.tsx b/apps/cs/src/pages/role/ui/modify-page.tsx
new file mode 100644
index 000000000..9c57538d4
--- /dev/null
+++ b/apps/cs/src/pages/role/ui/modify-page.tsx
@@ -0,0 +1,62 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { useAlertStore } from "@/shared/lib/use-alert-store";
+import { RoleForm } from "./role-form";
+import { RoleApi } from "../api/role-service";
+import { roleFormSchema, type RoleFormData } from "../model/role-interface";
+import { ENDPOINT } from "@/shared/config";
+
+function ModifyPage({ roleId }: { roleId: string }) {
+  const router = useRouter();
+  const alert = useAlertStore((state) => state.setMessage);
+
+  const { data: roleInfo } = useQuery({
+    queryKey: [ENDPOINT.USER_SERVICE.ROLES, roleId],
+    queryFn: () => RoleApi.getRoleInfo(roleId),
+  });
+
+  const { mutateAsync: updateRole } = useMutation({
+    mutationFn: (data: RoleFormData) => RoleApi.updateRole(roleId, data),
+    onSuccess: () => {
+      alert("수정되었습니다.", router.back);
+    },
+  });
+
+  const { mutateAsync: deleteRole } = useMutation({
+    mutationFn: () => RoleApi.deleteRole(roleId),
+    onSuccess: () => {
+      alert("삭제되었습니다.", router.back);
+    },
+  });
+
+  const form = useForm<RoleFormData>({
+    resolver: zodResolver(roleFormSchema),
+    values: {
+      roleId: roleInfo?.roleId ?? "",
+      roleName: roleInfo?.roleName ?? "",
+      roleContent: roleInfo?.roleContent ?? "",
+      useYn: roleInfo?.useYn ?? "",
+      mngrYn: roleInfo?.mngrYn ?? "",
+    },
+  });
+
+  return (
+    <div className="card card-border !mt-6">
+      <div className="card-header">
+        <h3 className="text-2xl font-medium text-label">권한 수정</h3>
+      </div>
+      <RoleForm
+        roleId={roleId}
+        form={form}
+        handleSave={updateRole}
+        handleDelete={deleteRole}
+      />
+    </div>
+  );
+}
+
+export { ModifyPage };
diff --git a/apps/cs/src/pages/role/ui/role-form.tsx b/apps/cs/src/pages/role/ui/role-form.tsx
index 5a7973f63..e980bfbeb 100644
--- a/apps/cs/src/pages/role/ui/role-form.tsx
+++ b/apps/cs/src/pages/role/ui/role-form.tsx
@@ -23,9 +23,10 @@ type RoleFormProps = {
   roleId?: string;
   form: UseFormReturn<RoleFormData>;
   handleSave: (data: RoleFormData) => Promise<void>;
+  handleDelete?: () => Promise<void>;
 };
 
-function RoleForm({ form, roleId, ...props }: RoleFormProps) {
+function RoleForm({ roleId, form, ...props }: RoleFormProps) {
   const alert = useAlertStore((state) => state.setMessage);
 
   const [isValidRoleId, setIsValidRoleId] = useState(false);
diff --git a/apps/cs/src/pages/role/ui/role-page.tsx b/apps/cs/src/pages/role/ui/role-page.tsx
index eea0aec8f..ca57084b0 100644
--- a/apps/cs/src/pages/role/ui/role-page.tsx
+++ b/apps/cs/src/pages/role/ui/role-page.tsx
@@ -52,7 +52,7 @@ function RolePage() {
   };
 
   const handleRowClick = (row: Role) => {
-    console.log(row);
+    router.push(`/role/register/${row.roleId}`);
   };
 
   return (