diff --git a/web/app/src/components/footer/FooterPopup.vue b/web/app/src/components/footer/FooterPopup.vue
index eff9ffb9..3cb3d19f 100644
--- a/web/app/src/components/footer/FooterPopup.vue
+++ b/web/app/src/components/footer/FooterPopup.vue
@@ -1,62 +1,8 @@
 <script setup>
-import { onMounted } from 'vue'
-import { TabulatorFull as Tabulator } from 'tabulator-tables';
-import { useNotifs } from '@/stores/notifications'
-import * as datetime from "@/datetime";
+import NotificationList from './NotificationList.vue'
 import ConnectionStatus from '@/components/ConnectionStatus.vue'
 
-const notifs = useNotifs();
 const emit = defineEmits(['clickClose'])
-
-const tabOptions = {
-  columns: [
-    {
-      title: 'Time', field: 'time',
-      sorter: 'alphanum', sorterParams: { alignEmptyValues: "top" },
-      formatter(cell) {
-        const cellValue = cell.getData().time;
-        return datetime.shortened(cellValue);
-      },
-      widthGrow: 1,
-      resizable: true,
-    },
-    {
-      title: 'Message',
-      field: 'msg',
-      sorter: 'string',
-      widthGrow: 100,
-      resizable: true,
-    },
-  ],
-  initialSort: [
-    { column: "time", dir: "asc" },
-  ],
-  headerVisible: false,
-  layout: "fitDataStretch",
-  resizableColumnFit: true,
-  height: "calc(20vh - 3rem)", // Must be set in order for the virtual DOM to function correctly.
-  data: notifs.history,
-  placeholder: "Notification history will appear here",
-  selectable: false,
-};
-
-let tabulator = null;
-onMounted(() => {
-  tabulator = new Tabulator('#notification_list', tabOptions);
-  tabulator.on("tableBuilt", _scrollToBottom);
-  tabulator.on("tableBuilt", _subscribeToPinia);
-});
-
-function _scrollToBottom() {
-  if (notifs.empty) return;
-  tabulator.scrollToRow(notifs.lastID, "bottom", false);
-}
-function _subscribeToPinia() {
-  notifs.$subscribe(() => {
-    tabulator.setData(notifs.history)
-      .then(_scrollToBottom)
-  })
-}
 </script>
 
 <template>
@@ -66,6 +12,6 @@ function _subscribeToPinia() {
       <connection-status />
       <button class='close' @click="emit('clickClose')">X</button>
     </header>
-    <div id="notification_list"></div>
+    <notification-list />
   </section>
 </template>
diff --git a/web/app/src/components/footer/NotificationList.vue b/web/app/src/components/footer/NotificationList.vue
new file mode 100644
index 00000000..63dabaf6
--- /dev/null
+++ b/web/app/src/components/footer/NotificationList.vue
@@ -0,0 +1,62 @@
+<script setup>
+import { onMounted } from 'vue'
+import { TabulatorFull as Tabulator } from 'tabulator-tables';
+import { useNotifs } from '@/stores/notifications'
+import * as datetime from "@/datetime";
+
+const notifs = useNotifs();
+
+const tabOptions = {
+  columns: [
+    {
+      title: 'Time', field: 'time',
+      sorter: 'alphanum', sorterParams: { alignEmptyValues: "top" },
+      formatter(cell) {
+        const cellValue = cell.getData().time;
+        return datetime.shortened(cellValue);
+      },
+      widthGrow: 1,
+      resizable: true,
+    },
+    {
+      title: 'Message',
+      field: 'msg',
+      sorter: 'string',
+      widthGrow: 100,
+      resizable: true,
+    },
+  ],
+  initialSort: [
+    { column: "time", dir: "asc" },
+  ],
+  headerVisible: false,
+  layout: "fitDataStretch",
+  resizableColumnFit: true,
+  height: "calc(20vh - 3rem)", // Must be set in order for the virtual DOM to function correctly.
+  data: notifs.history,
+  placeholder: "Notification history will appear here",
+  selectable: false,
+};
+
+let tabulator = null;
+onMounted(() => {
+  tabulator = new Tabulator('#notification_list', tabOptions);
+  tabulator.on("tableBuilt", _scrollToBottom);
+  tabulator.on("tableBuilt", _subscribeToPinia);
+});
+
+function _scrollToBottom() {
+  if (notifs.empty) return;
+  tabulator.scrollToRow(notifs.lastID, "bottom", false);
+}
+function _subscribeToPinia() {
+  notifs.$subscribe(() => {
+    tabulator.setData(notifs.history)
+      .then(_scrollToBottom)
+  })
+}
+</script>
+
+<template>
+    <div id="notification_list"></div>
+</template>