diff --git a/src/module/_global/components/wrap_layout.tsx b/src/module/_global/components/wrap_layout.tsx
index 816c315..d0cfdb7 100644
--- a/src/module/_global/components/wrap_layout.tsx
+++ b/src/module/_global/components/wrap_layout.tsx
@@ -6,6 +6,7 @@ import { useEffect, useState } from "react";
 import { useWibuRealtime } from "wibu-realtime";
 import NotificationCustome from "./notification_custome";
 import { useRouter } from "next/navigation";
+import { globalParamJumlahNotif } from "@/module/home";
 
 export default function WrapLayout({ children, role, theme, user }: { children: React.ReactNode, role: any, theme: any, user: any }) {
    const router = useRouter()
@@ -13,6 +14,7 @@ export default function WrapLayout({ children, role, theme, user }: { children:
    const tema = useHookstate(TEMA)
    const notifLoadPage = useHookstate(globalNotifPage)
    const [tampilNotif, setTampilNotif] = useState(false)
+   const paramNotif = useHookstate(globalParamJumlahNotif)
    const [data, setData] = useWibuRealtime({
       WIBU_REALTIME_TOKEN: keyWibu,
       project: "sdm"
@@ -27,6 +29,7 @@ export default function WrapLayout({ children, role, theme, user }: { children:
    useShallowEffect(() => {
       if (data && data.some((i: any) => i.idUserTo == user)) {
          setTampilNotif(true)
+         paramNotif.set(!paramNotif.get())
          setTimeout(() => {
             setTampilNotif(false);
          }, 4000);
@@ -40,7 +43,6 @@ export default function WrapLayout({ children, role, theme, user }: { children:
 
    return (
       <>
-         {/* {JSON.stringify(data)} */}
          {
             tampilNotif &&
             <NotificationCustome
@@ -50,7 +52,6 @@ export default function WrapLayout({ children, role, theme, user }: { children:
                onClose={() => { '' }}
             />
          }
-
          {children}
       </>
    );
diff --git a/src/module/home/index.ts b/src/module/home/index.ts
index ebd8e75..ea9c7e8 100644
--- a/src/module/home/index.ts
+++ b/src/module/home/index.ts
@@ -1,4 +1,5 @@
 import { funGetHome } from "./lib/api_home";
+import { globalParamJumlahNotif } from "./lib/val_home";
 import ViewDetailFeature from "./ui/view_detail_feature";
 import ViewHome from "./ui/view_home";
 import ViewNotification from "./ui/view_notification";
@@ -8,4 +9,5 @@ export { ViewHome }
 export { ViewDetailFeature }
 export { ViewSearch }
 export { ViewNotification }
-export { funGetHome }
\ No newline at end of file
+export { funGetHome }
+export { globalParamJumlahNotif }
\ No newline at end of file
diff --git a/src/module/home/lib/val_home.ts b/src/module/home/lib/val_home.ts
new file mode 100644
index 0000000..8bb1e91
--- /dev/null
+++ b/src/module/home/lib/val_home.ts
@@ -0,0 +1,3 @@
+import { hookstate } from "@hookstate/core";
+
+export const globalParamJumlahNotif = hookstate<boolean>(false)
diff --git a/src/module/home/ui/header_home.tsx b/src/module/home/ui/header_home.tsx
index d0fadaa..3ccd63a 100644
--- a/src/module/home/ui/header_home.tsx
+++ b/src/module/home/ui/header_home.tsx
@@ -2,22 +2,26 @@
 import { LayoutNavbarHome, TEMA } from "@/module/_global";
 import { useHookstate } from "@hookstate/core";
 import { ActionIcon, Box, Group, Indicator, Text } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import toast from "react-hot-toast";
 import { HiMagnifyingGlass, HiOutlineBell, HiOutlineUser } from "react-icons/hi2";
 import { funGetHome } from "../lib/api_home";
-import { useShallowEffect } from "@mantine/hooks";
+import { globalParamJumlahNotif } from "../lib/val_home";
 
 export default function HeaderHome() {
    const router = useRouter()
    const tema = useHookstate(TEMA)
    const [isDesa, setDesa] = useState("")
    const [isNotif, setNotif] = useState(0)
+   const paramNotif = useHookstate(globalParamJumlahNotif)
+   const [loading, setLoading] = useState(true)
 
 
    const fetchData = async () => {
       try {
+         setLoading(true)
          const response = await funGetHome('?cat=header')
          if (response.success) {
             setDesa(response.data.village)
@@ -28,6 +32,8 @@ export default function HeaderHome() {
       } catch (error) {
          toast.error("Gagal mendapatkan data, coba lagi nanti");
          console.error(error);
+      } finally {
+         setLoading(false)
       }
    };
 
@@ -36,6 +42,12 @@ export default function HeaderHome() {
       fetchData();
    }, []);
 
+   useShallowEffect(() => {
+      if (!loading) {
+         setNotif(isNotif + 1)
+      }
+   }, [paramNotif.get()])
+
 
    return (
       <LayoutNavbarHome>