diff --git a/public/uploads/seeded-images/profile-ppid/2513dd3c-256d-4f15-9e35-75e9819acdf4_perbekel.png b/public/uploads/seeded-images/profile-ppid/2513dd3c-256d-4f15-9e35-75e9819acdf4_perbekel.png
new file mode 100644
index 00000000..ed1cbd10
Binary files /dev/null and b/public/uploads/seeded-images/profile-ppid/2513dd3c-256d-4f15-9e35-75e9819acdf4_perbekel.png differ
diff --git a/src/app/admin/(dashboard)/_state/desa/pengumuman.ts b/src/app/admin/(dashboard)/_state/desa/pengumuman.ts
index 31987b33..91b4e311 100644
--- a/src/app/admin/(dashboard)/_state/desa/pengumuman.ts
+++ b/src/app/admin/(dashboard)/_state/desa/pengumuman.ts
@@ -1,83 +1,246 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import ApiFetch from "@/lib/api-fetch"
-import { Prisma } from "@prisma/client"
-import { toast } from "react-toastify"
-import { proxy } from "valtio"
-import { z } from "zod"
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
 
 const templateFormPengumuman = z.object({
-    judul: z.string().min(3, "Judul minimal 3 karakter"),
-    deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
-    content: z.string().min(3, "Content minimal 3 karakter"),
-    categoryPengumumanId: z.string().nonempty(),
-})
+  judul: z.string().min(3, "Judul minimal 3 karakter"),
+  deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
+  content: z.string().min(3, "Content minimal 3 karakter"),
+  categoryPengumumanId: z.string().nonempty(),
+});
 
-const category = proxy ({
-    findMany: {
-        data: null as
-          | null
-          | Prisma.CategoryPengumumanGetPayload<{ omit: { isActive: true } }>[],
-          async load() {
-            const res = await ApiFetch.api.desa.pengumuman.category["find-many"].get();
-            if (res.status === 200) {
-                category.findMany.data = res.data?.data as any ?? [];
-            }
-          }
-    }
-})
+const category = proxy({
+  findMany: {
+    data: null as
+      | null
+      | Prisma.CategoryPengumumanGetPayload<{ omit: { isActive: true } }>[],
+    async load() {
+      const res = await ApiFetch.api.desa.pengumuman.category[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        category.findMany.data = (res.data?.data as any) ?? [];
+      }
+    },
+  },
+});
 
 type PengumumanForm = Prisma.PengumumanGetPayload<{
-    select: {
-        judul: true;
-        deskripsi: true;
-        content: true;
-        categoryPengumumanId: true;
-    }
-}>
+  select: {
+    judul: true;
+    deskripsi: true;
+    content: true;
+    categoryPengumumanId: true;
+  };
+}>;
 const pengumuman = proxy({
-create: {
+  create: {
     form: {} as PengumumanForm,
     loading: false,
     async create() {
-       const cek = templateFormPengumuman.safeParse(pengumuman.create.form);
-       if (!cek.success) {
+      const cek = templateFormPengumuman.safeParse(pengumuman.create.form);
+      if (!cek.success) {
         const err = `[${cek.error.issues
-        .map((v) => `${v.path.join(".")}`)
-        .join("\n")}] required`;
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
         return toast.error(err);
-       }
-       try {
+      }
+      try {
         pengumuman.create.loading = true;
-        const res = await ApiFetch.api.desa.pengumuman["create"].post(pengumuman.create.form)
+        const res = await ApiFetch.api.desa.pengumuman["create"].post(
+          pengumuman.create.form
+        );
         if (res.status === 200) {
-            pengumuman.findMany.load();
-            return toast.success("success create");
+          pengumuman.findMany.load();
+          return toast.success("success create");
         }
-        console.log(res)
+        console.log(res);
         return toast.error("failed create");
-       } catch (error) {
+      } catch (error) {
         console.log((error as Error).message);
-       } finally{
+      } finally {
         pengumuman.create.loading = false;
-       }
-    }
-},
-findMany: {
+      }
+    },
+  },
+  findMany: {
     data: null as
-    | Prisma.PengumumanGetPayload<{omit: {isActive: true}}>[]
-    | null,
-    async load () {
-        const res = await ApiFetch.api.desa.pengumuman["find-many"].get();
-        console.log(res)
-        if (res.status === 200) {
-            pengumuman.findMany.data = res.data?.data ?? [];
+      | Prisma.PengumumanGetPayload<{ 
+        include: {
+            CategoryPengumuman: true;
         }
-    }
-}
-})
+       }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.desa.pengumuman["find-many"].get();
+      console.log(res);
+      if (res.status === 200) {
+        pengumuman.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  // findUnique: {
+  //   data: null as
+  //   | Prisma.PengumumanGetPayload<{
+  //       include: {
+  //           CategoryPengumuman: true;
+  //       }
+  //   }>
+  //   | null,
+  //   async load(id: string) {
+  //     try {
+  //       const res = await fetch(`/api/desa/pengumuman/${id}`);
+  //       if (res.ok) {
+  //         const data = await res.json();
+  //         pengumuman.findUnique.data = data.data ?? null;
+  //       } else {
+  //         console.error('Failed to fetch pengumuman:', res.statusText);
+  //         pengumuman.findUnique.data = null;
+  //       }
+  //     } catch (error) {
+  //       console.error('Error fetching pengumuman:', error);
+  //       pengumuman.findUnique.data = null;
+  //     }
+  //   },
+  // },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        pengumuman.delete.loading = true;
+
+        const response = await fetch(`/api/desa/pengumuman/delete/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Pengumuman berhasil dihapus");
+          await pengumuman.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus pengumuman");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus pengumuman");
+      } finally {
+        pengumuman.delete.loading = false;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: {} as PengumumanForm,
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(`/api/desa/pengumuman/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const result = await response.json();
+
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            judul: data.judul,
+            deskripsi: data.deskripsi,
+            content: data.content,
+            categoryPengumumanId: data.categoryPengumumanId || "",
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal mengambil data pengumuman");
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error("Terjadi kesalahan saat mengambil data pengumuman");
+      } finally {
+        pengumuman.update.loading = false;
+      }
+    },
+
+    async update() {
+      const cek = templateFormPengumuman.safeParse(pengumuman.update.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+
+      try {
+        pengumuman.update.loading = true;
+
+        const response = await fetch(`/api/desa/pengumuman/${this.id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            judul: this.form.judul,
+            deskripsi: this.form.deskripsi,
+            content: this.form.content,
+            categoryPengumumanId: this.form.categoryPengumumanId,
+          }),
+        });
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
+        }
+
+        const result = await response.json();
+
+        if (result.success) {
+          toast.success("Berhasil update pengumuman");
+          await pengumuman.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal update pengumuman");
+        }
+      } catch (error) {
+        console.error("Error updating pengumuman:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Terjadi kesalahan saat update pengumuman"
+        );
+        return false;
+      } finally {
+        pengumuman.update.loading = false;
+      }
+    },
+  },
+});
 
 const stateDesaPengumuman = proxy({
-    category,
-    pengumuman
-})
-export default stateDesaPengumuman
\ No newline at end of file
+  category,
+  pengumuman,
+});
+export default stateDesaPengumuman;
diff --git a/src/app/admin/(dashboard)/desa/pengumuman/edit/page.tsx b/src/app/admin/(dashboard)/desa/pengumuman/[id]/edit/page.tsx
similarity index 94%
rename from src/app/admin/(dashboard)/desa/pengumuman/edit/page.tsx
rename to src/app/admin/(dashboard)/desa/pengumuman/[id]/edit/page.tsx
index 506ef58f..ccbb4eb3 100644
--- a/src/app/admin/(dashboard)/desa/pengumuman/edit/page.tsx
+++ b/src/app/admin/(dashboard)/desa/pengumuman/[id]/edit/page.tsx
@@ -3,7 +3,7 @@ import colors from '@/con/colors';
 import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
+import { KeamananEditor } from '@/app/admin/(dashboard)/keamanan/_com/keamananEditor';
 
 function EditPengumuman() {
   const router = useRouter();
diff --git a/src/app/admin/(dashboard)/desa/pengumuman/detail/page.tsx b/src/app/admin/(dashboard)/desa/pengumuman/[id]/page.tsx
similarity index 58%
rename from src/app/admin/(dashboard)/desa/pengumuman/detail/page.tsx
rename to src/app/admin/(dashboard)/desa/pengumuman/[id]/page.tsx
index 2cb0d7e1..5090a523 100644
--- a/src/app/admin/(dashboard)/desa/pengumuman/detail/page.tsx
+++ b/src/app/admin/(dashboard)/desa/pengumuman/[id]/page.tsx
@@ -1,15 +1,14 @@
 'use client'
 
-import { Box, Button, Flex, Image, Paper, Stack, Text } from '@mantine/core';
-import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { Box, Button, Paper } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 
 import colors from '@/con/colors';
-// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
-// import stateDashboardBerita from '../../../_state/desa/berita';
+
 
 function DetailPengumuman() {
-  // const pengumumanState = useProxy(stateDashboardpengumuman)
+  // const pengumumanState = useProxy(stateDesaPengumuman)
   // const [modalHapus, setModalHapus] = useState(false)
   // const [selectedId, setSelectedId] = useState<string | null>(null)
   // const params = useParams()
@@ -32,9 +31,7 @@ function DetailPengumuman() {
   // if (!pengumumanState.pengumuman.findUnique.data) {
   //   return (
   //     <Stack py={10}>
-  //       {Array.from({ length: 10 }).map((_, k) => (
-  //         <Skeleton key={k} h={40} />
-  //       ))}
+  //         <Skeleton h={400} />
   //     </Stack>
   //   )
   // }
@@ -47,51 +44,47 @@ function DetailPengumuman() {
         </Button>
       </Box>
       <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
-        <Stack>
+        {/* <Stack>
           <Text fz={"xl"} fw={"bold"}>Detail Pengumuman</Text>
-            <Paper bg={colors['BG-trans']} p={'md'}>
+          {pengumumanState.pengumuman.findUnique.data ? (
+            <Paper key={pengumumanState.pengumuman.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
               <Stack gap={"xs"}>
                 <Box>
                   <Text fw={"bold"} fz={"lg"}>Kategori</Text>
-                  <Text fz={"lg"}>Pendidikan</Text>
+                  <Text fz={"lg"}>{pengumumanState.pengumuman.findUnique.data?.CategoryPengumuman?.name}</Text>
                 </Box>
                 <Box>
                   <Text fw={"bold"} fz={"lg"}>Judul</Text>
-                  <Text fz={"lg"}>Pengumuman Pendidikan</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Deskripsi Singkat</Text>
-                  <Text fz={"lg"}>Pengumuman Pendidikan</Text>
+                  <Text fz={"lg"}>{pengumumanState.pengumuman.findUnique.data?.judul}</Text>
                 </Box>
                 <Box>
                   <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
-                  <Text fz={"lg"}>Pengumuman Pendidikan</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Tanggal</Text>
-                  <Text fz={"lg"}>2025-06-04</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Waktu</Text>
-                  <Text fz={"lg"}>08:00 - 17:00</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Gambar</Text>
-                  <Image w={{ base: 150, md: 150, lg: 150 }} src={"/"} alt="gambar" />
+                  <Text fz={"lg"}>{pengumumanState.pengumuman.findUnique.data?.deskripsi}</Text>
                 </Box>
                 <Box>
                   <Text fw={"bold"} fz={"lg"}>Konten</Text>
-                  <Text fz={"lg"}>Pengumuman Pendidikan</Text>
+                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: pengumumanState.pengumuman.findUnique.data?.content }} />
                 </Box>
                 <Flex gap={"xs"} mt={10}>
                   <Button
-                    onClick={() => router.push("/admin/desa/pengumuman")}
+                    onClick={() => {
+                      if (pengumumanState.pengumuman.findUnique.data) {
+                        setSelectedId(pengumumanState.pengumuman.findUnique.data.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={pengumumanState.pengumuman.delete.loading || !pengumumanState.pengumuman.findUnique.data}
                     color={"red"}
                   >
                     <IconX size={20} />
                   </Button>
                   <Button
-                    onClick={() => router.push("/admin/desa/pengumuman/edit")}
+                   onClick={() => {
+                    if (pengumumanState.pengumuman.findUnique.data) {
+                      router.push(`/admin/desa/pengumuman/${pengumumanState.pengumuman.findUnique.data.id}/edit`);
+                    }
+                   }}
+                    disabled={!pengumumanState.pengumuman.findUnique.data}
                     color={"green"}
                   >
                     <IconEdit size={20} />
@@ -99,7 +92,8 @@ function DetailPengumuman() {
                 </Flex>
               </Stack>
             </Paper>
-        </Stack>
+          ) : null}
+        </Stack> */}
       </Paper>
 
       {/* Modal Konfirmasi Hapus
diff --git a/src/app/admin/(dashboard)/desa/pengumuman/create/page.tsx b/src/app/admin/(dashboard)/desa/pengumuman/create/page.tsx
index e33f7d23..3355f8de 100644
--- a/src/app/admin/(dashboard)/desa/pengumuman/create/page.tsx
+++ b/src/app/admin/(dashboard)/desa/pengumuman/create/page.tsx
@@ -1,52 +1,109 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Box, Button, Group, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { Prisma } from '@prisma/client';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
+import { useProxy } from 'valtio/utils';
+import CreateEditor from '../../../_com/createEditor';
+import stateDesaPengumuman from '../../../_state/desa/pengumuman';
 
 function CreatePengumuman() {
+  const pengumumanState = useProxy(stateDesaPengumuman)
   const router = useRouter();
+
+  const handleSubmit = async () => {
+    await pengumumanState.pengumuman.create.create()
+    resetForm()
+    router.push("/admin/desa/pengumuman")
+  }
+
+  const resetForm = () => {
+    pengumumanState.pengumuman.create.form = {
+      judul: "",
+      deskripsi: "",
+      content: "",
+      categoryPengumumanId: "",
+    };
+  };
   return (
     <Box>
       <Box mb={10}>
         <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25}/>
+          <IconArrowBack color={colors['blue-button']} size={25} />
         </Button>
       </Box>
 
-      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
         <Stack gap={"xs"}>
           <Title order={4}>Create Pengumuman</Title>
           <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
-          placeholder='Masukkan judul'
+            label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
+            placeholder='Masukkan judul'
+            onChange={(val) => {
+              pengumumanState.pengumuman.create.form.judul = val.target.value
+            }}
+          />
+          <SelectCategory
+            onChange={(val) => {
+              pengumumanState.pengumuman.create.form.categoryPengumumanId = val.id;
+            }}
           />
           <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Deskripsi Singkat</Text>}
-          placeholder='Masukkan deskripsi singkat'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Tanggal</Text>}
-          placeholder='Masukkan tanggal'
-          />
-           <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Waktu</Text>}
-          placeholder='Masukkan waktu'
+            label={<Text fw={"bold"} fz={"sm"}>Deskripsi Singkat</Text>}
+            placeholder='Masukkan deskripsi singkat'
+            onChange={(val) => {
+              pengumumanState.pengumuman.create.form.deskripsi = val.target.value
+            }}
           />
           <Box>
-          <Text fw={"bold"} fz={"sm"}>Deskripsi</Text>
-          <KeamananEditor
-          showSubmit={false}
-          />
+            <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
+            <CreateEditor
+              value={pengumumanState.pengumuman.create.form.content}
+              onChange={(htmlContent) => {
+                pengumumanState.pengumuman.create.form.content = htmlContent;
+              }}
+            />
           </Box>
 
           <Group>
-            <Button bg={colors['blue-button']}>Submit</Button>
+            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
           </Group>
-       </Stack>
+        </Stack>
       </Paper>
-   </Box>
+    </Box>
+  );
+}
+
+function SelectCategory({
+  onChange,
+}: {
+  onChange: (value: Prisma.CategoryPengumumanGetPayload<{ select: { name: true; id: true; } }>) => void;
+}) {
+  const categoryState = useProxy(stateDesaPengumuman.category);
+
+  useShallowEffect(() => {
+    categoryState.findMany.load();
+  }, []);
+
+  return (
+    <Select
+      label={<Text fw={"bold"} fz={"sm"}>Kategori</Text>}
+      placeholder='Pilih kategori'
+      data={categoryState.findMany.data?.map((item) => ({
+        label: item.name,
+        value: item.id,
+      }))}
+      onChange={(val) => {
+        const selected = categoryState.findMany.data?.find((item) => item.id === val);
+        if (selected) {
+          onChange(selected);
+        }
+      }}
+      searchable
+      nothingFoundMessage="Tidak ditemukan"
+    />
   );
 }
 
diff --git a/src/app/admin/(dashboard)/desa/pengumuman/page.tsx b/src/app/admin/(dashboard)/desa/pengumuman/page.tsx
index 796ef3cd..ad3df221 100644
--- a/src/app/admin/(dashboard)/desa/pengumuman/page.tsx
+++ b/src/app/admin/(dashboard)/desa/pengumuman/page.tsx
@@ -1,9 +1,14 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Grid, GridCol, Image, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
 import { IconCircleDashedPlus, IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../_com/header';
+import stateDesaPengumuman from '../../_state/desa/pengumuman';
+import { ModalKonfirmasiHapus } from '../../_com/modalKonfirmasiHapus';
+import { useState } from 'react';
 
 
 function Page() {
@@ -20,31 +25,31 @@ function Page() {
 }
 
 function PengumumanList() {
-  // const pengumumanState = useProxy(stateDashboardPengumuman)
-  // const [modalHapus, setModalHapus] = useState(false)
-  // const [selectedId, setSelectedId] = useState<string | null>(null)
+  const pengumumanState = useProxy(stateDesaPengumuman)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
 
-  // useShallowEffect(() => {
-  //   pengumumanState.pengumuman.findMany.load()
-  // }, [])
+  useShallowEffect(() => {
+    pengumumanState.pengumuman.findMany.load()
+  }, [])
 
   const router = useRouter()
 
-  // const handleHapus = () => {
-  //   if (selectedId) {
-  //     pengumumanState.pengumuman.delete.byId(selectedId)
-  //     setModalHapus(false)
-  //     setSelectedId(null)
-  //   }
-  // }
+  const handleHapus = () => {
+    if (selectedId) {
+      pengumumanState.pengumuman.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+    }
+  }
 
-  // if (!pengumumanState.pengumuman.findMany.data) {
-  //   return (
-  //     <Stack py={10}>
-  //       <Skeleton h={500} />
-  //     </Stack>
-  //   )
-  // }
+  if (!pengumumanState.pengumuman.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
 
   return (
     <Box py={10}>
@@ -66,42 +71,39 @@ function PengumumanList() {
                 <TableTr>
                   <TableTh w={250}>Judul</TableTh>
                   <TableTh w={250}>Kategori</TableTh>
-                  <TableTh w={250}>Image</TableTh>
                   <TableTh w={200}>Detail</TableTh>
 
                 </TableTr>
               </TableThead>
               <TableTbody >
-
-                <TableTr>
+                {pengumumanState.pengumuman.findMany.data?.map((item) => (
+                  <TableTr key={item.id}>
                   <TableTd >
                     <Box w={100}>
-                      <Text truncate="end" fz={"sm"}>Judul</Text>
-                    </Box>
-                  </TableTd>
-                  <TableTd >Kesehatan</TableTd>
-                  <TableTd>
-                    <Image w={100} src={"/"} alt="gambar" />
+                      <Text truncate="end" fz={"sm"}>{item.judul}</Text>
+                    </Box>  
                   </TableTd>
+                  <TableTd >{item.CategoryPengumuman?.name}</TableTd>
                   <TableTd>
                     <Button bg={"green"} onClick={() => router.push(`/admin/desa/pengumuman/detail`)}>
                       <IconDeviceImacCog size={25} />
                     </Button>
                   </TableTd>
                 </TableTr>
+                ))}
               </TableTbody>
             </Table>
           </Box>
         </Stack>
       </Paper>
 
-      {/* Modal Konfirmasi Hapus
+      {/* Modal Konfirmasi Hapus */}
       <ModalKonfirmasiHapus
         opened={modalHapus}
         onClose={() => setModalHapus(false)}
         onConfirm={handleHapus}
         text='Apakah anda yakin ingin menghapus berita ini?'
-      /> */}
+      />
     </Box>
   )
 }
diff --git a/src/app/api/[[...slugs]]/_lib/desa/pengumuman/del.ts b/src/app/api/[[...slugs]]/_lib/desa/pengumuman/del.ts
new file mode 100644
index 00000000..4a5c86cd
--- /dev/null
+++ b/src/app/api/[[...slugs]]/_lib/desa/pengumuman/del.ts
@@ -0,0 +1,39 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+const pengumumanDelete = async (context: Context) => {
+    const id = context.params?.id as string;
+
+    if (!id) {
+        return {
+            status: 400,
+            body: "ID tidak ditemukan",
+        }
+    }
+
+    const pengumuman = await prisma.pengumuman.findUnique({
+        where: {id},
+        include: {
+            CategoryPengumuman: true,
+        }
+    })
+
+    if (!pengumuman) {
+        return {
+            status: 404,
+            body: "Pengumuman tidak ditemukan",
+        }
+    }
+
+    await prisma.pengumuman.delete({
+        where: {id},
+    })
+
+    return {
+        status: 200,
+        success: true,
+        message: "Pengumuman berhasil dihapus",
+    }
+}
+
+export default pengumumanDelete
diff --git a/src/app/api/[[...slugs]]/_lib/desa/pengumuman/find-by-id.ts b/src/app/api/[[...slugs]]/_lib/desa/pengumuman/find-by-id.ts
new file mode 100644
index 00000000..3cc93307
--- /dev/null
+++ b/src/app/api/[[...slugs]]/_lib/desa/pengumuman/find-by-id.ts
@@ -0,0 +1,37 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+const pengumumanFindById = async (context: Context) => {
+  const id = context.params?.id as string;
+
+  if (!id) {
+    return {
+      status: 400,
+      body: "ID tidak diberikan",
+    };
+  }
+
+  const pengumuman = await prisma.pengumuman.findUnique({
+    where: { id },
+    include: {
+      CategoryPengumuman: true,
+    },
+  });
+
+  if (!pengumuman) {
+    return {
+      status: 404,
+      body: "Pengumuman tidak ditemukan",
+    };
+  }
+
+  return {
+    status: 200,
+    success: true,
+    message: "Success fetch pengumuman by ID",
+    data: pengumuman,
+  };
+};
+
+export default pengumumanFindById;
+
diff --git a/src/app/api/[[...slugs]]/_lib/desa/pengumuman/find-many.ts b/src/app/api/[[...slugs]]/_lib/desa/pengumuman/find-many.ts
index 394e0ac6..b7574008 100644
--- a/src/app/api/[[...slugs]]/_lib/desa/pengumuman/find-many.ts
+++ b/src/app/api/[[...slugs]]/_lib/desa/pengumuman/find-many.ts
@@ -1,8 +1,23 @@
 import prisma from "@/lib/prisma";
 
 export default async function pengumumanFindMany() {
-    const res = await prisma.pengumuman.findMany();
+  try {
+    const data = await prisma.pengumuman.findMany({
+      where: { isActive: true },
+      include: {
+        CategoryPengumuman: true,
+      },
+    });
     return {
-        data: res,
+      success: true,
+      message: "Success fetch pengumuman",
+      data,
     };
-}
\ No newline at end of file
+  } catch (e) {
+    console.error("Find many error:", e);
+    return {
+      success: false,
+      message: "Failed fetch pengumuman",
+    };
+  }
+}
diff --git a/src/app/api/[[...slugs]]/_lib/desa/pengumuman/index.ts b/src/app/api/[[...slugs]]/_lib/desa/pengumuman/index.ts
index 145aa01c..0b059ea5 100644
--- a/src/app/api/[[...slugs]]/_lib/desa/pengumuman/index.ts
+++ b/src/app/api/[[...slugs]]/_lib/desa/pengumuman/index.ts
@@ -3,10 +3,15 @@ import { pengumumanCreate } from "./create";
 import pengumumanFindMany from "./find-many";
 import { t } from "elysia";
 import pengumumanCategoryFindMany from "./category";
+import pengumumanDelete from "./del";
+import pengumumanFindById from "./find-by-id";
+import pengumumanUpdate from "./updt";
 
 const Pengumuman = new Elysia({ prefix: "/pengumuman", tags: ["Desa/Pengumuman"] })
   .get("/category/find-many", pengumumanCategoryFindMany)
   .get("/find-many", pengumumanFindMany)
+  .get("/:id", pengumumanFindById)
+  .delete("/delete/:id", pengumumanDelete)
   .post("/create", pengumumanCreate, {
     body: t.Object({
       judul: t.String(),
@@ -14,6 +19,15 @@ const Pengumuman = new Elysia({ prefix: "/pengumuman", tags: ["Desa/Pengumuman"]
       content: t.String(),
       categoryPengumumanId: t.Union([t.String(), t.Null()]),
     }),
+  })
+  .put("/:id", pengumumanUpdate, {
+    body: t.Object({
+      id: t.String(),
+      judul: t.String(),
+      deskripsi: t.String(),
+      content: t.String(),
+      categoryPengumumanId: t.Union([t.String(), t.Null()]),
+    }),
   });
 
 export default Pengumuman;  
\ No newline at end of file
diff --git a/src/app/api/[[...slugs]]/_lib/desa/pengumuman/updt.ts b/src/app/api/[[...slugs]]/_lib/desa/pengumuman/updt.ts
new file mode 100644
index 00000000..9a5f2d15
--- /dev/null
+++ b/src/app/api/[[...slugs]]/_lib/desa/pengumuman/updt.ts
@@ -0,0 +1,39 @@
+import prisma from "@/lib/prisma";
+import { Prisma } from "@prisma/client";
+import { Context } from "elysia";
+
+type FormUpdate = Prisma.PengumumanGetPayload<{
+    select: {
+        id: true;
+        judul: true;
+        deskripsi: true;
+        content: true;
+        categoryPengumumanId: true;
+        imageId: true;
+    };
+}>;
+
+async function pengumumanUpdate(context: Context) {
+    const body = context.body as FormUpdate;
+
+    await prisma.pengumuman.update({
+        where: { id: body.id },
+        data: {
+            judul: body.judul,
+            deskripsi: body.deskripsi,
+            content: body.content,
+            categoryPengumumanId: body.categoryPengumumanId,
+        },
+    });
+
+    return {
+        success: true,
+        message: "Success update pengumuman",
+        data: {
+            ...body,
+        },
+    };
+}
+
+export default pengumumanUpdate;
+