diff --git a/api.http b/api.http
index 41e64e4..4249ab7 100644
--- a/api.http
+++ b/api.http
@@ -190,7 +190,10 @@ Content-Type: application/json
 }
 
 ###
-GET http://localhost:3000/api/announcement/get?path=get-all-announcement&groupID=1&villageID=121212&createBy=111&divisionID=1 HTTP/1.1
+GET http://localhost:3000/api/announcement/get?path=get-all-announcement HTTP/1.1
+
+###
+GET http://localhost:3000/api/announcement/get?path=get-all-announcement&divisionI=1 HTTP/1.1
 
 ###
 GET http://localhost:3000/api/announcement/get?path=get-one-announcement&announcementId=clz6kqzvt000eb3mle1nyz6fd HTTP/1.1
diff --git a/src/module/announcement/api/get/getAllAnnouncement.ts b/src/module/announcement/api/get/getAllAnnouncement.ts
index 328760c..c4042b0 100644
--- a/src/module/announcement/api/get/getAllAnnouncement.ts
+++ b/src/module/announcement/api/get/getAllAnnouncement.ts
@@ -1,42 +1,33 @@
 import { prisma } from "@/module/_global";
+import { funGetUserByCookies } from "@/module/auth";
+import _ from "lodash";
+import moment from "moment";
+import "moment/locale/id";
 import { NextRequest } from "next/server";
 
 export async function getAllAnnouncement(req: NextRequest) {
   try {
-    const searchParams = req.nextUrl.searchParams;
-    const groupID = searchParams.get("groupID");
-    const villageID = searchParams.get("villageID");
-    const createBy = searchParams.get("createBy");
-    const divisionID = searchParams.get("divisionID");
+    const user = await funGetUserByCookies();
+    const villageId = user.idVillage
     const announcements = await prisma.announcement.findMany({
       where: {
-        idVillage: String(villageID),
-        createdBy: String(createBy),
+        idVillage: String(villageId),
         isActive: true,
       },
       select: {
         id: true,
         title: true,
         desc: true,
+        createdAt: true,
       },
     });
 
-    const announcementMember = await prisma.announcementMember.findMany({
-      where: {
-        idGroup: String(groupID),
-        idDivision: String(divisionID),
-        idAnnouncement: {
-          in: announcements.map((announcement: any) => announcement.id),
-        },
-      },
-      select: {
-        idAnnouncement: true,
-        idGroup: true,
-        idDivision: true,
-      },
-    });
+    const allData = announcements.map((v: any) => ({
+      ..._.omit(v, ["createdAt"]),
+      createdAt: moment(v.createdAt).format("LL")
+    }))
 
-    return Response.json({ announcements, announcementMember });
+    return Response.json(allData);
   } catch (error) {
     console.error(error);
     return Response.json(
diff --git a/src/module/announcement/component/list_announcement.tsx b/src/module/announcement/component/list_announcement.tsx
index 480a7fb..f4c4eef 100644
--- a/src/module/announcement/component/list_announcement.tsx
+++ b/src/module/announcement/component/list_announcement.tsx
@@ -1,72 +1,38 @@
 'use client'
-import { WARNA } from '@/module/_global';
-import { ActionIcon, Box, Center, Divider, Grid, Group, Text, TextInput } from '@mantine/core';
-import React from 'react';
+import { API_ADDRESS, WARNA } from '@/module/_global';
+import { ActionIcon, Box, Center, Divider, Grid, Group, Spoiler, Text, TextInput } from '@mantine/core';
+import React, { useState } from 'react';
 import { TfiAnnouncement } from "react-icons/tfi";
 import { HiMagnifyingGlass } from 'react-icons/hi2';
 import { useRouter } from 'next/navigation';
+import { useShallowEffect } from '@mantine/hooks';
 
-const dataPengumuman = [
-   {
-      id: 1,
-      name: 'Lembaga Pengkreditan Desa',
-      desc: 'Diharapkan semua untuk melakukan upacara terima kasih yang sangat banyak',
-      grup: 'Dinas',
-      tgl: '7 Juli 2024'
-   },
-   {
-      id: 2,
-      name: 'Lembaga Pengkreditan Desa',
-      desc: 'Diharapkan semua untuk melakukan upacara terima kasih yang sangat banyak',
-      grup: 'Dinas',
-      tgl: '7 Juli 2024'
-   },
-   {
-      id: 3,
-      name: 'Lembaga Pengkreditan Desa',
-      desc: 'Diharapkan semua untuk melakukan upacara terima kasih yang sangat banyak',
-      grup: 'Adat',
-      tgl: '7 Juli 2024'
-   },
-   {
-      id: 4,
-      name: 'Lembaga Pengkreditan Desa',
-      desc: 'Diharapkan semua untuk melakukan upacara terima kasih yang sangat banyak',
-      grup: 'Dinas',
-      tgl: '7 Juli 2024'
-   },
-   {
-      id: 5,
-      name: 'Lembaga Pengkreditan Desa',
-      desc: 'Diharapkan semua untuk melakukan upacara terima kasih yang sangat banyak',
-      grup: 'PKK',
-      tgl: '7 Juli 2024'
-   },
-   {
-      id: 6,
-      name: 'Lembaga Pengkreditan Desa',
-      desc: 'Diharapkan semua untuk melakukan upacara terima kasih yang sangat banyak',
-      grup: 'Karang Taruna',
-      tgl: '7 Juli 2024'
-   },
-   {
-      id: 7,
-      name: 'Lembaga Pengkreditan Desa',
-      desc: 'Diharapkan semua untuk melakukan upacara terima kasih yang sangat banyak',
-      grup: 'Dinas',
-      tgl: '7 Juli 2024'
-   },
-   {
-      id: 8,
-      name: 'Lembaga Pengkreditan Desa',
-      desc: 'Diharapkan semua untuk melakukan upacara ben...',
-      grup: 'Dinas',
-      tgl: '7 Juli 2024'
-   },
-]
+type dataAnnouncement = {
+   id: string,
+   title: string,
+   desc: string,
+   createdAt: string
+}
 
 export default function ListAnnouncement() {
+   const [isData, setIsData] = useState<dataAnnouncement[]>([])
    const router = useRouter()
+
+   async function fetchGetAllAnnouncement() {
+      try {
+         const res = await fetch(`${API_ADDRESS.apiGetAllAnnouncement}`)
+         const data = await res.json()
+         setIsData(data)
+      } catch (error) {
+         console.error(error)
+         throw new Error("Error")
+      }
+   }
+
+   useShallowEffect(() => {
+      fetchGetAllAnnouncement()
+   }, [])
+
    return (
       <Box p={20}>
          <TextInput
@@ -82,12 +48,10 @@ export default function ListAnnouncement() {
             leftSection={<HiMagnifyingGlass size={20} />}
             placeholder="Pencarian"
          />
-         {dataPengumuman.map((v, i) => {
+         {isData.map((v, i) => {
             return (
-               <Box  key={i} mt={15}>
-                  <Box onClick={() => {
-                     router.push(`/announcement/${v.id}`)
-                  }}>
+               <Box key={i} mt={15}>
+                  <Box >
                      <Grid>
                         <Grid.Col span={2}>
                            <Center>
@@ -97,16 +61,22 @@ export default function ListAnnouncement() {
                            </Center>
                         </Grid.Col>
                         <Grid.Col span={10}>
-                           <Text fw={'bold'} c={WARNA.biruTua}>{v.name}</Text>
-                           <Text  c={WARNA.biruTua} truncate={'end'}>{v.desc}</Text>
-                           <Group justify='space-between' mt={5}>
-                              <Text fw={'lighter'} c={WARNA.biruTua} fz={13}>{v.grup}</Text>
-                              <Text fw={'lighter'} c={WARNA.biruTua} fz={13}>{v.tgl}</Text>
+                           <Group justify='space-between' mb={5} onClick={() => {
+                              router.push(`/announcement/${v.id}`)
+                           }}>
+                              <Text fw={'bold'} c={WARNA.biruTua}>{v.title}</Text>
+                              <Text fw={'lighter'} c={WARNA.biruTua} fz={13}>{v.createdAt}</Text>
                            </Group>
+                           {/* <Text c={WARNA.biruTua} lineClamp={2}>{v.desc}</Text> */}
+                           <Spoiler maxHeight={50} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
+                              <Text c={WARNA.biruTua} onClick={() => {
+                                 router.push(`/announcement/${v.id}`)
+                              }} >{v.desc}</Text>
+                           </Spoiler>
                         </Grid.Col>
                      </Grid>
                   </Box>
-                  <Divider my={15}/>
+                  <Divider my={15} />
                </Box>
             )
          })}