diff --git a/frontend/src/components/navigator.tsx b/frontend/src/components/navigator.tsx
index 96b20b4..8d799e2 100644
--- a/frontend/src/components/navigator.tsx
+++ b/frontend/src/components/navigator.tsx
@@ -568,11 +568,9 @@ function NotificationButton() {
 
   return (
     <div className="indicator">
-      {count > 0 && (
-        <span className="indicator-item badge badge-secondary badge-sm">
-          {count > 99 ? "99+" : count}
-        </span>
-      )}
+      {count > 0 && <span className="bg-error text-white text-xs rounded-full px-1 indicator-item">
+        {count > 99 ? "99+" : count}
+      </span>}
       <button
         className="btn btn-ghost btn-circle"
         onClick={() => {
diff --git a/frontend/src/pages/notification_page.tsx b/frontend/src/pages/notification_page.tsx
index 155ede7..54b5a18 100644
--- a/frontend/src/pages/notification_page.tsx
+++ b/frontend/src/pages/notification_page.tsx
@@ -11,6 +11,7 @@ import Badge from "../components/badge.tsx";
 import Markdown from "react-markdown";
 import { ErrorAlert } from "../components/alert.tsx";
 import { app } from "../app.ts";
+import { useNavigator } from "../components/navigator.tsx";
 
 export default function NotificationPage() {
   const [activities, setActivities] = useState<Activity[]>([]);
@@ -18,6 +19,7 @@ export default function NotificationPage() {
   const maxPageRef = useRef(1);
   const isLoadingRef = useRef(false);
   const { t } = useTranslation();
+  const navigator = useNavigator();
 
   const fetchNextPage = useCallback(async () => {
     if (isLoadingRef.current || pageRef.current >= maxPageRef.current) return;
@@ -42,7 +44,8 @@ export default function NotificationPage() {
 
   useEffect(() => {
     network.resetUserNotificationsCount();
-  }, []);
+    navigator.refresh();
+  }, [navigator]);
 
   useEffect(() => {
     document.title = t("Notifications");