diff --git a/src/components/KategoriPengaduan.tsx b/src/components/KategoriPengaduan.tsx
index ffd3f54..6fdbf00 100644
--- a/src/components/KategoriPengaduan.tsx
+++ b/src/components/KategoriPengaduan.tsx
@@ -9,24 +9,27 @@ import {
    Modal,
    Stack,
    Table,
+   Text,
    Title,
    Tooltip
 } from "@mantine/core";
 import { useDisclosure, useShallowEffect } from "@mantine/hooks";
-import { IconEdit, IconPlus } from "@tabler/icons-react";
+import { IconEdit, IconPlus, IconTrash } from "@tabler/icons-react";
 import { useState } from "react";
 import useSWR from "swr";
 import notification from "./notificationGlobal";
 
 export default function KategoriPengaduan() {
+   const [openedDelete, { open: openDelete, close: closeDelete }] = useDisclosure(false);
    const [btnDisable, setBtnDisable] = useState(true);
    const [btnLoading, setBtnLoading] = useState(false);
    const [opened, { open, close }] = useDisclosure(false);
    const [openedTambah, { open: openTambah, close: closeTambah }] = useDisclosure(false);
+   const [dataDelete, setDataDelete] = useState("")
    const { data, mutate, isLoading } = useSWR("/", () =>
       apiFetch.api.pengaduan.category.get(),
    );
-   const list = data?.data || [];
+   const list = data?.data?.data || [];
    const [dataEdit, setDataEdit] = useState({
       id: "",
       name: "",
@@ -58,7 +61,7 @@ export default function KategoriPengaduan() {
             })
          }
       } catch (error) {
-         console.log(error);
+         console.error(error);
          notification({
             title: "Error",
             message: "Failed to create category",
@@ -89,7 +92,7 @@ export default function KategoriPengaduan() {
             })
          }
       } catch (error) {
-         console.log(error);
+         console.error(error);
          notification({
             title: "Error",
             message: "Failed to edit category",
@@ -121,6 +124,37 @@ export default function KategoriPengaduan() {
       }
    }
 
+   async function handleDelete() {
+      try {
+         setBtnLoading(true);
+         const res = await apiFetch.api.pengaduan.category.delete.post({ id: dataDelete });
+         if (res.status === 200) {
+            mutate();
+            closeDelete();
+            notification({
+               title: "Success",
+               message: "Your category have been deleted",
+               type: "success",
+            })
+         } else {
+            notification({
+               title: "Error",
+               message: "Failed to delete category",
+               type: "error",
+            })
+         }
+      } catch (error) {
+         console.error(error);
+         notification({
+            title: "Error",
+            message: "Failed to delete category",
+            type: "error",
+         })
+      } finally {
+         setBtnLoading(false);
+      }
+   }
+
    useShallowEffect(() => {
       if (dataEdit.name.length > 0) {
          setBtnDisable(false);
@@ -182,6 +216,29 @@ export default function KategoriPengaduan() {
          </Modal>
 
 
+         {/* Modal Delete */}
+         <Modal
+            opened={openedDelete}
+            onClose={closeDelete}
+            title={"Delete"}
+            overlayProps={{ backgroundOpacity: 0.55, blur: 3 }}
+         >
+            <Stack gap="md">
+               <Text size="md" color="gray.6">
+                  Apakah anda yakin ingin menghapus kategori ini?
+               </Text>
+               <Group justify="center" grow>
+                  <Button variant="light" onClick={closeDelete}>
+                     Batal
+                  </Button>
+                  <Button variant="filled" color="red" onClick={handleDelete} loading={btnLoading}>
+                     Hapus
+                  </Button>
+               </Group>
+            </Stack>
+         </Modal>
+
+
 
          <Stack gap={"md"}>
             <Flex align="center" justify="space-between">
@@ -212,16 +269,32 @@ export default function KategoriPengaduan() {
                         <Table.Tr key={v.id}>
                            <Table.Td>{v.name}</Table.Td>
                            <Table.Td>
-                              <Tooltip label="Edit Setting">
-                                 <ActionIcon
-                                    variant="light"
-                                    size="sm"
-                                    style={{ boxShadow: "0 0 8px rgba(0,255,200,0.2)" }}
-                                    onClick={() => chooseEdit({ data: v })}
-                                 >
-                                    <IconEdit size={20} />
-                                 </ActionIcon>
-                              </Tooltip>
+                              <Group>
+                                 <Tooltip label="Edit Kategori">
+                                    <ActionIcon
+                                       variant="light"
+                                       size="sm"
+                                       style={{ boxShadow: "0 0 8px rgba(0,255,200,0.2)" }}
+                                       onClick={() => chooseEdit({ data: v })}
+                                    >
+                                       <IconEdit size={20} />
+                                    </ActionIcon>
+                                 </Tooltip>
+                                 <Tooltip label="Delete Kategori">
+                                    <ActionIcon
+                                       variant="light"
+                                       size="sm"
+                                       color="red"
+                                       style={{ boxShadow: "0 0 8px rgba(0,255,200,0.2)" }}
+                                       onClick={() => {
+                                          setDataDelete(v.id)
+                                          openDelete()
+                                       }}
+                                    >
+                                       <IconTrash size={20} />
+                                    </ActionIcon>
+                                 </Tooltip>
+                              </Group>
                            </Table.Td>
                         </Table.Tr>
                      ))}