diff --git a/apps/cs/app/(with-base-layout)/role/page.tsx b/apps/cs/app/(with-base-layout)/role/page.tsx
new file mode 100644
index 000000000..fa962e93c
--- /dev/null
+++ b/apps/cs/app/(with-base-layout)/role/page.tsx
@@ -0,0 +1,2 @@
+import { RolePage } from "@/pages/role";
+export default RolePage;
diff --git a/apps/cs/src/pages/code/ui/upcode-dialog.tsx b/apps/cs/src/pages/code/ui/upcode-dialog.tsx
index 28f483c5f..ea321543f 100644
--- a/apps/cs/src/pages/code/ui/upcode-dialog.tsx
+++ b/apps/cs/src/pages/code/ui/upcode-dialog.tsx
@@ -56,7 +56,7 @@ const UpCodeManagementDialog = memo(
     const { data: detailData } = useQuery({
       queryKey: [ENDPOINT.CMS_SERVICE.UP_CODE, upCd],
       queryFn: () => UpCodeApi.upCodeDetail(upCd!),
-      enabled: !!upCd,
+      enabled: open && !!upCd,
     });
 
     const { mutateAsync: createUpCode } = useMutation({
diff --git a/apps/cs/src/pages/role/api/role-service.ts b/apps/cs/src/pages/role/api/role-service.ts
new file mode 100644
index 000000000..1072e324c
--- /dev/null
+++ b/apps/cs/src/pages/role/api/role-service.ts
@@ -0,0 +1,18 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+import type {
+  RoleList,
+  RoleParams,
+  RoleService,
+} from "../model/role-interface";
+
+export class RoleApiService implements RoleService {
+  public async getRoles(params: RoleParams): Promise<RoleList> {
+    const response = await client.get<RoleList>(ENDPOINT.USER_SERVICE.ROLES, {
+      params,
+    });
+    return response.data;
+  }
+}
+
+export const RoleApi = new RoleApiService();
diff --git a/apps/cs/src/pages/role/index.ts b/apps/cs/src/pages/role/index.ts
new file mode 100644
index 000000000..8cd31a0b1
--- /dev/null
+++ b/apps/cs/src/pages/role/index.ts
@@ -0,0 +1 @@
+export { RolePage } from "./ui/role-page";
diff --git a/apps/cs/src/pages/role/model/role-interface.ts b/apps/cs/src/pages/role/model/role-interface.ts
new file mode 100644
index 000000000..7d739ebbd
--- /dev/null
+++ b/apps/cs/src/pages/role/model/role-interface.ts
@@ -0,0 +1,22 @@
+import type { PageableList, PageableParams } from "@/shared/model";
+
+export interface RoleParams extends PageableParams {
+  keywordType?: string;
+  keyword?: string;
+}
+
+export interface Role {
+  roleId: string;
+  roleName: string;
+  roleContent: string;
+  useYn: string;
+  mdfcnDt: string;
+  mdfrNm: string;
+  mngrYn: string;
+}
+
+export type RoleList = PageableList<Role>;
+
+export interface RoleService {
+  getRoles: (params: RoleParams) => Promise<RoleList>;
+}
diff --git a/apps/cs/src/pages/role/model/table-columns.tsx b/apps/cs/src/pages/role/model/table-columns.tsx
new file mode 100644
index 000000000..0d23e1116
--- /dev/null
+++ b/apps/cs/src/pages/role/model/table-columns.tsx
@@ -0,0 +1,44 @@
+import dayjs from "dayjs";
+import { useState } from "react";
+import type { ColumnDef } from "@tanstack/react-table";
+import type { Role } from "./role-interface";
+import { MappingRoleDialog } from "../ui/mapping-role-dialog";
+
+export const columns: ColumnDef<Role>[] = [
+  {
+    id: "no",
+    header: "NO",
+    cell: ({ row }) => row.index + 1,
+  },
+  {
+    accessorKey: "roleId",
+    header: "권한ID",
+  },
+  {
+    accessorKey: "roleName",
+    header: "권한명",
+  },
+  {
+    accessorKey: "roleContent",
+    header: "권한내용",
+  },
+  {
+    accessorKey: "mdfrNm",
+    header: "최종수정자",
+  },
+  {
+    accessorKey: "mdfcnDt",
+    header: "최종수정일",
+    cell: ({ row }) => dayjs(row.original.mdfcnDt).format("YYYY-MM-DD"),
+  },
+  {
+    id: "action",
+    header: "관리",
+    cell: ({ row }) => <MappingRoleButton roleId={row.original.roleId} />,
+  },
+];
+
+const MappingRoleButton = ({ roleId }: { roleId: string }) => {
+  const [open, setOpen] = useState(false);
+  return <MappingRoleDialog open={open} onOpenChange={setOpen} />;
+};
diff --git a/apps/cs/src/pages/role/ui/mapping-role-dialog.tsx b/apps/cs/src/pages/role/ui/mapping-role-dialog.tsx
new file mode 100644
index 000000000..5713953a1
--- /dev/null
+++ b/apps/cs/src/pages/role/ui/mapping-role-dialog.tsx
@@ -0,0 +1,34 @@
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  Button,
+} from "@common/components";
+
+type MappingRoleDialogProps = {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+};
+
+function MappingRoleDialog({
+  open,
+  onOpenChange,
+  ...props
+}: MappingRoleDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange} {...props}>
+      <DialogTrigger asChild>
+        <Button size="sm">권한맵핑</Button>
+      </DialogTrigger>
+      <DialogContent className="max-w-[60rem]" aria-describedby={undefined}>
+        <DialogHeader>
+          <DialogTitle></DialogTitle>
+        </DialogHeader>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export { MappingRoleDialog };
diff --git a/apps/cs/src/pages/role/ui/role-page.tsx b/apps/cs/src/pages/role/ui/role-page.tsx
new file mode 100644
index 000000000..0c64ada7a
--- /dev/null
+++ b/apps/cs/src/pages/role/ui/role-page.tsx
@@ -0,0 +1,91 @@
+"use client";
+
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import {
+  getCoreRowModel,
+  useReactTable,
+  type PaginationState,
+} from "@tanstack/react-table";
+import { Button, DataTable, Input, Label } from "@common/components";
+import { ENDPOINT } from "@/shared/config";
+import { RoleApi } from "../api/role-service";
+import { columns } from "../model/table-columns";
+import type { Role, RoleParams } from "../model/role-interface";
+
+function RolePage() {
+  const [roleQuery, setRoleQuery] = useState<RoleParams>({
+    keyword: "",
+  });
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 10,
+  });
+
+  const { data: roles } = useQuery({
+    queryKey: [ENDPOINT.USER_SERVICE.ROLES, pagination],
+    queryFn: () =>
+      RoleApi.getRoles({
+        ...roleQuery,
+        page: pagination.pageIndex,
+        size: pagination.pageSize,
+      }),
+  });
+
+  const table = useReactTable({
+    data: roles?.content ?? [],
+    columns,
+    state: {
+      pagination,
+    },
+    rowCount: roles?.totalElements ?? 0,
+    manualPagination: true,
+    getCoreRowModel: getCoreRowModel(),
+    onPaginationChange: setPagination,
+  });
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+  };
+
+  const handleRowClick = (row: Role) => {
+    console.log(row);
+  };
+
+  return (
+    <div className="card card-border !mt-6">
+      <div className="card card-border">
+        <form onSubmit={handleSubmit} className="flex items-center gap-2 p-2">
+          <Label htmlFor="" className="mr-2 text-label">
+            권한명
+          </Label>
+          <Input
+            className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]"
+            value={roleQuery.keyword}
+            onChange={(e) =>
+              setRoleQuery({ ...roleQuery, keyword: e.target.value })
+            }
+          />
+          <Button className="h-[3.2rem]" type="submit">
+            조회
+          </Button>
+        </form>
+      </div>
+      <div className="card card-border">
+        <div className="card-header">
+          <div className="flex w-full items-center justify-between">
+            <h3 className="text-2xl font-medium text-label">권한 목록</h3>
+            <div className="flex gap-2">
+              <Button onClick={() => {}}>등록</Button>
+            </div>
+          </div>
+        </div>
+        <div className="card !m-[1.2rem] !p-0">
+          <DataTable table={table} onRowClick={handleRowClick} viewPagination />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export { RolePage };
diff --git a/apps/cs/src/shared/config/api.ts b/apps/cs/src/shared/config/api.ts
index 014cd6828..3eba9fa91 100644
--- a/apps/cs/src/shared/config/api.ts
+++ b/apps/cs/src/shared/config/api.ts
@@ -18,6 +18,7 @@ export const ENDPOINT = {
     SILENT_REFRESH: "/user-service/api/v1/users/token/refresh",
     AUTHORIZATIONS: "/user-service/api/v1/authorizations",
     ROLE_AUTHORIZATIONS: "/user-service/api/v1/role-authorizations",
+    ROLES: "/user-service/api/v1/roles",
   },
   CMS_SERVICE: {
     SITES: "/cms-service/api/v1/sites",