diff --git a/app/(admin)/admin/master-user/edit/[id]/page.tsx b/app/(admin)/admin/master-user/edit/[id]/page.tsx
new file mode 100644
index 0000000..eb182b5
--- /dev/null
+++ b/app/(admin)/admin/master-user/edit/[id]/page.tsx
@@ -0,0 +1,11 @@
+import FormMasterUser from "@/components/form/form-master-user";
+import FormMasterUserEdit from "@/components/form/form-master-user-edit";
+import { Card } from "@nextui-org/react";
+
+export default function CreateMasterUserPage() {
+  return (
+    <Card className="h-[96vh] rounded-md bg-transparent">
+      <FormMasterUserEdit />
+    </Card>
+  );
+}
diff --git a/components/form/form-master-user-edit.tsx b/components/form/form-master-user-edit.tsx
new file mode 100644
index 0000000..e311887
--- /dev/null
+++ b/components/form/form-master-user-edit.tsx
@@ -0,0 +1,421 @@
+"use client";
+import { error } from "@/config/swal";
+import {
+  createMasterUser,
+  editMasterUsers,
+  getDetailMasterUsers,
+} 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 { useParams, useRouter } from "next/navigation";
+import React, { useEffect, 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";
+import ReactPasswordChecklist from "react-password-checklist";
+
+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" }),
+  identityNumber: z.string().min(1, { message: "Required" }),
+  genderType: z.string().min(1, { message: "Required" }),
+  phoneNumber: z.string().min(1, { message: "Required" }),
+  address: z.string().min(1, { message: "Required" }),
+});
+
+export default function FormMasterUserEdit() {
+  const router = useRouter();
+  const MySwal = withReactContent(Swal);
+  const [isVisible, setIsVisible] = useState([false, false]);
+  const [isValidPassword, setIsValidPassword] = useState(false);
+  const params = useParams();
+  const id = params?.id;
+
+  const toggleVisibility = (type: number) => {
+    setIsVisible(
+      type === 0 ? [!isVisible[0], isVisible[1]] : [isVisible[0], !isVisible[1]]
+    );
+  };
+
+  const formOptions = {
+    resolver: zodResolver(masterUserSchema),
+  };
+  type MicroIssueSchema = z.infer<typeof masterUserSchema>;
+  const {
+    control,
+    handleSubmit,
+    formState: { errors },
+    setError,
+    watch,
+    setValue,
+  } = useForm<MicroIssueSchema>(formOptions);
+
+  async function save(data: z.infer<typeof masterUserSchema>) {
+    const formData = {
+      address: data.address,
+      email: data.email,
+      fullname: data.fullname,
+      genderType: data.genderType,
+      identityNumber: data.identityNumber,
+      phoneNumber: data.phoneNumber,
+      userLevelId: 2,
+      userRoleId: 2,
+      username: data.username,
+    };
+
+    const response = await editMasterUsers(formData);
+
+    if (response?.error) {
+      error(response.message);
+      return false;
+    }
+
+    successSubmit("/admin/master-user");
+  }
+
+  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);
+      }
+    });
+  }
+
+  useEffect(() => {
+    initFetch();
+  }, [id]);
+
+  const initFetch = async () => {
+    const res = await getDetailMasterUsers(String(id));
+    const profile = res?.data?.data;
+    setValue("fullname", profile?.fullname);
+    setValue("username", profile?.username);
+    setValue("email", profile?.email);
+    setValue("address", profile?.address);
+    setValue("identityNumber", profile?.identityNumber);
+    setValue("genderType", profile?.genderType);
+    setValue("phoneNumber", profile?.phoneNumber);
+  };
+
+  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="Nama Lengkap..."
+                label="Nama Lengkap"
+                value={value}
+                onChange={onChange}
+                labelPlacement="outside"
+                className="w-full"
+                classNames={{
+                  inputWrapper: [
+                    "border-1 rounded-lg",
+                    "dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
+                  ],
+                }}
+                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"
+                classNames={{
+                  inputWrapper: [
+                    "border-1 rounded-lg",
+                    "dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
+                  ],
+                }}
+                variant="bordered"
+              />
+            )}
+          />
+          {errors.username?.message && (
+            <p className="text-red-400 text-sm">{errors.username?.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"
+                classNames={{
+                  inputWrapper: [
+                    "border-1 rounded-lg",
+                    "dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
+                  ],
+                }}
+                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="NRP..."
+                label="NRP"
+                value={value}
+                onChange={onChange}
+                labelPlacement="outside"
+                className="w-full"
+                classNames={{
+                  inputWrapper: [
+                    "border-1 rounded-lg",
+                    "dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
+                  ],
+                }}
+                variant="bordered"
+              />
+            )}
+          />
+          {errors.identityNumber?.message && (
+            <p className="text-red-400 text-sm">
+              {errors.identityNumber?.message}
+            </p>
+          )}
+
+          <Controller
+            control={control}
+            name="address"
+            render={({ field: { onChange, value } }) => (
+              <Textarea
+                label="Alamat"
+                labelPlacement="outside"
+                placeholder="Alamat..."
+                variant="bordered"
+                value={value}
+                classNames={{
+                  inputWrapper: [
+                    "border-1 rounded-lg",
+                    "dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
+                  ],
+                }}
+                onValueChange={onChange}
+              />
+            )}
+          />
+          {errors.address?.message && (
+            <p className="text-red-400 text-sm">{errors.address?.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>
+          )} */}
+
+          <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/form/form-master-user.tsx b/components/form/form-master-user.tsx
index 3c0e0b8..9051cc6 100644
--- a/components/form/form-master-user.tsx
+++ b/components/form/form-master-user.tsx
@@ -162,6 +162,7 @@ export default function FormMasterUser() {
       fullname: data.fullname,
       genderType: data.genderType,
       identityNumber: data.identityNumber,
+      identityType: "nrp",
       phoneNumber: data.phoneNumber,
       userLevelId: 2,
       userRoleId: 2,
diff --git a/components/landing/BodyLayout.tsx b/components/landing/BodyLayout.tsx
index 9e02798..bf198cd 100644
--- a/components/landing/BodyLayout.tsx
+++ b/components/landing/BodyLayout.tsx
@@ -19,7 +19,7 @@ export default function BodyLayout() {
           <MediaSocial />
           <ENewsPolri />
         </div>
-        <div className="w-auto md:w-[35%] lg:w-[25%]">
+        <div className="w-full lg:w-[25%]">
           <SidebarNav />
         </div>
       </div>
diff --git a/components/landing/SidebarNav.tsx b/components/landing/SidebarNav.tsx
index ec56e96..f64cc05 100644
--- a/components/landing/SidebarNav.tsx
+++ b/components/landing/SidebarNav.tsx
@@ -24,7 +24,7 @@ export default function SidebarNav() {
 
   return (
     <>
-      <div className="space-y-4 px-1 lg:px-5">
+      <div className="mt-4 lg:mt-0 flex flex-wrap justify-center lg:flex-col gap-4 px-1 lg:px-5">
         <Image
           src="/sertifikat-1.png"
           width={480}
diff --git a/components/layout/sidebar/sidebar.tsx b/components/layout/sidebar/sidebar.tsx
index 2c88504..c12b82e 100644
--- a/components/layout/sidebar/sidebar.tsx
+++ b/components/layout/sidebar/sidebar.tsx
@@ -33,6 +33,7 @@ import { SidebarMenu } from "./sidebar-menu";
 import Image from "next/image";
 import Cookies from "js-cookie";
 import { SettingsIcon, UserProfileIcon } from "@/components/icons/globals";
+import { textEllipsis } from "@/utils/global";
 
 interface SubMenuItems {
   id: number;
@@ -445,7 +446,9 @@ const Sidebar: React.FC<SidebarProps> = ({ updateSidebarData }) => {
               <div className="flex flex-row gap-3 items-center text-white">
                 <UserProfileIcon size={36} />
                 <div className="flex flex-col ">
-                  <a className="cursor-pointer ">{username}</a>
+                  <a className="cursor-pointer ">
+                    {textEllipsis(String(username), 23)}
+                  </a>
                   <a
                     className="hover:text-red-600 underline text-sm cursor-pointer"
                     onClick={() => onLogout()}
diff --git a/service/master-user.ts b/service/master-user.ts
index 9ef15ca..702cdcb 100644
--- a/service/master-user.ts
+++ b/service/master-user.ts
@@ -24,6 +24,20 @@ export async function createMasterUser(data: any) {
   return await httpPost(pathUrl, headers, data);
 }
 
+export async function getDetailMasterUsers(id: string) {
+  const headers = {
+    "content-type": "application/json",
+  };
+  return await httpGet(`/users/detail/${id}`, headers);
+}
+
+export async function editMasterUsers(data: any) {
+  const headers = {
+    "content-type": "application/json",
+  };
+  return await httpPut(`/users/${id}`, headers, data);
+}
+
 export async function deleteMasterUser(id: string) {
   return await httpDeleteInterceptor(`/users/${id}`);
 }
diff --git a/service/third-party-service.ts b/service/third-party-service.ts
index 3e44258..4cdaf63 100644
--- a/service/third-party-service.ts
+++ b/service/third-party-service.ts
@@ -7,7 +7,7 @@ const tbnInstance = axios.create({
   },
 });
 const inpInstance = axios.create({
-  baseURL: "https://inp.indoplusmedia.id/wp-json/wp/v2",
+  baseURL: "https://inp.demoaplikasi.web.id/api",
   headers: {
     "content-type": "application/json",
   },
@@ -71,7 +71,7 @@ export async function topNewsInp() {
   const headers = {
     "content-type": "application/json",
   };
-  return await inpGetNews(`/posts`, headers);
+  return await inpGetNews(`/artikel/data?per_page=10&page=1`, headers);
 }
 
 export async function getImageInp(id: string) {