diff --git a/src/app/api/admin/donasi/kategori/route.ts b/src/app/api/admin/donasi/kategori/route.ts
new file mode 100644
index 00000000..de7e7c72
--- /dev/null
+++ b/src/app/api/admin/donasi/kategori/route.ts
@@ -0,0 +1,44 @@
+import { prisma } from "@/app/lib";
+import backendLogger from "@/util/backendLogger";
+import { NextResponse } from "next/server";
+
+export async function GET(request: Request) {
+    const method = request.method;
+    if (method !== "GET") {
+        return NextResponse.json({
+            success: false,
+            message: "Method nol allowed"
+        },
+            { status: 405 }
+        )
+    }
+    try {
+        const data = await prisma.donasiMaster_Kategori.findMany({
+            orderBy: {
+                createdAt: 'asc'
+            },
+            where: {
+
+                active: true
+
+            }
+
+        })
+        return NextResponse.json({
+            success: true,
+            message: "Success get kategori",
+            data: data
+        })
+    } catch (error) {
+        backendLogger.error("Error get kategori", error);
+        return NextResponse.json({
+            success: false,
+            message: "Failed get kategori",
+            reason: (error as Error).message
+        },
+            { status: 500 }
+        )
+    } finally {
+        await prisma.$disconnect
+    }
+}
\ No newline at end of file
diff --git a/src/app/dev/admin/donasi/sub-menu/kategori/page.tsx b/src/app/dev/admin/donasi/sub-menu/kategori/page.tsx
index 86c84d44..15ea2809 100644
--- a/src/app/dev/admin/donasi/sub-menu/kategori/page.tsx
+++ b/src/app/dev/admin/donasi/sub-menu/kategori/page.tsx
@@ -2,11 +2,11 @@ import { AdminDonasi_TableKategori } from "@/app_modules/admin/donasi";
 import adminDonasi_getMasterKategori from "@/app_modules/admin/donasi/fun/master/get_list_kategori";
 
 export default async function Page() {
-  const listKategori = await adminDonasi_getMasterKategori();
+  // const listKategori = await adminDonasi_getMasterKategori();
 
   return (
     <>
-      <AdminDonasi_TableKategori listKategori={listKategori} />
+      <AdminDonasi_TableKategori  />
     </>
   );
 }
diff --git a/src/app_modules/admin/donasi/fun/update/fun_update_kategori_by_id.ts b/src/app_modules/admin/donasi/fun/update/fun_update_kategori_by_id.ts
index 9428c49f..62e57c84 100644
--- a/src/app_modules/admin/donasi/fun/update/fun_update_kategori_by_id.ts
+++ b/src/app_modules/admin/donasi/fun/update/fun_update_kategori_by_id.ts
@@ -6,9 +6,11 @@ import { update } from "lodash";
 export default async function adminDonasi_funUpdatekategoriById({
   kategoriId,
   name,
+  
 }: {
   kategoriId: string;
   name: string;
+  
 }) {
   const updt = await prisma.donasiMaster_Kategori.update({
     where: {
@@ -16,6 +18,7 @@ export default async function adminDonasi_funUpdatekategoriById({
     },
     data: {
       name: name,
+      
     },
   });
 
diff --git a/src/app_modules/admin/donasi/lib/api_fetch_admin_donasi.ts b/src/app_modules/admin/donasi/lib/api_fetch_admin_donasi.ts
index 348d7f3f..28222870 100644
--- a/src/app_modules/admin/donasi/lib/api_fetch_admin_donasi.ts
+++ b/src/app_modules/admin/donasi/lib/api_fetch_admin_donasi.ts
@@ -1,7 +1,8 @@
 export {
     apiGetAdminDonasiStatusCountDashboard,
     apiGetAdminDonasiKategoriCountDashboard,
-    apiGetAdminDonasiByStatus
+    apiGetAdminDonasiByStatus,
+    apiGetAdminDonasiKategori
 };
 const apiGetAdminDonasiStatusCountDashboard = async ({ name }:
     { name: "Publish" | "Review" | "Reject" }) => {
@@ -66,3 +67,20 @@ const apiGetAdminDonasiByStatus = async ({
     console.log("Ini response", response)
     return await response.json().catch(() => null);
 }
+const apiGetAdminDonasiKategori = async () => {
+    const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+    if (!token) return await token.json().catch(() => null);
+
+    console.log("ini token", token)
+    const response = await fetch(`/api/admin/donasi/kategori`, {
+        method: "GET",
+        headers: {
+            "Content-Type": "application/json",
+            Accept: "application/json",
+            "Access-Control-Allow-Origin": "*",
+            Authorization: `Bearer ${token}`
+            
+        }
+    })
+    return await response.json().catch(() => null);
+}
\ No newline at end of file
diff --git a/src/app_modules/admin/donasi/sub_menu/table_kategori.tsx b/src/app_modules/admin/donasi/sub_menu/table_kategori.tsx
index b852816b..a5622a50 100644
--- a/src/app_modules/admin/donasi/sub_menu/table_kategori.tsx
+++ b/src/app_modules/admin/donasi/sub_menu/table_kategori.tsx
@@ -32,25 +32,23 @@ import _ from "lodash";
 import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
 import { AccentColor } from "@/app_modules/_global/color";
 import { AdminColor } from "@/app_modules/_global/color/color_pallet";
+import { useShallowEffect } from "@mantine/hooks";
+import { apiGetAdminDonasiKategori } from "../lib/api_fetch_admin_donasi";
+import { clientLogger } from "@/util/clientLogger";
 
-export default function AdminDonasi_TableKategori({
-  listKategori,
-}: {
-  listKategori: MODEL_NEW_DEFAULT_MASTER[];
-}) {
+export default function AdminDonasi_TableKategori() {
   return (
     <>
       <Stack h={"100%"}>
         <ComponentAdminGlobal_HeaderTamplate name="Donasi" />
-        <TableView list={listKategori} />
+        <TableView />
       </Stack>
     </>
   );
 }
 
-function TableView({ list }: { list: MODEL_NEW_DEFAULT_MASTER[] }) {
-  const [data, setData] = useState(list);
-
+function TableView() {
+  const [data, setData] = useState<MODEL_NEW_DEFAULT_MASTER[] | null>(null);
   const [create, setCreate] = useState("");
   const [isCreate, setIsCreate] = useState(false);
 
@@ -67,6 +65,22 @@ function TableView({ list }: { list: MODEL_NEW_DEFAULT_MASTER[] }) {
   });
   const [isChangeStatus, setIsChangeStatus] = useState(false);
 
+  useShallowEffect(() => {
+    onLoadData();
+  }, []);
+
+  async function onLoadData() {
+  try {
+    const response = await apiGetAdminDonasiKategori();
+    if (response) {
+      console.log("ini response", response)
+      setData(response.data)
+    }
+  } catch (error) {
+    clientLogger.error("Error get kategori" , error)
+  }
+}
+
   async function onCreateNewKategori() {
     const tambahData = await adminDonasi_funCreateKategori({
       newKategori: create,
@@ -114,49 +128,63 @@ function TableView({ list }: { list: MODEL_NEW_DEFAULT_MASTER[] }) {
     }
   }
 
-  const rowTable = data.map((e, i) => (
-    <tr key={i}>
-      <td>
-        <Center c={AccentColor.white}>
-          <Text>{e?.name}</Text>
-        </Center>
-      </td>
-      <td>
-        <Center>
-          <Switch
-            color="orange"
-            onLabel="ON"
-            offLabel="OFF"
-            checked={e?.active}
-            onChange={(val) => {
-              const status = val.currentTarget.checked;
-              setIsChangeStatus(true);
-              setUpdateStatus({
-                kategoriId: e?.id,
-                isActive: status as any,
-              });
-            }}
-          />
-        </Center>
-      </td>
-      <td>
-        <Group position="center">
-          <ActionIcon
-            onClick={() => {
-              setIsUpdate(true);
-              setIsCreate(false);
-              setUpdateKategori({
-                kategoriId: e?.id,
-                name: e?.name,
-              });
-            }}
-          >
-            <IconEdit color={AdminColor.green} />
-          </ActionIcon>
-        </Group>
-      </td>
-    </tr>
-  ));
+  const renderTableBody = () => {
+    if (!Array.isArray(data) || data.length === 0) {
+      return (
+        <tr>
+          <td colSpan={12}>
+            <Center>
+              <Text color="gray">Tidak ada data</Text>
+            </Center>
+          </td>
+        </tr>
+      )
+    }
+    return data.map((e, i) => (
+      <tr key={i}>
+        <td>
+          <Center c={AccentColor.white}>
+            <Text>{e?.name}</Text>
+          </Center>
+        </td>
+        <td>
+          <Center>
+            <Switch
+              color="orange"
+              onLabel="ON"
+              offLabel="OFF"
+              checked={e?.active}
+              onChange={(val) => {
+                const status = val.currentTarget.checked;
+                setIsChangeStatus(true);
+                setUpdateStatus({
+                  kategoriId: e?.id,
+                  isActive: status as any,
+                });
+              }}
+            />
+          </Center>
+        </td>
+        <td>
+          <Group position="center">
+            <ActionIcon
+              onClick={() => {
+                setIsUpdate(true);
+                setIsCreate(false);
+                setUpdateKategori({
+                  kategoriId: e?.id,
+                  name: e?.name,
+                });
+              }}
+            >
+              <IconEdit color={AdminColor.green} />
+            </ActionIcon>
+          </Group>
+        </td>
+      </tr>
+    ));
+  }
+
 
   return (
     <>
@@ -167,16 +195,16 @@ function TableView({ list }: { list: MODEL_NEW_DEFAULT_MASTER[] }) {
           color={AdminColor.softBlue}
           component={
             <Button
-            w={120}
-            leftIcon={<IconCirclePlus />}
-            radius={"xl"}
-            onClick={() => {
-              setIsCreate(true);
-              setIsUpdate(false);
-            }}
-          >
-            Tambah
-          </Button>
+              w={120}
+              leftIcon={<IconCirclePlus />}
+              radius={"xl"}
+              onClick={() => {
+                setIsCreate(true);
+                setIsUpdate(false);
+              }}
+            >
+              Tambah
+            </Button>
           }
         />
         {/* <Group
@@ -208,7 +236,7 @@ function TableView({ list }: { list: MODEL_NEW_DEFAULT_MASTER[] }) {
                   horizontalSpacing={"md"}
                   p={"md"}
                   w={"100%"}
-                 
+
                 >
                   <thead>
                     <tr>
@@ -223,7 +251,7 @@ function TableView({ list }: { list: MODEL_NEW_DEFAULT_MASTER[] }) {
                       </th>
                     </tr>
                   </thead>
-                  <tbody>{rowTable}</tbody>
+                  <tbody>{renderTableBody()}</tbody>
                 </Table>
               </ScrollArea>
               {/* <Center mt={"xl"}>