diff --git a/app/(admin)/admin/master-role/create/page.tsx b/app/(admin)/admin/master-role/create/page.tsx
index ab2c6f9..bbf1ff8 100644
--- a/app/(admin)/admin/master-role/create/page.tsx
+++ b/app/(admin)/admin/master-role/create/page.tsx
@@ -1,10 +1,10 @@
-import FormMasterUserRole from '@/components/form/form-master-user-role'
-import { Card } from '@nextui-org/react'
+import FormMasterUserRole from "@/components/form/form-master-user-role";
+import { Card } from "@nextui-org/react";
 
 export default function CreateMasterUserRolePage() {
-    return (
-        <Card className="h-[96vh] rounded-md my- ml-3 border bg-transparent">
-            <FormMasterUserRole />
-        </Card>
-    )
+  return (
+    <Card className="h-[96vh] rounded-md border bg-transparent">
+      <FormMasterUserRole />
+    </Card>
+  );
 }
diff --git a/components/form/form-master-user-role.tsx b/components/form/form-master-user-role.tsx
index 0d2a685..5c75a26 100644
--- a/components/form/form-master-user-role.tsx
+++ b/components/form/form-master-user-role.tsx
@@ -1,164 +1,308 @@
-'use client'
-import { error } from '@/config/swal';
-import { createMasterUser } from '@/service/master-user';
-import { createMasterUserRole } from '@/service/master-user-role';
-import { MasterUser } from '@/types/globals';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Button, Card, Input, Radio, RadioGroup, Select, SelectItem, Selection, Textarea } from '@nextui-org/react'
-import Link from 'next/link';
-import { useRouter } from 'next/navigation';
-import React, { useState } from 'react'
-import { useForm } from 'react-hook-form';
-import Swal from 'sweetalert2';
-import withReactContent from 'sweetalert2-react-content';
-import { z } from 'zod';
+"use client";
+import { error } from "@/config/swal";
+import { createMasterUser } from "@/service/master-user";
+import { createMasterUserRole } from "@/service/master-user-role";
+import { MasterUser } from "@/types/globals";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  Button,
+  Card,
+  Checkbox,
+  Input,
+  Radio,
+  RadioGroup,
+  Select,
+  SelectItem,
+  Selection,
+  Textarea,
+} from "@nextui-org/react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import React, { useEffect, useState } from "react";
+import { Controller, useFieldArray, useForm } from "react-hook-form";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { z } from "zod";
 
 const masterUserSchema = z.object({
-    code: z.string().min(1, { message: "Required" }),
-    description: z.string().min(1, { message: "Required" }),
-    levelNumber: z.string().min(1, { message: "Required" }),
-    name: z.string().min(1, { message: "Required" }),
+  code: z.string().min(1, { message: "Required" }),
+  description: z.string().min(1, { message: "Required" }),
+  name: z.string().min(1, { message: "Required" }),
+  userLevelId: z.string().min(1, { message: "Required" }),
+  userRoleAccess: z.array(
+    z.object({
+      isAdminEnabled: z.boolean(),
+      isApprovalEnabled: z.boolean(),
+      isDeleteEnabled: z.boolean(),
+      isInsertEnabled: z.boolean(),
+      isUpdateEnabled: z.boolean(),
+      isViewEnabled: z.boolean(),
+      menuId: z.number(),
+      menuTitle: z.string(),
+    })
+  ),
 });
 
+const menus = [{ id: 1, title: "Menu 1" }];
+
 export default function FormMasterUserRole() {
-    const router = useRouter();
-    const MySwal = withReactContent(Swal);
-    const [code, setCode] = useState<string>();
-    const [description, setDescription] = useState<string>();
-    const [levelNumber, setLevelNumber] = useState<any>(1);
-    const [name, setName] = useState<string>();
+  const router = useRouter();
+  const MySwal = withReactContent(Swal);
 
-    const formOptions = { resolver: zodResolver(masterUserSchema) };
-    type MicroIssueSchema = z.infer<typeof masterUserSchema>;
-    const {
-        register,
-        control,
-        handleSubmit,
-        setValue,
-        formState: { errors },
-    } = useForm<MicroIssueSchema>(formOptions);
+  const formOptions = {
+    resolver: zodResolver(masterUserSchema),
+  };
+  type MicroIssueSchema = z.infer<typeof masterUserSchema>;
+  const {
+    register,
+    control,
+    handleSubmit,
+    setValue,
+    getValues,
+    formState: { errors },
+  } = useForm<MicroIssueSchema>(formOptions);
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: "userRoleAccess",
+  });
 
+  useEffect(() => {
+    const data: any = [];
+    menus.map((menu) => {
+      data.push({
+        menuId: menu.id,
+        isAdminEnabled: false,
+        isApprovalEnabled: false,
+        isDeleteEnabled: false,
+        isInsertEnabled: false,
+        isUpdateEnabled: false,
+        isViewEnabled: false,
+        menuTitle: menu.title,
+      });
+    });
 
+    setValue("userRoleAccess", data);
+  }, []);
 
-    async function save(data: any) {
-        const formData = {
-            code: code,
-            description: description,
-            level_number: levelNumber,
-            name: name,
+  async function save(data: z.infer<typeof masterUserSchema>) {
+    const formData = {
+      code: data.code,
+      description: data.description,
+      statusId: 1,
+      userLevelIds: [Number(data.userLevelId)],
+      name: data.name,
+      userRoleAccess: data.userRoleAccess.map((roleAccess) => {
+        return {
+          isAdminEnabled: roleAccess.isAdminEnabled,
+          isApprovalEnabled: roleAccess.isApprovalEnabled,
+          isDeleteEnabled: roleAccess.isDeleteEnabled,
+          isInsertEnabled: roleAccess.isInsertEnabled,
+          isUpdateEnabled: roleAccess.isUpdateEnabled,
+          isViewEnabled: roleAccess.isViewEnabled,
+          menuId: roleAccess.menuId,
         };
-
-        console.log("Form MasterUser:", formData);
-        const response = await createMasterUserRole(formData);
-
-        if (response?.error) {
-            error(response.message);
-            return false;
-        }
-
-        successSubmit("/admin/master-role");
+      }),
     };
 
-    function successSubmit(redirect: any) {
-        MySwal.fire({
-            title: "Sukses",
-            icon: "success",
-            confirmButtonColor: "#3085d6",
-            confirmButtonText: "OK",
-        }).then((result) => {
-            if (result.isConfirmed) {
-                router.push(redirect);
-            }
-        });
+    console.log("Form MasterUser:", formData);
+    const response = await createMasterUserRole(formData);
+
+    if (response?.error) {
+      error(response.message);
+      return false;
     }
 
-    async function onSubmit(data: any) {
-        MySwal.fire({
-            title: "Simpan Data",
-            text: "",
-            icon: "warning",
-            showCancelButton: true,
-            cancelButtonColor: "#d33",
-            confirmButtonColor: "#3085d6",
-            confirmButtonText: "Simpan",
-        }).then((result) => {
-            if (result.isConfirmed) {
-                save(data);
-            }
-        });
-    }
+    successSubmit("/admin/master-role");
+  }
 
-    return (
-        <div className='mx-5 my-5 overflow-y-auto'>
-            <form method="POST" onSubmit={handleSubmit(onSubmit)}>
-                <Card className='rounded-md p-5 space-y-5'>
-                    <div>
-                        <Input
-                            type="text"
-                            {...register("code")}
-                            label="Code"
-                            variant='bordered'
-                            placeholder="Enter Text"
-                            labelPlacement='outside'
-                            value={code}
-                            onChange={(e) => setCode(e.target.value)}
-                        />
-                        {errors.code?.message}
-                    </div>
-                    <div>
-                        <Input
-                            type="text"
-                            {...register("name")}
-                            label="Role"
-                            variant='bordered'
-                            placeholder="Enter Text"
-                            labelPlacement='outside'
-                            value={name}
-                            onChange={(e) => setName(e.target.value)}
-                        />
-                        {errors.name?.message}
-                    </div>
-                    <div>
-                        <Textarea
-                            label="Description"
-                            {...register("description")}
-                            labelPlacement="outside"
-                            placeholder="Enter Text"
-                            value={description}
-                            onValueChange={setDescription}
-                        />
-                    </div>
-                    <div>
-                        <Input
-                            type="text"
-                            {...register("levelNumber")}
-                            label="Level Number"
-                            variant='bordered'
-                            placeholder="Enter Text"
-                            labelPlacement='outside'
-                            value={levelNumber}
-                        />
-                        {errors.code?.message}
-                    </div>
-                    <div className='flex justify-end gap-3'>
-                        <Link href={`/admin/master-role`}>
-                            <Button
-                                color='danger'
-                                variant="ghost"
-                            >
-                                Cancel
-                            </Button>
-                        </Link>
-                        <Button
-                            type="submit"
-                            color='primary'
-                            variant="solid"
-                        >
-                            Save
-                        </Button>
-                    </div>
-                </Card>
-            </form>
-        </div >
-    )
+  function successSubmit(redirect: any) {
+    MySwal.fire({
+      title: "Sukses",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        router.push(redirect);
+      }
+    });
+  }
+
+  async function onSubmit(data: z.infer<typeof masterUserSchema>) {
+    MySwal.fire({
+      title: "Simpan Data",
+      text: "",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#d33",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Simpan",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        save(data);
+      }
+    });
+  }
+
+  return (
+    <div className="mx-5 my-5 overflow-y-auto">
+      <form method="POST" onSubmit={handleSubmit(onSubmit)}>
+        <Card className="rounded-md flex flex-col gap-3 p-5">
+          <Controller
+            control={control}
+            name="code"
+            render={({ field: { onChange, value } }) => (
+              <Input
+                type="text"
+                id="code"
+                placeholder="Code..."
+                label="Code"
+                value={value}
+                onChange={onChange}
+                labelPlacement="outside"
+                className="w-full"
+                variant="bordered"
+              />
+            )}
+          />
+          {errors.code?.message && (
+            <p className="text-red-400 text-sm">{errors.code?.message}</p>
+          )}
+          <Controller
+            control={control}
+            name="name"
+            render={({ field: { onChange, value } }) => (
+              <Input
+                type="text"
+                id="name"
+                placeholder="Name..."
+                label="Name"
+                value={value}
+                onChange={onChange}
+                labelPlacement="outside"
+                className="w-full"
+                variant="bordered"
+              />
+            )}
+          />
+          {errors.name?.message && (
+            <p className="text-red-400 text-sm">{errors.name?.message}</p>
+          )}
+          <Controller
+            control={control}
+            name="description"
+            render={({ field: { onChange, value } }) => (
+              <Textarea
+                label="Description"
+                labelPlacement="outside"
+                placeholder="Enter Text"
+                value={value}
+                onValueChange={onChange}
+              />
+            )}
+          />
+          {errors.description?.message && (
+            <p className="text-red-400 text-sm">
+              {errors.description?.message}
+            </p>
+          )}
+          <Controller
+            control={control}
+            name="userLevelId"
+            render={({ field: { onChange, value } }) => (
+              <Input
+                type="number"
+                id="userLevelId"
+                placeholder="User Level..."
+                label="User Level"
+                value={value}
+                onChange={onChange}
+                labelPlacement="outside"
+                className="w-full"
+                variant="bordered"
+              />
+            )}
+          />
+          {errors.userLevelId?.message && (
+            <p className="text-red-400 text-sm">
+              {errors.userLevelId?.message}
+            </p>
+          )}
+          <p>Menus</p>
+          {fields.map((field, index) => (
+            <div key={field.menuId} className="flex flex-row gap-10">
+              <p>{field.menuTitle}</p>
+              <div className="grid grid-cols-6 gap-3">
+                {/* <Checkbox>Option</Checkbox> */}
+                <Controller
+                  control={control}
+                  name={`userRoleAccess.${index}.isAdminEnabled`}
+                  render={({ field: { onChange, value } }) => (
+                    <Checkbox isSelected={value} onValueChange={onChange}>
+                      isAdminEnabled
+                    </Checkbox>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name={`userRoleAccess.${index}.isApprovalEnabled`}
+                  render={({ field: { onChange, value } }) => (
+                    <Checkbox isSelected={value} onValueChange={onChange}>
+                      isApprovalEnabled
+                    </Checkbox>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name={`userRoleAccess.${index}.isDeleteEnabled`}
+                  render={({ field: { onChange, value } }) => (
+                    <Checkbox isSelected={value} onValueChange={onChange}>
+                      isDeleteEnabled
+                    </Checkbox>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name={`userRoleAccess.${index}.isInsertEnabled`}
+                  render={({ field: { onChange, value } }) => (
+                    <Checkbox isSelected={value} onValueChange={onChange}>
+                      isInsertEnabled
+                    </Checkbox>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name={`userRoleAccess.${index}.isUpdateEnabled`}
+                  render={({ field: { onChange, value } }) => (
+                    <Checkbox isSelected={value} onValueChange={onChange}>
+                      isUpdateEnabled
+                    </Checkbox>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name={`userRoleAccess.${index}.isViewEnabled`}
+                  render={({ field: { onChange, value } }) => (
+                    <Checkbox isSelected={value} onValueChange={onChange}>
+                      isViewEnabled
+                    </Checkbox>
+                  )}
+                />
+              </div>
+            </div>
+          ))}
+          <div className="flex justify-end gap-3">
+            <Link href={`/admin/master-role`}>
+              <Button color="danger" variant="ghost">
+                Cancel
+              </Button>
+            </Link>
+            <Button type="submit" color="primary" variant="solid">
+              Save
+            </Button>
+          </div>
+        </Card>
+      </form>
+    </div>
+  );
 }
diff --git a/components/form/form-master-user.tsx b/components/form/form-master-user.tsx
index df8cbfc..1803621 100644
--- a/components/form/form-master-user.tsx
+++ b/components/form/form-master-user.tsx
@@ -27,7 +27,20 @@ import { EyeFilledIcon, EyeSlashFilledIcon } from "../icons";
 const masterUserSchema = z.object({
   fullname: z.string().min(1, { message: "Required" }),
   username: z.string().min(1, { message: "Required" }),
-  password: z.string().min(1, { message: "Required" }),
+  password: z
+    .string()
+    .min(8, "Password harus memiliki minimal 8 karakter.")
+    .refine((password) => /[A-Z]/.test(password), {
+      message: "Password harus memiliki minimal satu huruf kapital.",
+    })
+    .refine((password) => /[0-9]/.test(password), {
+      message: "Password harus memiliki minimal satu angka.",
+    })
+    .refine((password) => /[!@#$%^&*(),.?":{}|<>]/.test(password), {
+      message: "Password harus memiliki minimal satu simbol.",
+    }),
+  passwordValidate: z.string().min(1, { message: "Required" }),
+
   email: z.string().min(1, { message: "Required" }),
   identityType: z.string().min(1, { message: "Required" }),
   identityNumber: z.string().min(1, { message: "Required" }),
@@ -114,8 +127,12 @@ const educationGrade = [
 export default function FormMasterUser() {
   const router = useRouter();
   const MySwal = withReactContent(Swal);
-  const [isVisible, setIsVisible] = useState(false);
-  const toggleVisibility = () => setIsVisible(!isVisible);
+  const [isVisible, setIsVisible] = useState([false, false]);
+  const toggleVisibility = (type: number) => {
+    setIsVisible(
+      type === 0 ? [!isVisible[0], isVisible[1]] : [isVisible[0], !isVisible[1]]
+    );
+  };
 
   const formOptions = {
     resolver: zodResolver(masterUserSchema),
@@ -129,6 +146,7 @@ export default function FormMasterUser() {
     control,
     handleSubmit,
     formState: { errors },
+    setError,
   } = useForm<MicroIssueSchema>(formOptions);
 
   async function save(data: z.infer<typeof masterUserSchema>) {
@@ -173,19 +191,26 @@ export default function FormMasterUser() {
   }
 
   async function onSubmit(data: z.infer<typeof masterUserSchema>) {
-    MySwal.fire({
-      title: "Simpan Data",
-      text: "",
-      icon: "warning",
-      showCancelButton: true,
-      cancelButtonColor: "#d33",
-      confirmButtonColor: "#3085d6",
-      confirmButtonText: "Simpan",
-    }).then((result) => {
-      if (result.isConfirmed) {
-        save(data);
-      }
-    });
+    if (data.password === data.passwordValidate) {
+      MySwal.fire({
+        title: "Simpan Data",
+        text: "",
+        icon: "warning",
+        showCancelButton: true,
+        cancelButtonColor: "#d33",
+        confirmButtonColor: "#3085d6",
+        confirmButtonText: "Simpan",
+      }).then((result) => {
+        if (result.isConfirmed) {
+          save(data);
+        }
+      });
+    } else {
+      setError("passwordValidate", {
+        type: "manual",
+        message: "Password harus sama.",
+      });
+    }
   }
 
   return (
@@ -237,7 +262,7 @@ export default function FormMasterUser() {
             name="password"
             render={({ field: { onChange, value } }) => (
               <Input
-                type={isVisible ? "text" : "password"}
+                type={isVisible[0] ? "text" : "password"}
                 id="password"
                 placeholder="Password..."
                 label="Password"
@@ -250,9 +275,9 @@ export default function FormMasterUser() {
                   <button
                     className="focus:outline-none"
                     type="button"
-                    onClick={toggleVisibility}
+                    onClick={() => toggleVisibility(0)}
                   >
-                    {isVisible ? (
+                    {isVisible[0] ? (
                       <EyeSlashFilledIcon className="text-2xl text-default-400 pointer-events-none" />
                     ) : (
                       <EyeFilledIcon className="text-2xl text-default-400 pointer-events-none" />
@@ -265,6 +290,42 @@ export default function FormMasterUser() {
           {errors.password?.message && (
             <p className="text-red-400 text-sm">{errors.password?.message}</p>
           )}
+          <Controller
+            control={control}
+            name="passwordValidate"
+            render={({ field: { onChange, value } }) => (
+              <Input
+                type={isVisible[1] ? "text" : "password"}
+                id="passwordValidate"
+                placeholder="Confirm Password..."
+                label="Confirm Password"
+                value={value}
+                onChange={onChange}
+                labelPlacement="outside"
+                className="w-full"
+                variant="bordered"
+                endContent={
+                  <button
+                    className="focus:outline-none"
+                    type="button"
+                    onClick={() => toggleVisibility(1)}
+                  >
+                    {isVisible[1] ? (
+                      <EyeSlashFilledIcon className="text-2xl text-default-400 pointer-events-none" />
+                    ) : (
+                      <EyeFilledIcon className="text-2xl text-default-400 pointer-events-none" />
+                    )}
+                  </button>
+                }
+              />
+            )}
+          />
+          {errors.passwordValidate?.message && (
+            <p className="text-red-400 text-sm">
+              {errors.passwordValidate?.message}
+            </p>
+          )}
+
           <Controller
             control={control}
             name="email"
@@ -343,8 +404,8 @@ export default function FormMasterUser() {
                 value={value}
                 onValueChange={onChange}
               >
-                <Radio value="male">Laki-laki</Radio>
-                <Radio value="female">Perempuan</Radio>
+                <Radio value="Male">Laki-laki</Radio>
+                <Radio value="Female">Perempuan</Radio>
               </RadioGroup>
             )}
           />