diff --git a/dashboard/src/views/NotificationsView.vue b/dashboard/src/views/NotificationsView.vue
index 980753de0..9698c4e01 100644
--- a/dashboard/src/views/NotificationsView.vue
+++ b/dashboard/src/views/NotificationsView.vue
@@ -3,7 +3,7 @@
 import { marked } from 'marked';
 import { eachLimit } from 'async';
 import { ref, onMounted, inject } from 'vue';
-import { Button } from '@cloudron/pankow';
+import { Button, ButtonGroup } from '@cloudron/pankow';
 import { prettyDate } from '@cloudron/pankow/utils';
 import NotificationsModel from  '../models/NotificationsModel.js';
 
@@ -13,9 +13,10 @@ const busy = ref(true);
 const notifications = ref([]);
 const notificationsAllBusy = ref(false);
 const refreshNotifications = inject('refreshNotifications');
+const showAll = ref(true);
 
 async function refresh() {
-  const [error, result] = await notificationsModel.list();
+  const [error, result] = await notificationsModel.list(showAll.value ? null : false);
   if (error) return console.error(error);
 
   notifications.value = result;
@@ -71,31 +72,40 @@ onMounted(async () => {
     <!-- <h1 class="view-header">{{ $t('notifications.title') }}</h1> -->
     <h1 class="notification-list-header">
       Notifications
-      <Button secondary @click="onMarkAllNotificationRead()" :loading="notificationsAllBusy" :disabled="notificationsAllBusy">{{ $t('notifications.markAllAsRead') }}</Button>
+      <div class="header-action-bar">
+        <ButtonGroup>
+          <Button :outline="showAll ? true : undefined" @click="showAll = false; refresh()">Unread</Button>
+          <Button :outline="showAll ? undefined : true" @click="showAll = true; refresh()">All</Button>
+        </ButtonGroup>
+        <Button secondary @click="onMarkAllNotificationRead()" :loading="notificationsAllBusy" :disabled="notificationsAllBusy">{{ $t('notifications.markAllAsRead') }}</Button>
+      </div>
     </h1>
 
     <div class="notification-list">
-      <TransitionGroup name="fade">
-        <div v-for="notification in notifications" :key="notification.id" class="notification-item" :class="{ new: !notification.acknowledged, active: notification.active }">
-          <div class="notification-item-title" @click="onToggleActive(notification)">
-            <div>
-              {{ notification.title }}
-              <div class="notification-item-date">{{ prettyDate(notification.creationTime) }}</div>
-            </div>
-            <Button v-if="notification.acknowledged" plain secondary tool :loading="notification.busy && !notificationsAllBusy" :disabled="notification.busy" @click.stop="onMarkNotificationUnread(notification)">Unread</Button>
-            <Button v-else plain primary tool :loading="notification.busy && !notificationsAllBusy" :disabled="notification.busy" @click.stop="onMarkNotificationRead(notification)">Dismiss</Button>
-          </div>
-          <div class="notification-item-message">
-            <div style="cursor: auto; overflow: auto;" v-html="marked.parse(notification.message)"></div>
+      <div v-for="notification in notifications" :key="notification.id" class="notification-item" :class="{ new: !notification.acknowledged, active: notification.active }">
+        <div class="notification-item-title" @click="onToggleActive(notification)">
+          <div>
+            {{ notification.title }}
+            <div class="notification-item-date">{{ prettyDate(notification.creationTime) }}</div>
           </div>
+          <Button v-if="notification.acknowledged" plain secondary tool :disabled="notification.busy" @click.stop="onMarkNotificationUnread(notification)">Unread</Button>
+          <Button v-else plain primary tool :disabled="notification.busy" @click.stop="onMarkNotificationRead(notification)">Dismiss</Button>
         </div>
-      </TransitionGroup>
+        <div class="notification-item-message">
+          <div style="cursor: auto; overflow: auto;" v-html="marked.parse(notification.message)"></div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <style scoped>
 
+.header-action-bar {
+  display: flex;
+  gap: 5px;
+}
+
 .notification-list-header {
   display: flex;
   flex-direction: row;
@@ -124,11 +134,6 @@ onMounted(async () => {
   background-color: var(--pankow-color-background-hover);
 }
 
-.notification-item.active {
-  z-index: 500;
-  position: relative;
-}
-
 .notification-item-title {
   font-size: 14px;
   padding: 10px;
@@ -155,10 +160,4 @@ onMounted(async () => {
   display: block;
 }
 
-.fade-move,
-.fade-enter-active,
-.fade-leave-active {
-  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
-}
-
 </style>