diff --git a/apps/cs/src/pages/role/api/site-authority-service.ts b/apps/cs/src/pages/role/api/site-authority-service.ts
new file mode 100644
index 000000000..c9d0513da
--- /dev/null
+++ b/apps/cs/src/pages/role/api/site-authority-service.ts
@@ -0,0 +1,28 @@
+import { client } from "@/shared/api";
+import type {
+  SiteAuthorityCreatePayload,
+  SiteAuthorityList,
+  SiteAuthoritySearchParams,
+  SiteAuthorityService,
+} from "../model/site-authority-interface";
+import { ENDPOINT } from "@/shared/config";
+
+export class SiteAuthorityApiService implements SiteAuthorityService {
+  public async getSiteAuthorityList(
+    params: SiteAuthoritySearchParams,
+  ): Promise<SiteAuthorityList> {
+    const response = await client.get<SiteAuthorityList>(
+      ENDPOINT.CMS_SERVICE.SITE_AUTHORITY,
+      { params },
+    );
+    return response.data;
+  }
+
+  public async createSiteAuthority(
+    data: SiteAuthorityCreatePayload[],
+  ): Promise<void> {
+    await client.post(ENDPOINT.CMS_SERVICE.SITE_AUTHORITY, data);
+  }
+}
+
+export const SiteAuthorityApi = new SiteAuthorityApiService();
diff --git a/apps/cs/src/pages/role/model/site-authority-interface.ts b/apps/cs/src/pages/role/model/site-authority-interface.ts
new file mode 100644
index 000000000..70ac79cfa
--- /dev/null
+++ b/apps/cs/src/pages/role/model/site-authority-interface.ts
@@ -0,0 +1,24 @@
+import type { PageableList, PageableParams } from "@/shared/model";
+
+export interface SiteAuthoritySearchParams extends PageableParams {
+  siteId?: string;
+  authrtId?: string;
+}
+
+export interface SiteAuthority {
+  siteId: string;
+  authrtId: string;
+  siteNm: string;
+  mode: string;
+}
+
+export type SiteAuthorityCreatePayload = Omit<SiteAuthority, "siteNm">;
+
+export type SiteAuthorityList = PageableList<SiteAuthority>;
+
+export interface SiteAuthorityService {
+  getSiteAuthorityList: (
+    params: SiteAuthoritySearchParams,
+  ) => Promise<SiteAuthorityList>;
+  createSiteAuthority: (data: SiteAuthorityCreatePayload[]) => Promise<void>;
+}
diff --git a/apps/cs/src/pages/role/ui/role-form.tsx b/apps/cs/src/pages/role/ui/role-form.tsx
index 355872c9e..998ebbc2c 100644
--- a/apps/cs/src/pages/role/ui/role-form.tsx
+++ b/apps/cs/src/pages/role/ui/role-form.tsx
@@ -1,7 +1,9 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import type { UseFormReturn } from "react-hook-form";
 import {
   Button,
+  Checkbox,
   Input,
   Label,
   RadioGroup,
@@ -16,6 +18,9 @@ import { FormWrapper } from "@/widgets/form-wrapper";
 import { RoleApi, type RoleFormData } from "@/entities/role";
 import { FormField, FormItem, FormControl } from "@/shared/ui/form";
 import { useAlertStore, useMutationWrapper } from "@/shared/lib";
+import { ENDPOINT } from "@/shared/config";
+import { SiteAuthorityApi } from "../api/site-authority-service";
+import type { SiteAuthorityCreatePayload } from "../model/site-authority-interface";
 
 type RoleFormProps = {
   roleId?: string;
@@ -24,12 +29,24 @@ type RoleFormProps = {
   handleDelete?: () => Promise<void>;
 };
 
-function RoleForm({ roleId, form, ...props }: RoleFormProps) {
+function RoleForm({ roleId, form, handleSave, ...props }: RoleFormProps) {
   const isModifyMode = !!roleId;
-
+  const queryClient = useQueryClient();
   const alert = useAlertStore((state) => state.setMessage);
-
   const [isValidRoleId, setIsValidRoleId] = useState(false);
+  const [checkedSiteAuthority, setCheckedSiteAuthority] = useState<string[]>(
+    [],
+  );
+
+  const { data: siteAuthorityList } = useQuery({
+    queryKey: [ENDPOINT.CMS_SERVICE.SITE_AUTHORITY, roleId],
+    queryFn: () =>
+      SiteAuthorityApi.getSiteAuthorityList({
+        authrtId: roleId,
+        page: 0,
+        size: 100,
+      }),
+  });
 
   const { mutateAsync: checkDuplicateRoleId } = useMutationWrapper({
     mutationFn: (roleId: string) => RoleApi.checkDuplicateRoleId(roleId),
@@ -43,8 +60,49 @@ function RoleForm({ roleId, form, ...props }: RoleFormProps) {
     },
   });
 
+  const handleSiteAuthorityChecked = (checked: boolean, siteId: string) => {
+    if (checked) {
+      setCheckedSiteAuthority((prev) => [...prev, siteId]);
+    } else {
+      setCheckedSiteAuthority((prev) => prev.filter((id) => id !== siteId));
+    }
+  };
+
+  const saveInterceptor = async (data: RoleFormData) => {
+    const siteAuthorityPayload: SiteAuthorityCreatePayload[] =
+      checkedSiteAuthority.map((siteId) => ({
+        siteId,
+        authrtId: data.roleId,
+        mode: "C",
+      }));
+
+    try {
+      await handleSave(data);
+      if (data.mngrYn === "N") return;
+      await SiteAuthorityApi.createSiteAuthority(siteAuthorityPayload);
+      queryClient.invalidateQueries({
+        queryKey: [ENDPOINT.CMS_SERVICE.SITE_AUTHORITY],
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  useEffect(() => {
+    if (!siteAuthorityList?.content.length) return;
+    const checkedSiteAuthority = siteAuthorityList.content.filter(
+      (item) => item.mode === "R",
+    );
+    setCheckedSiteAuthority(checkedSiteAuthority.map((item) => item.siteId));
+  }, [siteAuthorityList]);
+
   return (
-    <FormWrapper form={form} isModifyMode={isModifyMode} {...props}>
+    <FormWrapper
+      form={form}
+      isModifyMode={isModifyMode}
+      handleSave={saveInterceptor}
+      {...props}
+    >
       <div className="card">
         <Table variant="secondary">
           <colgroup>
@@ -165,6 +223,29 @@ function RoleForm({ roleId, form, ...props }: RoleFormProps) {
                 />
               </TableCell>
             </TableRow>
+            {form.watch("mngrYn") === "Y" && (
+              <TableRow>
+                <TableHead data-required>관리사이트</TableHead>
+                <TableCell className="border">
+                  <div className="flex flex-wrap items-center gap-4">
+                    {siteAuthorityList?.content.map((item) => (
+                      <div
+                        key={item.siteId}
+                        className="flex items-center gap-2"
+                      >
+                        <Checkbox
+                          defaultChecked={item.mode === "R"}
+                          onCheckedChange={(checked: boolean) => {
+                            handleSiteAuthorityChecked(checked, item.siteId);
+                          }}
+                        />
+                        <span className="whitespace-nowrap">{item.siteNm}</span>
+                      </div>
+                    ))}
+                  </div>
+                </TableCell>
+              </TableRow>
+            )}
             <TableRow>
               <TableHead data-required>사용여부</TableHead>
               <TableCell className="border">
diff --git a/apps/cs/src/shared/config/api.ts b/apps/cs/src/shared/config/api.ts
index cd639a628..120a45b2e 100644
--- a/apps/cs/src/shared/config/api.ts
+++ b/apps/cs/src/shared/config/api.ts
@@ -53,6 +53,7 @@ export const ENDPOINT = {
     GROUP_USERS: "/cms-service/api/v1/group-users",
     MANAGER_IP: "/cms-service/api/v1/mgrip",
     APILOG: "/cms-service/api/v1/api-logs",
+    SITE_AUTHORITY: "/cms-service/api/v1/site-authrt",
   },
   BOARD_SERVICE: {
     BBS: "/board-service/api/v1/bbs",