diff --git a/webapp/components/NotificationMenu/NotificationMenu.vue b/webapp/components/NotificationMenu/NotificationMenu.vue
index 873fbe736..0386094f6 100644
--- a/webapp/components/NotificationMenu/NotificationMenu.vue
+++ b/webapp/components/NotificationMenu/NotificationMenu.vue
@@ -9,14 +9,14 @@
       </ds-button>
     </template>
     <template slot="popover">
+      <ds-space centered>
+        <ds-button primary fullwidth :path="{ name: 'notifications' }">
+          {{ $t('notifications.pageLink') }}
+        </ds-button>
+      </ds-space>
       <div class="notifications-menu-popover">
         <notification-list :notifications="displayedNotifications" @markAsRead="markAsRead" />
       </div>
-      <ds-space centered>
-        <nuxt-link to="/notifications">
-          {{ $t('notifications.pageLink') }}
-        </nuxt-link>
-      </ds-space>
     </template>
   </dropdown>
 </template>
@@ -113,7 +113,7 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
 .notifications-menu {
   display: flex;
   align-items: center;
@@ -122,4 +122,13 @@ export default {
 .notifications-menu-popover {
   max-width: 500px;
 }
+.link-bg {
+  position: sticky;
+  width: 100%;
+  background-color: $background-color-primary-active;
+  text-align: center;
+}
+.notifications-link {
+  color: $text-color-softer;
+}
 </style>
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 25ce3742f..534ef819f 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -185,7 +185,8 @@
       "all": "Alle",
       "read": "Lesen  ",
       "unread": "Ungelesen"
-    }
+    },
+    "empty": "Sorry, du hast im Moment keine Benachrichtigungen."
   },
   "search": {
     "placeholder": "Suchen",
@@ -684,7 +685,7 @@
     "terms-of-service": {
       "title": "Nutzungsbedingungen",
       "description": "Die folgenden Nutzungsbedingungen sind Basis für die Nutzung unseres Netzwerkes. Beim Registrieren musst Du sie anerkennen und wir werden Dich auch später über ggf. stattfindende Änderungen informieren. Das Human Connection Netzwerk wird in Deutschland betrieben und unterliegt daher deutschem Recht. Gerichtsstand ist Kirchheim / Teck. Zu Details schau in unser Impressum: <a href=\"https://human-connection.org/impressum\" target=\"_blank\" >https://human-connection.org/impressum</a> "
-    },   
+    },
     "use-and-license" : {
       "title": "Nutzung und Lizenz",
       "description": "Sind Inhalte, die Du bei uns einstellst, durch Rechte am geistigen Eigentum geschützt, erteilst Du uns eine nicht-exklusive, übertragbare, unterlizenzierbare und weltweite Lizenz für die Nutzung dieser Inhalte für die Bereitstellung in unserem Netzwerk. Diese Lizenz endet, sobald Du Deine Inhalte oder Deinen ganzen Account löscht. Bedenke, dass andere Deine Inhalte weiter teilen können und wir diese nicht löschen können."
@@ -712,6 +713,6 @@
     "addition" : {
       "title": "Zusätzliche machen wir regelmäßig Veranstaltungen, wo Du auch Eindrücke wiedergeben und Fragen stellen kannst. Du findest eine aktuelle Übersicht hier:",
       "description": "<a href=\"https://human-connection.org/veranstaltungen/\" target=\"_blank\" > https://human-connection.org/veranstaltungen/ </a>"
-    } 
+    }
   }
 }
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index b77922b74..775132eab 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -186,7 +186,8 @@
       "all": "All",
       "read": "Read",
       "unread": "Unread"
-    }
+    },
+    "empty": "Sorry, you don't have any notifications at the moment."
   },
   "search": {
     "placeholder": "Search",
@@ -685,7 +686,7 @@
     "terms-of-service": {
       "title": "Terms of Service",
       "description": "The following terms of use form the basis for the use of our network. When you register, you must accept them and we will inform you later about any changes that may take place. The Human Connection Network is operated in Germany and is therefore subject to German law. Place of jurisdiction is Kirchheim / Teck. For details see our imprint: <a href=\"https://human-connection.org/imprint\" target=\"_blank\" >https://human-connection.org/imprint</a> "
-    },   
+    },
     "use-and-license" : {
       "title": "Use and License",
       "description": "If any content you post to us is protected by intellectual property rights, you grant us a non-exclusive, transferable, sublicensable, worldwide license to use such content for posting to our network. This license expires when you delete your content or your entire account. Remember that others may share your content and we cannot delete it."
@@ -713,10 +714,10 @@
     "addition" : {
       "title": "In addition, we regularly hold events where you can also share your impressions and ask questions. You can find a current overview here:",
       "description": "<a href=\"https://human-connection.org/events/\" target=\"_blank\" > https://human-connection.org/events/ </a>"
-    } 
+    }
   }
 }
 
- 
- 
- 
+
+
+
diff --git a/webapp/pages/notifications/index.vue b/webapp/pages/notifications/index.vue
index 0ed768dfc..2ff6fe2d5 100644
--- a/webapp/pages/notifications/index.vue
+++ b/webapp/pages/notifications/index.vue
@@ -44,19 +44,35 @@
       :fields="fields"
       class="notifications-table"
     >
+      <template slot="icon" slot-scope="scope">
+        <ds-icon
+          v-if="scope.row.from.post"
+          name="comment"
+          v-tooltip="{ content: $t('notifications.comment'), placement: 'right' }"
+        />
+        <ds-icon
+          v-else
+          name="bookmark"
+          v-tooltip="{ content: $t('notifications.post'), placement: 'right' }"
+        />
+      </template>
       <template slot="user" slot-scope="scope">
         <ds-space margin-bottom="base">
           <hc-user
             :user="scope.row.from.author"
             :date-time="scope.row.from.createdAt"
             :trunc="35"
+            :class="{ 'notification-status': scope.row.read }"
           />
         </ds-space>
-        {{ $t(`notifications.reason.${scope.row.reason}`) }}
+        <ds-text :class="{ 'notification-status': scope.row.read }">
+          {{ $t(`notifications.reason.${scope.row.reason}`) }}
+        </ds-text>
       </template>
       <template slot="post" slot-scope="scope">
         <nuxt-link
           class="notification-mention-post"
+          :class="{ 'notification-status': scope.row.read }"
           :to="{
             name: 'post-id-slug',
             params: {
@@ -71,16 +87,18 @@
             },
             hash: scope.row.from.__typename === 'Comment' ? `#commentId-${scope.row.from.id}` : {},
           }"
-          @click.native="$emit('read')"
+          @click.native="markNotificationAsRead(scope.row.from.id)"
         >
           <b>{{ scope.row.from.title || scope.row.from.post.title | truncate(50) }}</b>
         </nuxt-link>
       </template>
       <template slot="content" slot-scope="scope">
-        <b>{{ scope.row.from.contentExcerpt || scope.row.from.contentExcerpt | removeHtml }}</b>
+        <b :class="{ 'notification-status': scope.row.read }">
+          {{ scope.row.from.contentExcerpt || scope.row.from.contentExcerpt | removeHtml }}
+        </b>
       </template>
     </ds-table>
-    <hc-empty v-else icon="alert" :message="$t('moderation.reports.empty')" />
+    <hc-empty v-else icon="alert" :message="$t('notifications.empty')" />
   </ds-card>
 </template>
 
@@ -88,7 +106,7 @@
 import HcUser from '~/components/User/User'
 import HcEmpty from '~/components/Empty.vue'
 import Dropdown from '~/components/Dropdown'
-import { notificationQuery } from '~/graphql/User'
+import { notificationQuery, markAsReadMutation } from '~/graphql/User'
 
 export default {
   components: {
@@ -111,7 +129,14 @@ export default {
   computed: {
     fields() {
       return {
-        user: this.$t('notifications.user'),
+        icon: {
+          label: ' ',
+          width: '60px',
+        },
+        user: {
+          label: this.$t('notifications.user'),
+          width: '350px',
+        },
         post: this.$t('notifications.post'),
         content: this.$t('notifications.content'),
       }
@@ -133,6 +158,16 @@ export default {
       this.$apollo.queries.notifications.refresh()
       toggleMenu()
     },
+    async markNotificationAsRead(notificationSourceId) {
+      try {
+        await this.$apollo.mutate({
+          mutation: markAsReadMutation(this.$i18n),
+          variables: { id: notificationSourceId },
+        })
+      } catch (error) {
+        this.$toast.error(error.message)
+      }
+    },
   },
   apollo: {
     notifications: {
@@ -160,7 +195,8 @@ export default {
 .sorting-dropdown {
   float: right;
 }
-.notifications-table td {
-  width: 500px;
+.notification-status {
+  opacity: 0.6; /* Real browsers */
+  filter: alpha(opacity = 60); /* MSIE */
 }
 </style>