diff --git a/apps/cs/app/(with-base-layout)/module/register/page.tsx b/apps/cs/app/(with-base-layout)/module/register/page.tsx
new file mode 100644
index 000000000..6354dc8ab
--- /dev/null
+++ b/apps/cs/app/(with-base-layout)/module/register/page.tsx
@@ -0,0 +1,2 @@
+import { CreatePage } from "@/pages/module";
+export default CreatePage;
diff --git a/apps/cs/src/pages/banner/ui/banner-form.tsx b/apps/cs/src/pages/banner/ui/banner-form.tsx
index b0a31d775..93c550de8 100644
--- a/apps/cs/src/pages/banner/ui/banner-form.tsx
+++ b/apps/cs/src/pages/banner/ui/banner-form.tsx
@@ -113,7 +113,6 @@ function BannerForm({ form, bnrSn, ...props }: BannerFormProps) {
                       <FormControl>
                         <CodeSelect
                           {...field}
-                          value={field.value ?? ""}
                           upCd="BNRTYPE"
                           onValueChange={field.onChange}
                         />
diff --git a/apps/cs/src/pages/image/ui/image-form.tsx b/apps/cs/src/pages/image/ui/image-form.tsx
index b5c3de013..ac3d13832 100644
--- a/apps/cs/src/pages/image/ui/image-form.tsx
+++ b/apps/cs/src/pages/image/ui/image-form.tsx
@@ -128,7 +128,7 @@ function ImageForm({ form, imgSn, ...props }: ImageFormProps) {
                             field.onChange(Number(value));
                           }}
                           className="w-[12rem] !text-[1.3rem]"
-                          placeholder="정렬순서를 입력해주세요"
+                          placeholder="정렬순서 입력"
                         />
                       </FormControl>
                     </FormItem>
@@ -147,7 +147,6 @@ function ImageForm({ form, imgSn, ...props }: ImageFormProps) {
                       <FormControl>
                         <CodeSelect
                           {...field}
-                          value={field.value ?? ""}
                           upCd="IMGTYPE"
                           onValueChange={field.onChange}
                         />
diff --git a/apps/cs/src/pages/module/api/authorization-service.ts b/apps/cs/src/pages/module/api/authorization-service.ts
index fc42c8c67..3e0621171 100644
--- a/apps/cs/src/pages/module/api/authorization-service.ts
+++ b/apps/cs/src/pages/module/api/authorization-service.ts
@@ -4,6 +4,8 @@ import type {
   AuthorizationsService,
   AuthorizationsParams,
   AuthorizationsList,
+  AuthorizationFormData,
+  WithRoleAuthorizations,
 } from "../model/authorizations-interface";
 
 export class AuthorizationsApiService implements AuthorizationsService {
@@ -16,6 +18,16 @@ export class AuthorizationsApiService implements AuthorizationsService {
     );
     return response.data;
   }
+
+  public async createAuthorization(
+    data: AuthorizationFormData,
+  ): Promise<WithRoleAuthorizations> {
+    const response = await client.post<WithRoleAuthorizations>(
+      `${ENDPOINT.USER_SERVICE.AUTHORIZATIONS}`,
+      data,
+    );
+    return response.data;
+  }
 }
 
 export const AuthorizationsApi = new AuthorizationsApiService();
diff --git a/apps/cs/src/pages/module/index.ts b/apps/cs/src/pages/module/index.ts
index 970b914ca..b1e8c3b32 100644
--- a/apps/cs/src/pages/module/index.ts
+++ b/apps/cs/src/pages/module/index.ts
@@ -1 +1,2 @@
 export { ModulePage } from "./ui/module-page";
+export { CreatePage } from "./ui/create-page";
diff --git a/apps/cs/src/pages/module/model/authorizations-interface.ts b/apps/cs/src/pages/module/model/authorizations-interface.ts
index 07e100850..61cd849e2 100644
--- a/apps/cs/src/pages/module/model/authorizations-interface.ts
+++ b/apps/cs/src/pages/module/model/authorizations-interface.ts
@@ -1,3 +1,4 @@
+import { z } from "zod";
 import type { PageableList, PageableParams } from "@/shared/model";
 
 export interface AuthorizationsParams extends PageableParams {
@@ -16,10 +17,34 @@ export interface Authorizations {
   mdfcnDt: string;
 }
 
+export interface WithRoleAuthorizations extends Authorizations {
+  roleAuthorizations: {
+    roleId: string;
+    authorizationNo: number;
+    authorizationName: string;
+    urlPatternValue: string;
+    httpMethodCode: string;
+    sortSeq: number;
+    createdAt: string;
+  }[];
+}
+
+export const authorizationFormSchema = z.object({
+  authorizationName: z.string(),
+  urlPatternValue: z.string(),
+  httpMethodCode: z.string(),
+  sortSeq: z.number(),
+  useYn: z.string(),
+});
+
 export type AuthorizationsList = PageableList<Authorizations>;
+export type AuthorizationFormData = z.infer<typeof authorizationFormSchema>;
 
 export interface AuthorizationsService {
-  getAuthorizationsList(
+  getAuthorizationsList: (
     params: AuthorizationsParams,
-  ): Promise<AuthorizationsList>;
+  ) => Promise<AuthorizationsList>;
+  createAuthorization: (
+    data: AuthorizationFormData,
+  ) => Promise<WithRoleAuthorizations>;
 }
diff --git a/apps/cs/src/pages/module/model/table-columns.tsx b/apps/cs/src/pages/module/model/table-columns.tsx
index 56467aa9a..cd6bb0d06 100644
--- a/apps/cs/src/pages/module/model/table-columns.tsx
+++ b/apps/cs/src/pages/module/model/table-columns.tsx
@@ -10,7 +10,7 @@ export const columns: ColumnDef<Authorizations>[] = [
   },
   {
     accessorKey: "authorizationName",
-    header: "API 명",
+    header: "API명",
   },
   {
     accessorKey: "urlPatternValue",
diff --git a/apps/cs/src/pages/module/ui/create-page.tsx b/apps/cs/src/pages/module/ui/create-page.tsx
new file mode 100644
index 000000000..50a78fc4c
--- /dev/null
+++ b/apps/cs/src/pages/module/ui/create-page.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation } from "@tanstack/react-query";
+import { useAlertStore } from "@/shared/lib/use-alert-store";
+import {
+  authorizationFormSchema,
+  type AuthorizationFormData,
+} from "../model/authorizations-interface";
+import { AuthorizationsApi } from "../api/authorization-service";
+import { ModuleForm } from "./module-form";
+
+function CreatePage() {
+  const router = useRouter();
+  const { setMessage: alert } = useAlertStore((state) => state);
+
+  const { mutateAsync: createAuthorization } = useMutation({
+    mutationFn: (data: AuthorizationFormData) =>
+      AuthorizationsApi.createAuthorization(data),
+    onSuccess: () => {
+      alert("등록되었습니다.", router.back);
+    },
+  });
+
+  const form = useForm<AuthorizationFormData>({
+    resolver: zodResolver(authorizationFormSchema),
+    defaultValues: {
+      sortSeq: 0,
+      useYn: "Y",
+    },
+  });
+
+  return (
+    <div className="card card-border !mt-6">
+      <div className="card-header">
+        <h3 className="text-2xl font-medium text-label">모듈API 등록</h3>
+      </div>
+      <ModuleForm form={form} handleSave={createAuthorization} />
+    </div>
+  );
+}
+
+export { CreatePage };
diff --git a/apps/cs/src/pages/module/ui/module-form.tsx b/apps/cs/src/pages/module/ui/module-form.tsx
new file mode 100644
index 000000000..4c0fdafbc
--- /dev/null
+++ b/apps/cs/src/pages/module/ui/module-form.tsx
@@ -0,0 +1,166 @@
+"use client";
+
+import type { UseFormReturn } from "react-hook-form";
+import {
+  Input,
+  Label,
+  RadioGroup,
+  RadioGroupItem,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+} from "@common/components";
+import { FormWrapper } from "@/widgets/form-wrapper";
+import { CodeSelect } from "@/entities/code";
+import { FormControl, FormField, FormItem } from "@/shared/ui/form";
+import type {
+  AuthorizationFormData,
+  WithRoleAuthorizations,
+} from "../model/authorizations-interface";
+
+type BannerFormProps = {
+  form: UseFormReturn<AuthorizationFormData>;
+  authorizationNo?: number;
+  handleSave: (data: AuthorizationFormData) => Promise<WithRoleAuthorizations>;
+  handleDelete?: () => Promise<void>;
+};
+
+function ModuleForm({ form, authorizationNo, ...props }: BannerFormProps) {
+  return (
+    <FormWrapper form={form} isModifyMode={!!authorizationNo} {...props}>
+      <div className="card">
+        <Table variant="secondary">
+          <colgroup>
+            <col width="15%" />
+            <col width="85%" />
+          </colgroup>
+          <TableBody>
+            <TableRow>
+              <TableHead>API명</TableHead>
+              <TableCell className="border">
+                <FormField
+                  control={form.control}
+                  name="authorizationName"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <Input
+                          {...field}
+                          value={field.value ?? ""}
+                          className="!text-[1.3rem]"
+                          placeholder="API명을 입력해주세요"
+                        />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableHead>API URL</TableHead>
+              <TableCell className="border">
+                <FormField
+                  control={form.control}
+                  name="urlPatternValue"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <Input
+                          {...field}
+                          value={field.value ?? ""}
+                          className="!text-[1.3rem]"
+                          placeholder="API URL을 입력해주세요"
+                        />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableHead>요청 메소드</TableHead>
+              <TableCell className="border">
+                <FormField
+                  control={form.control}
+                  name="httpMethodCode"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-col">
+                      <FormControl>
+                        <CodeSelect
+                          {...field}
+                          upCd="HTTPMHD"
+                          onValueChange={field.onChange}
+                        />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableHead>정렬순서</TableHead>
+              <TableCell className="border">
+                <FormField
+                  control={form.control}
+                  name="sortSeq"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <Input
+                          {...field}
+                          type="number"
+                          min={0}
+                          value={field.value ?? ""}
+                          onChange={(e) => {
+                            const value = e.target.value;
+                            if (isNaN(Number(value))) return;
+                            field.onChange(Number(value));
+                          }}
+                          className="w-[12rem] !text-[1.3rem]"
+                          placeholder="정렬순서 입력"
+                        />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableHead>사용여부</TableHead>
+              <TableCell className="border">
+                <FormField
+                  control={form.control}
+                  name="useYn"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <RadioGroup
+                          {...field}
+                          name="useYn"
+                          onValueChange={field.onChange}
+                        >
+                          <div className="flex items-center space-x-2">
+                            <RadioGroupItem value="Y" id="useY" />
+                            <Label htmlFor="useY">사용</Label>
+                          </div>
+                          <div className="flex items-center space-x-2">
+                            <RadioGroupItem value="N" id="useN" />
+                            <Label htmlFor="useN">사용안함</Label>
+                          </div>
+                        </RadioGroup>
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              </TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </div>
+    </FormWrapper>
+  );
+}
+
+export { ModuleForm };
diff --git a/apps/cs/src/pages/module/ui/module-page.tsx b/apps/cs/src/pages/module/ui/module-page.tsx
index ded1f160f..6f0ebee43 100644
--- a/apps/cs/src/pages/module/ui/module-page.tsx
+++ b/apps/cs/src/pages/module/ui/module-page.tsx
@@ -9,14 +9,14 @@ import {
   type PaginationState,
 } from "@tanstack/react-table";
 import { Button, DataTable, Input, Label } from "@common/components";
+import { CodeSelect } from "@/entities/code";
 import { ENDPOINT } from "@/shared/config";
-import { AuthorizationsApi } from "../api/authorization-service";
 import type {
   Authorizations,
   AuthorizationsParams,
 } from "../model/authorizations-interface";
 import { columns } from "../model/table-columns";
-import { CodeSelect } from "@/entities/code";
+import { AuthorizationsApi } from "../api/authorization-service";
 
 function ModulePage() {
   const router = useRouter();
@@ -89,7 +89,7 @@ function ModulePage() {
             </div>
             <div className="flex items-center gap-2">
               <Label htmlFor="keyword" className="text-label">
-                API 명
+                API명
               </Label>
               <Input
                 id="keyword"
@@ -108,10 +108,8 @@ function ModulePage() {
       </div>
       <div className="card card-border">
         <div className="card-header">
-          <h3 className="text-2xl font-medium text-label">콘텐츠 목록</h3>
-          <Button onClick={() => router.push("/contents/register")}>
-            등록
-          </Button>
+          <h3 className="text-2xl font-medium text-label">모듈API 목록</h3>
+          <Button onClick={() => router.push("/module/register")}>등록</Button>
         </div>
         <div className="card !m-[1.2rem] h-[49.5rem] overflow-auto !p-0">
           <DataTable table={table} onRowClick={handleRowClick} viewPagination />
diff --git a/apps/cs/src/pages/site/ui/site-form.tsx b/apps/cs/src/pages/site/ui/site-form.tsx
index f624a81b7..c76f23ae5 100644
--- a/apps/cs/src/pages/site/ui/site-form.tsx
+++ b/apps/cs/src/pages/site/ui/site-form.tsx
@@ -110,8 +110,8 @@ function SiteForm({ form, siteId, ...props }: SiteFormProps) {
                       <FormControl>
                         <CodeSelect
                           {...field}
-                          value={field.value ?? ""}
                           upCd="SITESKINCD"
+                          value={field.value ?? ""}
                           onValueChange={field.onChange}
                         />
                       </FormControl>
diff --git a/apps/cs/src/widgets/form-wrapper/ui/form-wrapper.tsx b/apps/cs/src/widgets/form-wrapper/ui/form-wrapper.tsx
index 19f941106..5b6edb3bc 100644
--- a/apps/cs/src/widgets/form-wrapper/ui/form-wrapper.tsx
+++ b/apps/cs/src/widgets/form-wrapper/ui/form-wrapper.tsx
@@ -8,8 +8,8 @@ type FormWrapperProps<T extends FieldValues> = {
   form: UseFormReturn<T>;
   children: React.ReactNode;
   isModifyMode?: boolean;
-  handleSave: (data: T) => Promise<void>;
-  handleDelete?: () => Promise<void>;
+  handleSave: (data: T) => Promise<unknown>;
+  handleDelete?: () => Promise<unknown>;
 };
 
 function FormWrapper<T extends FieldValues>({