diff --git a/src/components/notifications/NotificationList.story.vue b/src/components/notifications/NotificationList.story.vue
new file mode 100644
index 000000000..f79b57521
--- /dev/null
+++ b/src/components/notifications/NotificationList.story.vue
@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import {reactive} from 'vue'
+import type {INotification} from '@/modelTypes/INotification'
+import NotificationList from './NotificationList.vue'
+
+const state = reactive({
+	notifications: [] as INotification[],
+	hasUnreadNotifications: true,
+})
+
+function markNotificationAsRead(notificatioItem: INotification) {
+	console.log(notificatioItem)
+}
+</script>
+
+<template>
+  <Story>
+		<NotificationList
+			:notifications="state.notifications"
+			:hasUnreadNotifications="state.hasUnreadNotifications"
+			@mark-notification-as-read="markNotificationAsRead"
+		/>
+  </Story>
+</template>
\ No newline at end of file