diff --git a/web/app/src/components/ConnectionStatus.vue b/web/app/src/components/ConnectionStatus.vue
new file mode 100644
index 00000000..66bf2343
--- /dev/null
+++ b/web/app/src/components/ConnectionStatus.vue
@@ -0,0 +1,28 @@
+<template>
+  <span class='socket-status' v-if="!sockStatus.isConnected" :title="sockStatus.message">Connection Lost</span>
+</template>
+
+<script setup>
+import { useSocketStatus } from '@/stores/socket-status';
+
+const sockStatus = useSocketStatus();
+</script>
+
+<style scoped>
+.socket-status {
+  font-size: 1rem;
+
+  min-width: 1.2em;
+  padding: 0.1em 1em;
+  border-radius: 0.5em;
+  text-align: center;
+  margin: 0 0.5em;
+
+  color: var(--color-connection-lost-text);
+  background-color: var(--color-connection-lost-bg);
+  box-shadow: 0 0 1em var(--color-connection-lost-bg);
+  border: solid thin var(--color-connection-lost-text);
+
+  cursor: help;
+}
+</style>
diff --git a/web/app/src/components/FooterPopup.vue b/web/app/src/components/FooterPopup.vue
index 0a4c3b5e..eff9ffb9 100644
--- a/web/app/src/components/FooterPopup.vue
+++ b/web/app/src/components/FooterPopup.vue
@@ -3,6 +3,7 @@ import { onMounted } from 'vue'
 import { TabulatorFull as Tabulator } from 'tabulator-tables';
 import { useNotifs } from '@/stores/notifications'
 import * as datetime from "@/datetime";
+import ConnectionStatus from '@/components/ConnectionStatus.vue'
 
 const notifs = useNotifs();
 const emit = defineEmits(['clickClose'])
@@ -62,6 +63,7 @@ function _subscribeToPinia() {
   <section class="footer-popup">
     <header>
       <h3 class="sub-title">Notifications</h3>
+      <connection-status />
       <button class='close' @click="emit('clickClose')">X</button>
     </header>
     <div id="notification_list"></div>
diff --git a/web/app/src/components/NotificationBar.vue b/web/app/src/components/NotificationBar.vue
index cb1350b7..869e0fc2 100644
--- a/web/app/src/components/NotificationBar.vue
+++ b/web/app/src/components/NotificationBar.vue
@@ -1,19 +1,21 @@
 <template>
   <section class="notification-bar">
     <span class='notifications' v-if="notifs.last">{{ notifs.last.msg }}</span>
-    <span class='socket-status' v-if="!sockStatus.isConnected" :title="sockStatus.message">Connection Lost</span>
+    <connection-status />
   </section>
 </template>
 
 <script>
 import { useNotifs } from '@/stores/notifications';
-import { useSocketStatus } from '@/stores/socket-status';
+import ConnectionStatus from '@/components/ConnectionStatus.vue'
 
 export default {
   name: 'NotificationBar',
+  components: {
+    ConnectionStatus,
+  },
   data: () => ({
     notifs: useNotifs(),
-    sockStatus: useSocketStatus(),
   }),
 }
 </script>
@@ -25,20 +27,5 @@ export default {
 
 .socket-status {
   float: right;
-
-  font-weight: bold;
-  font-size: larger;
-
-  min-width: 1.2em;
-  padding: 0.2em 1em;
-  border-radius: 0.5em;
-  text-align: center;
-
-  color: var(--color-connection-lost-text);
-  background-color: var(--color-connection-lost-bg);
-  box-shadow: 0 0 1em var(--color-connection-lost-bg);
-  border: solid thin var(--color-connection-lost-text);
-
-  cursor: help;
 }
 </style>