diff --git a/.env b/.env
new file mode 100644
index 0000000..f1988d2
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+NEXT_PUBLIC_MAPS_API_KEY=AIzaSyCOkxoeKykE60L_nM4VS1JYJqBmqy2GA0Q
\ No newline at end of file
diff --git a/app/(admin)/admin/master-user/create/page.tsx b/app/(admin)/admin/master-user/create/page.tsx
index a345e3c..788304c 100644
--- a/app/(admin)/admin/master-user/create/page.tsx
+++ b/app/(admin)/admin/master-user/create/page.tsx
@@ -1,10 +1,10 @@
-import FormMasterUser from '@/components/form/form-master-user'
-import { Card } from '@nextui-org/react'
+import FormMasterUser from "@/components/form/form-master-user";
+import { Card } from "@nextui-org/react";
 
 export default function CreateMasterUserPage() {
-    return (
-        <Card className="h-[96vh] rounded-md my- ml-3 border bg-transparent">
-            <FormMasterUser />
-        </Card>
-    )
+  return (
+    <Card className="h-[96vh] rounded-md border bg-transparent">
+      <FormMasterUser />
+    </Card>
+  );
 }
diff --git a/app/(admin)/admin/master-user/page.tsx b/app/(admin)/admin/master-user/page.tsx
index 81372a0..5e3f452 100644
--- a/app/(admin)/admin/master-user/page.tsx
+++ b/app/(admin)/admin/master-user/page.tsx
@@ -1,24 +1,25 @@
-"use client"
+"use client";
 import { AddIcon } from "@/components/icons";
 import MasterUserTable from "@/components/table/master-user-table";
 import { Button, Card } from "@nextui-org/react";
 import Link from "next/link";
 
 export default function MasterUserPage() {
-    return (
-        <div className="h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 grid rounded-lg border-2 ml-4">
-            <div className="px-4">
-                <Card className="rounded-md my-5 pl-5 py-2">
-                    <Link href="/admin/master-user/create">
-                        <Button size="md" color="primary" className="w-min">
-                            <AddIcon />New User
-                        </Button>
-                    </Link>
-                </Card>
-                <Card className="rounded-md my-5">
-                    <MasterUserTable />
-                </Card>
-            </div>
-        </div>
-    );
+  return (
+    <div className="h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 grid rounded-lg border-2">
+      <div className="">
+        <Card className="rounded-md my-5 pl-5 py-2">
+          <Link href="/admin/master-user/create">
+            <Button size="md" color="primary" className="w-min">
+              <AddIcon />
+              New User
+            </Button>
+          </Link>
+        </Card>
+        <Card className="rounded-md my-5">
+          <MasterUserTable />
+        </Card>
+      </div>
+    </div>
+  );
 }
diff --git a/app/kontak-kami/page.tsx b/app/kontak-kami/page.tsx
index c85da70..0e642c3 100644
--- a/app/kontak-kami/page.tsx
+++ b/app/kontak-kami/page.tsx
@@ -1,5 +1,10 @@
 import Contact from "@/components/main/detail/contact";
+import { Suspense } from "react";
 
 export default function VisiMisiPage() {
-  return <Contact />;
+  return (
+    <Suspense>
+      <Contact />
+    </Suspense>
+  );
 }
diff --git a/components/form/form-master-user.tsx b/components/form/form-master-user.tsx
index 6460f1d..df8cbfc 100644
--- a/components/form/form-master-user.tsx
+++ b/components/form/form-master-user.tsx
@@ -1,348 +1,474 @@
-'use client'
-import { error } from '@/config/swal';
-import { createMasterUser } from '@/service/master-user';
-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 { 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 { Controller, useForm } from "react-hook-form";
+import Datepicker from "react-tailwindcss-datepicker";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { z } from "zod";
+import { EyeFilledIcon, EyeSlashFilledIcon } from "../icons";
 
 const masterUserSchema = z.object({
-    fullname: z.string().min(1, { message: "Required" }),
-    username: z.string().min(1, { message: "Required" }),
-    email: z.string().min(1, { message: "Required" }),
-    identityType: z.string().min(1, { message: "Required" }),
-    lastEducation: z.string().min(1, { message: "Required" }),
-    phoneNumber: z.string().min(1, { message: "Required" }),
-    workingType: z.string().min(1, { message: "Required" }),
+  fullname: z.string().min(1, { message: "Required" }),
+  username: z.string().min(1, { message: "Required" }),
+  password: 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" }),
+  lastEducation: z.string().min(1, { message: "Required" }),
+  genderType: z.string().min(1, { message: "Required" }),
+  phoneNumber: z.string().min(1, { message: "Required" }),
+  workType: z.string().min(1, { message: "Required" }),
+  address: z.string().min(1, { message: "Required" }),
+  birthDate: z.object({
+    startDate: z.string().min(1, { message: "Required" }),
+    endDate: z.string().min(1, { message: "Required" }),
+  }),
 });
 
+const typeIdentity = [
+  {
+    id: 1,
+    value: "KTP",
+  },
+  {
+    id: 2,
+    value: "SIM",
+  },
+  {
+    id: 3,
+    value: "Passport",
+  },
+];
+
+const workingBackground = [
+  {
+    id: 1,
+    value: "Pegawai Negri Sipil",
+  },
+  {
+    id: 2,
+    value: "Wiraswasta",
+  },
+  {
+    id: 3,
+    value: "Guru",
+  },
+  {
+    id: 4,
+    value: "Dokter",
+  },
+];
+
+const educationGrade = [
+  {
+    id: 1,
+    value: "SMA / Sederajat",
+  },
+  {
+    id: 2,
+    value: "Diploma 1",
+  },
+  {
+    id: 3,
+    value: "Diploma 2",
+  },
+  {
+    id: 4,
+    value: "Diploma 3",
+  },
+  {
+    id: 5,
+    value: "Diploma 4",
+  },
+  {
+    id: 6,
+    value: "S1",
+  },
+  {
+    id: 7,
+    value: "S2",
+  },
+  {
+    id: 8,
+    value: "S3",
+  },
+];
+
 export default function FormMasterUser() {
-    const router = useRouter();
-    const MySwal = withReactContent(Swal);
-    const [address, setAddress] = useState<string>();
-    const [dateOfBirt, setDateOfBirt] = useState<string>("13-april-1995");
-    const [email, setEmail] = useState<string>();
-    const [fullName, setFullname] = useState<string>();
-    const [genderType, setGenderType] = React.useState("");
-    const [identityNumber, setIdentityNumber] = useState<string>();
-    const [lastEducation, setLastEducation] = useState<any>([]);
-    const [phoneNumber, setPhoneNumber] = useState<string>();
-    const [userLevelsId, setUserLevelsId] = useState<number>(1);
-    const [userRoleId, setUserRoleId] = useState<number>(1);
-    const [username, setUsername] = useState<string>();
-    const [workType, setWorkType] = useState<string>("Tets");
-    const [identityType, setIdentityType] = useState<any>([])
-    const [showNumberInput, setShowNumberInput] = useState(false);
+  const router = useRouter();
+  const MySwal = withReactContent(Swal);
+  const [isVisible, setIsVisible] = useState(false);
+  const toggleVisibility = () => setIsVisible(!isVisible);
 
-    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),
+    defaultValues: {
+      identityType: "KTP",
+      birthDate: { stardDate: "", endDate: "" },
+    },
+  };
+  type MicroIssueSchema = z.infer<typeof masterUserSchema>;
+  const {
+    control,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<MicroIssueSchema>(formOptions);
 
-    const typeIdentity = [
-        {
-            id: 1,
-            value: "KTP",
-        },
-        {
-            id: 2,
-            value: "SIM",
-        },
-        {
-            id: 3,
-            value: "Passport",
-        },
-    ]
-
-    const workingBackground = [
-        {
-            id: 1,
-            value: "Pegawai Negri Sipil",
-        },
-        {
-            id: 2,
-            value: "Wiraswasta",
-        },
-        {
-            id: 3,
-            value: "Guru",
-        },
-        {
-            id: 4,
-            value: "Dokter",
-        },
-    ]
-
-    const educationGrade = [
-        {
-            id: 1,
-            value: "SMA / Sederajat",
-        },
-        {
-            id: 2,
-            value: "Diploma 1",
-        },
-        {
-            id: 3,
-            value: "Diploma 2",
-        },
-        {
-            id: 4,
-            value: "Diploma 3",
-        },
-        {
-            id: 5,
-            value: "Diploma 4",
-        },
-        {
-            id: 6,
-            value: "S1",
-        },
-        {
-            id: 7,
-            value: "S2",
-        },
-        {
-            id: 8,
-            value: "S3",
-        },
-    ]
-
-
-    async function save(data: any) {
-        const formData = {
-            address: address,
-            dateOfBirt: dateOfBirt,
-            email: email,
-            fullName: fullName,
-            genderType: genderType,
-            identityNumber: identityNumber,
-            identityType: identityType.anchorKey,
-            lastEducation: Array.from(lastEducation)[0],
-            phoneNumber: phoneNumber,
-            userLevelsId: userLevelsId,
-            userRoleId: userRoleId,
-            username: username,
-            workType: workType,
-        };
-
-        console.log("Form MasterUser:", formData);
-        const response = await createMasterUser(formData);
-
-        if (response?.error) {
-            error(response.message);
-            return false;
-        }
-
-        successSubmit("/admin/article");
+  async function save(data: z.infer<typeof masterUserSchema>) {
+    const formData = {
+      address: data.address,
+      dateOfBirt: data.birthDate,
+      password: data.password,
+      email: data.email,
+      fullname: data.fullname,
+      genderType: data.genderType,
+      identityNumber: data.identityNumber,
+      identityType: data.identityType,
+      lastEducation: data.lastEducation,
+      phoneNumber: data.phoneNumber,
+      userLevelId: 2,
+      userRoleId: 2,
+      username: data.username,
+      workType: data.workType,
     };
 
-    function successSubmit(redirect: any) {
-        MySwal.fire({
-            title: "Sukses",
-            icon: "success",
-            confirmButtonColor: "#3085d6",
-            confirmButtonText: "OK",
-        }).then((result) => {
-            if (result.isConfirmed) {
-                router.push(redirect);
-            }
-        });
+    const response = await createMasterUser(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/article");
+  }
 
-    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("fullname")}
-                            label="Fullname"
-                            variant='bordered'
-                            placeholder="Enter Text"
-                            labelPlacement='outside'
-                            value={fullName}
-                            onChange={(e) => setFullname(e.target.value)}
-                        />
-                        {errors.fullname?.message}
-                    </div>
-                    <div>
-                        <Input
-                            type="text"
-                            {...register("username")}
-                            label="Username"
-                            variant='bordered'
-                            placeholder="Enter Text"
-                            labelPlacement='outside'
-                            value={username}
-                            onChange={(e) => setUsername(e.target.value)}
+  function successSubmit(redirect: any) {
+    MySwal.fire({
+      title: "Sukses",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        router.push(redirect);
+      }
+    });
+  }
 
-                        />
-                        {errors.username?.message}
-                    </div>
-                    <div>
-                        <Input
-                            type="email"
-                            {...register("email")}
-                            label="Email"
-                            variant='bordered'
-                            placeholder="Enter Text"
-                            labelPlacement='outside'
-                            value={email}
-                            onChange={(e) => setEmail(e.target.value)}
-                        />
-                        {errors.email?.message}
-                    </div>
-                    <div>
-                        <Select
-                            variant='bordered'
-                            {...register("identityType")}
-                            labelPlacement='outside'
-                            label="Identity Type"
-                            placeholder="Select"
-                            className="max-w-xs"
-                            selectedKeys={identityType}
-                            onSelectionChange={setIdentityType}
-                        >
-                            {typeIdentity.map((type) => (
-                                <SelectItem key={type.value}>
-                                    {type.value}
-                                </SelectItem>
-                            ))}
-                        </Select>
-                        {/* <p>selected : {identityType}</p> */}
-                        {errors.identityType?.message}
-                        {/* {showNumberInput && ( */}
-                        <Input
-                            type="text"
-                            className='pt-2'
-                            variant='bordered'
-                            placeholder="Enter Identity Number"
-                            labelPlacement='outside'
-                            value={identityNumber}
-                            onChange={(e) => setIdentityNumber(e.target.value)}
-                        />
-                        {/* )} */}
-                    </div>
-                    <div>
-                        <RadioGroup
-                            orientation='horizontal'
-                            label="Select your favorite city"
-                            value={genderType}
-                            onValueChange={setGenderType}
-                        >
-                            <Radio value="laki-laki">Laki-laki</Radio>
-                            <Radio value="perempuan">Perempuan</Radio>
-                        </RadioGroup>
-                        <p className="text-default-500 text-small">Selected: {genderType}</p>
-                    </div>
-                    <div>
-                        <Select
-                            variant='bordered'
-                            {...register("lastEducation")}
-                            labelPlacement='outside'
-                            label="Last Education"
-                            selectedKeys={lastEducation}
-                            onSelectionChange={setLastEducation}
-                            placeholder="Select"
-                            className="max-w-xs"
-                        >
-                            {educationGrade.map((grade) => (
-                                <SelectItem key={grade.value}>
-                                    {grade.value}
-                                </SelectItem>
-                            ))}
-                        </Select>
-                        <p className="text-default-500 text-small">Selected: {lastEducation}</p>
-                        {errors.lastEducation?.message}
-                    </div>
-                    <div>
-                        <Input
-                            type="text"
-                            {...register("phoneNumber")}
-                            label="Phone Number"
-                            className='pt-2'
-                            variant='bordered'
-                            placeholder="Enter Number"
-                            labelPlacement='outside'
-                            value={phoneNumber}
-                            onChange={(e) => setPhoneNumber(e.target.value)}
-                        />
-                        {errors.phoneNumber?.message}
-                    </div>
-                    <div>
-                        <Select
-                            variant='bordered'
-                            {...register("workingType")}
-                            labelPlacement='outside'
-                            label="Working Type"
-                            placeholder="Select"
-                            className="max-w-xs"
-                        >
-                            {workingBackground.map((type) => (
-                                <SelectItem key={type.id} value={type.id}>
-                                    {type.value}
-                                </SelectItem>
-                            ))}
-                        </Select>
-                        {errors.workingType?.message}
-                    </div>
-                    <div>
-                        <Textarea
-                            label="Address"
-                            labelPlacement="outside"
-                            placeholder="Enter Text"
-                            value={address}
-                            onValueChange={setAddress}
-                        />
-                    </div>
-                    <div className='flex justify-end gap-3'>
-                        <Link href={`/admin/master-user`}>
-                            <Button
-                                color='danger'
-                                variant="ghost"
-                            >
-                                Cancel
-                            </Button>
-                        </Link>
-                        <Button
-                            type="submit"
-                            color='primary'
-                            variant="solid"
-                        >
-                            Save
-                        </Button>
-                    </div>
-                </Card>
-            </form>
-        </div >
-    )
+  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 p-5 flex flex-col gap-3">
+          <Controller
+            control={control}
+            name="fullname"
+            render={({ field: { onChange, value } }) => (
+              <Input
+                type="text"
+                id="title"
+                placeholder="Fullname..."
+                label="Fullname"
+                value={value}
+                onChange={onChange}
+                labelPlacement="outside"
+                className="w-full"
+                variant="bordered"
+              />
+            )}
+          />
+          {errors.fullname?.message && (
+            <p className="text-red-400 text-sm">{errors.fullname?.message}</p>
+          )}
+          <Controller
+            control={control}
+            name="username"
+            render={({ field: { onChange, value } }) => (
+              <Input
+                type="text"
+                id="username"
+                placeholder="Username..."
+                label="Username"
+                value={value}
+                onChange={onChange}
+                labelPlacement="outside"
+                className="w-full"
+                variant="bordered"
+              />
+            )}
+          />
+          {errors.username?.message && (
+            <p className="text-red-400 text-sm">{errors.username?.message}</p>
+          )}
+          <Controller
+            control={control}
+            name="password"
+            render={({ field: { onChange, value } }) => (
+              <Input
+                type={isVisible ? "text" : "password"}
+                id="password"
+                placeholder="Password..."
+                label="Password"
+                value={value}
+                onChange={onChange}
+                labelPlacement="outside"
+                className="w-full"
+                variant="bordered"
+                endContent={
+                  <button
+                    className="focus:outline-none"
+                    type="button"
+                    onClick={toggleVisibility}
+                  >
+                    {isVisible ? (
+                      <EyeSlashFilledIcon className="text-2xl text-default-400 pointer-events-none" />
+                    ) : (
+                      <EyeFilledIcon className="text-2xl text-default-400 pointer-events-none" />
+                    )}
+                  </button>
+                }
+              />
+            )}
+          />
+          {errors.password?.message && (
+            <p className="text-red-400 text-sm">{errors.password?.message}</p>
+          )}
+          <Controller
+            control={control}
+            name="email"
+            render={({ field: { onChange, value } }) => (
+              <Input
+                type="email"
+                id="email"
+                placeholder="Email..."
+                label="Email"
+                value={value}
+                onChange={onChange}
+                labelPlacement="outside"
+                className="w-full"
+                variant="bordered"
+              />
+            )}
+          />
+          {errors.email?.message && (
+            <p className="text-red-400 text-sm">{errors.email?.message}</p>
+          )}
+
+          <Controller
+            control={control}
+            name="identityType"
+            render={({ field: { onChange, value } }) => (
+              <Select
+                variant="bordered"
+                labelPlacement="outside"
+                label="Identity Type"
+                placeholder="Select"
+                className="max-w-xs"
+                selectedKeys={[value]}
+                onChange={onChange}
+              >
+                {typeIdentity.map((type) => (
+                  <SelectItem key={type.value}>{type.value}</SelectItem>
+                ))}
+              </Select>
+            )}
+          />
+          {errors.identityType?.message && (
+            <p className="text-red-400 text-sm">
+              {errors.identityType?.message}
+            </p>
+          )}
+          <Controller
+            control={control}
+            name="identityNumber"
+            render={({ field: { onChange, value } }) => (
+              <Input
+                type="number"
+                id="identityNumber"
+                placeholder="Identity Number..."
+                label="Identity Number"
+                value={value}
+                onChange={onChange}
+                labelPlacement="outside"
+                className="w-full"
+                variant="bordered"
+              />
+            )}
+          />
+          {errors.identityNumber?.message && (
+            <p className="text-red-400 text-sm">
+              {errors.identityNumber?.message}
+            </p>
+          )}
+
+          <Controller
+            control={control}
+            name="genderType"
+            render={({ field: { onChange, value } }) => (
+              <RadioGroup
+                orientation="horizontal"
+                label="Gender"
+                value={value}
+                onValueChange={onChange}
+              >
+                <Radio value="male">Laki-laki</Radio>
+                <Radio value="female">Perempuan</Radio>
+              </RadioGroup>
+            )}
+          />
+          {errors.genderType?.message && (
+            <p className="text-red-400 text-sm">{errors.genderType?.message}</p>
+          )}
+          <Controller
+            control={control}
+            name="birthDate"
+            render={({ field: { onChange, value } }) => (
+              <Datepicker
+                useRange={false}
+                asSingle={true}
+                value={value}
+                displayFormat="DD/MM/YYYY"
+                onChange={onChange}
+                popoverDirection="down"
+                inputClassName="w-full bg-transparent border-1 border-gray-200 px-2 py-[6px] rounded-xl "
+              />
+            )}
+          />
+          {errors.birthDate?.startDate?.message && (
+            <p className="text-red-400 text-sm">
+              {errors.birthDate?.startDate?.message}
+            </p>
+          )}
+          <Controller
+            control={control}
+            name="lastEducation"
+            render={({ field: { onChange, value } }) => (
+              <Select
+                variant="bordered"
+                labelPlacement="outside"
+                label="Last Education"
+                selectedKeys={[value]}
+                onChange={onChange}
+                placeholder="Select"
+                className="max-w-xs"
+              >
+                {educationGrade.map((grade) => (
+                  <SelectItem key={grade.value}>{grade.value}</SelectItem>
+                ))}
+              </Select>
+            )}
+          />
+          {errors.lastEducation?.message && (
+            <p className="text-red-400 text-sm">
+              {errors.lastEducation?.message}
+            </p>
+          )}
+          <Controller
+            control={control}
+            name="phoneNumber"
+            render={({ field: { onChange, value } }) => (
+              <Input
+                type="number"
+                id="identityNumber"
+                placeholder="08*********"
+                label="No. Handphone"
+                value={value}
+                onChange={onChange}
+                labelPlacement="outside"
+                className="w-full"
+                variant="bordered"
+              />
+            )}
+          />
+          {errors.phoneNumber?.message && (
+            <p className="text-red-400 text-sm">
+              {errors.phoneNumber?.message}
+            </p>
+          )}
+          <Controller
+            control={control}
+            name="workType"
+            render={({ field: { onChange, value } }) => (
+              <Select
+                variant="bordered"
+                labelPlacement="outside"
+                label="Working Type"
+                placeholder="Select"
+                className="max-w-xs"
+                selectedKeys={[value]}
+                onChange={onChange}
+              >
+                {workingBackground.map((type) => (
+                  <SelectItem key={type.id} value={type.id}>
+                    {type.value}
+                  </SelectItem>
+                ))}
+              </Select>
+            )}
+          />
+          {errors.workType?.message && (
+            <p className="text-red-400 text-sm">{errors.workType?.message}</p>
+          )}
+          <Controller
+            control={control}
+            name="address"
+            render={({ field: { onChange, value } }) => (
+              <Textarea
+                label="Address"
+                labelPlacement="outside"
+                placeholder="Enter Text"
+                value={value}
+                onValueChange={onChange}
+              />
+            )}
+          />
+          {errors.address?.message && (
+            <p className="text-red-400 text-sm">{errors.address?.message}</p>
+          )}
+          <div className="flex justify-end gap-3">
+            <Link href={`/admin/master-user`}>
+              <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/landing/Footer.tsx b/components/landing/Footer.tsx
index c94aac4..0c80965 100644
--- a/components/landing/Footer.tsx
+++ b/components/landing/Footer.tsx
@@ -1,76 +1,141 @@
-import { Button } from '@nextui-org/button'
-import { Input } from '@nextui-org/input'
-import { MailIcon, SendIcon } from '../icons'
-import Link from 'next/link'
+import { Button } from "@nextui-org/button";
+import { Input } from "@nextui-org/input";
+import { MailIcon, SendIcon } from "../icons";
+import Link from "next/link";
 
 export default function Footer() {
-    return (
-        <div className='relative text-xs leading-4 md:leading-loose lg:leading-8 font-semibold '>
-            <div className='h-[650px] md:h-[720px] lg:h-auto  bg-black'>
-                <img src="/assets/Footer.jpg" alt="" className='w-full h-full object-cover object-left-top opacity-80' />
-            </div>
-            <div className="absolute top-0 left-0 w-full grid grid-cols-3 md:grid-cols-3 lg:grid-cols-7 gap-5 md:gap-4 px-1 md:px-10 lg:px-20 pt-5 md:pt-16 pb-5 md:pb-20 text-white">
-                <div className='pb-2 md:pb-0'>
-                    <p>Berita Terkini</p>
-                    <p>Info Komnas Anak</p>
-                    <p>Info Komnas Perempuan</p>
-                    <p>Kontak</p>
-                </div>
-                <div className='pb-2 md:pb-0'>
-                    <p>Tentang PPID</p>
-                    <p>Profil Pimpinan Polri</p>
-                    <p>Struktur Organisasi</p>
-                    <p>Visi & Misi</p>
-                    <p>Logo</p>
-                </div>
-                <div className='pb-2 md:pb-0'>
-                    <p>Informasi Berkala</p>
-                    <p>Informasi Serta Merta</p>
-                    <p>Informasi Setiap Saat</p>
-                    <p>Informasi Dikecualikan</p>
-                    <p>UU & Peraturan</p>
-                    <p>Penerangan Satuan</p>
-                </div>
-                <div className='pb-2 md:pb-0'>
-                    <p>SP2HP</p>
-                    <p>Formulir Permohonan Informasi</p>
-                    <p>Pelayanan SIM</p>
-                    <p>Pelayanan E-Rikkes SIM</p>
-                    <p>Pelayana Test Psikologi SIM</p>
-                    <p>Pelayanan E-Avis</p>
-                    <p>Pelayanan STNK & BPKP</p>
-                    <p>Pelayanan SKCK</p>
-                    <p>Pelayanan Karantina Presisi</p>
-                    <p>Pelayanan Propam Presisi</p>
-                    <p>Pelayanan Dumas Presisi</p>
-                    <p>Pelayanan Polisiku</p>
-                    <p>Pelayanan BINMAS</p>
-                </div>
-                <div className='w-min lg:w-max'>
-                    <p className='text-xl font-bold'>Subscribe</p>
-                    <p>Dapatkan info & event terupdate dari kami.</p>
-                    <div className='flex '>
-                        <Input
-                            label="Email"
-                            placeholder="Email Anda"
-                            className='pt- rounded-none'
-                            classNames={{
-                                inputWrapper: "rounded-none rounded-l-lg"
-                            }}
-                            startContent={
-                                <MailIcon className="text-xl text-default-400 pointer-events-none flex-shrink-0" />
-                            }
-                        />
-                        <div className='bg-[#C3160F] flex items-center justify-center w-16 rounded-r-lg cursor-pointer'><SendIcon /></div>
-                    </div>
-                    <Link href={`/auth`}>
-                        <Button className='mt-1 bg-[#DD8306]'>
-                            Kontributor Wilayah
-                        </Button>
-                    </Link>
-                </div>
-            </div>
-            <div className='dark:bg-black text-black dark:text-white text-center py-3 text-xs md:text-medium flex justify-center font-normal'>&copy; Copyright Humas<p className='text-red-700'>&nbsp; POLRI &reg;</p>&nbsp; All Rights Reserved</div>
+  return (
+    <div className="relative text-xs leading-4 md:leading-loose lg:leading-8 font-semibold ">
+      <div className="h-[650px] md:h-[720px] lg:h-auto  bg-black">
+        <img
+          src="/assets/Footer.jpg"
+          alt=""
+          className="w-full h-full object-cover object-left-top opacity-80"
+        />
+      </div>
+      <div className="absolute top-0 left-0 w-full grid grid-cols-3 md:grid-cols-3 lg:grid-cols-7 gap-5 md:gap-4 px-1 md:px-10 lg:px-20 pt-5 md:pt-16 pb-5 md:pb-20 text-white">
+        <div className="pb-2 md:pb-0 flex flex-col gap-2">
+          <Link href="/">Berita Terkini</Link>
+          <Link href="https://www.kpai.go.id/" target="_blank">
+            Info Komnas Anak
+          </Link>
+          <Link href="https://komnasperempuan.go.id/" target="_blank">
+            Info Komnas Perempuan
+          </Link>
+          <Link href="/kontak-kami">Kontak</Link>
         </div>
-    )
+        <div className="pb-2 md:pb-0 flex flex-col gap-2">
+          <Link href="/static/humas-polri">Tentang PPID</Link>
+          <Link href="/static/profile-kapolri">Profil Pimpinan Polri</Link>
+          <Link href="/static/struktur-mabes">Struktur Organisasi</Link>
+          <Link href="/static/visi-misi-polri">Visi & Misi</Link>
+          <Link href="/static/logo">Logo</Link>
+        </div>
+        <div className="pb-2 md:pb-0 flex flex-col gap-2">
+          <Link
+            href="https://siberpresisi.com/informasi-publik/informasi-berkala"
+            target="_blank"
+          >
+            Informasi Berkala
+          </Link>
+          <Link
+            href="https://siberpresisi.com/informasi-publik/informasi-serta-merta"
+            target="_blank"
+          >
+            Informasi Serta Merta
+          </Link>
+          <Link
+            href="https://siberpresisi.com/informasi-publik/informasi-setiap-saat"
+            target="_blank"
+          >
+            Informasi Setiap Saat
+          </Link>
+          <Link
+            href="https://siberpresisi.com/informasi-publik/informasi-dikecualikan"
+            target="_blank"
+          >
+            Informasi Dikecualikan
+          </Link>
+          <Link
+            href="https://sisdivkum.id/library/peraturan-kepolisian"
+            target="_blank"
+          >
+            UU & Peraturan
+          </Link>
+          {/* <Link href="#">Penerangan Satuan</Link> */}
+        </div>
+        <div className="pb-2 md:pb-0 flex flex-col gap-2">
+          <Link href="https://sp2hp.bareskrim.polri.go.id/" target="_blank">
+            SP2HP
+          </Link>
+          <Link href="/form-permohonan-informasi">
+            Formulir Permohonan Informasi
+          </Link>
+          <Link href="https://www.digitalkorlantas.id/sim/" target="_blank">
+            Pelayanan SIM
+          </Link>
+          <Link href="https://erikkes.id/" target="_blank">
+            Pelayanan E-Rikkes SIM
+          </Link>
+          <Link href="https://eppsi.id/" target="_blank">
+            Pelayana Test Psikologi SIM
+          </Link>
+          <Link href="https://e-avis.korlantas.polri.go.id/" target="_blank">
+            Pelayanan E-Avis
+          </Link>
+          <Link href="https://samsatdigital.id/" target="_blank">
+            Pelayanan STNK & BPKP
+          </Link>
+          <Link href="https://play.google.com/store/apps/details?id=superapps.polri.presisi.presisi&hl=en_US">
+            Pelayanan SKCK
+          </Link>
+          {/* <Link href="#">Pelayanan Karantina Presisi</Link> */}
+          <Link
+            href="https://play.google.com/store/apps/details?id=com.stk.pengaduanpropam"
+            target="_blank"
+          >
+            Pelayanan Propam Presisi
+          </Link>
+          <Link href="https://dumaspresisi.polri.go.id/" target="_blank">
+            Pelayanan Dumas Presisi
+          </Link>
+          <Link href="https://polisiku.co.id/" target="_blank">
+            Pelayanan Polisiku
+          </Link>
+          <Link href="https://bos.polri.go.id/login" target="_blank">
+            Pelayanan BINMAS
+          </Link>
+        </div>
+        <div className="w-min lg:w-max">
+          <p className="text-xl font-bold">Subscribe</p>
+          <p>Dapatkan info & event terupdate dari kami.</p>
+          <div className="flex ">
+            <Input
+              label="Email"
+              placeholder="Email Anda"
+              className="pt- rounded-none"
+              classNames={{
+                inputWrapper: "rounded-none rounded-l-lg",
+              }}
+              startContent={
+                <MailIcon className="text-xl text-default-400 pointer-events-none flex-shrink-0" />
+              }
+            />
+            <div className="bg-[#C3160F] flex items-center justify-center w-16 rounded-r-lg cursor-pointer">
+              <SendIcon />
+            </div>
+          </div>
+          <Link href={`/auth`}>
+            <Button className="mt-1 bg-[#DD8306] text-white">
+              Kontributor Wilayah
+            </Button>
+          </Link>
+        </div>
+      </div>
+      <div className="dark:bg-black text-black dark:text-white text-center py-3 text-xs md:text-medium flex justify-center font-normal">
+        &copy; Copyright Humas<p className="text-red-700">&nbsp; POLRI &reg;</p>
+        &nbsp; All Rights Reserved
+      </div>
+    </div>
+  );
 }
diff --git a/components/landing/HeaderNews.tsx b/components/landing/HeaderNews.tsx
index 174d64a..fa1b561 100644
--- a/components/landing/HeaderNews.tsx
+++ b/components/landing/HeaderNews.tsx
@@ -19,7 +19,6 @@ export default function HeaderNews() {
     async function getArticle() {
       const req = { page: 1, search: "", limit: "10" };
       const response = await getListArticle(req);
-      console.log("res", response?.data?.data);
       setArticle(response?.data?.data);
     }
     getArticle();
diff --git a/components/landing/MedolUpdate.tsx b/components/landing/MedolUpdate.tsx
index 3f55551..5ba14aa 100644
--- a/components/landing/MedolUpdate.tsx
+++ b/components/landing/MedolUpdate.tsx
@@ -58,7 +58,7 @@ export default function MedolUpdate() {
 
   async function getDataImage(data: any) {
     let temp = data;
-    for (let i = 0; i < data.length; i++) {
+    for (let i = 0; i < data?.length; i++) {
       const res = await getImageInp(temp[i].id);
       const data = res?.data[0]?.guid?.rendered;
       temp[i].image = data;
diff --git a/components/main/detail/contact.tsx b/components/main/detail/contact.tsx
index 5113ee3..9760b58 100644
--- a/components/main/detail/contact.tsx
+++ b/components/main/detail/contact.tsx
@@ -3,7 +3,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { Button } from "@nextui-org/button";
 import { Input, Textarea } from "@nextui-org/input";
 import { Select, SelectItem, SelectSection } from "@nextui-org/react";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 import {
@@ -126,8 +126,17 @@ const Contact: React.FC = () => {
               <div>Hari Senin - Jumat | 08:00 - 15:00 WIB</div>
             </div>
           </div>
-          <div className="flex justify-center border-2 border-red-500 h-[280px] pt-2">
-            {/* <Image height={100} width={100} src="/maps.png" alt="maps" className="" /> */}
+          <div className="flex justify-center border-2 border-red-500 h-[280px]">
+            {/* <iframe
+              src={`https://www.google.com/maps/embed/v1/place?key=${process.env.NEXT_PUBLIC_MAPS_API_KEY}&q=-6.2389608,106.7955078`}
+            ></iframe> */}
+            <iframe
+              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11218.073168001461!2d106.7955078024133!3d-6.238960764805329!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f169ccddedf3%3A0xb6702055b4d182f6!2sMarkas%20Besar%20Kepolisian%20Negara%20Republik%20Indonesia%20(MABES%20POLRI)!5e0!3m2!1sen!2sus!4v1733122332539!5m2!1sen!2sus"
+              width="800"
+              height="275"
+              style={{ border: 0 }}
+              loading="lazy"
+            ></iframe>{" "}
           </div>
         </div>
         <div className="w-auto lg:w-2/3 relative p-2 md:p-5 space-y-3 pr-2 md:pr-28">
@@ -245,7 +254,7 @@ const Contact: React.FC = () => {
           </div>
           <div className="flex justify-center md:justify-end">
             <Button
-              className="bg-[#DD8306] w-auto md:w-[200px] rounded-lg"
+              className="bg-[#DD8306] w-auto md:w-[200px] rounded-lg text-white"
               size="md"
             >
               Kirim Pesan
diff --git a/components/table/master-role-table.tsx b/components/table/master-role-table.tsx
index a424c74..09e89a9 100644
--- a/components/table/master-role-table.tsx
+++ b/components/table/master-role-table.tsx
@@ -1,9 +1,9 @@
 "use client";
 import {
-    CreateIconIon,
-    DeleteIcon,
-    DotsYIcon,
-    EyeIconMdi
+  CreateIconIon,
+  DeleteIcon,
+  DotsYIcon,
+  EyeIconMdi,
 } from "@/components/icons";
 import { error } from "@/config/swal";
 import { deleteMasterUser } from "@/service/master-user";
@@ -11,19 +11,20 @@ import { deleteMasterUserRole, listUserRole } from "@/service/master-user-role";
 import { MasterUser, MasterUserRole } from "@/types/globals";
 import { Button } from "@nextui-org/button";
 import {
-    Chip,
-    ChipProps,
-    Dropdown,
-    DropdownItem,
-    DropdownMenu,
-    DropdownTrigger,
-    Spinner,
-    Table,
-    TableBody,
-    TableCell,
-    TableColumn,
-    TableHeader,
-    TableRow
+  Chip,
+  ChipProps,
+  Dropdown,
+  DropdownItem,
+  DropdownMenu,
+  DropdownTrigger,
+  Pagination,
+  Spinner,
+  Table,
+  TableBody,
+  TableCell,
+  TableColumn,
+  TableHeader,
+  TableRow,
 } from "@nextui-org/react";
 import Link from "next/link";
 import { Key, useCallback, useEffect, useState } from "react";
@@ -31,261 +32,264 @@ import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
 
 type UserObject = {
-    id: number;
-    user: string;
-    status: string;
-    projectName: string;
-    avatar: string;
+  id: number;
+  user: string;
+  status: string;
+  projectName: string;
+  avatar: string;
 };
 
 const statusColorMap = {
-    active: "success",
-    paused: "danger",
-    vacation: "warning",
+  active: "success",
+  paused: "danger",
+  vacation: "warning",
 };
 
-
 export default function MasterRoleTable() {
-    const MySwal = withReactContent(Swal);
-    const [role, setRole] = useState<MasterUserRole[]>([]);
+  const MySwal = withReactContent(Swal);
+  const [role, setRole] = useState<MasterUserRole[]>([]);
+  const [page, setPage] = useState(1);
+  const [totalPage, setTotalPage] = useState(1);
 
+  useEffect(() => {
+    initState();
+  }, [page]);
 
-    useEffect(() => {
+  async function initState() {
+    const res = await listUserRole({ page: page, limit: 10 });
+    getTableNumber(10, res?.data?.data);
+    setTotalPage(res?.data?.meta?.totalPage);
+  }
+
+  const getTableNumber = (limit: number, data?: any) => {
+    if (data) {
+      const startIndex = limit * (page - 1);
+      let iterate = 0;
+      const newData = data.map((value: any) => {
+        iterate++;
+        value.no = startIndex + iterate;
+        return value;
+      });
+      setRole(newData);
+    }
+  };
+  const columns = [
+    { name: "No", uid: "no" },
+    { name: "Role", uid: "name" },
+    { name: "Description", uid: "description" },
+    { name: "Code", uid: "code" },
+    { name: "Level Number", uid: "level_number" },
+    // { name: "Status Id", uid: "status_id" },
+    { name: "Aksi", uid: "actions" },
+  ];
+
+  async function doDelete(id: any) {
+    // loading();
+    const resDelete = await deleteMasterUserRole(id);
+
+    if (resDelete?.error) {
+      error(resDelete.message);
+      return false;
+    }
+    close();
+    successSubmit();
+  }
+
+  const handleDelete = (id: any) => {
+    MySwal.fire({
+      title: "Hapus Data",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#3085d6",
+      confirmButtonColor: "#d33",
+      confirmButtonText: "Hapus",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        doDelete(id);
+      }
+    });
+  };
+
+  function successSubmit() {
+    MySwal.fire({
+      title: "Sukses",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then((result) => {
+      if (result.isConfirmed) {
         initState();
-    }, []);
+      }
+    });
+  }
 
-    async function initState() {
-        const res = await listUserRole();
-        setRole(res.data?.data);
+  // const statusOptions = [
+  //     { name: "Active", uid: "active" },
+  //     { name: "Paused", uid: "paused" },
+  //     { name: "Vacation", uid: "vacation" },
+  // ];
 
-        console.log("List Users", res.data.data);
-    }
+  const usersTable = [
+    {
+      id: 1,
+      user: "Olivia Rhya",
+      status: "active",
+      projectName: "Xtreme admin",
+      avatar:
+        "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSa8Luglga9J2R3Bxt_PsWZISUHQWODD6_ZTAJ5mIQgxYCAE-YbkY81faTqp-hSA_jVPTs&usqp=CAU",
+    },
+    {
+      id: 2,
+      user: "Barbara Steele",
+      status: "cancel",
+      projectName: "Adminpro admin",
+      avatar:
+        "https://cdn.icon-icons.com/icons2/2859/PNG/512/avatar_face_man_boy_male_profile_smiley_happy_people_icon_181661.png",
+    },
+    {
+      id: 3,
+      user: "Leonardo Gordon",
+      status: "pending",
+      projectName: "Monster admin",
+      avatar:
+        "https://cdn.icon-icons.com/icons2/2859/PNG/512/avatar_face_man_boy_male_profile_smiley_happy_people_icon_181657.png",
+    },
+    {
+      id: 4,
+      user: "Evelyn Pope",
+      status: "cancel",
+      projectName: "Materialpro admin",
+      avatar:
+        "https://cdn.icon-icons.com/icons2/3708/PNG/512/man_person_people_avatar_icon_230017.png",
+    },
+    {
+      id: 5,
+      user: "Tommy Garza",
+      status: "cancel",
+      projectName: "Elegant admin",
+      avatar:
+        "https://cdn.icon-icons.com/icons2/1736/PNG/512/4043275-avatar-man-person-punk_113271.png",
+    },
+  ];
 
-    type TableRow = (typeof usersTable)[0];
-
-    const columns = [
-
-        { name: "No", uid: "id" },
-        { name: "Role", uid: "name" },
-        { name: "Description", uid: "description" },
-        { name: "Code", uid: "code" },
-        { name: "Level Number", uid: "level_number" },
-        // { name: "Status Id", uid: "status_id" },
-        { name: "Aksi", uid: "actions" },
-    ];
-
-
-    async function doDelete(id: any) {
-        // loading();
-        const resDelete = await deleteMasterUserRole(id);
-
-        if (resDelete?.error) {
-            error(resDelete.message);
-            return false;
-        }
-        close();
-        successSubmit();
-    }
-
-    const handleDelete = (id: any) => {
-        MySwal.fire({
-            title: "Hapus Data",
-            icon: "warning",
-            showCancelButton: true,
-            cancelButtonColor: "#3085d6",
-            confirmButtonColor: "#d33",
-            confirmButtonText: "Hapus",
-        }).then((result) => {
-            if (result.isConfirmed) {
-                doDelete(id);
-            }
-        });
+  const renderCell = useCallback((role: MasterUserRole, columnKey: Key) => {
+    const cellValue = role[columnKey as keyof MasterUserRole];
+    const statusColorMap: Record<string, ChipProps["color"]> = {
+      active: "primary",
+      cancel: "danger",
+      pending: "success",
     };
 
-    function successSubmit() {
-        MySwal.fire({
-            title: "Sukses",
-            icon: "success",
-            confirmButtonColor: "#3085d6",
-            confirmButtonText: "OK",
-        }).then((result) => {
-            if (result.isConfirmed) {
-                initState()
-            }
-        });
-    }
+    switch (columnKey) {
+      case "id":
+        return <div>{role.id}</div>;
 
-    // const statusOptions = [
-    //     { name: "Active", uid: "active" },
-    //     { name: "Paused", uid: "paused" },
-    //     { name: "Vacation", uid: "vacation" },
-    // ];
-
-    const usersTable = [
-        {
-            id: 1,
-            user: "Olivia Rhya",
-            status: "active",
-            projectName: "Xtreme admin",
-            avatar: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSa8Luglga9J2R3Bxt_PsWZISUHQWODD6_ZTAJ5mIQgxYCAE-YbkY81faTqp-hSA_jVPTs&usqp=CAU",
-        },
-        {
-            id: 2,
-            user: "Barbara Steele",
-            status: "cancel",
-            projectName: "Adminpro admin",
-            avatar: "https://cdn.icon-icons.com/icons2/2859/PNG/512/avatar_face_man_boy_male_profile_smiley_happy_people_icon_181661.png",
-        },
-        {
-            id: 3,
-            user: "Leonardo Gordon",
-            status: "pending",
-            projectName: "Monster admin",
-            avatar: "https://cdn.icon-icons.com/icons2/2859/PNG/512/avatar_face_man_boy_male_profile_smiley_happy_people_icon_181657.png",
-        },
-        {
-            id: 4,
-            user: "Evelyn Pope",
-            status: "cancel",
-            projectName: "Materialpro admin",
-            avatar: "https://cdn.icon-icons.com/icons2/3708/PNG/512/man_person_people_avatar_icon_230017.png",
-        },
-        {
-            id: 5,
-            user: "Tommy Garza",
-            status: "cancel",
-            projectName: "Elegant admin",
-            avatar: "https://cdn.icon-icons.com/icons2/1736/PNG/512/4043275-avatar-man-person-punk_113271.png",
-        },
-
-
-    ];
-
-    const renderCell = useCallback(
-        (role: MasterUserRole, columnKey: Key) => {
-            const cellValue = role[columnKey as keyof MasterUserRole];
-            const statusColorMap: Record<string, ChipProps["color"]> = {
-                active: "primary",
-                cancel: "danger",
-                pending: "success",
-            };
-
-            switch (columnKey) {
-                case "id":
-                    return (
-                        <div>{role.id}</div>
-                    )
-
-                case "status":
-                    return (
-                        <Chip
-                            className="capitalize "
-                            // color={statusColorMap[role.status]}
-                            size="lg"
-                            variant="flat"
-                        >
-                            <div className="flex flex-row items-center gap-2 justify-center">
-                                {cellValue}
-                            </div>
-                        </Chip>
-                    );
-
-                case "actions":
-                    return (
-                        <div className="relative flex justify-star items-center gap-2">
-                            <Dropdown className="lg:min-w-[150px] dark:bg-black dark:text-white shadow border ">
-                                <DropdownTrigger>
-                                    <Button isIconOnly size="lg" variant="light">
-                                        <DotsYIcon className="text-default-300" />
-                                    </Button>
-                                </DropdownTrigger>
-                                <DropdownMenu>
-                                    <DropdownItem
-
-                                    >
-
-                                        <Link
-                                            href={`/admin/master-role/detail/${role.id}`}
-                                        >
-                                            <EyeIconMdi className="inline mr-2 mb-1" />
-                                            Detail
-                                        </Link>
-
-                                    </DropdownItem>
-                                    <DropdownItem
-
-                                    >
-
-                                        <Link
-                                            href={`/admin/master-role/edit/${role.id}`}
-
-                                        >
-                                            <CreateIconIon className="inline mr-2 mb-1" />
-                                            Edit
-                                        </Link>
-
-                                    </DropdownItem>
-                                    <DropdownItem
-                                        onClick={() => handleDelete(role.id)}
-                                    >
-
-                                        <DeleteIcon
-                                            color="red"
-                                            width={20}
-                                            height={16}
-                                            className="inline mr-2 mb-1"
-                                        />
-                                        Delete
-
-                                    </DropdownItem>
-
-                                </DropdownMenu>
-                            </Dropdown>
-                        </div>
-                    );
-
-                default:
-                    return cellValue;
-            }
-        }, []);
-
-    return (
-        <>
-
-            <div className="mx-5 my-5">
-                <div className="flex flex-col items-center rounded-2xl">
-                    <Table
-                        // selectionMode="multiple"
-                        aria-label="micro issue table"
-                        className="rounded-2xl"
-                        classNames={{
-                            th: "bg-white dark:bg-black text-black dark:text-white border-b-1 text-md",
-                            base: "bg-white dark:bg-black border",
-                            wrapper: "min-h-[50px] bg-transpararent text-black dark:text-white ",
-                        }}
-                    >
-                        <TableHeader columns={columns}>
-                            {(column) => (
-                                <TableColumn key={column.uid}>{column.name}</TableColumn>
-                            )}
-                        </TableHeader>
-                        <TableBody
-                            items={role}
-                            emptyContent={"No data to display."}
-                            loadingContent={<Spinner label="Loading..." />}
-                        >
-                            {(item) => (
-                                <TableRow key={item.id}>
-                                    {(columnKey) => (
-                                        <TableCell>{renderCell(item, columnKey)}</TableCell>
-                                    )}
-                                </TableRow>
-                            )}
-                        </TableBody>
-                    </Table>
-                </div>
+      case "status":
+        return (
+          <Chip
+            className="capitalize "
+            // color={statusColorMap[role.status]}
+            size="lg"
+            variant="flat"
+          >
+            <div className="flex flex-row items-center gap-2 justify-center">
+              {cellValue}
             </div>
+          </Chip>
+        );
 
-        </>
-    );
+      case "actions":
+        return (
+          <div className="relative flex justify-star items-center gap-2">
+            <Dropdown className="lg:min-w-[150px] dark:bg-black dark:text-white shadow border ">
+              <DropdownTrigger>
+                <Button isIconOnly size="lg" variant="light">
+                  <DotsYIcon className="text-default-300" />
+                </Button>
+              </DropdownTrigger>
+              <DropdownMenu>
+                <DropdownItem>
+                  <Link href={`/admin/master-role/detail/${role.id}`}>
+                    <EyeIconMdi className="inline mr-2 mb-1" />
+                    Detail
+                  </Link>
+                </DropdownItem>
+                <DropdownItem>
+                  <Link href={`/admin/master-role/edit/${role.id}`}>
+                    <CreateIconIon className="inline mr-2 mb-1" />
+                    Edit
+                  </Link>
+                </DropdownItem>
+                <DropdownItem onClick={() => handleDelete(role.id)}>
+                  <DeleteIcon
+                    color="red"
+                    width={20}
+                    height={16}
+                    className="inline mr-2 mb-1"
+                  />
+                  Delete
+                </DropdownItem>
+              </DropdownMenu>
+            </Dropdown>
+          </div>
+        );
+
+      default:
+        return cellValue;
+    }
+  }, []);
+
+  return (
+    <>
+      <div className="mx-5 my-5">
+        <div className="flex flex-col items-center rounded-2xl">
+          <Table
+            // selectionMode="multiple"
+            aria-label="micro issue table"
+            className="rounded-2xl"
+            classNames={{
+              th: "bg-white dark:bg-black text-black dark:text-white border-b-1 text-md",
+              base: "bg-white dark:bg-black border",
+              wrapper:
+                "min-h-[50px] bg-transpararent text-black dark:text-white ",
+            }}
+          >
+            <TableHeader columns={columns}>
+              {(column) => (
+                <TableColumn key={column.uid}>{column.name}</TableColumn>
+              )}
+            </TableHeader>
+            <TableBody
+              items={role}
+              emptyContent={"No data to display."}
+              loadingContent={<Spinner label="Loading..." />}
+            >
+              {(item) => (
+                <TableRow key={item.id}>
+                  {(columnKey) => (
+                    <TableCell>{renderCell(item, columnKey)}</TableCell>
+                  )}
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+          <div className="my-2 w-full flex justify-center">
+            <Pagination
+              isCompact
+              showControls
+              showShadow
+              color="primary"
+              classNames={{
+                base: "bg-transparent",
+                wrapper: "bg-transparent",
+              }}
+              page={page}
+              total={totalPage}
+              onChange={(page) => setPage(page)}
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  );
 }
diff --git a/components/table/master-user-table.tsx b/components/table/master-user-table.tsx
index 822b73b..443bd53 100644
--- a/components/table/master-user-table.tsx
+++ b/components/table/master-user-table.tsx
@@ -1,296 +1,228 @@
 "use client";
 import {
-    CreateIconIon,
-    DeleteIcon,
-    DotsYIcon,
-    EyeIconMdi
+  CreateIconIon,
+  DeleteIcon,
+  DotsYIcon,
+  EyeIconMdi,
 } from "@/components/icons";
-import { error, success, } from "@/config/swal";
+import { error, success } from "@/config/swal";
 import { deleteArticle, getListArticle } from "@/service/article";
 import { deleteMasterUser, listMasterUsers } from "@/service/master-user";
 import { Article, MasterUser } from "@/types/globals";
 import { Button } from "@nextui-org/button";
 import {
-    Chip,
-    ChipProps,
-    Dropdown,
-    DropdownItem,
-    DropdownMenu,
-    DropdownTrigger,
-    Spinner,
-    Table,
-    TableBody,
-    TableCell,
-    TableColumn,
-    TableHeader,
-    TableRow
+  Chip,
+  ChipProps,
+  Dropdown,
+  DropdownItem,
+  DropdownMenu,
+  DropdownTrigger,
+  Pagination,
+  Spinner,
+  Table,
+  TableBody,
+  TableCell,
+  TableColumn,
+  TableHeader,
+  TableRow,
 } from "@nextui-org/react";
 import Link from "next/link";
 import { Key, useCallback, useEffect, useState } from "react";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
 
-type UserObject = {
-    id: number;
-    user: string;
-    status: string;
-    projectName: string;
-    avatar: string;
-};
-
-const statusColorMap = {
-    active: "success",
-    paused: "danger",
-    vacation: "warning",
-};
-
+const columns = [
+  { name: "No", uid: "no" },
+  { name: "Username", uid: "username" },
+  { name: "Fullname", uid: "fullname" },
+  { name: "Email", uid: "email" },
+  { name: "Identity Type", uid: "identityType" },
+  { name: "Identity Number", uid: "identityNumber" },
+  // { name: "Users", uid: "users" },
+  // { name: "Status", uid: "status" },
+  { name: "Aksi", uid: "actions" },
+];
 
 export default function MasterUserTable() {
-    const MySwal = withReactContent(Swal);
-    const [user, setUser] = useState<MasterUser[]>([]);
+  const MySwal = withReactContent(Swal);
+  const [user, setUser] = useState<MasterUser[]>([]);
+  const [page, setPage] = useState(1);
+  const [totalPage, setTotalPage] = useState(1);
 
+  useEffect(() => {
+    initState();
+  }, [page]);
 
+  async function initState() {
+    const res = await listMasterUsers({ page: page, limit: 10 });
+    getTableNumber(10, res?.data?.data);
+    setTotalPage(res?.data?.meta?.totalPage);
+  }
+  const getTableNumber = (limit: number, data?: any) => {
+    if (data) {
+      const startIndex = limit * (page - 1);
+      let iterate = 0;
+      const newData = data.map((value: any) => {
+        iterate++;
+        value.no = startIndex + iterate;
+        return value;
+      });
+      setUser(newData);
+    }
+  };
 
-    useEffect(() => {
+  async function doDelete(id: any) {
+    // loading();
+    const resDelete = await deleteMasterUser(id);
+
+    if (resDelete?.error) {
+      error(resDelete.message);
+      return false;
+    }
+    close();
+    successSubmit();
+  }
+
+  const handleDelete = (id: any) => {
+    MySwal.fire({
+      title: "Hapus Data",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#3085d6",
+      confirmButtonColor: "#d33",
+      confirmButtonText: "Hapus",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        doDelete(id);
+      }
+    });
+  };
+
+  function successSubmit() {
+    MySwal.fire({
+      title: "Sukses",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then((result) => {
+      if (result.isConfirmed) {
         initState();
-    }, []);
+      }
+    });
+  }
 
-    async function initState() {
-        const res = await listMasterUsers();
-        setUser(res.data?.data);
-
-        console.log("List Users", res.data.data);
-    }
-
-    type TableRow = (typeof usersTable)[0];
-
-    const columns = [
-
-        { name: "No", uid: "id" },
-        { name: "Username", uid: "username" },
-        { name: "Fullname", uid: "fullname" },
-        { name: "Email", uid: "email" },
-        { name: "Gender", uid: "gender_type" },
-        { name: "Identity Type", uid: "identity_type" },
-        { name: "Identity Number", uid: "identity_number" },
-        { name: "Phone Number", uid: "phone_number" },
-        // { name: "Users", uid: "users" },
-        // { name: "Status", uid: "status" },
-        { name: "Aksi", uid: "actions" },
-    ];
-
-
-    async function doDelete(id: any) {
-        // loading();
-        const resDelete = await deleteMasterUser(id);
-
-        if (resDelete?.error) {
-            error(resDelete.message);
-            return false;
-        }
-        close();
-        successSubmit();
-    }
-
-    const handleDelete = (id: any) => {
-        MySwal.fire({
-            title: "Hapus Data",
-            icon: "warning",
-            showCancelButton: true,
-            cancelButtonColor: "#3085d6",
-            confirmButtonColor: "#d33",
-            confirmButtonText: "Hapus",
-        }).then((result) => {
-            if (result.isConfirmed) {
-                doDelete(id);
-            }
-        });
+  const renderCell = useCallback((user: MasterUser, columnKey: Key) => {
+    const cellValue = user[columnKey as keyof MasterUser];
+    const statusColorMap: Record<string, ChipProps["color"]> = {
+      active: "primary",
+      cancel: "danger",
+      pending: "success",
     };
 
-    function successSubmit() {
-        MySwal.fire({
-            title: "Sukses",
-            icon: "success",
-            confirmButtonColor: "#3085d6",
-            confirmButtonText: "OK",
-        }).then((result) => {
-            if (result.isConfirmed) {
-                initState()
-            }
-        });
-    }
+    switch (columnKey) {
+      case "id":
+        return <div>{user.id}</div>;
 
-    // const statusOptions = [
-    //     { name: "Active", uid: "active" },
-    //     { name: "Paused", uid: "paused" },
-    //     { name: "Vacation", uid: "vacation" },
-    // ];
-
-    const usersTable = [
-        {
-            id: 1,
-            user: "Olivia Rhya",
-            status: "active",
-            projectName: "Xtreme admin",
-            avatar: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSa8Luglga9J2R3Bxt_PsWZISUHQWODD6_ZTAJ5mIQgxYCAE-YbkY81faTqp-hSA_jVPTs&usqp=CAU",
-        },
-        {
-            id: 2,
-            user: "Barbara Steele",
-            status: "cancel",
-            projectName: "Adminpro admin",
-            avatar: "https://cdn.icon-icons.com/icons2/2859/PNG/512/avatar_face_man_boy_male_profile_smiley_happy_people_icon_181661.png",
-        },
-        {
-            id: 3,
-            user: "Leonardo Gordon",
-            status: "pending",
-            projectName: "Monster admin",
-            avatar: "https://cdn.icon-icons.com/icons2/2859/PNG/512/avatar_face_man_boy_male_profile_smiley_happy_people_icon_181657.png",
-        },
-        {
-            id: 4,
-            user: "Evelyn Pope",
-            status: "cancel",
-            projectName: "Materialpro admin",
-            avatar: "https://cdn.icon-icons.com/icons2/3708/PNG/512/man_person_people_avatar_icon_230017.png",
-        },
-        {
-            id: 5,
-            user: "Tommy Garza",
-            status: "cancel",
-            projectName: "Elegant admin",
-            avatar: "https://cdn.icon-icons.com/icons2/1736/PNG/512/4043275-avatar-man-person-punk_113271.png",
-        },
-
-
-    ];
-
-    const renderCell = useCallback(
-        (user: MasterUser, columnKey: Key) => {
-            const cellValue = user[columnKey as keyof MasterUser];
-            const statusColorMap: Record<string, ChipProps["color"]> = {
-                active: "primary",
-                cancel: "danger",
-                pending: "success",
-            };
-
-            switch (columnKey) {
-                case "id":
-                    return (
-                        <div>{user.id}</div>
-                    )
-
-                case "status":
-                    return (
-                        <Chip
-                            className="capitalize "
-                            // color={statusColorMap[user.status]}
-                            size="lg"
-                            variant="flat"
-                        >
-                            <div className="flex flex-row items-center gap-2 justify-center">
-                                {cellValue}
-                            </div>
-                        </Chip>
-                    );
-
-                case "actions":
-                    return (
-                        <div className="relative flex justify-star items-center gap-2">
-                            <Dropdown className="lg:min-w-[150px] bg-black text-white shadow border ">
-                                <DropdownTrigger>
-                                    <Button isIconOnly size="lg" variant="light">
-                                        <DotsYIcon className="text-default-300" />
-                                    </Button>
-                                </DropdownTrigger>
-                                <DropdownMenu>
-                                    <DropdownItem
-
-                                    >
-
-                                        <Link
-                                            href={`/admin/article/detail/${user.id}`}
-                                        >
-                                            <EyeIconMdi className="inline mr-2 mb-1" />
-                                            Detail
-                                        </Link>
-
-                                    </DropdownItem>
-                                    <DropdownItem
-
-                                    >
-
-                                        <Link
-                                            href={`/admin/article/edit/${user.id}`}
-
-                                        >
-                                            <CreateIconIon className="inline mr-2 mb-1" />
-                                            Edit
-                                        </Link>
-
-                                    </DropdownItem>
-                                    <DropdownItem
-                                        onClick={() => handleDelete(user.id)}
-                                    >
-
-                                        <DeleteIcon
-                                            color="red"
-                                            width={20}
-                                            height={16}
-                                            className="inline mr-2 mb-1"
-                                        />
-                                        Delete
-
-                                    </DropdownItem>
-
-                                </DropdownMenu>
-                            </Dropdown>
-                        </div>
-                    );
-
-                default:
-                    return cellValue;
-            }
-        }, []);
-
-    return (
-        <>
-
-            <div className="mx-5 my-5">
-                <div className="flex flex-col items-center rounded-2xl">
-                    <Table
-                        // selectionMode="multiple"
-                        aria-label="micro issue table"
-                        className="rounded-2xl"
-                        classNames={{
-                            th: "bg-white dark:bg-black text-black dark:text-white border-b-1 text-md",
-                            base: "bg-white dark:bg-black border",
-                            wrapper: "min-h-[50px] bg-transpararent text-black dark:text-white ",
-                        }}
-                    >
-                        <TableHeader columns={columns}>
-                            {(column) => (
-                                <TableColumn key={column.uid}>{column.name}</TableColumn>
-                            )}
-                        </TableHeader>
-                        <TableBody
-                            items={user}
-                            emptyContent={"No data to display."}
-                            loadingContent={<Spinner label="Loading..." />}
-                        >
-                            {(item) => (
-                                <TableRow key={item.id}>
-                                    {(columnKey) => (
-                                        <TableCell>{renderCell(item, columnKey)}</TableCell>
-                                    )}
-                                </TableRow>
-                            )}
-                        </TableBody>
-                    </Table>
-                </div>
+      case "status":
+        return (
+          <Chip
+            className="capitalize "
+            // color={statusColorMap[user.status]}
+            size="lg"
+            variant="flat"
+          >
+            <div className="flex flex-row items-center gap-2 justify-center">
+              {cellValue}
             </div>
+          </Chip>
+        );
 
-        </>
-    );
+      case "actions":
+        return (
+          <div className="relative flex justify-star items-center gap-2">
+            <Dropdown className="lg:min-w-[150px] bg-black text-white shadow border ">
+              <DropdownTrigger>
+                <Button isIconOnly size="lg" variant="light">
+                  <DotsYIcon className="text-default-300" />
+                </Button>
+              </DropdownTrigger>
+              <DropdownMenu>
+                <DropdownItem>
+                  <Link href={`/admin/master-user/edit/${user.id}`}>
+                    <CreateIconIon className="inline mr-2 mb-1" />
+                    Edit
+                  </Link>
+                </DropdownItem>
+                <DropdownItem onClick={() => handleDelete(user.id)}>
+                  <DeleteIcon
+                    color="red"
+                    width={20}
+                    height={16}
+                    className="inline mr-2 mb-1"
+                  />
+                  Delete
+                </DropdownItem>
+              </DropdownMenu>
+            </Dropdown>
+          </div>
+        );
+
+      default:
+        return cellValue;
+    }
+  }, []);
+
+  return (
+    <>
+      <div className="mx-5 my-5">
+        <div className="flex flex-col items-center rounded-2xl">
+          <Table
+            // selectionMode="multiple"
+            aria-label="micro issue table"
+            className="rounded-2xl"
+            classNames={{
+              th: "bg-white dark:bg-black text-black dark:text-white border-b-1 text-md",
+              base: "bg-white dark:bg-black border",
+              wrapper:
+                "min-h-[50px] bg-transpararent text-black dark:text-white ",
+            }}
+          >
+            <TableHeader columns={columns}>
+              {(column) => (
+                <TableColumn key={column.uid}>{column.name}</TableColumn>
+              )}
+            </TableHeader>
+            <TableBody
+              items={user}
+              emptyContent={"No data to display."}
+              loadingContent={<Spinner label="Loading..." />}
+            >
+              {(item) => (
+                <TableRow key={item.id}>
+                  {(columnKey) => (
+                    <TableCell>{renderCell(item, columnKey)}</TableCell>
+                  )}
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+          <div className="my-2 w-full flex justify-center">
+            <Pagination
+              isCompact
+              showControls
+              showShadow
+              color="primary"
+              classNames={{
+                base: "bg-transparent",
+                wrapper: "bg-transparent",
+              }}
+              page={page}
+              total={totalPage}
+              onChange={(page) => setPage(page)}
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  );
 }
diff --git a/service/master-user-role.ts b/service/master-user-role.ts
index c8c8789..5dd26b7 100644
--- a/service/master-user-role.ts
+++ b/service/master-user-role.ts
@@ -1,27 +1,34 @@
-import { httpDeleteInterceptor, httpGet, httpPost } from "./http-config/axios-base-service";
+import {
+  httpDeleteInterceptor,
+  httpGet,
+  httpPost,
+} from "./http-config/axios-base-service";
 
-export async function listUserRole() {
-    const headers = {
-        "content-type": "application/json",
-    };
-    return await httpGet(`/user-roles`, headers);
+export async function listUserRole(data: any) {
+  const headers = {
+    "content-type": "application/json",
+  };
+  return await httpGet(
+    `/user-roles?limit=${data.limit}&page=${data.page}`,
+    headers
+  );
 }
 
 export async function createMasterUserRole(data: any) {
-    const headers = {
-        "content-type": "application/json",
-    };
-    const pathUrl = `/user-roles`;
-    return await httpPost(pathUrl, headers, data);
+  const headers = {
+    "content-type": "application/json",
+  };
+  const pathUrl = `/user-roles`;
+  return await httpPost(pathUrl, headers, data);
 }
 
 export async function getMasterUserRoleById(id: any) {
-    const headers = {
-        "content-type": "application/json",
-    };
-    return await httpGet(`/user-roles/${id}`, headers);
+  const headers = {
+    "content-type": "application/json",
+  };
+  return await httpGet(`/user-roles/${id}`, headers);
 }
 
 export async function deleteMasterUserRole(id: string) {
-    return await httpDeleteInterceptor(`/user-roles/${id}`);
-}
\ No newline at end of file
+  return await httpDeleteInterceptor(`/user-roles/${id}`);
+}
diff --git a/service/master-user.ts b/service/master-user.ts
index a85c8f8..629635a 100644
--- a/service/master-user.ts
+++ b/service/master-user.ts
@@ -4,11 +4,11 @@ import {
   httpPost,
 } from "./http-config/axios-base-service";
 
-export async function listMasterUsers() {
+export async function listMasterUsers(data: any) {
   const headers = {
     "content-type": "application/json",
   };
-  return await httpGet(`/users`, headers);
+  return await httpGet(`/users?page=${data.page}&limit=${data.limit}`, headers);
 }
 
 export async function createMasterUser(data: any) {