diff --git a/src/common/hook/useNotification.ts b/src/common/hook/useNotification.ts
deleted file mode 100644
index 9a70d85a..00000000
--- a/src/common/hook/useNotification.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { useEffect, useState } from "react";
-// import { useNavigate } from "react-router-dom";
-const isSafariBrowser = () =>
-  navigator.userAgent.indexOf("Safari") > -1 && navigator.userAgent.indexOf("Chrome") <= -1;
-export default function useNotification() {
-  // const navigate = useNavigate();
-  // granted default denied  /
-  const [status, setStatus] = useState(Notification.permission);
-  const [pageVisible, setPageVisible] = useState(true);
-  useEffect(() => {
-    const visibleChangeHandler = () => {
-      setPageVisible(document.visibilityState === "visible");
-    };
-    const notifyPermissionChangeHandler = (state) => {
-      setStatus(state);
-    };
-    document.addEventListener("visibilitychange", visibleChangeHandler);
-    if (!isSafariBrowser) {
-      navigator.permissions.query({ name: "notifications" }).then(function (permissionStatus) {
-        console.log("notifications permission status is ", permissionStatus.state);
-        permissionStatus.onchange = notifyPermissionChangeHandler.bind(
-          null,
-          permissionStatus.state
-        );
-      });
-    }
-    return () => {
-      document.removeEventListener("visibilitychange", visibleChangeHandler);
-    };
-  }, []);
-  const enableNotification = () => {
-    if (status !== "granted") {
-      Notification.requestPermission().then((permission) => {
-        console.log(permission);
-        setStatus(permission);
-      });
-    }
-  };
-  const showNotification = (payload = {}) => {
-    console.log("show notify", payload, pageVisible);
-    if (status !== "granted" || pageVisible) return;
-    const {
-      title = "New Message",
-      body = "You have one new message",
-      icon = "https://static.nicegoodthings.com/project/ext/webrowse.logo.png"
-    } = payload;
-    new Notification(title, { body, icon });
-    // const n = new Notification(title, { body, icon });
-    // n.onclick = (evt) => {
-    //   const { data } = evt.target;
-
-    //   console.log("notify evt", evt);
-    //   if (data && data.path) {
-    //     navigate(data.path);
-    //   }
-    // };
-  };
-  return { status, enableNotification, showNotification };
-}
diff --git a/src/routes/setting/Notifications.tsx b/src/routes/setting/Notifications.tsx
deleted file mode 100644
index 6806b43e..00000000
--- a/src/routes/setting/Notifications.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import styled from "styled-components";
-import useNotification from "../../common/hook/useNotification";
-import StyledToggle from "../../common/component/styled/Toggle";
-import Label from "../../common/component/styled/Label";
-
-const StyledWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-`;
-
-export default function Notifications() {
-  const { status, enableNotification } = useNotification();
-  const handleEnableNotify = () => {
-    if (status !== "granted") {
-      enableNotification();
-    }
-  };
-
-  return (
-    <StyledWrapper>
-      <Label>Notification Setting:</Label>
-      <StyledToggle data-checked={status == "granted"} onClick={handleEnableNotify} />
-    </StyledWrapper>
-  );
-}
diff --git a/src/routes/setting/navs.tsx b/src/routes/setting/navs.tsx
index 21862030..db4e0a18 100644
--- a/src/routes/setting/navs.tsx
+++ b/src/routes/setting/navs.tsx
@@ -24,11 +24,6 @@ const navs = [
         component: <ManageMembers />,
         admin: true
       }
-      // {
-      //   name: "notification",
-      //   title: "Notification",
-      //   component: <Notifications />,
-      // },
     ]
   },
   {