diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index 9dc3cf03f173..f1aec81e937f 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/client/src/components/ActivityBar/ActivityBar.vue
@@ -17,8 +17,9 @@ import NotificationItem from "./Items/NotificationItem.vue";
 import UploadItem from "./Items/UploadItem.vue";
 import ContextMenu from "@/components/Common/ContextMenu.vue";
 import FlexPanel from "@/components/Panels/FlexPanel.vue";
+import NotificationsPanel from "@/components/Panels/NotificationsPanel.vue";
 import ToolPanel from "@/components/Panels/ToolPanel.vue";
-import WorkflowBox from "@/components/Panels/WorkflowBox.vue";
+import WorkflowPanel from "@/components/Panels/WorkflowPanel.vue";
 
 const { config, isConfigLoaded } = useConfig();
 
@@ -196,10 +197,9 @@ function toggleContextMenu(evt: MouseEvent) {
                     v-if="!isAnonymous && isConfigLoaded && config.enable_notification_system"
                     id="activity-notifications"
                     icon="bell"
-                    :is-active="isActiveRoute('/user/notifications')"
+                    :is-active="isActiveSideBar('notifications')"
                     title="Notifications"
-                    to="/user/notifications"
-                    @click="onToggleSidebar()" />
+                    @click="onToggleSidebar('notifications')" />
                 <ActivityItem
                     id="activity-settings"
                     icon="cog"
@@ -214,7 +214,10 @@ function toggleContextMenu(evt: MouseEvent) {
             <ToolPanel />
         </FlexPanel>
         <FlexPanel v-else-if="isActiveSideBar('workflows')" key="workflows" side="left" :collapsible="false">
-            <WorkflowBox />
+            <WorkflowPanel />
+        </FlexPanel>
+        <FlexPanel v-else-if="isActiveSideBar('notifications')" key="notifications" side="left" :collapsible="false">
+            <NotificationsPanel />
         </FlexPanel>
         <ContextMenu :visible="contextMenuVisible" :x="contextMenuX" :y="contextMenuY" @hide="toggleContextMenu">
             <ActivitySettings />
diff --git a/client/src/components/ActivityBar/Items/NotificationItem.vue b/client/src/components/ActivityBar/Items/NotificationItem.vue
index 1e2f6fd1b65e..84e5a05bceda 100644
--- a/client/src/components/ActivityBar/Items/NotificationItem.vue
+++ b/client/src/components/ActivityBar/Items/NotificationItem.vue
@@ -13,7 +13,6 @@ export interface Props {
     title: string;
     icon: string;
     isActive: boolean;
-    to: string;
 }
 
 defineProps<Props>();
@@ -37,6 +36,5 @@ const tooltip = computed(() =>
         :is-active="isActive"
         :title="title"
         :tooltip="tooltip"
-        :to="to"
         @click="emit('click')" />
 </template>
diff --git a/client/src/components/Notifications/Categories/Categories.test.ts b/client/src/components/Notifications/Categories/Categories.test.ts
index f471dbaa6149..1e3664fe8375 100644
--- a/client/src/components/Notifications/Categories/Categories.test.ts
+++ b/client/src/components/Notifications/Categories/Categories.test.ts
@@ -52,11 +52,8 @@ describe("Notifications categories", () => {
             notification,
         });
 
-        expect(wrapper.text()).toContain(
-            `${capitalizeFirstLetter(notification.content.item_type)} shared with you by ${
-                notification.content.owner_name
-            }`
-        );
+        expect(wrapper.text()).toContain(`${capitalizeFirstLetter(notification.content.item_type)}`);
+        expect(wrapper.text()).toContain(`shared with you by ${notification.content.owner_name}`);
 
         expect(wrapper.find("#notification-message").text()).toContain(
             `The user ${notification.content.owner_name} shared`
diff --git a/client/src/components/Notifications/Categories/MessageNotification.vue b/client/src/components/Notifications/Categories/MessageNotification.vue
index ca62f44d8511..b313b961454b 100644
--- a/client/src/components/Notifications/Categories/MessageNotification.vue
+++ b/client/src/components/Notifications/Categories/MessageNotification.vue
@@ -2,13 +2,11 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faInbox } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BCol, BRow } from "bootstrap-vue";
 import { computed } from "vue";
 
 import { type MessageNotification } from "@/api/notifications";
 import { useMarkdown } from "@/composables/markdown";
 
-import Heading from "@/components/Common/Heading.vue";
 import NotificationActions from "@/components/Notifications/NotificationActions.vue";
 
 library.add(faInbox);
@@ -42,16 +40,26 @@ const notificationVariant = computed(() => {
 </script>
 
 <template>
-    <BCol>
-        <BRow align-v="center">
-            <Heading size="md" :bold="!props.options.notification.seen_time" class="mb-0">
-                <FontAwesomeIcon :class="`text-${notificationVariant}`" icon="inbox" />
+    <div class="notification-container">
+        <div class="notification-header">
+            <div :class="!props.options.notification.seen_time ? 'font-weight-bold' : ''" class="notification-title">
+                <FontAwesomeIcon :class="`text-${notificationVariant}`" :icon="faInbox" fixed-width size="sm" />
                 {{ props.options.notification?.content?.subject }}
-            </Heading>
-            <NotificationActions v-if="!props.options.previewMode" :notification="props.options.notification" />
-        </BRow>
-        <BRow>
-            <span id="notification-message" v-html="renderMarkdown(props.options.notification.content.message)" />
-        </BRow>
-    </BCol>
+            </div>
+        </div>
+
+        <NotificationActions
+            v-if="!props.options.previewMode"
+            class="notification-actions"
+            :notification="props.options.notification" />
+
+        <span
+            id="notification-message"
+            class="notification-message"
+            v-html="renderMarkdown(props.options.notification.content.message)" />
+    </div>
 </template>
+
+<style scoped lang="scss">
+@import "style.scss";
+</style>
diff --git a/client/src/components/Notifications/Categories/SharedItemNotification.vue b/client/src/components/Notifications/Categories/SharedItemNotification.vue
index 8b1ba9495bc6..b141c87ed308 100644
--- a/client/src/components/Notifications/Categories/SharedItemNotification.vue
+++ b/client/src/components/Notifications/Categories/SharedItemNotification.vue
@@ -2,14 +2,13 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faExternalLinkAlt, faRetweet } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BCol, BLink, BRow } from "bootstrap-vue";
+import { BLink } from "bootstrap-vue";
 import { computed } from "vue";
 
 import type { SharedItemNotification } from "@/api/notifications";
 import { useNotificationsStore } from "@/stores/notificationsStore";
 import { absPath } from "@/utils/redirect";
 
-import Heading from "@/components/Common/Heading.vue";
 import NotificationActions from "@/components/Notifications/NotificationActions.vue";
 
 library.add(faExternalLinkAlt, faRetweet);
@@ -35,6 +34,7 @@ const sharedItemType = computed(() => {
         return "Item";
     }
 });
+
 const notificationVariant = computed(() => {
     switch (props.notification.variant) {
         case "urgent":
@@ -54,32 +54,37 @@ function markNotificationAsSeen() {
 </script>
 
 <template>
-    <BCol>
-        <BRow align-v="center">
-            <Heading size="md" :bold="!notification.seen_time" class="mb-0">
-                <FontAwesomeIcon :class="`text-${notificationVariant}`" icon="retweet" />
-                {{ sharedItemType }} shared with you by <em>{{ content.owner_name }}</em>
-            </Heading>
-            <NotificationActions :notification="notification" />
-        </BRow>
-        <BRow>
-            <p id="notification-message" class="m-0">
-                <span>The user</span>
-                <b>{{ content.owner_name }}</b>
-                <span>shared </span>
-                <BLink
-                    v-b-tooltip.bottom
-                    :title="`View ${content.item_type} in new tab`"
-                    class="text-primary"
-                    :href="sharedItemUrl"
-                    target="_blank"
-                    @click="markNotificationAsSeen()">
-                    {{ content.item_name }}
-                    <FontAwesomeIcon icon="external-link-alt" />
-                </BLink>
-                <em>{{ content.item_type }}</em>
-                <span> with you.</span>
-            </p>
-        </BRow>
-    </BCol>
+    <div class="notification-container">
+        <div class="notification-header">
+            <div :class="!props.notification.seen_time ? 'font-weight-bold' : ''" class="notification-title">
+                <FontAwesomeIcon :class="`text-${notificationVariant}`" :icon="faRetweet" fixed-width size="sm" />
+                {{ sharedItemType }}
+                shared with you by <em>{{ content.owner_name }}</em>
+            </div>
+        </div>
+
+        <NotificationActions class="notification-actions" :notification="notification" />
+
+        <p id="notification-message" class="notification-message">
+            <span>The user</span>
+            <b>{{ content.owner_name }}</b>
+            <span>shared </span>
+            <BLink
+                v-b-tooltip.bottom
+                :title="`View ${content.item_type} in new tab`"
+                class="text-primary"
+                :href="sharedItemUrl"
+                target="_blank"
+                @click="markNotificationAsSeen()">
+                {{ content.item_name }}
+                <FontAwesomeIcon :icon="faExternalLinkAlt" fixed-width size="sm" />
+            </BLink>
+            <em>{{ content.item_type }}</em>
+            <span> with you.</span>
+        </p>
+    </div>
 </template>
+
+<style scoped lang="scss">
+@import "style.scss";
+</style>
diff --git a/client/src/components/Notifications/Categories/style.scss b/client/src/components/Notifications/Categories/style.scss
new file mode 100644
index 000000000000..d00b1c48a8bd
--- /dev/null
+++ b/client/src/components/Notifications/Categories/style.scss
@@ -0,0 +1,39 @@
+.notification-container {
+    container: notification-content / inline-size;
+
+    width: 100%;
+    display: grid;
+    align-items: center;
+    grid-template-rows: auto auto auto;
+
+    .notification-title {
+        display: flex;
+        gap: 0.2rem;
+        font-size: 1rem;
+        flex-flow: wrap;
+        align-items: center;
+    }
+
+    @container notification-content (min-width: 576px) {
+        .notification-header {
+            .notification-title {
+                font-size: 1.25rem;
+            }
+        }
+
+        .notification-actions {
+            grid-area: 1/2;
+            justify-self: end;
+        }
+
+        .notification-message {
+            grid-column: 1/3;
+        }
+    }
+
+    @container notification-content (max-width: 576px) {
+        .notification-message {
+            margin-bottom: 0.5rem;
+        }
+    }
+}
diff --git a/client/src/components/Notifications/NotificationActions.vue b/client/src/components/Notifications/NotificationActions.vue
index 438fafec1712..ebcd9a469893 100644
--- a/client/src/components/Notifications/NotificationActions.vue
+++ b/client/src/components/Notifications/NotificationActions.vue
@@ -2,7 +2,7 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faHourglassHalf } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BButton, BCol, BInputGroup, BRow } from "bootstrap-vue";
+import { BButton, BButtonGroup } from "bootstrap-vue";
 import { formatDistanceToNow, parseISO } from "date-fns";
 
 import type { UserNotification } from "@/api/notifications";
@@ -34,30 +34,60 @@ function getNotificationExpirationTitle(notification: UserNotification) {
 </script>
 
 <template>
-    <BCol v-if="notification">
-        <BRow align-h="end" align-v="center">
-            <UtcDate class="mx-2" :date="notification.create_time" mode="elapsed" />
-            <BInputGroup>
+    <div v-if="notification" class="notification-actions">
+        <div class="notification-actions-body">
+            <BBadge v-b-tooltip pill>
+                <UtcDate :date="notification.create_time" mode="elapsed" />
+            </BBadge>
+
+            <BButtonGroup class="notification-actions-buttons">
                 <AsyncButton
                     v-if="!notification.seen_time"
                     id="mark-as-read-button"
                     title="Mark as read"
                     icon="check"
+                    size="sm"
+                    class="inline-icon-button"
                     :action="() => notificationsStore.updateNotification(notification, { seen: true })" />
+
                 <BButton
                     v-else-if="notification.expiration_time"
                     id="expiration-time-button"
                     v-b-tooltip.hover
                     variant="link"
+                    size="sm"
+                    class="inline-icon-button"
                     :title="getNotificationExpirationTitle(notification)">
-                    <FontAwesomeIcon icon="hourglass-half" />
+                    <FontAwesomeIcon icon="hourglass-half" fixed-width />
                 </BButton>
+
                 <AsyncButton
                     id="delete-button"
                     icon="trash"
                     title="Delete"
+                    size="sm"
+                    class="inline-icon-button"
                     :action="() => notificationsStore.updateNotification(notification, { deleted: true })" />
-            </BInputGroup>
-        </BRow>
-    </BCol>
+            </BButtonGroup>
+        </div>
+    </div>
 </template>
+
+<style scoped lang="scss">
+.notification-actions {
+    @container notification-content (max-width: 576px) {
+        grid-row: 3;
+    }
+
+    .notification-actions-body {
+        display: flex;
+        gap: 0.5rem;
+        align-items: center;
+        justify-content: space-between;
+
+        .notification-actions-buttons {
+            gap: 0.5rem;
+        }
+    }
+}
+</style>
diff --git a/client/src/components/Notifications/NotificationCard.vue b/client/src/components/Notifications/NotificationCard.vue
new file mode 100644
index 000000000000..303fe41a1e2e
--- /dev/null
+++ b/client/src/components/Notifications/NotificationCard.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faCircle } from "@fortawesome/free-solid-svg-icons";
+import { BFormCheckbox } from "bootstrap-vue";
+
+import { type UserNotification } from "@/api/notifications";
+
+import MessageNotification from "./Categories/MessageNotification.vue";
+import SharedItemNotification from "./Categories/SharedItemNotification.vue";
+
+library.add(faCircle);
+
+const props = defineProps<{
+    selected?: boolean;
+    selectable?: boolean;
+    unreadBorder?: boolean;
+    notification: UserNotification;
+}>();
+
+const emit = defineEmits(["select"]);
+</script>
+
+<template>
+    <div
+        class="notification-card card-container"
+        :class="props.unreadBorder && !props.notification.seen_time ? 'border-dark unread-notification' : ''">
+        <BFormCheckbox
+            v-if="props.selectable"
+            class="notification-card-select"
+            :checked="props.selected"
+            size="sm"
+            @change="emit('select', [props.notification])" />
+
+        <SharedItemNotification
+            v-if="props.notification.category === 'new_shared_item'"
+            :notification="props.notification" />
+
+        <MessageNotification v-else :options="{ notification: props.notification }" />
+    </div>
+</template>
+
+<style lang="scss" scoped>
+@import "scss/theme/blue.scss";
+
+.notification-card {
+    display: flex;
+
+    .notification-card-select {
+        padding-top: 0.35rem;
+    }
+}
+</style>
diff --git a/client/src/components/Notifications/NotificationItem.vue b/client/src/components/Notifications/NotificationItem.vue
deleted file mode 100644
index bf05199476ae..000000000000
--- a/client/src/components/Notifications/NotificationItem.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script setup lang="ts">
-import { type UserNotification } from "@/api/notifications";
-
-import MessageNotification from "./Categories/MessageNotification.vue";
-import SharedItemNotification from "./Categories/SharedItemNotification.vue";
-
-const props = defineProps<{
-    notification: UserNotification;
-}>();
-</script>
-
-<template>
-    <SharedItemNotification
-        v-if="props.notification.category === 'new_shared_item'"
-        :notification="props.notification" />
-
-    <MessageNotification v-else :options="{ notification: props.notification }" />
-</template>
diff --git a/client/src/components/Notifications/NotificationsList.test.ts b/client/src/components/Notifications/NotificationsList.test.ts
index 4df924464e02..7c8d54a91ecb 100644
--- a/client/src/components/Notifications/NotificationsList.test.ts
+++ b/client/src/components/Notifications/NotificationsList.test.ts
@@ -1,6 +1,6 @@
 import { createTestingPinia } from "@pinia/testing";
 import { getLocalVue } from "@tests/jest/helpers";
-import { shallowMount } from "@vue/test-utils";
+import { mount } from "@vue/test-utils";
 import flushPromises from "flush-promises";
 import { setActivePinia } from "pinia";
 
@@ -22,9 +22,12 @@ async function mountNotificationsList() {
     const notificationsStore = useNotificationsStore(pinia);
     notificationsStore.notifications = mergeObjectListsById(FAKE_NOTIFICATIONS, []);
 
-    const wrapper = shallowMount(NotificationsList, {
+    const wrapper = mount(NotificationsList, {
         localVue,
         pinia,
+        stubs: {
+            FontAwesomeIcon: true,
+        },
     });
 
     await flushPromises();
@@ -34,9 +37,10 @@ async function mountNotificationsList() {
 describe("NotificationsList", () => {
     it("render and count unread notifications", async () => {
         const wrapper = await mountNotificationsList();
+
         expect(wrapper.findAll(".notification-card")).toHaveLength(messageCount + sharedItemCount);
 
-        const unreadNotification = wrapper.findAll(".unread-status");
+        const unreadNotification = wrapper.findAll(".unread-notification");
         expect(unreadNotification).toHaveLength(FAKE_NOTIFICATIONS.filter((n) => !n.seen_time).length);
     });
 
diff --git a/client/src/components/Notifications/NotificationsList.vue b/client/src/components/Notifications/NotificationsList.vue
index 978c8e253349..945141215d9b 100644
--- a/client/src/components/Notifications/NotificationsList.vue
+++ b/client/src/components/Notifications/NotificationsList.vue
@@ -1,19 +1,20 @@
 <script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { faCircle, faHourglassHalf, faRetweet } from "@fortawesome/free-solid-svg-icons";
+import { faCog, faHourglassHalf, faRetweet } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BButton, BButtonGroup, BCard, BCol, BCollapse, BFormCheckbox, BRow } from "bootstrap-vue";
+import { BAlert, BButton, BButtonGroup, BCollapse, BFormCheckbox } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref } from "vue";
 
 import type { UserNotification } from "@/api/notifications";
 import { useNotificationsStore } from "@/stores/notificationsStore";
 
+import Heading from "@/components/Common/Heading.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
-import NotificationItem from "@/components/Notifications/NotificationItem.vue";
+import NotificationCard from "@/components/Notifications/NotificationCard.vue";
 import NotificationsPreferences from "@/components/User/Notifications/NotificationsPreferences.vue";
 
-library.add(faCircle, faHourglassHalf, faRetweet);
+library.add(faCog, faHourglassHalf, faRetweet);
 
 const notificationsStore = useNotificationsStore();
 const { notifications, loadingNotifications } = storeToRefs(notificationsStore);
@@ -65,19 +66,22 @@ function togglePreferences() {
 </script>
 
 <template>
-    <div aria-labelledby="notifications-list">
-        <div class="d-flex justify-content-between">
-            <h1 id="notifications-title" class="h-lg">Notifications</h1>
+    <div aria-labelledby="notifications-list" class="notifications-list-container">
+        <div class="notifications-list-header">
+            <Heading id="notifications-title" h1 separator inline size="xl" class="flex-grow-1 mb-2">
+                Notifications
+            </Heading>
+
             <BButton class="mb-2" variant="outline-primary" :pressed="preferencesOpen" @click="togglePreferences">
-                <FontAwesomeIcon icon="cog" />
+                <FontAwesomeIcon :icon="faCog" />
                 Notifications preferences
             </BButton>
         </div>
 
         <BCollapse v-model="preferencesOpen">
-            <BCard class="m-2">
-                <NotificationsPreferences v-if="preferencesOpen" header-size="h-md" />
-            </BCard>
+            <div class="notifications-list-preferences card-container">
+                <NotificationsPreferences v-if="preferencesOpen" header-size="h-md" :embedded="false" />
+            </div>
         </BCollapse>
 
         <BAlert v-if="loadingNotifications" show>
@@ -88,10 +92,10 @@ function togglePreferences() {
             No notifications to show.
         </BAlert>
 
-        <div v-else class="mx-1">
-            <BCard class="mb-2">
-                <BRow class="align-items-center" no-gutters>
-                    <BCol cols="1">
+        <div v-else class="notifications-list-body">
+            <div class="notifications-list-filter card-container">
+                <div class="notifications-list-filter-selection">
+                    <div>
                         <BFormCheckbox
                             :checked="allSelected"
                             :indeterminate="
@@ -101,72 +105,65 @@ function togglePreferences() {
                             @change="selectOrDeselectNotification(notifications)">
                             {{ haveSelected ? `${selectedNotificationIds.length} selected` : "Select all" }}
                         </BFormCheckbox>
-                    </BCol>
-                    <BCol v-if="haveSelected">
+                    </div>
+
+                    <div v-if="haveSelected">
                         <BButton size="sm" variant="outline-primary" @click="updateNotifications({ seen: true })">
                             <FontAwesomeIcon icon="check" />
                             Mark as read
                         </BButton>
+
                         <BButton size="sm" variant="outline-primary" @click="updateNotifications({ deleted: true })">
                             <FontAwesomeIcon icon="trash" />
                             Delete
                         </BButton>
-                    </BCol>
-                    <BCol>
-                        <BRow align-h="end" align-v="center">
-                            <span class="mx-2"> Filters: </span>
-                            <BButtonGroup>
-                                <BButton
-                                    id="show-unread-filter"
-                                    size="sm"
-                                    :pressed="showUnread"
-                                    variant="outline-primary"
-                                    @click="showUnread = !showUnread">
-                                    <FontAwesomeIcon icon="check" />
-                                    Unread
-                                </BButton>
-                                <BButton
-                                    id="show-shared-filter"
-                                    size="sm"
-                                    :pressed="showShared"
-                                    variant="outline-primary"
-                                    @click="showShared = !showShared">
-                                    <FontAwesomeIcon icon="retweet" />
-                                    Shared
-                                </BButton>
-                            </BButtonGroup>
-                        </BRow>
-                    </BCol>
-                </BRow>
-            </BCard>
+                    </div>
+                </div>
+
+                <div align-h="end" align-v="center">
+                    <span class="mx-2"> Filters: </span>
+
+                    <BButtonGroup>
+                        <BButton
+                            id="show-unread-filter"
+                            size="sm"
+                            :pressed="showUnread"
+                            variant="outline-primary"
+                            @click="showUnread = !showUnread">
+                            <FontAwesomeIcon icon="check" />
+                            Unread
+                        </BButton>
+
+                        <BButton
+                            id="show-shared-filter"
+                            size="sm"
+                            :pressed="showShared"
+                            variant="outline-primary"
+                            @click="showShared = !showShared">
+                            <FontAwesomeIcon icon="retweet" />
+                            Shared
+                        </BButton>
+                    </BButtonGroup>
+                </div>
+            </div>
 
             <BAlert v-show="filteredNotifications.length === 0" show variant="info">
                 No matching notifications with current filters.
             </BAlert>
 
-            <TransitionGroup name="notifications-list" tag="div">
-                <BCard
-                    v-for="item in filteredNotifications"
-                    v-show="filteredNotifications.length > 0"
-                    :key="item.id"
-                    class="my-2 notification-card"
-                    :class="!item.seen_time ? 'border-dark' : ''">
-                    <BRow align-h="start" align-v="center">
-                        <BCol cols="auto">
-                            <BButtonGroup>
-                                <FontAwesomeIcon
-                                    v-if="!item.seen_time"
-                                    size="sm"
-                                    class="unread-status position-absolute align-self-center mr-1"
-                                    icon="circle" />
-                                <BFormCheckbox
-                                    :checked="selectedNotificationIds.includes(item.id)"
-                                    @change="selectOrDeselectNotification([item])" />
-                            </BButtonGroup>
-                        </BCol>
-                        <NotificationItem :notification="item" />
-                    </BRow>
-                </BCard>
+            <TransitionGroup
+                v-show="filteredNotifications.length > 0"
+                name="notifications-list"
+                class="notifications-list"
+                tag="div">
+                <div v-for="item in filteredNotifications" :key="item.id">
+                    <NotificationCard
+                        selectable
+                        unread-border
+                        :notification="item"
+                        :selected="selectedNotificationIds?.includes(item.id)"
+                        @select="selectOrDeselectNotification" />
+                </div>
             </TransitionGroup>
         </div>
     </div>
@@ -175,9 +172,34 @@ function togglePreferences() {
 <style lang="scss" scoped>
 @import "scss/theme/blue.scss";
 
-.unread-status {
-    left: -1rem;
-    color: $brand-primary;
+.notifications-list-container {
+    .notifications-list-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .notifications-list-preferences {
+        margin: 0 0.5rem 1rem 0.5rem;
+    }
+
+    .notifications-list-body {
+        .notifications-list {
+            padding-bottom: 0.5rem;
+        }
+
+        .notifications-list-filter {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            .notifications-list-filter-selection {
+                display: flex;
+                align-items: center;
+                gap: 0.5rem;
+            }
+        }
+    }
 }
 
 .notifications-list-enter-active {
diff --git a/client/src/components/Panels/ActivityPanel.vue b/client/src/components/Panels/ActivityPanel.vue
new file mode 100644
index 000000000000..47480ba91d62
--- /dev/null
+++ b/client/src/components/Panels/ActivityPanel.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+interface Props {
+    title: string;
+    goToAllTitle?: string;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits(["goToAll"]);
+</script>
+
+<template>
+    <div class="activity-panel" :data-description="props.title" aria-labelledby="activity-panel-heading">
+        <div class="activity-panel-header">
+            <nav unselectable="on" class="activity-panel-header-top">
+                <h2 id="activity-panel-heading" v-localize class="activity-panel-heading h-sm">{{ props.title }}</h2>
+
+                <slot name="header-buttons" />
+            </nav>
+
+            <slot name="header" class="activity-panel-header-description" />
+        </div>
+
+        <div class="activity-panel-body">
+            <slot />
+        </div>
+
+        <BButton
+            v-if="props.goToAllTitle"
+            class="activity-panel-footer"
+            variant="primary"
+            :data-description="`props.mainButtonText button`"
+            @click="emit('goToAll')">
+            {{ props.goToAllTitle }}
+        </BButton>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+@import "theme/blue.scss";
+
+.activity-panel {
+    height: 100%;
+    display: flex;
+    flex-flow: column;
+    padding: 0.5rem 0.25rem;
+    background-color: $brand-light;
+
+    .activity-panel-header {
+        padding-bottom: 0.5rem;
+
+        .activity-panel-header-top {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            .activity-panel-heading {
+                margin: 0 !important;
+            }
+        }
+    }
+
+    .activity-panel-body {
+        flex-grow: 1;
+        height: 100%;
+        overflow-y: auto;
+        padding: 0.2rem 0.2rem;
+    }
+
+    .activity-panel-footer {
+        margin-top: 0.5rem;
+    }
+}
+</style>
diff --git a/client/src/components/Panels/NotificationsPanel.vue b/client/src/components/Panels/NotificationsPanel.vue
new file mode 100644
index 000000000000..b0c0bd61cbe1
--- /dev/null
+++ b/client/src/components/Panels/NotificationsPanel.vue
@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faCheckDouble } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BAlert, BButton, BButtonGroup } from "bootstrap-vue";
+import { storeToRefs } from "pinia";
+import { computed } from "vue";
+import { useRouter } from "vue-router/composables";
+
+import { useConfirmDialog } from "@/composables/confirmDialog";
+import { useNotificationsStore } from "@/stores/notificationsStore";
+
+import LoadingSpan from "@/components/LoadingSpan.vue";
+import NotificationCard from "@/components/Notifications/NotificationCard.vue";
+import ActivityPanel from "@/components/Panels/ActivityPanel.vue";
+
+library.add(faCheckDouble);
+
+const router = useRouter();
+const { confirm } = useConfirmDialog();
+
+const notificationsStore = useNotificationsStore();
+const { notifications, loadingNotifications } = storeToRefs(notificationsStore);
+
+const unreadNotifications = computed(() => {
+    return notifications.value.filter((notification) => !notification.seen_time);
+});
+
+async function onMarkAllAsRead() {
+    const confirmed = await confirm("Are you sure you want to mark all unread notifications as read?", {
+        title: "Mark all unread notifications as read?",
+    });
+
+    if (confirmed) {
+        await notificationsStore.updateBatchNotification({
+            notification_ids: unreadNotifications.value.map((n) => n.id),
+            changes: { seen: true },
+        });
+    }
+}
+
+function goToAllNotifications() {
+    router.push("/user/notifications");
+}
+</script>
+
+<template>
+    <ActivityPanel title="Unread Notifications" go-to-all-title="All notifications" @goToAll="goToAllNotifications">
+        <template v-slot:header-buttons>
+            <BButtonGroup>
+                <BButton
+                    v-b-tooltip.bottom.hover
+                    :disabled="!unreadNotifications.length"
+                    data-description="mark all as read"
+                    size="sm"
+                    variant="link"
+                    title="Mark all as read"
+                    @click="onMarkAllAsRead">
+                    <FontAwesomeIcon :icon="faCheckDouble" fixed-width />
+                </BButton>
+            </BButtonGroup>
+        </template>
+
+        <template v-slot:header>
+            <div v-if="!loadingNotifications && unreadNotifications.length">
+                You have {{ unreadNotifications.length }} unread notifications.
+            </div>
+        </template>
+
+        <BAlert v-if="loadingNotifications" key="loading-notifications" show>
+            <LoadingSpan message="Loading notifications" />
+        </BAlert>
+
+        <BAlert v-else-if="!unreadNotifications.length" key="no-notifications-message" show>
+            No unread notifications to show.
+        </BAlert>
+
+        <TransitionGroup name="notifications-box-list" tag="div">
+            <div v-for="notification in unreadNotifications" :key="notification.id" class="notifications-box-card">
+                <NotificationCard :notification="notification" />
+            </div>
+        </TransitionGroup>
+    </ActivityPanel>
+</template>
+
+<style lang="scss" scoped>
+@import "theme/blue.scss";
+
+.notifications-box-card {
+    background-color: $body-bg;
+}
+
+.notifications-box-list-enter-active {
+    transition: all 0.5s ease;
+}
+
+.notifications-box-list-leave-active {
+    transition: all 0.3s ease;
+}
+
+.notifications-box-list-enter {
+    opacity: 0;
+    transform: translateY(-2rem);
+}
+
+.notifications-box-list-leave-to {
+    opacity: 0;
+    transform: translateY(-1rem);
+}
+</style>
diff --git a/client/src/components/Panels/WorkflowBox.vue b/client/src/components/Panels/WorkflowPanel.vue
similarity index 100%
rename from client/src/components/Panels/WorkflowBox.vue
rename to client/src/components/Panels/WorkflowPanel.vue
diff --git a/client/src/components/User/Notifications/NotificationsPreferences.vue b/client/src/components/User/Notifications/NotificationsPreferences.vue
index deda784f691b..5d6f0c3ca017 100644
--- a/client/src/components/User/Notifications/NotificationsPreferences.vue
+++ b/client/src/components/User/Notifications/NotificationsPreferences.vue
@@ -2,7 +2,7 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BButton, BCard, BCol, BFormCheckbox, BRow } from "bootstrap-vue";
+import { BAlert, BButton, BFormCheckbox } from "bootstrap-vue";
 import { computed, ref, watch } from "vue";
 
 import {
@@ -19,15 +19,19 @@ import {
 } from "@/composables/utils/pushNotifications";
 
 import AsyncButton from "@/components/Common/AsyncButton.vue";
+import Heading from "@/components/Common/Heading.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
 library.add(faExclamationCircle);
 
-defineProps({
-    headerSize: {
-        type: String,
-        default: "h-lg",
-    },
+interface NotificationsPreferencesProps {
+    embedded?: boolean;
+    headerSize?: string;
+}
+
+const props = withDefaults(defineProps<NotificationsPreferencesProps>(), {
+    embedded: true,
+    headerSize: "h-lg",
 });
 
 const { config } = useConfig(true);
@@ -96,12 +100,23 @@ watch(
 
 <template>
     <section class="notifications-preferences">
-        <h1 v-localize :class="headerSize">Manage notifications preferences</h1>
-
-        <span v-if="config.enable_notification_system" v-localize class="mb-2">
+        <Heading
+            h1
+            :separator="props.embedded"
+            inline
+            size="xl"
+            class="notifications-preferences-header"
+            :class="headerSize">
+            Manage notifications preferences
+        </Heading>
+
+        <div v-if="config.enable_notification_system" v-localize class="notifications-preferences-description">
             You can manage notifications channels and preferences here.
-        </span>
-        <span v-else v-localize class="mb-2"> You can manage push notifications preferences here. </span>
+        </div>
+
+        <div v-else v-localize class="notifications-preferences-description">
+            You can manage push notifications preferences here.
+        </div>
 
         <BAlert v-if="errorMessage" show dismissible fade variant="warning" @dismissed="errorMessage = null">
             {{ errorMessage }}
@@ -111,89 +126,118 @@ watch(
             <LoadingSpan message="Loading notifications preferences" />
         </BAlert>
 
-        <BRow v-else-if="showPreferences" class="mx-1">
-            <BCol v-for="category in categories" :key="category">
-                <BCard class="my-2 px-2">
-                    <BRow align-h="between" align-v="center">
-                        <BCol cols="auto" class="mx-2">
-                            <BRow>
-                                <span v-localize class="category-title">{{ capitalizeWords(category) }}</span>
-                            </BRow>
-                            <BRow v-if="categoryDescriptionMap[category]">
-                                <span v-localize class="category-description">
-                                    {{ categoryDescriptionMap[category] }}
-                                </span>
-                            </BRow>
-                        </BCol>
-                        <BCol cols="auto" class="p-0">
-                            <BFormCheckbox
-                                v-model="notificationsPreferences[category].enabled"
-                                v-b-tooltip.hover
-                                :title="
-                                    notificationsPreferences[category].enabled
-                                        ? 'Disable notifications'
-                                        : 'Enable notifications'
-                                "
-                                switch />
-                        </BCol>
-                    </BRow>
-                    <BRow class="p-2">
-                        <BCol
-                            v-for="channel in Object.keys(notificationsPreferences[category].channels)"
-                            :key="channel"
-                            class="d-flex align-items-center">
-                            <BFormCheckbox
-                                v-model="notificationsPreferences[category].channels[channel]"
-                                v-localize
-                                :disabled="!notificationsPreferences[category].enabled">
-                                {{ capitalizeWords(channel) }}
-                            </BFormCheckbox>
-                            <FontAwesomeIcon
-                                v-if="channel === 'push'"
-                                v-b-tooltip.hover="'Push notifications need to be enabled'"
-                                class="mx-2"
-                                icon="exclamation-circle" />
-                        </BCol>
-                    </BRow>
-                </BCard>
-            </BCol>
-        </BRow>
-
-        <BRow v-if="!loading" class="m-1" align-h="center">
-            <BCard v-if="browserSupportsPushNotifications() && !pushNotificationsGranted" class="my-2">
-                Allow push and tab notifications. To disable, revoke the site notification privilege in your browser.
-                <BButton
-                    v-b-tooltip.hover
-                    class="mx-2"
-                    title="Enable push notifications"
-                    @click="onTogglePushNotifications">
-                    Enable push notifications
-                </BButton>
-            </BCard>
-            <BAlert
-                v-else-if="browserSupportsPushNotifications() && pushNotificationsGranted"
-                show
-                variant="info"
-                class="my-2">
-                <FontAwesomeIcon icon="check-circle" />
-                Push notifications are enabled. You can disable them by revoking the site notification privilege in your
-                browser.
-            </BAlert>
-            <BAlert v-else show variant="warning" class="my-2">
-                <FontAwesomeIcon icon="exclamation-circle" />
-                Push notifications are not supported by this browser. You can still receive in-app notifications.
-            </BAlert>
-        </BRow>
-
-        <BRow v-if="!loading && config.enable_notification_system" class="m-1" align-h="center">
+        <div v-else-if="showPreferences" class="notifications-preferences-body">
+            <div v-for="category in categories" :key="category" class="card-container">
+                <div class="category-header">
+                    <div>
+                        <div v-localize class="category-title">{{ capitalizeWords(category) }}</div>
+
+                        <div v-if="categoryDescriptionMap[category]" v-localize class="category-description">
+                            {{ categoryDescriptionMap[category] }}
+                        </div>
+                    </div>
+
+                    <BFormCheckbox
+                        v-model="notificationsPreferences[category].enabled"
+                        v-b-tooltip.hover
+                        :title="
+                            notificationsPreferences[category].enabled
+                                ? 'Disable notifications'
+                                : 'Enable notifications'
+                        "
+                        switch />
+                </div>
+
+                <div
+                    v-for="channel in Object.keys(notificationsPreferences[category].channels)"
+                    :key="channel"
+                    class="category-channel">
+                    <BFormCheckbox
+                        v-model="notificationsPreferences[category].channels[channel]"
+                        v-localize
+                        :disabled="!notificationsPreferences[category].enabled">
+                        {{ capitalizeWords(channel) }}
+                    </BFormCheckbox>
+
+                    <FontAwesomeIcon
+                        v-if="channel === 'push'"
+                        v-b-tooltip.hover="'Push notifications need to be enabled'"
+                        class="mx-2"
+                        icon="exclamation-circle" />
+                </div>
+            </div>
+        </div>
+
+        <div
+            v-if="!loading && browserSupportsPushNotifications() && !pushNotificationsGranted"
+            class="card-container push-notifications-notice">
+            Allow push and tab notifications. To disable, revoke the site notification privilege in your browser.
+            <BButton
+                v-b-tooltip.hover
+                class="mx-2"
+                title="Enable push notifications"
+                @click="onTogglePushNotifications">
+                Enable push notifications
+            </BButton>
+        </div>
+
+        <BAlert
+            v-else-if="!loading && browserSupportsPushNotifications() && pushNotificationsGranted"
+            show
+            variant="info"
+            class="my-2">
+            <FontAwesomeIcon icon="check-circle" />
+            Push notifications are enabled. You can disable them by revoking the site notification privilege in your
+            browser.
+        </BAlert>
+
+        <BAlert v-else-if="!loading" show variant="warning" class="my-2">
+            <FontAwesomeIcon icon="exclamation-circle" />
+            Push notifications are not supported by this browser. You can still receive in-app notifications.
+        </BAlert>
+
+        <div v-if="!loading && config.enable_notification_system" class="d-flex justify-content-center">
             <AsyncButton :action="updateNotificationsPreferences" icon="save" variant="primary" size="md">
                 <span v-localize>Save</span>
             </AsyncButton>
-        </BRow>
+        </div>
     </section>
 </template>
 
 <style scoped lang="scss">
+.notifications-preferences {
+    .notifications-preferences-header {
+        flex-grow: 1;
+    }
+
+    .notifications-preferences-description {
+        margin-bottom: 1rem;
+    }
+
+    .notifications-preferences-body {
+        display: flex;
+        justify-content: space-around;
+
+        .category-header {
+            gap: 1rem;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 0.5rem;
+        }
+
+        .category-channel {
+            display: flex;
+            align-items: center;
+        }
+    }
+
+    .push-notifications-notice {
+        margin: 0.5rem auto;
+        width: fit-content;
+    }
+}
+
 .category-title {
     font-weight: bold;
 }
diff --git a/client/src/style/scss/ui.scss b/client/src/style/scss/ui.scss
index 30f090bd5ac2..35501d175c55 100644
--- a/client/src/style/scss/ui.scss
+++ b/client/src/style/scss/ui.scss
@@ -458,3 +458,10 @@ $ui-margin-horizontal-large: $margin-v * 2;
         color: $brand-light;
     }
 }
+
+.card-container {
+    padding: 0.7rem;
+    margin-bottom: 0.5rem;
+    border-radius: 0.5rem;
+    border: 0.1rem solid $brand-secondary;
+}