diff --git a/src/app/(application)/member/edit/[id]/page.tsx b/src/app/(application)/member/edit/[id]/page.tsx
index 70f69d9..47a2523 100644
--- a/src/app/(application)/member/edit/[id]/page.tsx
+++ b/src/app/(application)/member/edit/[id]/page.tsx
@@ -1,8 +1,8 @@
 import { ViewEditMember } from "@/module/user/member";
 
-function Page() {
+function Page({ params }: { params: { id: string } }) {
    return (
-      <ViewEditMember />
+      <ViewEditMember data={params.id}/>
    )
 }
 
diff --git a/src/module/group/components/list_group_active.tsx b/src/module/group/components/list_group_active.tsx
index 7ca8949..53046e2 100644
--- a/src/module/group/components/list_group_active.tsx
+++ b/src/module/group/components/list_group_active.tsx
@@ -71,53 +71,53 @@ export default function ListGroupActive({ status }: { status: boolean }) {
       />
       {loading
         ? Array(6)
-            .fill(null)
-            .map((_, i) => (
-              <Box key={i}>
+          .fill(null)
+          .map((_, i) => (
+            <Box key={i}>
               <SkeletonSingle />
             </Box>
-            ))
+          ))
         : isData.map((v, i) => {
-            return (
-              <Box pt={20} key={i}>
-                <Group
-                  align="center"
-                  style={{
-                    border: `1px solid ${"#DCEED8"}`,
-                    padding: 10,
-                    borderRadius: 10,
-                    cursor: "pointer",
-                  }}
-                  onClick={() => {
-                    setValChoose(v.name);
-                    setOpenDrawer(true);
-                    setSelectId(v.id);
-                    setActive(v.isActive);
-                  }}
-                >
-                  <Box>
-                    <ActionIcon
-                      variant="light"
-                      bg={"#DCEED8"}
-                      size={50}
-                      radius={100}
-                      aria-label="icon"
-                    >
-                      <HiOutlineOfficeBuilding
-                        color={WARNA.biruTua}
-                        size={25}
-                      />
-                    </ActionIcon>
-                  </Box>
-                  <Box>
-                    <Text fw={"bold"} c={WARNA.biruTua}>
-                      {v.name}
-                    </Text>
-                  </Box>
-                </Group>
-              </Box>
-            );
-          })}
+          return (
+            <Box pt={20} key={i}>
+              <Group
+                align="center"
+                style={{
+                  border: `1px solid ${"#DCEED8"}`,
+                  padding: 10,
+                  borderRadius: 10,
+                  cursor: "pointer",
+                }}
+                onClick={() => {
+                  setValChoose(v.name);
+                  setOpenDrawer(true);
+                  setSelectId(v.id);
+                  setActive(v.isActive);
+                }}
+              >
+                <Box>
+                  <ActionIcon
+                    variant="light"
+                    bg={"#DCEED8"}
+                    size={50}
+                    radius={100}
+                    aria-label="icon"
+                  >
+                    <HiOutlineOfficeBuilding
+                      color={WARNA.biruTua}
+                      size={25}
+                    />
+                  </ActionIcon>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} c={WARNA.biruTua}>
+                    {v.name}
+                  </Text>
+                </Box>
+              </Group>
+            </Box>
+          );
+        })}
       <LayoutDrawer
         opened={openDrawer}
         onClose={() => setOpenDrawer(false)}
diff --git a/src/module/user/api/get/getOneUser.ts b/src/module/user/api/get/getOneUser.ts
index a292d2f..2ab5788 100644
--- a/src/module/user/api/get/getOneUser.ts
+++ b/src/module/user/api/get/getOneUser.ts
@@ -1,4 +1,5 @@
 import { prisma } from "@/module/_global";
+import _ from "lodash";
 import { NextRequest } from "next/server";
 
 export async function getOneUser(req: NextRequest) {
@@ -17,10 +18,39 @@ export async function getOneUser(req: NextRequest) {
         phone: true,
         email: true,
         gender: true,
+        idGroup: true,
+        idPosition: true,
+        UserRole: {
+          select: {
+            name: true,
+            id: true
+          }
+        },
+        Position: {
+          select: {
+            name: true,
+            id: true
+          },
+        },
+        Group: {
+          select: {
+            name: true,
+            id: true
+          },
+        },
       },
     });
 
-    return Response.json(users);
+    const { ...userData } = users;
+    const group = users?.Group.name
+    const position = users?.Position.name
+    const idUserRole = users?.UserRole.id
+
+    const result = { ...userData, group, position, idUserRole };
+
+    const omitData = _.omit(result, ["Group", "Position", "UserRole"])
+    console.log(omitData)
+    return Response.json(omitData);
   } catch (error) {
     console.error(error);
     return Response.json({ message: "Internal Server Errorr", success: false }, { status: 500 });
diff --git a/src/module/user/api/post/deleteUser.ts b/src/module/user/api/post/deleteUser.ts
index 5ea84d3..461aeda 100644
--- a/src/module/user/api/post/deleteUser.ts
+++ b/src/module/user/api/post/deleteUser.ts
@@ -1,19 +1,23 @@
 import { createLogUser } from '@/module/user';
 import { prisma } from "@/module/_global";
 import { NextRequest } from "next/server";
+import { revalidatePath } from 'next/cache';
 
 export async function deleteUser(req: NextRequest) {
   try {
     const data = await req.json();
+    const active = data.isActive;
     const update = await prisma.user.update({
       where: {
         id: data.id,
       },
       data: {
-        isActive: false,
+        isActive: !active,
       },
     });
 
+    revalidatePath("/member");
+
     // create log user
     const log = await createLogUser({ act: 'DELETE', desc: 'User menghapus data user', table: 'user', data: update.id })
 
diff --git a/src/module/user/api/post/updateUser.ts b/src/module/user/api/post/updateUser.ts
index 4463f0e..626302f 100644
--- a/src/module/user/api/post/updateUser.ts
+++ b/src/module/user/api/post/updateUser.ts
@@ -1,6 +1,7 @@
 import { createLogUser } from '@/module/user';
 import { prisma } from "@/module/_global";
 import { NextRequest } from "next/server";
+import { funGetUserByCookies } from '@/module/auth';
 
 export async function updateUser(req: NextRequest) {
   try {
@@ -17,7 +18,6 @@ export async function updateUser(req: NextRequest) {
         email: data.email,
         gender: data.gender,
         idGroup: data.idGroup,
-        idVillage: data.idVillage,
         idPosition: data.idPosition,
         idUserRole: data.idUserRole,
       },
diff --git a/src/module/user/member/component/edit_member.tsx b/src/module/user/member/component/edit_member.tsx
index bd583d6..f899959 100644
--- a/src/module/user/member/component/edit_member.tsx
+++ b/src/module/user/member/component/edit_member.tsx
@@ -1,20 +1,150 @@
 'use client'
-import { WARNA } from "@/module/_global";
+import { API_ADDRESS, WARNA } from "@/module/_global";
 import LayoutModal from "@/module/_global/layout/layout_modal";
 import { Box, Button, Select, Stack, TextInput } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useRouter } from "next/navigation";
 import { useState } from "react";
 import toast from "react-hot-toast";
 import { HiUser } from "react-icons/hi2";
 
-export default function EditMember() {
-   const [isModal, setModal] = useState(false)
+type dataMember = {
+   id: string;
+   nik: string;
+   name: string;
+   phone: string;
+   email: string;
+   gender: string;
+   idGroup: string;
+   idPosition: string;
+   idUserRole: string;
+}
 
-   function onTrue(val: boolean) {
-      if (val) {
-         toast.success("Sukses! Data tersimpan");
+type dataGroup = {
+   id: string;
+   name: string;
+};
+type dataPosition = {
+   id: string;
+   name: string;
+};
+
+type dataROleUser = {
+   id: string;
+   name: string;
+}
+
+export default function EditMember({ id }: { id: string | undefined }) {
+   const [isModal, setModal] = useState(false)
+   const router = useRouter()
+   const [listGroup, setListGorup] = useState<dataGroup[]>([])
+   const [listPosition, setListPosition] = useState<dataPosition[]>([])
+   const [listUserRole, setListUserRole] = useState<dataROleUser[]>([])
+   const [data, setData] = useState<dataMember>({
+      id: "",
+      nik: "",
+      name: "",
+      phone: "",
+      email: "",
+      gender: "",
+      idGroup: "",
+      idPosition: "",
+      idUserRole: "",
+   })
+   const [listData, setListData] = useState<dataMember>()
+
+   async function getAllGroup() {
+      try {
+         const res = await fetch(`${API_ADDRESS.apiGetAllGroup}&villageId=desa1&active=true`)
+         const data = await res.json()
+         setListGorup(data)
+      } catch (error) {
+         console.error(error)
       }
-      setModal(false)
    }
+
+   async function getOneData() {
+      try {
+         const res = await fetch(`${API_ADDRESS.apiGetOneUser}&userID=${id}`)
+         const data = await res.json()
+         setData(data)
+         getAllPosition(data?.idGroup)
+      } catch (error) {
+         console.error(error)
+      }
+   }
+
+   async function getAllPosition(val: any) {
+      try {
+         const res = await fetch(`${API_ADDRESS.apiGetAllPosition}&groupId=${val}&active=true`)
+         const data = await res.json()
+         setListPosition(data)
+
+      } catch (error) {
+         console.error(error)
+      }
+   }
+
+   async function getAllUserRole() {
+      try {
+         const res = await fetch(`${API_ADDRESS.apiGetRoleUser}`)
+         const data = await res.json()
+         setListUserRole(data)
+      } catch (error) {
+         console.error(error)
+      }
+   }
+
+   async function changeGrup(val: any) {
+      setListPosition([])
+      setData({
+         ...data,
+         idGroup: val,
+         idPosition: ""
+      })
+      getAllPosition(val)
+   }
+
+   useShallowEffect(() => {
+      getAllGroup()
+      getOneData()
+      getAllUserRole()
+   }, [])
+
+
+   async function onSubmit(val: boolean) {
+      try {
+         const res = await fetch(API_ADDRESS.apiUpdateUser, {
+            method: "POST",
+            headers: {
+               "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+               id: data.id,
+               nik: data.nik,
+               name: data.name,
+               phone: data.phone,
+               email: data.email,
+               gender: data.gender,
+               idGroup: data.idGroup,
+               idPosition: data.idPosition,
+               idUserRole: data.idUserRole
+            }),
+         })
+
+         const respon = await res.json()
+
+         if (res.status == 200) {
+            toast.success(respon.message)
+         } else {
+            toast.error(respon.message)
+         }
+         router.push('/member')
+      } catch (error) {
+         toast.error('Error');
+      }
+   }
+
    return (
       <Box>
          <Stack
@@ -39,7 +169,18 @@ export default function EditMember() {
                      borderColor: WARNA.biruTua,
                   },
                }}
-               data={['Dinas', 'Adat', 'LPD', 'PKK']}
+               data={
+                  listGroup
+                     ? listGroup.map((data) => ({
+                        value: data.id,
+                        label: data.name,
+                     }))
+                     : []
+               }
+               onChange={(val: any) => {
+                  changeGrup(val)
+               }}
+               value={data?.idGroup}
             />
             <Select
                placeholder="Pilih Jabatan" label="Jabatan" w={"100%"} size="md" required withAsterisk radius={30}
@@ -50,7 +191,36 @@ export default function EditMember() {
                      borderColor: WARNA.biruTua,
                   },
                }}
-               data={['Kepala', 'Sekretaris', 'Bendahara', 'Anggota']}
+               data={
+                  listPosition
+                     ? listPosition.map((data) => ({
+                        value: data.id,
+                        label: data.name,
+                     }))
+                     : []
+               }
+               onChange={(val: any) => setData({ ...data, idPosition: val })}
+               value={(data?.idPosition == "") ? null : data.idPosition}
+            />
+            <Select
+               placeholder="Pilih Role" label="User Role" w={"100%"} size="md" required withAsterisk radius={30}
+               styles={{
+                  input: {
+                     color: WARNA.biruTua,
+                     borderRadius: WARNA.biruTua,
+                     borderColor: WARNA.biruTua,
+                  },
+               }}
+               data={
+                  listUserRole
+                     ? listUserRole.map((data) => ({
+                        value: data.id,
+                        label: data.name,
+                     }))
+                     : []
+               }
+               onChange={(val: any) => setData({ ...data, idUserRole: val })}
+               value={data?.idUserRole}
             />
             <TextInput
                size="md" type="number" radius={30} placeholder="NIK" withAsterisk label="NIK" w={"100%"}
@@ -61,6 +231,8 @@ export default function EditMember() {
                      borderColor: WARNA.biruTua,
                   },
                }}
+               onChange={(e) => setData({ ...data, nik: e.target.value })}
+               value={data.nik}
             />
             <TextInput
                size="md" type="text" radius={30} placeholder="Nama" withAsterisk label="Nama" w={"100%"}
@@ -71,6 +243,8 @@ export default function EditMember() {
                      borderColor: WARNA.biruTua,
                   },
                }}
+               onChange={(e) => setData({ ...data, name: e.target.value })}
+               value={data.name}
             />
             <TextInput
                size="md" type="email" radius={30} placeholder="Email" withAsterisk label="Email" w={"100%"}
@@ -81,6 +255,8 @@ export default function EditMember() {
                      borderColor: WARNA.biruTua,
                   },
                }}
+               onChange={(e) => setData({ ...data, email: e.target.value })}
+               value={data.email}
             />
             <TextInput
                size="md" type="number" radius={30} placeholder="+62...." withAsterisk label="Nomor Telepon" w={"100%"}
@@ -91,6 +267,8 @@ export default function EditMember() {
                      borderColor: WARNA.biruTua,
                   },
                }}
+               onChange={(e) => setData({ ...data, phone: e.target.value })}
+               value={data.phone}
             />
             <Select
                placeholder="Pilih Gender" label="Gender" w={"100%"} size="md" required withAsterisk radius={30}
@@ -101,7 +279,20 @@ export default function EditMember() {
                      borderColor: WARNA.biruTua,
                   },
                }}
-               data={['Laki-laki', 'Perempuan']}
+               data={
+                  [
+                     {
+                        value: "M",
+                        label: "Laki-laki"
+                     },
+                     {
+                        value: "F",
+                        label: "Perempuan"
+                     }
+                  ]
+               }
+               onChange={(val: any) => setData({ ...data, gender: val })}
+               value={data.gender}
             />
          </Stack>
          <Box mt={30} mx={20} pb={20}>
@@ -118,7 +309,12 @@ export default function EditMember() {
          </Box>
          <LayoutModal opened={isModal} onClose={() => setModal(false)}
             description="Apakah Anda yakin ingin mengubah data?"
-            onYes={(val) => { onTrue(val) }} />
+            onYes={(val) => {
+               if (val)
+                  onSubmit(val)
+               setModal(false)
+            }
+            } />
       </Box>
    )
 }
\ No newline at end of file
diff --git a/src/module/user/member/component/ui/drawer_detail_member.tsx b/src/module/user/member/component/ui/drawer_detail_member.tsx
index e90fd61..35cdb31 100644
--- a/src/module/user/member/component/ui/drawer_detail_member.tsx
+++ b/src/module/user/member/component/ui/drawer_detail_member.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { WARNA } from "@/module/_global";
+import { API_ADDRESS, WARNA } from "@/module/_global";
 import LayoutModal from "@/module/_global/layout/layout_modal";
 import { Box, Flex, SimpleGrid, Stack, Text } from "@mantine/core";
 import { useRouter } from "next/navigation";
@@ -8,17 +8,33 @@ import toast from "react-hot-toast";
 import { FaPencil, FaToggleOff } from "react-icons/fa6";
 import { ImUserCheck } from "react-icons/im";
 
-export default function DrawerDetailMember({ onDeleted }: { onDeleted: (val: boolean) => void }) {
+export default function DrawerDetailMember({ onDeleted, id }: { onDeleted: (val: boolean) => void, id: string | undefined }) {
    const router = useRouter()
    const [isModal, setModal] = useState(false)
 
-   function onTrue(val: boolean) {
-      if (val) {
-         toast.success('Sukses! data tersimpan')
-         onDeleted(true)
-      }
-
-      setModal(false)
+   async function nonActive(val: boolean) {
+      // try {
+      //    if (val) {
+      //       const res = await fetch(API_ADDRESS.apiDeleteUser, {
+      //          method: 'POST',
+      //          headers: {
+      //             'Content-Type': 'application/json',
+      //          },
+      //          body: JSON.stringify({ id: id}),
+      //       })
+      //       if (res.status == 200) {
+      //          onDeleted(true);
+      //       } else {
+      //          onDeleted(false);
+      //       }
+      //    }
+      //    router.push('/member')
+      //    setModal(false)
+      // } catch (error) {
+      //    console.error(error)
+      //    setModal(false);
+      //    toast.error("Terjadi kesalahan");
+      // }
    }
 
    return (
@@ -44,7 +60,7 @@ export default function DrawerDetailMember({ onDeleted }: { onDeleted: (val: boo
                <Flex justify={'center'} align={'center'} direction={'column'}
                   style={{ cursor: 'pointer' }}
                   onClick={() => {
-                     router.push('/member/edit/123')
+                     router.push(`/member/edit/${id}`)
                   }}
                >
                   <Box>
@@ -58,7 +74,7 @@ export default function DrawerDetailMember({ onDeleted }: { onDeleted: (val: boo
          </Stack>
          <LayoutModal opened={isModal} onClose={() => setModal(false)}
             description="Apakah Anda yakin ingin mengubah status aktifasi anggota?"
-            onYes={(val) => { onTrue(val) }} />
+            onYes={(val) => { nonActive(val) }} />
       </Box>
    )
 }
\ No newline at end of file
diff --git a/src/module/user/member/component/ui/navbar_detail_member.tsx b/src/module/user/member/component/ui/navbar_detail_member.tsx
index 32665b6..2222cc7 100644
--- a/src/module/user/member/component/ui/navbar_detail_member.tsx
+++ b/src/module/user/member/component/ui/navbar_detail_member.tsx
@@ -1,37 +1,110 @@
 'use client'
-import { LayoutNavbarHome, LayoutIconBack, WARNA, LayoutDrawer } from "@/module/_global";
+import { LayoutNavbarHome, LayoutIconBack, WARNA, LayoutDrawer, API_ADDRESS } from "@/module/_global";
 import { Box, Group, ActionIcon, Stack, Text, Center, Avatar } from "@mantine/core";
 import { HiMenu } from "react-icons/hi";
 import { HiUser } from "react-icons/hi2";
 import DrawerDetailMember from "./drawer_detail_member";
 import { useState } from "react";
+import { RiIdCardFill } from "react-icons/ri";
+import { FaSquarePhone } from "react-icons/fa6";
+import { MdEmail } from "react-icons/md";
+import { IoMaleFemale } from "react-icons/io5";
+import { useShallowEffect } from "@mantine/hooks";
+import Link from "next/link";
 
-export default function NavbarDetailMember() {
+interface IdMember {
+   id: string
+}
+
+interface DataMember {
+   id: string
+   name: string
+   nik: string
+   email: string
+   phone: string
+   gender: string
+   position: string
+   group: string
+}
+
+export default function NavbarDetailMember({ id }: IdMember) {
    const [isOpen, setOpen] = useState(false)
+   const [dataOne, setDataOne] = useState<DataMember>()
+
+   useShallowEffect(() => {
+      featchGetOne()
+   }, [])
+
+
+   async function featchGetOne() {
+      try {
+         const response = await fetch(API_ADDRESS.apiGetOneUser + `&userID=${id}`)
+         const data = await response.json()
+         setDataOne(data)
+      } catch (error) {
+         console.error(error)
+      }
+   }
+
+
    return (
       <Box>
-         <LayoutNavbarHome>
-            <Group justify="space-between">
-               <LayoutIconBack />
-               <ActionIcon onClick={() => setOpen(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Info">
-                  <HiMenu size={20} color='white' />
-               </ActionIcon>
-            </Group>
-            <Stack
-               align="center"
-               justify="center"
-               gap="xs"
-            >
-               <Center>
-                  <Avatar src={'https://i.pravatar.cc/1000?img=25'} alt="it's me" size="xl" />
-               </Center>
-               <Text c={'white'} fw={'bold'} fz={25}>Fibra Marcell</Text>
-               <Text c={'white'} fw={'lighter'} fz={15}>Dinas - Kepala Urusan Pengembangan</Text>
-            </Stack>
-         </LayoutNavbarHome>
-         <LayoutDrawer opened={isOpen} title={'Menu'} onClose={() => setOpen(false)}>
-            <DrawerDetailMember onDeleted={() => setOpen(false)} />
-         </LayoutDrawer>
+         <Box>
+            <LayoutNavbarHome>
+               <Group justify="space-between">
+                  <LayoutIconBack />
+                  <ActionIcon onClick={() => setOpen(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Info">
+                     <HiMenu size={20} color='white' />
+                  </ActionIcon>
+               </Group>
+               <Stack
+                  align="center"
+                  justify="center"
+                  gap="xs"
+               >
+                  <Center>
+                     <Avatar src={'https://i.pravatar.cc/1000?img=25'} alt="it's me" size="xl" />
+                  </Center>
+                  <Text c={'white'} fw={'bold'} fz={25}>{dataOne?.name}</Text>
+                  <Text c={'white'} fw={'lighter'} fz={15}>{dataOne?.group} - {dataOne?.position}</Text>
+               </Stack>
+            </LayoutNavbarHome>
+            <Box p={20}>
+               <Group justify="space-between" grow py={5}>
+                  <Group>
+                     <RiIdCardFill size={28} />
+                     <Text fz={18}>NIK</Text>
+                  </Group>
+                  <Text fz={18} fw={'bold'} ta={"right"}>{dataOne?.nik}</Text>
+               </Group>
+               <Group justify="space-between" grow py={5}>
+                  <Group>
+                     <FaSquarePhone size={28} />
+                     <Text fz={18}>No Telepon</Text>
+                  </Group>
+                  <Text fz={18} fw={'bold'} ta={"right"}>{dataOne?.phone}</Text>
+               </Group>
+               <Group justify="space-between" grow py={5}>
+                  <Group>
+                     <MdEmail size={28} />
+                     <Text fz={18}>Email</Text>
+                  </Group>
+                  <Text fz={18} fw={'bold'} ta={"right"}>{dataOne?.email}</Text>
+               </Group>
+               <Group justify="space-between" grow py={5}>
+                  <Group>
+                     <IoMaleFemale size={28} />
+                     <Text fz={18}>Gender</Text>
+                  </Group>
+                  <Text fz={18} fw={'bold'} ta={"right"}>
+                     {dataOne?.gender === 'M' ? 'Laki-laki' : dataOne?.gender === 'F' ? 'Perempuan' : ''}
+                  </Text>
+               </Group>
+            </Box>
+            <LayoutDrawer opened={isOpen} title={'Menu'} onClose={() => setOpen(false)}>
+               <DrawerDetailMember id={dataOne?.id} onDeleted={() => setOpen(false)} />
+            </LayoutDrawer>
+         </Box>
       </Box>
    )
 } 
\ No newline at end of file
diff --git a/src/module/user/member/component/ui/tab_list_member.tsx b/src/module/user/member/component/ui/tab_list_member.tsx
index 05bf4a1..e6f8687 100644
--- a/src/module/user/member/component/ui/tab_list_member.tsx
+++ b/src/module/user/member/component/ui/tab_list_member.tsx
@@ -33,6 +33,7 @@ export default function TabListMember({ status }: { status: boolean }) {
          setDataMember(data)
       } catch (error) {
          console.error(error)
+         throw new Error("Error")
       } finally {
          setLoading(false)
       }
diff --git a/src/module/user/member/view/view_detail_member.tsx b/src/module/user/member/view/view_detail_member.tsx
index 32ae94e..28b4a04 100644
--- a/src/module/user/member/view/view_detail_member.tsx
+++ b/src/module/user/member/view/view_detail_member.tsx
@@ -8,37 +8,7 @@ import { IoMaleFemale } from "react-icons/io5";
 export default function ViewDetailMember({ data }: { data: string }) {
    return (
       <Box>
-         <NavbarDetailMember />
-         <Box p={20}>
-            <Group justify="space-between" grow py={5}>
-               <Group>
-                  <RiIdCardFill size={28} />
-                  <Text fz={18}>NIK</Text>
-               </Group>
-               <Text fz={18} fw={'bold'} ta={"right"}>513177782899</Text>
-            </Group>
-            <Group justify="space-between" grow py={5}>
-               <Group>
-                  <FaSquarePhone size={28} />
-                  <Text fz={18}>No Telepon</Text>
-               </Group>
-               <Text fz={18} fw={'bold'} ta={"right"}>+62038939293</Text>
-            </Group>
-            <Group justify="space-between" grow py={5}>
-               <Group>
-                  <MdEmail size={28} />
-                  <Text fz={18}>Email</Text>
-               </Group>
-               <Text fz={18} fw={'bold'} ta={"right"}>marcel@gmail.com</Text>
-            </Group>
-            <Group justify="space-between" grow py={5}>
-               <Group>
-                  <IoMaleFemale size={28} />
-                  <Text fz={18}>Gender</Text>
-               </Group>
-               <Text fz={18} fw={'bold'} ta={"right"}>Laki-laki</Text>
-            </Group>
-         </Box>
+         <NavbarDetailMember id={data} />
       </Box>
    )
 }
\ No newline at end of file
diff --git a/src/module/user/member/view/view_edit_member.tsx b/src/module/user/member/view/view_edit_member.tsx
index a48f887..951313f 100644
--- a/src/module/user/member/view/view_edit_member.tsx
+++ b/src/module/user/member/view/view_edit_member.tsx
@@ -4,12 +4,11 @@ import { HiUser } from "react-icons/hi2";
 import NavbarEditMember from "../component/ui/navbar_edit_member";
 import EditMember from "../component/edit_member";
 
-export default function ViewEditMember() {
+export default function ViewEditMember({data}: {data: string}) {
    return (
       <Box>
-         {/* <NavbarEditMember /> */}
          <LayoutNavbarNew back="" title="Edit Anggota" menu={<></>} />
-         <EditMember />
+         <EditMember id={data} />
       </Box>
    )
 }
\ No newline at end of file