diff --git a/app/frontend/src/components/messages/messages.tsx b/app/frontend/src/components/messages/messages.tsx
index fea09b63..10b75ece 100644
--- a/app/frontend/src/components/messages/messages.tsx
+++ b/app/frontend/src/components/messages/messages.tsx
@@ -4,6 +4,7 @@ import { useLastOpenTime } from '../../hooks/use-lastopen';
 import { useMessageReceiver } from '../../hooks/use-messagereceiver';
 import Message from '../message/message';
 import style from './messages.css';
+import { useEffect } from 'preact/hooks';
 
 const Messages: FunctionalComponent = () => {
     const messages = useMessageReceiver();
@@ -12,6 +13,12 @@ const Messages: FunctionalComponent = () => {
     const newMessages = messages.filter(e => !(e.receivedAt <= lastOpenTime));
     const oldMessages = messages.filter(e => e.receivedAt <= lastOpenTime);
 
+    useEffect(() => {
+        if (navigator && navigator.clearAppBadge) {
+            navigator.clearAppBadge();
+        }
+    }, [messages]);
+
     return (<div class={style.content}>
         <div class={style.main}>
             <ul class={style.messagelist}>
diff --git a/app/frontend/src/hooks/use-messagereceiver.ts b/app/frontend/src/hooks/use-messagereceiver.ts
index 1409dd8b..58b17760 100644
--- a/app/frontend/src/hooks/use-messagereceiver.ts
+++ b/app/frontend/src/hooks/use-messagereceiver.ts
@@ -16,6 +16,7 @@ export const useMessageReceiver = () => {
     useEffect(() => {
         database && database.getAll('messages').then(savedMessages => setMessages(sortMessages(savedMessages))).catch(console.warn);
         database && setAllMessagesAsRead(database as unknown as NotifyDatabase);
+        navigator.clearAppBadge && navigator.clearAppBadge();
     }, [database, setMessages]);
 
     useEffect(() => {
diff --git a/app/frontend/src/sw.js b/app/frontend/src/sw.js
index 8d474d64..e3854357 100644
--- a/app/frontend/src/sw.js
+++ b/app/frontend/src/sw.js
@@ -92,6 +92,9 @@ self.addEventListener('push', (event) => {
 self.addEventListener('notificationclick', (e) => {
     const notification = e.notification;
     const load = async () => {
+        if (navigator && navigator.clearAppBadge) {
+            navigator.clearAppBadge();
+        }
         try {
             const clientList = await clients.matchAll();
             if (clientList.length > 0) {