diff --git a/web/components/Notifications/List.vue b/web/components/Notifications/List.vue
index decde3dcc8..4a67f567e8 100644
--- a/web/components/Notifications/List.vue
+++ b/web/components/Notifications/List.vue
@@ -3,10 +3,11 @@ import {
   getNotifications,
   NOTIFICATION_FRAGMENT,
 } from "./graphql/notification.query";
-import type { NotificationType } from "~/composables/gql/graphql";
+import type { Importance, NotificationType } from "~/composables/gql/graphql";
 import { useFragment } from "~/composables/gql/fragment-masking";
 import { useQuery } from "@vue/apollo-composable";
 import { vInfiniteScroll } from "@vueuse/components";
+import { CheckIcon } from "@heroicons/vue/24/solid";
 
 /**
  * Page size is the max amount of items fetched from the api in a single request.
@@ -15,19 +16,22 @@ const props = withDefaults(
   defineProps<{
     type: NotificationType;
     pageSize?: number;
+    importance?: Importance;
   }>(),
   {
     pageSize: 15,
+    importance: undefined,
   }
 );
 
-const { result, error, fetchMore } = useQuery(getNotifications, {
+const { result, error, fetchMore } = useQuery(getNotifications, () => ({
   filter: {
     offset: 0,
     limit: props.pageSize,
     type: props.type,
+    importance: props.importance,
   },
-});
+}));
 
 watch(error, (newVal) => {
   console.log("[getNotifications] error:", newVal);
@@ -52,6 +56,7 @@ async function onLoadMore() {
         offset: notifications.value.length,
         limit: props.pageSize,
         type: props.type,
+        importance: props.importance,
       },
     },
   });
@@ -59,6 +64,15 @@ async function onLoadMore() {
 </script>
 
 <template>
+  <div
+    v-if="notifications?.length === 0"
+    class="h-full flex flex-col items-center justify-center gap-3"
+  >
+    <CheckIcon class="h-10 text-green-600" />
+    {{
+      `No ${props.importance?.toLowerCase() ?? ""} notifications to see here!`
+    }}
+  </div>
   <!-- The horizontal padding here adjusts for the scrollbar offset -->
   <div
     v-if="notifications?.length > 0"
diff --git a/web/components/Notifications/Sidebar.vue b/web/components/Notifications/Sidebar.vue
index 203df54e27..6a044270bf 100644
--- a/web/components/Notifications/Sidebar.vue
+++ b/web/components/Notifications/Sidebar.vue
@@ -9,13 +9,15 @@ import {
 } from "@/components/shadcn/sheet";
 
 import { archiveAllNotifications } from "./graphql/notification.query";
-import { NotificationType } from "~/composables/gql/graphql";
+// eslint-disable-next-line @typescript-eslint/consistent-type-imports -- false positive :(
+import { Importance, NotificationType } from "~/composables/gql/graphql";
 import { useMutation } from "@vue/apollo-composable";
 
 const { mutate: archiveAll, loading: loadingArchiveAll } = useMutation(
   archiveAllNotifications
 );
 const { teleportTarget, determineTeleportTarget } = useTeleport();
+const importance = ref<Importance | undefined>(undefined);
 </script>
 
 <template>
@@ -57,7 +59,9 @@ const { teleportTarget, determineTeleportTarget } = useTeleport();
               Archive All
             </Button>
 
-            <Select>
+            <Select
+              @update:model-value="(val) => {importance = val as Importance}"
+            >
               <SelectTrigger class="bg-secondary border-0 h-auto">
                 <SelectValue
                   class="text-muted-foreground"
@@ -67,20 +71,26 @@ const { teleportTarget, determineTeleportTarget } = useTeleport();
               <SelectContent :to="teleportTarget">
                 <SelectGroup>
                   <SelectLabel>Notification Types</SelectLabel>
-                  <SelectItem value="alert">Alert</SelectItem>
-                  <SelectItem value="info">Info</SelectItem>
-                  <SelectItem value="warning">Warning</SelectItem>
+                  <SelectItem :value="Importance.Alert">Alert</SelectItem>
+                  <SelectItem :value="Importance.Info">Info</SelectItem>
+                  <SelectItem :value="Importance.Warning">Warning</SelectItem>
                 </SelectGroup>
               </SelectContent>
             </Select>
           </div>
 
           <TabsContent value="unread" class="flex-1 min-h-0 mt-3">
-            <NotificationsList :type="NotificationType.Unread" />
+            <NotificationsList
+              :importance="importance"
+              :type="NotificationType.Unread"
+            />
           </TabsContent>
 
           <TabsContent value="archived" class="flex-1 min-h-0 mt-3">
-            <NotificationsList :type="NotificationType.Archive" />
+            <NotificationsList
+              :importance="importance"
+              :type="NotificationType.Archive"
+            />
           </TabsContent>
         </Tabs>
       </div>
diff --git a/web/composables/gql/graphql.ts b/web/composables/gql/graphql.ts
index 8ca0f4e666..8692fb3ca3 100644
--- a/web/composables/gql/graphql.ts
+++ b/web/composables/gql/graphql.ts
@@ -1,4 +1,4 @@
-/* eslint-disable */
+ 
 import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
 export type Maybe<T> = T | null;
 export type InputMaybe<T> = Maybe<T>;
@@ -821,6 +821,7 @@ export type Node = {
 export type Notification = Node & {
   __typename?: 'Notification';
   description: Scalars['String']['output'];
+  formattedTimestamp?: Maybe<Scalars['String']['output']>;
   id: Scalars['ID']['output'];
   importance: Importance;
   link?: Maybe<Scalars['String']['output']>;