diff --git a/aleksis/core/assets/components/notifications/NotificationList.vue b/aleksis/core/assets/components/notifications/NotificationList.vue
index 9e057ef7f4093f01d072bb88b6e99f2cb13841f8..f3141b658044eb1d70c066ea8222467cb0331511 100644
--- a/aleksis/core/assets/components/notifications/NotificationList.vue
+++ b/aleksis/core/assets/components/notifications/NotificationList.vue
@@ -3,17 +3,29 @@
     :query="require('./myNotifications.graphql')"
     :poll-interval="1000"
   >
-    <template #default="{ result: { error, data }, isLoading }">
-      <v-list two-line v-if="data && data.myNotifications.notifications.length">
-        <NotificationItem
-          v-for="notification in data.myNotifications.notifications"
-          :key="notification.id"
-          :notification="notification"
-        />
-      </v-list>
-      <p v-else>
-        {{ $root.django.gettext("No notifications available yet.") }}
-      </p>
+    <template #default="{ result: { error, data, loading } }">
+      <v-menu offset-y :close-on-content-click="false" max-width="min-content">
+        <template v-slot:activator="{ on, attrs }">
+          <v-btn icon color="primary" v-bind="attrs" v-on="on" :loading="loading">
+            <v-icon color="white" v-if="data && data.myNotifications.unreadNotificationsCount > 0">mdi-bell-badge-outline</v-icon>
+            <v-icon color="white" v-else>mdi-bell-outline</v-icon>
+          </v-btn>
+        </template>
+        <v-list nav three-line dense v-if="data && data.myNotifications && data.myNotifications.notifications.length">
+          <template v-for="notification in data.myNotifications.notifications">
+            <NotificationItem
+                :key="notification.id"
+                :notification="notification"
+            />
+            <v-divider
+                v-if="notification !== data.myNotifications.notifications[data.myNotifications.notifications.length - 1]"
+            ></v-divider>
+          </template>
+        </v-list>
+        <p v-else>
+          {{ $t("notifications.no_notifications") }}
+        </p>
+      </v-menu>
     </template>
   </ApolloQuery>
 </template>
diff --git a/aleksis/core/assets/components/notifications/myNotifications.graphql b/aleksis/core/assets/components/notifications/myNotifications.graphql
index efa51f2c82e523ef2d5515e88536a0c6b08005ef..ad5e417c15dba5c8ae1da1b8123b1ad7b294b5d9 100644
--- a/aleksis/core/assets/components/notifications/myNotifications.graphql
+++ b/aleksis/core/assets/components/notifications/myNotifications.graphql
@@ -1,5 +1,6 @@
 {
   myNotifications: whoAmI {
+    unreadNotificationsCount
     notifications {
       id
       title