diff --git a/src/app/api/admin/user/route.ts b/src/app/api/admin/user/route.ts
new file mode 100644
index 00000000..d5e06798
--- /dev/null
+++ b/src/app/api/admin/user/route.ts
@@ -0,0 +1,72 @@
+import _ from "lodash";
+import { NextResponse } from "next/server";
+import prisma from "@/lib/prisma";
+
+export async function GET(request: Request) {
+  try {
+    let fixData;
+    const { searchParams } = new URL(request.url);
+    const search = searchParams.get("search");
+    const page = searchParams.get("page");
+    const takeData = 10;
+    const skipData = Number(page) * takeData - takeData;
+
+    if (!page) {
+      fixData = await prisma.user.findMany({
+        where: {
+          masterUserRoleId: "1",
+          username: {
+            contains: search || "",
+            mode: "insensitive",
+          },
+        },
+      });
+    } else {
+      const getData = await prisma.user.findMany({
+        skip: skipData,
+        take: takeData,
+        orderBy: {
+          active: "asc",
+        },
+        where: {
+          masterUserRoleId: "1",
+          username: {
+            contains: search || "",
+            mode: "insensitive",
+          },
+        },
+      });
+
+      const nCount = await prisma.user.count({
+        where: {
+          masterUserRoleId: "1",
+          username: {
+            contains: search || "",
+            mode: "insensitive",
+          },
+        },
+      });
+
+      fixData = {
+        data: getData,
+        nPage: _.ceil(nCount / takeData),
+      };
+    }
+
+    return NextResponse.json(
+      {
+        success: true,
+        message: "Success get data",
+        data: fixData,
+      },
+      {
+        status: 200,    
+      }
+    );
+  } catch (error) {
+    return NextResponse.json(
+      { success: false, message: "Internal Server Error" },
+      { status: 500 }
+    );
+  }
+}
diff --git a/src/app/dev/admin/user-access/page.tsx b/src/app/dev/admin/user-access/page.tsx
index ed337fdd..78c1534b 100644
--- a/src/app/dev/admin/user-access/page.tsx
+++ b/src/app/dev/admin/user-access/page.tsx
@@ -2,11 +2,11 @@ import { AdminUserAccess_View } from "@/app_modules/admin/user-access";
 import adminUserAccess_getListUser from "@/app_modules/admin/user-access/fun/get/get_list_all_user";
 
 export default async function Page() {
-  const listUser = await adminUserAccess_getListUser({ page: 1 });
+  // const listUser = await adminUserAccess_getListUser({ page: 1 });
 
   return (
     <>
-      <AdminUserAccess_View listUser={listUser as any} />
+      <AdminUserAccess_View />
     </>
   );
 }
diff --git a/src/app_modules/admin/user-access/_lib/api_fetch_user_access.ts b/src/app_modules/admin/user-access/_lib/api_fetch_user_access.ts
new file mode 100644
index 00000000..e8c96da7
--- /dev/null
+++ b/src/app_modules/admin/user-access/_lib/api_fetch_user_access.ts
@@ -0,0 +1,45 @@
+export { apiGetUserAccess };
+
+const apiGetUserAccess = async ({
+  page,
+  search,
+}: {
+  page: string;
+  search?: string;
+}) => {
+  try {
+    // Fetch token from cookie
+    const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+    if (!token) {
+      console.error("No token found");
+      return null;
+    }
+
+    // Fetch data
+    const isPage = `?page=${page}`;
+    const isSearch = search ? `&search=${search}` : "";
+    const response = await fetch(`/api/admin/user${isPage}${isSearch}`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+        Authorization: `Bearer ${token}`,
+      },
+    });
+
+    // Check if the response is OK
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => null);
+      console.error(
+        "Error get data user access:",
+        errorData?.message || "Unknown error"
+      );
+      return null;
+    }
+
+    return response.json();
+  } catch (error) {
+    console.error("Error get data user access:", error);
+    throw error;
+  }
+};
diff --git a/src/app_modules/admin/user-access/fun/edit/fun_edit_access.ts b/src/app_modules/admin/user-access/fun/edit/fun_edit_access.ts
index ba438e97..a7708deb 100644
--- a/src/app_modules/admin/user-access/fun/edit/fun_edit_access.ts
+++ b/src/app_modules/admin/user-access/fun/edit/fun_edit_access.ts
@@ -10,41 +10,50 @@ export default async function adminUserAccess_funEditAccess(
   value: boolean,
   nomor?: string
 ) {
-  const updt = await prisma.user.update({
-    where: {
-      id: userId,
-    },
-    data: {
-      active: value,
-    },
-  });
+  try {
+    const updt = await prisma.user.update({
+      where: {
+        id: userId,
+      },
+      data: {
+        active: value,
+      },
+    });
 
-  const headersList = headers();
-  const host = headersList.get("host");
-  const protocol = headersList.get("x-forwarded-proto") || "http";
-  const path = headersList.get("x-invoke-path");
-  const baseUrl = `${protocol}://${host}`;
-  // const fullUrl = `${protocol}://${host}${path}`;
+    const headersList = headers();
+    const host = headersList.get("host");
+    const protocol = headersList.get("x-forwarded-proto") || "http";
+    const path = headersList.get("x-invoke-path");
+    const baseUrl = `${protocol}://${host}`;
+    // const fullUrl = `${protocol}://${host}${path}`;
 
-  if (value === true) {
-    const message = `Hallo rekan HIPMI, Anda telah diberikan akses ke HIPMI Apps. Silakan mulai jelajahi fitur-fitur yang tersedia melalui link berikut: ${baseUrl}`;
-    const encodedMessage = encodeURIComponent(message);
+    if (value === true) {
+      const message = `Hallo rekan HIPMI, Anda telah diberikan akses ke HIPMI Apps. Silakan mulai jelajahi fitur-fitur yang tersedia melalui link berikut: ${baseUrl}`;
+      const encodedMessage = encodeURIComponent(message);
 
-    const res = await fetch(
-      `https://wa.wibudev.com/code?nom=${nomor}&text=${encodedMessage}
+      const res = await fetch(
+        `https://wa.wibudev.com/code?nom=${nomor}&text=${encodedMessage}
       `
-    );
+      );
 
-    if (!res.ok) {
-      backendLogger.error("Error send message", res);
+      if (!res.ok) {
+        backendLogger.error("Error send message", res);
+      }
+
+      const result = await res.json();
+
+      backendLogger.info("Success send message", result);
     }
 
-    const result = await res.json();
-
-    backendLogger.info("Success send message", result);
+    if (!updt) return { status: 400, message: "Update gagal" };
+    revalidatePath("/dev/admin/user-access");
+    return { status: 200, message: "Update berhasil" };
+  } catch (error) {
+    backendLogger.error("Error update user", error);
+    return {
+      status: 500,
+      message: "Error udpate user",
+      error: (error as Error).message,
+    };
   }
-
-  if (!updt) return { status: 400, message: "Update gagal" };
-  revalidatePath("/dev/admin/user-access");
-  return { status: 200, message: "Update berhasil" };
 }
diff --git a/src/app_modules/admin/user-access/view/index.tsx b/src/app_modules/admin/user-access/view/index.tsx
index f4edcf5d..34f9c827 100644
--- a/src/app_modules/admin/user-access/view/index.tsx
+++ b/src/app_modules/admin/user-access/view/index.tsx
@@ -24,28 +24,58 @@ import { WibuRealtime } from "wibu-pkg";
 import { gs_access_user, IRealtimeData } from "@/lib/global_state";
 import { useAtom } from "jotai";
 import { AdminColor } from "@/app_modules/_global/color/color_pallet";
+import { useShallowEffect } from "@mantine/hooks";
+import { apiGetUserAccess } from "../_lib/api_fetch_user_access";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 
-export default function AdminUserAccess_View({ listUser }: { listUser: any }) {
-  const [data, setData] = useState<MODEL_USER[]>(listUser.data);
+export default function AdminUserAccess_View() {
+  const [data, setData] = useState<MODEL_USER[]>([]);
+  const [nPage, setNPage] = useState(1);
   const [isActivePage, setActivePage] = useState(1);
-  const [isNPage, setNPage] = useState(listUser.nPage);
   const [isSearch, setSearch] = useState("");
+
   const [isLoadingAccess, setIsLoadingAccess] = useState(false);
   const [isLoadingDelete, setIsLoadingDelete] = useState(false);
   const [userId, setUserId] = useState("");
 
+  useShallowEffect(() => {
+    handleLoadData();
+  }, [isActivePage, isSearch]);
+
+  const handleLoadData = async () => {
+    try {
+      const response = await apiGetUserAccess({
+        page: `${isActivePage}`,
+        search: isSearch,
+      });
+
+      if (response.success) {
+        setData(response.data.data);
+        setNPage(response.data.nPage);
+      } else {
+        setData([]);
+      }
+    } catch (error) {
+      console.error("Error get user access", error);
+      setData([]);
+    }
+  };
+
+  async function onSearch(s: any) {
+    setSearch(s);
+  }
+
+  async function onPageClick(p: any) {
+    setActivePage(p);
+  }
+
   async function onAccess(id: string, nomor: string) {
     try {
       setUserId(id);
       setIsLoadingAccess(true);
       await adminUserAccess_funEditAccess(id, true, nomor).then(async (res) => {
         if (res.status === 200) {
-          const value = await adminUserAccess_getListUser({
-            page: 1,
-            search: isSearch,
-          });
-          setData(value.data as any);
-          setNPage(value.nPage);
+          handleLoadData();
 
           const dataNotifikasi: IRealtimeData = {
             status: true as any,
@@ -78,12 +108,8 @@ export default function AdminUserAccess_View({ listUser }: { listUser: any }) {
       setIsLoadingDelete(true);
       await adminUserAccess_funEditAccess(id, false).then(async (res) => {
         if (res.status === 200) {
-          const value = await adminUserAccess_getListUser({
-            page: 1,
-            search: isSearch,
-          });
-          setData(value.data as any);
-          setNPage(value.nPage);
+          handleLoadData();
+
           ComponentGlobal_NotifikasiBerhasil(res.message);
         } else {
           ComponentGlobal_NotifikasiGagal(res.message);
@@ -97,27 +123,6 @@ export default function AdminUserAccess_View({ listUser }: { listUser: any }) {
     }
   }
 
-  async function onSearch(s: any) {
-    setSearch(s);
-    setActivePage(1);
-    const loadData = await adminUserAccess_getListUser({
-      search: s,
-      page: 1,
-    });
-    setData(loadData.data as any);
-    setNPage(loadData.nPage);
-  }
-
-  async function onPageClick(p: any) {
-    setActivePage(p);
-    const loadData = await adminUserAccess_getListUser({
-      search: isSearch,
-      page: p,
-    });
-    setData(loadData.data as any);
-    setNPage(loadData.nPage);
-  }
-
   const tableBody = data.map((e, i) => (
     <tr key={e.id}>
       <td>
@@ -181,40 +186,39 @@ export default function AdminUserAccess_View({ listUser }: { listUser: any }) {
           />
         </Group>
 
-        <Paper p={"md"} bg={AdminColor.softBlue} h={"80vh"}>
-          <ScrollArea w={"100%"} h={"90%"}>
-            <Table
-              verticalSpacing={"xs"}
-              horizontalSpacing={"md"}
-              p={"md"}
-              
-            >
-              <thead>
-                <tr>
-                  <th>
-                    <Center c={AdminColor.white}>Username</Center>
-                  </th>
-                  <th>
-                    <Center c={AdminColor.white}>Nomor</Center>
-                  </th>
-                  <th>
-                    <Center c={AdminColor.white}>Aksi</Center>
-                  </th>
-                </tr>
-              </thead>
-              <tbody>{tableBody}</tbody>
-            </Table>
-          </ScrollArea>
-          <Center mt={"xl"}>
-            <Pagination
-              value={isActivePage}
-              total={isNPage}
-              onChange={(val) => {
-                onPageClick(val);
-              }}
-            />
-          </Center>
-        </Paper>
+        {!data.length ? (
+          <CustomSkeleton height={"80vh"} width="100%" />
+        ) : (
+          <Paper p={"md"} bg={AdminColor.softBlue} h={"80vh"}>
+            <ScrollArea w={"100%"} h={"90%"}>
+              <Table verticalSpacing={"xs"} horizontalSpacing={"md"} p={"md"}>
+                <thead>
+                  <tr>
+                    <th>
+                      <Center c={AdminColor.white}>Username</Center>
+                    </th>
+                    <th>
+                      <Center c={AdminColor.white}>Nomor</Center>
+                    </th>
+                    <th>
+                      <Center c={AdminColor.white}>Aksi</Center>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>{tableBody}</tbody>
+              </Table>
+            </ScrollArea>
+            <Center mt={"xl"}>
+              <Pagination
+                value={isActivePage}
+                total={nPage}
+                onChange={(val) => {
+                  onPageClick(val);
+                }}
+              />
+            </Center>
+          </Paper>
+        )}
       </Stack>
     </>
   );