diff --git a/src/app/hooks/useRoomEventReaders.ts b/src/app/hooks/useRoomEventReaders.ts
index 6222bf92..6c315f50 100644
--- a/src/app/hooks/useRoomEventReaders.ts
+++ b/src/app/hooks/useRoomEventReaders.ts
@@ -1,5 +1,6 @@
 import { Room, RoomEvent, RoomEventHandlerMap } from 'matrix-js-sdk';
 import { useEffect, useState } from 'react';
+import { getUnreadInfo } from '../utils/room';
 
 const getEventReaders = (room: Room, evtId?: string) => {
   if (!evtId) return [];
@@ -21,7 +22,7 @@ const getEventReaders = (room: Room, evtId?: string) => {
 
 export const useRoomEventReaders = (room: Room, eventId?: string): string[] => {
   const [readers, setReaders] = useState<string[]>(() => getEventReaders(room, eventId));
-
+  const unreadInfo = getUnreadInfo(room);
   useEffect(() => {
     setReaders(getEventReaders(room, eventId));
 
@@ -46,11 +47,13 @@ export const useRoomEventReaders = (room: Room, eventId?: string): string[] => {
 
     room.on(RoomEvent.Receipt, handleReceipt);
     room.on(RoomEvent.LocalEchoUpdated, handleLocalEcho);
+
+    navigator.setAppBadge(unreadInfo.total);
     return () => {
       room.removeListener(RoomEvent.Receipt, handleReceipt);
       room.removeListener(RoomEvent.LocalEchoUpdated, handleLocalEcho);
     };
-  }, [room, eventId]);
+  }, [room, eventId, unreadInfo.total]);
 
   return readers;
 };
diff --git a/src/app/pages/client/ClientNonUIFeatures.tsx b/src/app/pages/client/ClientNonUIFeatures.tsx
index 170bc03b..09dda9dd 100644
--- a/src/app/pages/client/ClientNonUIFeatures.tsx
+++ b/src/app/pages/client/ClientNonUIFeatures.tsx
@@ -212,7 +212,7 @@ function MessageNotifications() {
       ) {
         return;
       }
-
+      navigator.setAppBadge(unreadInfo.total);
       if (showNotifications && notificationPermission('granted')) {
         const avatarMxc =
           room.getAvatarFallbackMember()?.getMxcAvatarUrl() ?? room.getMxcAvatarUrl();