diff --git a/src/app/dev/admin/developer/loading.tsx b/src/app/dev/admin/developer/loading.tsx
new file mode 100644
index 00000000..96547f3a
--- /dev/null
+++ b/src/app/dev/admin/developer/loading.tsx
@@ -0,0 +1,9 @@
+import ComponentAdminGlobal_LoadingPage from "@/app_modules/admin/component/loading_admin_page";
+
+export default async function Page() {
+  return (
+    <>
+      <ComponentAdminGlobal_LoadingPage />
+    </>
+  );
+}
diff --git a/src/app/dev/admin/developer/page.tsx b/src/app/dev/admin/developer/page.tsx
new file mode 100644
index 00000000..c69ae063
--- /dev/null
+++ b/src/app/dev/admin/developer/page.tsx
@@ -0,0 +1,15 @@
+import AdminDeveloper from "@/app_modules/admin/developer";
+import adminDeveloper_funGetListAllAdmin from "@/app_modules/admin/developer/fun/get/fun_get_list_all_admin";
+import adminDeveloper_funGetListAllUser from "@/app_modules/admin/developer/fun/get/fun_get_list_all_user";
+import _ from "lodash";
+
+export default async function Page() {
+  const listUser = await adminDeveloper_funGetListAllUser();
+  const listAdmin = await adminDeveloper_funGetListAllAdmin();
+
+  return (
+    <>
+      <AdminDeveloper listUser={listUser as any} listAdmin={listAdmin as any} />
+    </>
+  );
+}
diff --git a/src/app/dev/auth/login/layout.tsx b/src/app/dev/auth/login/layout.tsx
deleted file mode 100644
index 79a8e50e..00000000
--- a/src/app/dev/auth/login/layout.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { LayoutLogin } from "@/app_modules/auth";
-import React from "react";
-
-export default async function Layout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <>
-      <LayoutLogin>{children}</LayoutLogin>
-    </>
-  );
-}
diff --git a/src/app/lib/router_admin/router_admin_developer.ts b/src/app/lib/router_admin/router_admin_developer.ts
new file mode 100644
index 00000000..28c01626
--- /dev/null
+++ b/src/app/lib/router_admin/router_admin_developer.ts
@@ -0,0 +1,3 @@
+export const RouterAdminDeveloper = {
+  main: "/dev/admin/developer",
+};
diff --git a/src/app_modules/admin/component/logout.tsx b/src/app_modules/admin/component/logout.tsx
index 02e875f7..40caa8c6 100644
--- a/src/app_modules/admin/component/logout.tsx
+++ b/src/app_modules/admin/component/logout.tsx
@@ -1,7 +1,15 @@
 "use client";
 import { myConsole } from "@/app/fun/my_console";
 import { ApiHipmi } from "@/app/lib/api";
-import { ActionIcon, Button, Group, Modal, Stack, Title } from "@mantine/core";
+import {
+  ActionIcon,
+  Button,
+  Group,
+  Loader,
+  Modal,
+  Stack,
+  Title,
+} from "@mantine/core";
 import { useRouter } from "next/navigation";
 import { useAtom } from "jotai";
 import { IconLogout } from "@tabler/icons-react";
@@ -16,6 +24,7 @@ import { useState } from "react";
 export default function Admin_Logout() {
   const router = useRouter();
   const [opened, { toggle }] = useDisclosure(false);
+  const [loading, setLoading] = useState(false);
 
   const [kodeId, setKodeId] = useAtom(gs_kodeId);
   const [loadingLogout, setLoadingLogout] = useState(false);
@@ -34,15 +43,26 @@ export default function Admin_Logout() {
 
   return (
     <>
-      <Modal opened={opened} onClose={toggle} centered withCloseButton={false}>
+      <Modal
+        opened={opened}
+        onClose={toggle}
+        centered
+        withCloseButton={false}
+        closeOnClickOutside={false}
+      >
         <Stack>
           <Title order={6}>Anda yakin ingin keluar ?</Title>
           <Group align="center" position="center">
-            <Button compact onClick={toggle} radius={50}>
+            <Button
+              onClick={() => {
+                toggle();
+                setLoading(false);
+              }}
+              radius={50}
+            >
               Batal
             </Button>
             <Button
-              compact
               loaderPosition="center"
               loading={loadingLogout ? true : false}
               radius={50}
@@ -56,7 +76,17 @@ export default function Admin_Logout() {
         </Stack>
       </Modal>
       <ActionIcon variant="transparent">
-        <IconLogout color={Warna.merah} onClick={toggle} />
+        {loading ? (
+          <Loader color="gray" />
+        ) : (
+          <IconLogout
+            color={Warna.merah}
+            onClick={() => {
+              toggle();
+              setLoading(true);
+            }}
+          />
+        )}
       </ActionIcon>
       {/* <Button radius={"xl"} color={"red"} onClick={toggle}>
         Logout
diff --git a/src/app_modules/admin/developer/fun/edit/fun_edit_user_akses_by_id.ts b/src/app_modules/admin/developer/fun/edit/fun_edit_user_akses_by_id.ts
new file mode 100644
index 00000000..db032e37
--- /dev/null
+++ b/src/app_modules/admin/developer/fun/edit/fun_edit_user_akses_by_id.ts
@@ -0,0 +1,23 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { RouterAdminDeveloper } from "@/app/lib/router_admin/router_admin_developer";
+import { revalidatePath } from "next/cache";
+
+export default async function adminDeveloper_funEditUserAksesById(
+  userId: string,
+  roleId: string
+) {
+  const updt = await prisma.user.update({
+    where: {
+      id: userId,
+    },
+    data: {
+      masterUserRoleId: roleId,
+    },
+  });
+
+  if (!updt) return { status: 400, message: "Gagal Update Akses" };
+  revalidatePath(RouterAdminDeveloper.main);
+  return { status: 200, message: "Berhasil Update Akses" };
+}
diff --git a/src/app_modules/admin/developer/fun/get/fun_get_list_all_admin.ts b/src/app_modules/admin/developer/fun/get/fun_get_list_all_admin.ts
new file mode 100644
index 00000000..7cf6d885
--- /dev/null
+++ b/src/app_modules/admin/developer/fun/get/fun_get_list_all_admin.ts
@@ -0,0 +1,15 @@
+"use server"
+
+import prisma from "@/app/lib/prisma"
+
+export default async function adminDeveloper_funGetListAllAdmin() {
+    const data = await prisma.user.findMany({
+      orderBy: {
+        updatedAt: "asc",
+      },
+      where: {
+        masterUserRoleId: "2",
+      },
+    });
+    return data;
+}
\ No newline at end of file
diff --git a/src/app_modules/admin/developer/fun/get/fun_get_list_all_user.ts b/src/app_modules/admin/developer/fun/get/fun_get_list_all_user.ts
new file mode 100644
index 00000000..3de50a19
--- /dev/null
+++ b/src/app_modules/admin/developer/fun/get/fun_get_list_all_user.ts
@@ -0,0 +1,15 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+
+export default async function adminDeveloper_funGetListAllUser() {
+  const data = await prisma.user.findMany({
+    orderBy: {
+      updatedAt: "asc",
+    },
+    where: {
+      masterUserRoleId: "1",
+    },
+  });
+  return data;
+}
diff --git a/src/app_modules/admin/developer/index.tsx b/src/app_modules/admin/developer/index.tsx
new file mode 100644
index 00000000..c2d49ac5
--- /dev/null
+++ b/src/app_modules/admin/developer/index.tsx
@@ -0,0 +1,232 @@
+"use client";
+
+import {
+  Box,
+  Button,
+  Center,
+  Group,
+  Paper,
+  ScrollArea,
+  SimpleGrid,
+  Stack,
+  Table,
+  TextInput,
+  Title,
+} from "@mantine/core";
+import ComponentAdminGlobal_HeaderTamplate from "../component/header_tamplate";
+import { MODEL_USER } from "@/app_modules/home/model/interface";
+import _ from "lodash";
+import { IconSearch } from "@tabler/icons-react";
+import { useState } from "react";
+import adminDeveloper_funEditUserAksesById from "./fun/edit/fun_edit_user_akses_by_id";
+import adminDeveloper_funGetListAllAdmin from "./fun/get/fun_get_list_all_admin";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
+import adminDeveloper_funGetListAllUser from "./fun/get/fun_get_list_all_user";
+
+export default function AdminDeveloper({
+  listUser,
+  listAdmin,
+}: {
+  listUser: MODEL_USER[];
+  listAdmin: MODEL_USER[];
+}) {
+  const [dataUser, setDataUser] = useState(listUser);
+  const [dataAdmin, setDataAdmin] = useState(listAdmin);
+
+  return (
+    <>
+      <Stack>
+        <ComponentAdminGlobal_HeaderTamplate name="Developer" />
+        <SimpleGrid cols={2} spacing={50}>
+          <TableAdmin
+            dataAdmin={dataAdmin}
+            setDataAdmin={setDataAdmin}
+            setDataUser={setDataUser}
+          />
+          <TableUser
+            dataUser={dataUser}
+            setDataUser={setDataUser}
+            setDataAdmin={setDataAdmin}
+          />
+        </SimpleGrid>
+      </Stack>
+    </>
+  );
+}
+
+function TableAdmin({
+  dataAdmin,
+  setDataAdmin,
+  setDataUser,
+}: {
+  dataAdmin: MODEL_USER[];
+  setDataAdmin: any;
+  setDataUser: any;
+}) {
+  async function onAccess(id: string) {
+    await adminDeveloper_funEditUserAksesById(id, "1").then(async (res) => {
+      if (res.status === 200) {
+        await adminDeveloper_funGetListAllUser().then((val) => {
+          setDataUser(val);
+        });
+        await adminDeveloper_funGetListAllAdmin().then((val) => {
+          setDataAdmin(val);
+        });
+        ComponentGlobal_NotifikasiBerhasil(res.message);
+      } else {
+        ComponentGlobal_NotifikasiGagal(res.message);
+      }
+    });
+  }
+
+  const tableBody = dataAdmin.map((e) => (
+    <tr key={e.id}>
+      <td>
+        <Center>{e.username}</Center>
+      </td>
+      <td>
+        <Center>{e.nomor}</Center>
+      </td>
+      <td>
+        <Center>
+          <Button radius={"xl"} color="red" onClick={() => onAccess(e.id)}>
+            Delete Access
+          </Button>
+        </Center>
+      </td>
+    </tr>
+  ));
+
+  return (
+    <>
+      <Stack spacing={"xs"}>
+        <Group
+          position="apart"
+          bg={"blue.4"}
+          p={"xs"}
+          style={{ borderRadius: "6px" }}
+        >
+          <Title order={4}>Table Admin</Title>
+          <TextInput
+            icon={<IconSearch size={20} />}
+            radius={"xl"}
+            placeholder="Masukan username"
+          />
+        </Group>
+        <Paper p={"md"} withBorder shadow="lg" h={"80vh"}>
+          <Table
+            verticalSpacing={"xs"}
+            horizontalSpacing={"md"}
+            p={"md"}
+            striped
+            highlightOnHover
+          >
+            <thead>
+              <tr>
+                <th>
+                  <Center>Username</Center>
+                </th>
+                <th>
+                  <Center>Nomor</Center>
+                </th>
+                <th>
+                  <Center>Aksi</Center>
+                </th>
+              </tr>
+            </thead>
+            <tbody>{tableBody}</tbody>
+          </Table>
+        </Paper>
+      </Stack>
+    </>
+  );
+}
+
+function TableUser({
+  dataUser,
+  setDataUser,
+  setDataAdmin,
+}: {
+  dataUser: MODEL_USER[];
+  setDataUser: any;
+  setDataAdmin: any;
+}) {
+  async function onAccess(id: string) {
+    await adminDeveloper_funEditUserAksesById(id, "2").then(async (res) => {
+      if (res.status === 200) {
+        await adminDeveloper_funGetListAllUser().then((val) => {
+          setDataUser(val);
+        });
+        await adminDeveloper_funGetListAllAdmin().then((val) => {
+          setDataAdmin(val);
+        });
+        ComponentGlobal_NotifikasiBerhasil(res.message);
+      } else {
+        ComponentGlobal_NotifikasiGagal(res.message);
+      }
+    });
+  }
+
+  const tableBody = dataUser.map((e) => (
+    <tr key={e.id}>
+      <td>
+        <Center>{e.username}</Center>
+      </td>
+      <td>
+        <Center>{e.nomor}</Center>
+      </td>
+      <td>
+        <Center>
+          <Button radius={"xl"} onClick={() => onAccess(e.id)}>
+            Admin Access
+          </Button>
+        </Center>
+      </td>
+    </tr>
+  ));
+
+  return (
+    <>
+      <Stack spacing={"xs"}>
+        <Group
+          position="apart"
+          bg={"cyan.4"}
+          p={"xs"}
+          style={{ borderRadius: "6px" }}
+        >
+          <Title order={4}>Table User</Title>
+          <TextInput
+            icon={<IconSearch size={20} />}
+            radius={"xl"}
+            placeholder="Masukan username"
+          />
+        </Group>
+        <Paper p={"md"} withBorder shadow="lg" h={"80vh"}>
+          <Table
+            verticalSpacing={"xs"}
+            horizontalSpacing={"md"}
+            p={"md"}
+            striped
+            highlightOnHover
+          >
+            <thead>
+              <tr>
+                <th>
+                  <Center>Username</Center>
+                </th>
+                <th>
+                  <Center>Nomor</Center>
+                </th>
+                <th>
+                  <Center>Aksi</Center>
+                </th>
+              </tr>
+            </thead>
+            <tbody>{tableBody}</tbody>
+          </Table>
+        </Paper>
+      </Stack>
+    </>
+  );
+}
diff --git a/src/app_modules/admin/list_page.tsx b/src/app_modules/admin/list_page.tsx
index cf051ac8..d7304746 100644
--- a/src/app_modules/admin/list_page.tsx
+++ b/src/app_modules/admin/list_page.tsx
@@ -1,3 +1,4 @@
+import { RouterAdminDeveloper } from "@/app/lib/router_admin/router_admin_developer";
 import { RouterAdminEvent } from "@/app/lib/router_admin/router_admin_event";
 import { RouterAdminForum } from "@/app/lib/router_admin/router_admin_forum";
 import { RouterAdminJob } from "@/app/lib/router_admin/router_admin_job";
@@ -174,7 +175,7 @@ export const listAdminPage = [
   {
     id: 99,
     name: "Developer",
-    path: RouterAdminDashboard.main_admin,
+    path: RouterAdminDeveloper.main,
     icon: <IconDashboard />,
     child: [],
   },
diff --git a/src/app_modules/admin/splash/splash.tsx b/src/app_modules/admin/splash/splash.tsx
index 19f513f4..9fd04119 100644
--- a/src/app_modules/admin/splash/splash.tsx
+++ b/src/app_modules/admin/splash/splash.tsx
@@ -14,7 +14,7 @@ export default function SplashDashboardAdmin() {
   useShallowEffect(() => {
     setTimeout(() => {
       router.push(RouterAdminDashboard.main_admin);
-      setActive(0);
+      setActive(1);
     }, 2000);
   }, []);
   return (
diff --git a/src/app_modules/auth/login/view.tsx b/src/app_modules/auth/login/view.tsx
index 485b71dc..a8dfc89f 100644
--- a/src/app_modules/auth/login/view.tsx
+++ b/src/app_modules/auth/login/view.tsx
@@ -79,67 +79,48 @@ export default function Login() {
 
   return (
     <>
-      <Center h={"80%"}>
-        <Stack px={"lg"} spacing={"xl"} w={{ base: 400 }} justify="center">
-          <Center h={"100%"}>
-            <Image
-              mt={"xl"}
-              height={130}
-              width={130}
-              alt="logo"
-              src={"/aset/logo/logo-hipmi.png"}
-            />
-          </Center>
-          <Stack spacing={0}>
-            <Title order={4}>Selamat Datang di HIPMI App</Title>
-            <Text fs={"italic"} fz={"sm"}>
-              Silahkan masukan nomor telepon anda untuk masuk !
-            </Text>
-          </Stack>
-
-          {/* <Grid>
-            <Grid.Col span={"content"}>
-              <Center h={"100%"}>
-                <Text fw={"bold"}>+62</Text>
-              </Center>
-            </Grid.Col>
-            <Grid.Col span={"auto"}>
-              <TextInput
-                ref={focusTrapRef}
-                w={"100%"}
-                type="number"
-                placeholder="xx xxx xxx xxx"
-                onChange={(val) => {
-                  setNomor(62 + val.target.value);
-                }}
+      <Stack align="center" justify="center"  h={"100vh"}>
+        <Center>
+          <Stack spacing={"xl"}>
+            <Center h={"100%"}>
+              <Image
+                mt={"xl"}
+                height={130}
+                width={130}
+                alt="logo"
+                src={"/aset/logo/logo-hipmi.png"}
               />
-            </Grid.Col>
-          </Grid> */}
+            </Center>
+            <Stack spacing={0}>
+              <Title order={4}>Selamat Datang di HIPMI App</Title>
+              <Text fs={"italic"} fz={"sm"}>
+                Silahkan masukan nomor telepon anda untuk masuk !
+              </Text>
+            </Stack>
 
-          <PhoneInput
-            // ref={focusTrapRef}
-            inputStyle={{ width: "100%" }}
-            defaultCountry="id"
-            onChange={(val) => {
-              setPhone(val);
-            }}
-          />
+            <PhoneInput
+              // ref={focusTrapRef}
+              inputStyle={{ width: "100%" }}
+              defaultCountry="id"
+              onChange={(val) => {
+                setPhone(val);
+              }}
+            />
 
-          <Button
-            radius={"md"}
-            compact
-            h={40}
-            color={"teal"}
-            onClick={() => {
-              onLogin();
-            }}
-            loading={loading ? true : false}
-            loaderPosition="center"
-          >
-            <Text>LOGIN</Text>
-          </Button>
-        </Stack>
-      </Center>
+            <Button
+              radius={"md"}
+              color={"teal"}
+              onClick={() => {
+                onLogin();
+              }}
+              loading={loading ? true : false}
+              loaderPosition="center"
+            >
+              LOGIN
+            </Button>
+          </Stack>
+        </Center>
+      </Stack>
     </>
   );
 }