diff --git a/public/assets/img/announcement.jpg b/public/assets/img/announcement.jpg
new file mode 100644
index 0000000..f2463f0
Binary files /dev/null and b/public/assets/img/announcement.jpg differ
diff --git a/src/app/api/version-app/route.ts b/src/app/api/version-app/route.ts
index ececd60..de3d185 100644
--- a/src/app/api/version-app/route.ts
+++ b/src/app/api/version-app/route.ts
@@ -2,7 +2,7 @@ import { NextResponse } from "next/server";
 
 export async function GET(request: Request) {
    try {
-      return NextResponse.json({ success: true, version: "1.3.1", tahap: "beta", update: "- update baru : menampilkan notifikasi pengumuman setelah login; - fix random nomer kode otp 4 digit" }, { status: 200 });
+      return NextResponse.json({ success: true, version: "1.3.2", tahap: "beta", update: "- update baru : menampilkan notifikasi pengumuman setelah login (fixed tampilan); - fix random nomer kode otp 4 digit" }, { status: 200 });
    } catch (error) {
       console.error(error);
       return NextResponse.json({ success: false, version: "Gagal mendapatkan version, coba lagi nanti (error: 500)", reason: (error as Error).message, }, { status: 500 });
diff --git a/src/module/_global/components/notification_custome_center.tsx b/src/module/_global/components/notification_custome_center.tsx
new file mode 100644
index 0000000..f40a956
--- /dev/null
+++ b/src/module/_global/components/notification_custome_center.tsx
@@ -0,0 +1,105 @@
+"use client"
+import { useHookstate } from '@hookstate/core';
+import { Box, Button, Center, Flex, Image, rem, SimpleGrid, Text, Transition } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { useState } from 'react';
+import { IoCloseOutline } from 'react-icons/io5';
+import { TEMA } from '../bin/val_global';
+
+export default function NotificationCustomeCenter({ title, desc, onClick }: { title: string, desc: string, onClick: (val: string) => void, }) {
+   const [opened, setOpened] = useState(false);
+   const tema = useHookstate(TEMA)
+
+   useShallowEffect(() => {
+      const timer = setTimeout(() => {
+         setOpened(true);
+      }, 50);
+      return () => clearTimeout(timer);
+   }, []);
+
+   function reloadData() {
+      setOpened(false)
+   }
+   return (
+      <>
+         <Center>
+            <Transition
+               mounted={opened}
+               transition="fade-down"
+               duration={400}
+               timingFunction="ease"
+            >
+               {(state) => (
+                  <div
+                     style={{
+                        ...state,
+                        zIndex: 999,
+                        position: 'fixed',
+                        flex: 1,
+                        display: 'flex',
+                        margin: 0,
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        top: '30%'
+                     }}
+                  >
+                     <Box p={rem(15)} w={"90%"} style={{
+                        maxWidth: rem(450),
+                        zIndex: 999,
+                        backgroundColor: "#ffffff",
+                        borderRadius: 15,
+                        border: `1px solid ${tema.get().bgTotalKegiatan}`
+                     }}>
+                        <Flex justify={'flex-end'} align={"center"}>
+                           <IoCloseOutline onClick={reloadData} size={25} />
+                        </Flex>
+                        <Flex
+                           mih={50}
+                           gap="xs"
+                           justify="center"
+                           align="center"
+                           direction="column"
+                           wrap="wrap"
+                        >
+                           <Image
+                              style={{
+                                 maxWidth: '30%',
+                                 maxHeight: '30%',
+                              }}
+                              fit="contain"
+                              alt={'pengumuman'}
+                              src={"/assets/img/announcement.jpg"}
+                           />
+                           <Text size="xl" fw={500} ta="center">PENGUMUMAN</Text>
+                           <Text size="sm" ta="center">{desc}</Text>
+                           <SimpleGrid cols={2} spacing="xs" w={'90%'}>
+                              <Button
+                                 fullWidth
+                                 radius="md"
+                                 onClick={() => {
+                                    setOpened(false)
+                                    onClick('check')
+                                 }}
+                              >
+                                 Periksa Detail
+                              </Button>
+                              <Button
+                                 fullWidth
+                                 radius="md"
+                                 onClick={() => {
+                                    setOpened(false)
+                                    onClick('read')
+                                 }}
+                              >
+                                 Tandai Telah Dibaca
+                              </Button>
+                           </SimpleGrid>
+                        </Flex>
+                     </Box>
+                  </div>
+               )}
+            </Transition>
+         </Center >
+      </>
+   );
+}
diff --git a/src/module/home/ui/notification_announcement.tsx b/src/module/home/ui/notification_announcement.tsx
index c3edaf0..b37a55e 100644
--- a/src/module/home/ui/notification_announcement.tsx
+++ b/src/module/home/ui/notification_announcement.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { NotificationCustome } from "@/module/_global";
+import NotificationCustomeCenter from "@/module/_global/components/notification_custome_center";
 import { useShallowEffect } from "@mantine/hooks";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
@@ -21,10 +21,6 @@ export default function NotificationAnnouncement() {
          }
       } catch (error) {
          console.error(error);
-      } finally {
-         setTimeout(() => {
-            setTampilNotif(false);
-         }, 6000);
       }
    }
 
@@ -32,11 +28,13 @@ export default function NotificationAnnouncement() {
       fetchData();
    }, []);
 
-   async function onClickNotif(category: string, idContent: string, idData: string) {
+   async function onClickNotif(category: string, idContent: string, idData: string, action: string) {
       try {
          const response = await funReadNotification({ id: idData });
          if (response.success) {
-            router.push(`/${category}/${idContent}`);
+            if (action == "check") {
+               router.push(`/${category}/${idContent}`);
+            }
          } else {
             toast.error(response.message);
          }
@@ -46,15 +44,15 @@ export default function NotificationAnnouncement() {
       }
    }
 
+
    return (
       <>
          {
             tampilNotif &&
-            <NotificationCustome
+            <NotificationCustomeCenter
                title={isData[0]?.title}
                desc={isData[0]?.desc}
-               onClick={() => { onClickNotif(isData[0]?.category, isData[0]?.idContent, isData[0]?.id) }}
-               onClose={() => { '' }}
+               onClick={(val) => { onClickNotif(isData[0]?.category, isData[0]?.idContent, isData[0]?.id, val) }}
             />
          }
       </>