diff --git a/webapp/assets/_new/icons/svgs/chat-bubble.svg b/webapp/assets/_new/icons/svgs/chat-bubble.svg
new file mode 100644
index 000000000..377b52f2f
--- /dev/null
+++ b/webapp/assets/_new/icons/svgs/chat-bubble.svg
@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>chat-bubble</title>
+<g data-name="Chat"><path d="M27.23,24.91A9,9,0,0,0,22.44,9.52,8.57,8.57,0,0,0,21,9.41a8.94,8.94,0,0,0-8.92,10.14c0,.1,0,.2,0,.29a9,9,0,0,0,.22,1l0,.11a8.93,8.93,0,0,0,.38,1l.13.28a9,9,0,0,0,.45.83l.07.14a9.13,9.13,0,0,1-2.94-.36,1,1,0,0,0-.68,0L7,24.13l.54-1.9a1,1,0,0,0-.32-1,9,9,0,0,1,11.27-14,1,1,0,0,0,1.23-1.58A10.89,10.89,0,0,0,13,3.25a11,11,0,0,0-7.5,19l-1,3.34A1,1,0,0,0,5.9,26.82l4.35-1.93a11,11,0,0,0,4.68.16A9,9,0,0,0,21,27.41a8.81,8.81,0,0,0,2.18-.27l3.41,1.52A1,1,0,0,0,28,27.48Zm-1.77-1.1a1,1,0,0,0-.32,1L25.45,26l-1.79-.8a1,1,0,0,0-.41-.09,1,1,0,0,0-.29,0,6.64,6.64,0,0,1-2,.29,7,7,0,0,1,0-14,6.65,6.65,0,0,1,1.11.09,7,7,0,0,1,3.35,12.31Z"></path><path d="M17.82 17.08H17a1 1 0 0 0 0 2h.82a1 1 0 0 0 0-2zM21.41 17.08h-.82a1 1 0 0 0 0 2h.82a1 1 0 0 0 0-2zM25 17.08h-.82a1 1 0 0 0 0 2H25a1 1 0 0 0 0-2z"></path></g>
+</svg>
\ No newline at end of file
diff --git a/webapp/components/ChatNotificationMenu/ChatNotificationMenu.vue b/webapp/components/ChatNotificationMenu/ChatNotificationMenu.vue
index 537affd38..fcd93ee48 100644
--- a/webapp/components/ChatNotificationMenu/ChatNotificationMenu.vue
+++ b/webapp/components/ChatNotificationMenu/ChatNotificationMenu.vue
@@ -1,140 +1,25 @@
 <template>
-  <nuxt-link v-if="!unreadChatNotificationsCount" class="chat-menu" :to="{ name: 'chat' }">
+  <nuxt-link class="chat-notification-menu" :to="{ name: 'chat' }">
     <base-button
       ghost
       circle
       v-tooltip="{
-        content: $t('notifications.headerMenuButton.chat'),
+        content: $t('header.chat.tooltip'),
         placement: 'bottom-start',
       }"
     >
-      <img src="/img/empty/chat-bubble.svg" />
+      <counter-icon icon="chat-bubble" :count="1" danger />
     </base-button>
   </nuxt-link>
-  <dropdown v-else class="chat-notifications-menu" offset="8">
-    <template #default="{ toggleMenu }">
-      <base-button
-        ghost
-        circle
-        v-tooltip="{
-          content: $t('notifications.headerMenuButton.tooltip'),
-          placement: 'bottom-start',
-        }"
-        @click="toggleMenu"
-      >
-        <counter-icon icon="envelope" :count="unreadChatNotificationsCount" danger />
-        <img src="/img/empty/chat-bubble.svg" />
-      </base-button>
-    </template>
-    <template #popover="{}">
-      <div class="chat-notifications-menu-popover">
-        <div v-for="notification in notifications" v-bind:key="notification.roomid">
-          <ds-space>
-            <div
-              class="chat-notifications-menu-popover-item"
-              @click="
-                $store.commit('chat/SET_OPEN_CHAT', { showChat: true, roomID: notification.roomid })
-              "
-            >
-              <p>{{ notification.name }}</p>
-              {{ notification.title }}
-            </div>
-          </ds-space>
-        </div>
-        <!-- <notification-list :notifications="notifications" /> -->
-      </div>
-      <ds-flex class="chat-notifications-link-container">
-        <ds-flex-item
-          class="chat-notifications-link-container-item"
-          :width="{ base: '100%' }"
-          centered
-        >
-          <nuxt-link :to="{ name: 'chat' }">
-            <base-button ghost primary>All Chat Messages</base-button>
-          </nuxt-link>
-        </ds-flex-item>
-      </ds-flex>
-    </template>
-  </dropdown>
 </template>
 
 <script>
 import CounterIcon from '~/components/_new/generic/CounterIcon/CounterIcon'
-import Dropdown from '~/components/Dropdown'
-// import NotificationList from '../NotificationList/NotificationList'
 
 export default {
   name: 'ChatNotificationMenu',
   components: {
     CounterIcon,
-    Dropdown,
-    // NotificationList,
-  },
-  data() {
-    return {
-      notifications: [
-        { roomid: 'u1', name: 'Jenny', title: 'last Message from Jenny' },
-        { roomid: 'u2', name: 'Honey', title: 'last Message from Honey' },
-        { roomid: 'u3', name: 'Bob der Baumeister', title: 'last Message from Bob der Baumeister' },
-      ],
-    }
-  },
-  computed: {
-    unreadChatNotificationsCount() {
-      const result = this.notifications.reduce((count, notification) => {
-        return notification.read ? count : count + 1
-      }, 0)
-      return result
-    },
-    hasNotifications() {
-      return this.notifications.length
-    },
   },
 }
 </script>
-<style lang="scss">
-.chat-notifications-menu {
-  max-width: 500px;
-}
-.vue-popover-theme {
-  z-index: 1000000;
-}
-
-.counter-icon {
-  position: relative;
-
-  > .count {
-    position: absolute;
-    top: -$space-xx-small;
-    right: 0;
-
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    height: $size-icon-base;
-    min-width: $size-icon-base;
-    padding: 3px; // magic number to center count
-    border-radius: 50%;
-    transform: translateX(50%);
-
-    color: $color-neutral-100;
-    background-color: $color-primary;
-    font-size: 10px; // magic number to center count
-    line-height: 1;
-    text-align: center;
-
-    &.--danger {
-      background-color: $color-danger;
-    }
-
-    &.--inactive {
-      background-color: $color-neutral-60;
-    }
-
-    &.--soft {
-      background-color: $color-neutral-90;
-      color: $text-color-soft;
-    }
-  }
-}
-</style>
diff --git a/webapp/components/HeaderMenu/HeaderMenu.vue b/webapp/components/HeaderMenu/HeaderMenu.vue
index a08bec882..f4d48220e 100644
--- a/webapp/components/HeaderMenu/HeaderMenu.vue
+++ b/webapp/components/HeaderMenu/HeaderMenu.vue
@@ -263,10 +263,11 @@ import isEmpty from 'lodash/isEmpty'
 import { SHOW_GROUP_BUTTON_IN_HEADER } from '~/constants/groups.js'
 import { SHOW_CONTENT_FILTER_HEADER_MENU } from '~/constants/filter.js'
 import LOGOS from '~/constants/logos.js'
-import headerMenu from '~/constants/headerMenu.js'
 import AvatarMenu from '~/components/AvatarMenu/AvatarMenu'
+import ChatNotificationMenu from '~/components/ChatNotificationMenu/ChatNotificationMenu'
 import FilterMenu from '~/components/FilterMenu/FilterMenu.vue'
 import GroupButton from '~/components/Group/GroupButton'
+import headerMenu from '~/constants/headerMenu.js'
 import InviteButton from '~/components/InviteButton/InviteButton'
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 import Logo from '~/components/Logo/Logo'
@@ -275,7 +276,6 @@ import SearchField from '~/components/features/SearchField/SearchField.vue'
 import NotificationMenu from '~/components/NotificationMenu/NotificationMenu'
 import links from '~/constants/links.js'
 import PageParamsLink from '~/components/_new/features/PageParamsLink/PageParamsLink.vue'
-import ChatNotificationMenu from '~/components/ChatNotificationMenu/ChatNotificationMenu'
 
 export default {
   components: {
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index d8bc537ff..b3d53908c 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -552,6 +552,9 @@
       },
       "groups": "Gruppen",
       "myProfile": "Mein Profil"
+    },
+    "chat": {
+      "tooltip": "Meine Chats"
     }
   },
   "index": {
@@ -691,10 +694,6 @@
       "unread": "Ungelesen"
     },
     "group": "Beschreibung",
-    "headerMenuButton": {
-      "chat": "Meine Chat",
-      "tooltip": "Meine Benachrichtigungen"
-    },
     "markAllAsRead": "Markiere alle als gelesen",
     "pageLink": "Alle Benachrichtigungen",
     "post": "Beitrag oder Gruppe",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index e6fe4a624..23bd81ca8 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -552,6 +552,9 @@
       },
       "groups": "Groups",
       "myProfile": "My profile"
+    },
+    "chat": {
+      "tooltip": "My chats"
     }
   },
   "index": {