diff --git a/src/module/announcement/component/list_announcement.tsx b/src/module/announcement/component/list_announcement.tsx
index 3c34fd9..480a7fb 100644
--- a/src/module/announcement/component/list_announcement.tsx
+++ b/src/module/announcement/component/list_announcement.tsx
@@ -1,6 +1,6 @@
 'use client'
 import { WARNA } from '@/module/_global';
-import { ActionIcon, Box, Group, Text, TextInput } from '@mantine/core';
+import { ActionIcon, Box, Center, Divider, Grid, Group, Text, TextInput } from '@mantine/core';
 import React from 'react';
 import { TfiAnnouncement } from "react-icons/tfi";
 import { HiMagnifyingGlass } from 'react-icons/hi2';
@@ -10,42 +10,58 @@ const dataPengumuman = [
    {
       id: 1,
       name: 'Lembaga Pengkreditan Desa',
-      desc: 'Diharapkan semua untuk melakukan upacara ben...'
+      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 ben...'
+      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 ben...'
+      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 ben...'
+      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 ben...'
+      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 ben...'
+      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 ben...'
+      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...'
+      desc: 'Diharapkan semua untuk melakukan upacara ben...',
+      grup: 'Dinas',
+      tgl: '7 Juli 2024'
    },
 ]
 
@@ -68,22 +84,29 @@ export default function ListAnnouncement() {
          />
          {dataPengumuman.map((v, i) => {
             return (
-               <Box pt={20} key={i} onClick={() => {
-                  router.push(`/announcement/${v.id}`)
-               }}>
-                  <Group align='center' style={{
-                     borderBottom: `1px solid #D9D9D9`,
-                     padding: 10,
-                  }} >
-                     <Box>
-                        <ActionIcon variant="light" bg={'#FCAA4B'} size={50} radius={100} aria-label="icon">
-                           <TfiAnnouncement color={WARNA.biruTua} size={25} />
-                        </ActionIcon>
-                     </Box>
-                     <Box>
-                        <Text fw={'bold'} c={WARNA.biruTua}>{v.name}</Text>
-                     </Box>
-                  </Group>
+               <Box  key={i} mt={15}>
+                  <Box onClick={() => {
+                     router.push(`/announcement/${v.id}`)
+                  }}>
+                     <Grid>
+                        <Grid.Col span={2}>
+                           <Center>
+                              <ActionIcon variant="light" bg={'#FCAA4B'} size={50} radius={100} aria-label="icon">
+                                 <TfiAnnouncement color={WARNA.biruTua} size={25} />
+                              </ActionIcon>
+                           </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>
+                        </Grid.Col>
+                     </Grid>
+                  </Box>
+                  <Divider my={15}/>
                </Box>
             )
          })}