diff --git a/src/Frontend/src/components/ColumnHeader.vue b/src/Frontend/src/components/ColumnHeader.vue
new file mode 100644
index 000000000..12f71deb1
--- /dev/null
+++ b/src/Frontend/src/components/ColumnHeader.vue
@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import type { SortInfo } from "./SortInfo";
+
+const props = withDefaults(
+  defineProps<{
+    name: string;
+    label: string;
+    unit?: string;
+    sortable?: boolean;
+    sortBy?: string;
+    sortState?: SortInfo;
+    defaultAscending?: boolean;
+    interactiveHelp?: boolean;
+  }>(),
+  {
+    sortable: false,
+    defaultAscending: false,
+    interactiveHelp: false,
+  }
+);
+
+const sortByColumn = computed(() => props.sortBy || props.name);
+const activeSortColumn = defineModel<SortInfo>();
+const isSortActive = computed(() => activeSortColumn?.value?.property === sortByColumn.value);
+const sortIcon = computed(() => (activeSortColumn?.value?.isAscending ? "sort-up" : "sort-down"));
+
+function toggleSort() {
+  activeSortColumn.value = { property: sortByColumn.value, isAscending: isSortActive.value ? !activeSortColumn?.value?.isAscending : props.defaultAscending };
+}
+</script>
+
+<template>
+  <div role="columnheader" :aria-label="props.name">
+    <div class="box-header">
+      <button v-if="props.sortable" @click="toggleSort" class="column-header-button" :aria-label="props.name">
+        <span>
+          {{ props.label }}
+          <span v-if="props.unit" class="table-header-unit">{{ props.unit }}</span>
+          <span v-if="isSortActive">
+            <i role="img" :class="sortIcon" :aria-label="sortIcon"></i>
+          </span>
+          <tippy v-if="$slots.help" max-width="400px" :interactive="props.interactiveHelp">
+            <i class="fa fa-sm fa-info-circle text-primary ps-1" />
+            <template #content>
+              <slot name="help" />
+            </template>
+          </tippy>
+        </span>
+      </button>
+      <div v-else class="column-header">
+        <span>
+          {{ props.label }}
+          <span v-if="props.unit" class="table-header-unit">{{ props.unit }}</span>
+        </span>
+        <tippy v-if="$slots.help" max-width="400px" :interactive="props.interactiveHelp">
+          <i class="fa fa-sm fa-info-circle text-primary ps-1" />
+          <template #content>
+            <slot name="help" />
+          </template>
+        </tippy>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.column-header {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: default;
+  max-width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+}
+.column-header span,
+.column-header-button span {
+  text-transform: uppercase;
+  display: inline-block;
+  text-align: left;
+}
+.column-header-button {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  max-width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: end;
+}
+
+.column-header-button:hover span {
+  text-decoration: underline;
+}
+
+.column-header-button div {
+  display: inline-block;
+}
+
+.sort-up,
+.sort-down {
+  background-position: center;
+  background-repeat: no-repeat;
+  width: 8px;
+  height: 14px;
+  padding: 0;
+  margin-left: 10px;
+}
+
+.sort-up {
+  background-image: url("@/assets/sort-up.svg");
+}
+
+.sort-down {
+  background: url("@/assets/sort-down.svg");
+}
+
+.sort-up,
+.sort-down {
+  background-repeat: no-repeat;
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>
diff --git a/src/Frontend/src/components/SortableColumn.vue b/src/Frontend/src/components/SortableColumn.vue
deleted file mode 100644
index 953aedad6..000000000
--- a/src/Frontend/src/components/SortableColumn.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<script setup lang="ts">
-import { computed } from "vue";
-import type { SortInfo } from "./SortInfo";
-
-const props = withDefaults(
-  defineProps<{
-    sortBy: string;
-    defaultAscending?: boolean;
-  }>(),
-  { defaultAscending: false }
-);
-
-const activeColumn = defineModel<SortInfo>({ required: true });
-
-const isActive = computed(() => activeColumn.value?.property === props.sortBy);
-const sortIcon = computed(() => (activeColumn.value.isAscending ? "sort-up" : "sort-down"));
-
-function toggleSort() {
-  activeColumn.value = { property: props.sortBy, isAscending: isActive.value ? !activeColumn.value.isAscending : props.defaultAscending };
-}
-</script>
-<template>
-  <div class="box-header">
-    <button v-if="props.sortBy" @click="toggleSort" class="column-header-button" :aria-label="props.sortBy">
-      <span>
-        <slot></slot>
-        <span class="table-header-unit"><slot name="unit"></slot></span>
-        <span>
-          <i role="img" v-if="isActive" :class="sortIcon" :aria-label="sortIcon"></i>
-        </span>
-      </span>
-    </button>
-    <div v-else class="column-header">
-      <span>
-        <slot></slot>
-        <span class="table-header-unit"><slot name="unit"></slot></span>
-      </span>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.column-header {
-  background: none;
-  border: none;
-  padding: 0;
-  cursor: default;
-  max-width: 100%;
-  display: flex;
-  flex-wrap: wrap;
-}
-.column-header-button {
-  background: none;
-  border: none;
-  padding: 0;
-  cursor: pointer;
-  max-width: 100%;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: end;
-}
-
-.column-header-button span {
-  text-transform: uppercase;
-  display: inline-block;
-  text-align: left;
-}
-
-.column-header-button:hover span {
-  text-decoration: underline;
-}
-
-.column-header-button div {
-  display: inline-block;
-}
-
-.sort-up,
-.sort-down {
-  background-position: center;
-  background-repeat: no-repeat;
-  width: 8px;
-  height: 14px;
-  padding: 0;
-  margin-left: 10px;
-}
-
-.sort-up {
-  background-image: url("@/assets/sort-up.svg");
-}
-
-.sort-down {
-  background: url("@/assets/sort-down.svg");
-}
-
-.sort-up,
-.sort-down {
-  background-repeat: no-repeat;
-  display: inline-block;
-  vertical-align: middle;
-}
-</style>
diff --git a/src/Frontend/src/components/heartbeats/EndpointInstances.vue b/src/Frontend/src/components/heartbeats/EndpointInstances.vue
index 9853305a4..438da1104 100644
--- a/src/Frontend/src/components/heartbeats/EndpointInstances.vue
+++ b/src/Frontend/src/components/heartbeats/EndpointInstances.vue
@@ -4,13 +4,12 @@ import { storeToRefs } from "pinia";
 import { useRoute, useRouter } from "vue-router";
 import { computed, onMounted, ref } from "vue";
 import { EndpointStatus } from "@/resources/Heartbeat";
-import SortableColumn from "@/components/SortableColumn.vue";
+import ColumnHeader from "@/components/ColumnHeader.vue";
 import DataView from "@/components/DataView.vue";
 import OnOffSwitch from "../OnOffSwitch.vue";
 import routeLinks from "@/router/routeLinks";
 import { useShowToast } from "@/composables/toast";
 import { TYPE } from "vue-toastification";
-import { Tippy } from "vue-tippy";
 import { useHeartbeatInstancesStore, ColumnNames } from "@/stores/HeartbeatInstancesStore";
 import { EndpointsView } from "@/resources/EndpointView";
 import endpointSettingsClient from "@/components/heartbeats/endpointSettingsClient";
@@ -159,41 +158,19 @@ async function toggleAlerts(instance: EndpointsView) {
     <section role="table" aria-label="endpoint-instances">
       <!--Table headings-->
       <div role="row" aria-label="column-headers" class="row table-head-row" :style="{ borderTop: 0 }">
-        <div role="columnheader" :aria-label="ColumnNames.InstanceName" class="col-6">
-          <SortableColumn :sort-by="ColumnNames.InstanceName" v-model="sortByInstances" :default-ascending="true">Host Name</SortableColumn>
-        </div>
-        <div role="columnheader" :aria-label="ColumnNames.LastHeartbeat" class="col-2">
-          <SortableColumn :sort-by="ColumnNames.LastHeartbeat" v-model="sortByInstances">Last Heartbeat</SortableColumn>
-        </div>
-        <div role="columnheader" :aria-label="ColumnNames.MuteToggle" class="col-2 centre">
-          <SortableColumn :sort-by="ColumnNames.MuteToggle" v-model="sortByInstances">Mute Alerts</SortableColumn>
-          <tippy max-width="400px">
-            <i :style="{ fontSize: '1.1em', marginLeft: '0.25em' }" class="fa fa-info-circle text-primary" />
-            <template #content>
-              <span>Mute an instance when you are planning to take the instance offline to do maintenance or some other reason. This will prevent alerts on the dashboard.</span>
-            </template>
-          </tippy>
-        </div>
-        <div role="columnheader" aria-label="actions" class="col-1">
-          <div>
-            Actions
-            <tippy max-width="400px">
-              <i :style="{ fontSize: '1.1em' }" class="fa fa-info-circle text-primary" />
-              <template #content>
-                <table>
-                  <tbody>
-                    <tr>
-                      <td style="padding: 3px; width: 6em; text-align: end; align-content: center">
-                        <button type="button" class="btn btn-danger btn-sm"><i class="fa fa-trash text-white" /> Delete</button>
-                      </td>
-                      <td style="padding: 3px">Delete an instance when that instance has been decommissioned.</td>
-                    </tr>
-                  </tbody>
-                </table>
-              </template>
-            </tippy>
-          </div>
-        </div>
+        <ColumnHeader :name="ColumnNames.InstanceName" label="Host Name" class="col-6" v-model="sortByInstances" sortable default-ascending />
+        <ColumnHeader :name="ColumnNames.LastHeartbeat" label="Last Heartbeat" class="col-2" v-model="sortByInstances" sortable />
+        <ColumnHeader :name="ColumnNames.MuteToggle" label="Mute Alerts" class="col-2 centre">
+          <template #help>Mute an instance when you are planning to take the instance offline to do maintenance or some other reason. This will prevent alerts on the dashboard.</template>
+        </ColumnHeader>
+        <ColumnHeader name="actions" label="Actions" class="col-1" interactive-help>
+          <template #help>
+            <div class="d-flex align-items-center p-1">
+              <button type="button" class="btn btn-danger btn-ms text-nowrap me-3" @click="deleteAllInstances()"><i class="fa fa-trash text-white" /> Delete</button>
+              <span>Delete an instance when that instance has been decommissioned.</span>
+            </div>
+          </template>
+        </ColumnHeader>
       </div>
       <no-data v-if="filteredValidInstances.length === 0" message="No endpoint instances found. For untracked endpoints, disconnected instances are automatically pruned.">
         <div v-if="totalValidInstances.length === 0" class="delete-all">
diff --git a/src/Frontend/src/components/heartbeats/HeartbeatsList.vue b/src/Frontend/src/components/heartbeats/HeartbeatsList.vue
index 7a59e2957..4f000fe6d 100644
--- a/src/Frontend/src/components/heartbeats/HeartbeatsList.vue
+++ b/src/Frontend/src/components/heartbeats/HeartbeatsList.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { useHeartbeatsStore, ColumnNames } from "@/stores/HeartbeatsStore";
 import { storeToRefs } from "pinia";
-import SortableColumn from "@/components/SortableColumn.vue";
 import DataView from "@/components/DataView.vue";
 import OnOffSwitch from "../OnOffSwitch.vue";
 import routeLinks from "@/router/routeLinks";
@@ -11,6 +10,7 @@ import { LogicalEndpoint } from "@/resources/Heartbeat";
 import { useShowToast } from "@/composables/toast";
 import { TYPE } from "vue-toastification";
 import LastHeartbeat from "@/components/heartbeats/LastHeartbeat.vue";
+import ColumnHeader from "../ColumnHeader.vue";
 
 defineProps<{
   data: LogicalEndpoint[];
@@ -42,27 +42,13 @@ function endpointHealth(endpoint: LogicalEndpoint) {
   <section role="table" aria-label="endpoint-instances">
     <!--Table headings-->
     <div role="row" aria-label="column-headers" class="row table-head-row" :style="{ borderTop: 0 }">
-      <div v-if="columns.includes(ColumnNames.Name)" role="columnheader" :aria-label="ColumnNames.Name" class="col-6">
-        <SortableColumn :sort-by="ColumnNames.Name" v-model="sortByInstances" :default-ascending="true">Name</SortableColumn>
-      </div>
-      <div v-if="columns.includes(ColumnNames.InstancesDown)" role="columnheader" :aria-label="ColumnNames.InstancesDown" class="col-2">
-        <SortableColumn :sort-by="ColumnNames.InstancesDown" v-model="sortByInstances" :default-ascending="true">Instances</SortableColumn>
-      </div>
-      <div v-if="columns.includes(ColumnNames.InstancesTotal)" role="columnheader" :aria-label="ColumnNames.InstancesTotal" class="col-2">
-        <SortableColumn :sort-by="ColumnNames.InstancesTotal" v-model="sortByInstances" :default-ascending="true">Instances</SortableColumn>
-      </div>
-      <div v-if="columns.includes(ColumnNames.LastHeartbeat)" role="columnheader" :aria-label="ColumnNames.LastHeartbeat" class="col-2">
-        <SortableColumn :sort-by="ColumnNames.LastHeartbeat" v-model="sortByInstances">Last Heartbeat</SortableColumn>
-      </div>
-      <div v-if="columns.includes(ColumnNames.Tracked)" role="columnheader" :aria-label="ColumnNames.Tracked" class="col-1 centre">
-        <SortableColumn :sort-by="ColumnNames.Tracked" v-model="sortByInstances">Track Instances</SortableColumn>
-      </div>
-      <div v-if="columns.includes(ColumnNames.TrackToggle)" role="columnheader" :aria-label="ColumnNames.Tracked" class="col-2 centre">
-        <SortableColumn :sort-by="ColumnNames.TrackToggle" v-model="sortByInstances">Track Instances</SortableColumn>
-      </div>
-      <div v-if="columns.includes(ColumnNames.Muted)" role="columnheader" :aria-label="ColumnNames.Muted" class="col-1 centre">
-        <SortableColumn :sort-by="ColumnNames.Muted" v-model="sortByInstances">Instances Muted</SortableColumn>
-      </div>
+      <ColumnHeader v-if="columns.includes(ColumnNames.Name)" :name="ColumnNames.Name" label="Name" class="col-6" sortable v-model="sortByInstances" default-ascending />
+      <ColumnHeader v-if="columns.includes(ColumnNames.InstancesDown)" :name="ColumnNames.InstancesDown" label="Instances Down" class="col-2" sortable v-model="sortByInstances" default-ascending />
+      <ColumnHeader v-if="columns.includes(ColumnNames.InstancesTotal)" :name="ColumnNames.InstancesTotal" label="Instances" class="col-2" sortable v-model="sortByInstances" default-ascending />
+      <ColumnHeader v-if="columns.includes(ColumnNames.LastHeartbeat)" :name="ColumnNames.LastHeartbeat" label="Last Heartbeat" class="col-2" sortable v-model="sortByInstances" />
+      <ColumnHeader v-if="columns.includes(ColumnNames.Tracked)" :name="ColumnNames.Tracked" label="Track Instances" class="col-1 centre" sortable v-model="sortByInstances" />
+      <ColumnHeader v-if="columns.includes(ColumnNames.TrackToggle)" :name="ColumnNames.TrackToggle" label="Track Instances" class="col-2 centre" sortable v-model="sortByInstances" />
+      <ColumnHeader v-if="columns.includes(ColumnNames.Muted)" :name="ColumnNames.Muted" label="Instances Muted" class="col-1 centre" sortable v-model="sortByInstances" />
     </div>
     <!--Table rows-->
     <DataView :data="data" :show-items-per-page="true" :items-per-page="itemsPerPage" @items-per-page-changed="store.setItemsPerPage">
diff --git a/src/Frontend/src/components/monitoring/EndpointInstances.vue b/src/Frontend/src/components/monitoring/EndpointInstances.vue
index 705ebcfc6..b73b94e2c 100644
--- a/src/Frontend/src/components/monitoring/EndpointInstances.vue
+++ b/src/Frontend/src/components/monitoring/EndpointInstances.vue
@@ -9,6 +9,7 @@ import NoData from "@/components/NoData.vue";
 import SmallGraph from "./SmallGraph.vue";
 import type { ExtendedEndpointInstance } from "@/resources/MonitoringEndpoint";
 import routeLinks from "@/router/routeLinks";
+import ColumnHeader from "@/components/ColumnHeader.vue";
 
 const isRemovingEndpointEnabled = ref<boolean>(false);
 const router = useRouter();
@@ -57,39 +58,19 @@ onMounted(async () => {
       <!-- Breakdown by instance-->
       <!--headers-->
       <div role="row" aria-label="instances-column-headers" class="row box box-no-click table-head-row">
-        <div class="col-xs-4 col-xl-8">
-          <div role="columnheader" aria-label="instance-name" class="row box-header">
-            <div class="col-xs-12">Instance Name</div>
-          </div>
-        </div>
-        <div class="col-xs-2 col-xl-1 no-side-padding">
-          <div class="row box-header">
-            <div role="columnheader" aria-label="throughput" class="col-xs-12 no-side-padding" v-tippy="`Throughput: The number of messages per second successfully processed by a receiving endpoint.`">
-              Throughput <span class="table-header-unit">(msgs/s)</span>
-            </div>
-          </div>
-        </div>
-        <div class="col-xs-2 col-xl-1 no-side-padding">
-          <div class="row box-header">
-            <div role="columnheader" aria-label="scheduled-retires" class="col-xs-12 no-side-padding" v-tippy="`Scheduled retries: The number of messages per second scheduled for retries (immediate or delayed).`">
-              Scheduled retries <span class="table-header-unit">(msgs/s)</span>
-            </div>
-          </div>
-        </div>
-        <div class="col-xs-2 col-xl-1 no-side-padding">
-          <div class="row box-header">
-            <div role="columnheader" aria-label="processing-time" class="col-xs-12 no-side-padding" v-tippy="`Processing time: The time taken for a receiving endpoint to successfully process a message.`">
-              Processing Time <span class="table-header-unit">(t)</span>
-            </div>
-          </div>
-        </div>
-        <div class="col-xs-2 col-xl-1 no-side-padding">
-          <div class="row box-header">
-            <div role="columnheader" aria-label="critical-time" class="col-xs-12 no-side-padding" v-tippy="`Critical time: The elapsed time from when a message was sent, until it was successfully processed by a receiving endpoint.`">
-              Critical Time <span class="table-header-unit">(t)</span>
-            </div>
-          </div>
-        </div>
+        <ColumnHeader name="instance-name" label="Instance Name" class="col-xs-4 col-xl-8" />
+        <ColumnHeader name="throughput" label="Throughput" unit="(msgs/s)" class="col-xs-2 col-xl-1 no-side-padding">
+          <template #help>Throughput: The number of messages per second successfully processed by a receiving endpoint.</template>
+        </ColumnHeader>
+        <ColumnHeader name="retires" label="Scheduled retries" unit="(msgs/s)" class="col-xs-2 col-xl-1 no-side-padding">
+          <template #help>Scheduled retries: The number of messages per second scheduled for retries (immediate or delayed).</template>
+        </ColumnHeader>
+        <ColumnHeader name="processing-time" label="Processing time" unit="(t)" class="col-xs-2 col-xl-1 no-side-padding">
+          <template #help>Processing time: The time taken for a receiving endpoint to successfully process a message.</template>
+        </ColumnHeader>
+        <ColumnHeader name="critical-time" label="Critical time" unit="(t)" class="col-xs-2 col-xl-1 no-side-padding">
+          <template #help>Critical time: The elapsed time from when a message was sent, until it was successfully processed by a receiving endpoint.</template>
+        </ColumnHeader>
       </div>
 
       <NoData v-if="!endpoint?.instances?.length" title="No messages" message="No messages processed in this period of time"></NoData>
diff --git a/src/Frontend/src/components/monitoring/EndpointList.vue b/src/Frontend/src/components/monitoring/EndpointList.vue
index 3582256ff..3d98c73c4 100644
--- a/src/Frontend/src/components/monitoring/EndpointList.vue
+++ b/src/Frontend/src/components/monitoring/EndpointList.vue
@@ -1,79 +1,33 @@
 <script setup lang="ts">
-import EndpointListColumnHeader from "./EndpointListColumnHeader.vue";
+import ColumnHeader from "../ColumnHeader.vue";
 import EndpointListRow, { columnName } from "./EndpointListRow.vue";
 import { useMonitoringStore } from "@/stores/MonitoringStore";
 import { storeToRefs } from "pinia";
 
 const monitoringStore = useMonitoringStore();
 const { sortBy: activeColumn } = storeToRefs(monitoringStore);
-
-type EndpointListColumn = {
-  name: columnName;
-  displayName: string;
-  displayUnit?: string;
-  sort: string;
-  toolTip?: string;
-};
-
-const columns: EndpointListColumn[] = [
-  {
-    name: columnName.ENDPOINTNAME,
-    displayName: "Endpoint name",
-    sort: columnName.ENDPOINTNAME,
-  },
-  {
-    name: columnName.QUEUELENGTH,
-    displayName: "Queue Length",
-    displayUnit: "(MSGS)",
-    sort: monitoringStore.endpointListIsGrouped ? "" : columnName.QUEUELENGTH,
-    toolTip: "Queue length: The number of messages waiting to be processed in the input queue(s) of the endpoint.",
-  },
-  {
-    name: columnName.THROUGHPUT,
-    displayName: "Throughput",
-    displayUnit: "(msgs/s)",
-    sort: monitoringStore.endpointListIsGrouped ? "" : columnName.THROUGHPUT,
-    toolTip: "Throughput: The number of messages per second successfully processed by a receiving endpoint.",
-  },
-  {
-    name: columnName.SCHEDULEDRETRIES,
-    displayName: "Scheduled retries",
-    displayUnit: "(msgs/s)",
-    sort: monitoringStore.endpointListIsGrouped ? "" : columnName.SCHEDULEDRETRIES,
-    toolTip: "Scheduled retries: The number of messages per second scheduled for retries (immediate or delayed).",
-  },
-  {
-    name: columnName.PROCESSINGTIME,
-    displayName: "Processing Time",
-    displayUnit: "(t)",
-    sort: monitoringStore.endpointListIsGrouped ? "" : columnName.PROCESSINGTIME,
-    toolTip: "Processing time: The time taken for a receiving endpoint to successfully process a message.",
-  },
-  {
-    name: columnName.CRITICALTIME,
-    displayName: "Critical Time",
-    displayUnit: "(t)",
-    sort: monitoringStore.endpointListIsGrouped ? "" : columnName.CRITICALTIME,
-    toolTip: "Critical time: The elapsed time from when a message was sent, until it was successfully processed by a receiving endpoint.",
-  },
-];
 </script>
 
 <template>
   <section role="table" aria-label="endpoint-list">
     <!--Table headings-->
     <div role="row" aria-label="column-headers" class="table-head-row">
-      <EndpointListColumnHeader
-        v-for="(column, i) in columns"
-        :key="column.name"
-        :columnName="column.name"
-        :columnSort="column.sort"
-        :displayName="column.displayName"
-        :displayUnit="column.displayUnit"
-        :toolTip="column.toolTip"
-        :isFirstCol="i === 0"
-        v-model="activeColumn"
-      />
+      <ColumnHeader :name="columnName.ENDPOINTNAME" label="Endpoint name" class="table-first-col" v-model="activeColumn" sortable default-ascending />
+      <ColumnHeader :name="columnName.QUEUELENGTH" label="Queue length" unit="(msgs)" class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.QUEUELENGTH">
+        <template #help>Queue length: The number of messages waiting to be processed in the input queue(s) of the endpoint.</template>
+      </ColumnHeader>
+      <ColumnHeader :name="columnName.THROUGHPUT" label="Throughput" unit="(msgs/s)" class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.THROUGHPUT">
+        <template #help>Throughput: The number of messages per second successfully processed by a receiving endpoint.</template>
+      </ColumnHeader>
+      <ColumnHeader :name="columnName.SCHEDULEDRETRIES" label="Scheduled retries" unit="(msgs/s)" class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.SCHEDULEDRETRIES">
+        <template #help>Scheduled retries: The number of messages per second scheduled for retries (immediate or delayed).</template>
+      </ColumnHeader>
+      <ColumnHeader :name="columnName.PROCESSINGTIME" label="Processing time" unit="(t)" class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.PROCESSINGTIME">
+        <template #help>Processing time: The time taken for a receiving endpoint to successfully process a message.</template>
+      </ColumnHeader>
+      <ColumnHeader :name="columnName.CRITICALTIME" label="Critical time" unit="(t)" class="table-col" v-model="activeColumn" sortable :sort-by="monitoringStore.endpointListIsGrouped ? '' : columnName.CRITICALTIME">
+        <template #help>Critical time: The elapsed time from when a message was sent, until it was successfully processed by a receiving endpoint.</template>
+      </ColumnHeader>
     </div>
     <div>
       <div v-if="monitoringStore.endpointListIsGrouped" role="rowgroup" aria-label="grouped-endpoints">
diff --git a/src/Frontend/src/components/monitoring/EndpointListColumnHeader.vue b/src/Frontend/src/components/monitoring/EndpointListColumnHeader.vue
deleted file mode 100644
index 8893c3750..000000000
--- a/src/Frontend/src/components/monitoring/EndpointListColumnHeader.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import SortableColumn from "../SortableColumn.vue";
-import { SortInfo } from "../SortInfo";
-
-const props = withDefaults(
-  defineProps<{
-    columnName: string;
-    columnSort: string;
-    displayName: string;
-    displayUnit?: string;
-    toolTip?: string;
-    isFirstCol?: boolean;
-  }>(),
-  { isFirstCol: false }
-);
-
-const activeColumn = defineModel<SortInfo>({ required: true });
-const defaultAscending = props.isFirstCol ? true : undefined;
-</script>
-
-<template>
-  <div role="columnheader" :aria-label="columnName" :class="isFirstCol ? 'table-first-col' : 'table-col'">
-    <SortableColumn :sort-by="columnSort" v-model="activeColumn" :default-ascending="defaultAscending" v-tippy="toolTip">
-      {{ displayName }}<template v-if="displayUnit" #unit>&nbsp;{{ displayUnit }}</template>
-    </SortableColumn>
-  </div>
-</template>
-
-<style scoped>
-@import "endpointTables.css";
-</style>
diff --git a/src/Frontend/src/components/monitoring/EndpointMessageTypes.vue b/src/Frontend/src/components/monitoring/EndpointMessageTypes.vue
index 504306ed0..1f86255b4 100644
--- a/src/Frontend/src/components/monitoring/EndpointMessageTypes.vue
+++ b/src/Frontend/src/components/monitoring/EndpointMessageTypes.vue
@@ -8,6 +8,7 @@ import NoData from "@/components/NoData.vue";
 import SmallGraph from "./SmallGraph.vue";
 import PaginationStrip from "@/components/PaginationStrip.vue";
 import { useMonitoringEndpointDetailsStore } from "@/stores/MonitoringEndpointDetailsStore";
+import ColumnHeader from "@/components/ColumnHeader.vue";
 
 const monitoringStore = useMonitoringEndpointDetailsStore();
 const { endpointDetails: endpoint, messageTypes, messageTypesAvailable } = storeToRefs(monitoringStore);
@@ -45,39 +46,19 @@ const paginatedMessageTypes = computed(() => {
       <!-- Breakdown by message type-->
       <!--headers-->
       <div role="row" aria-label="message-type-column-headers" class="row box box-no-click table-head-row">
-        <div class="col-xs-4 col-xl-8">
-          <div class="row box-header">
-            <div role="columnheader" aria-label="message-type-name" class="col-xs-12">Message type name</div>
-          </div>
-        </div>
-        <div class="col-xs-2 col-xl-1 no-side-padding">
-          <div class="row box-header">
-            <div role="columnheader" aria-label="throughput" class="col-xs-12 no-side-padding" v-tippy="`Throughput: The number of messages per second successfully processed by a receiving endpoint.`">
-              Throughput <span class="table-header-unit">(msgs/s)</span>
-            </div>
-          </div>
-        </div>
-        <div class="col-xs-2 col-xl-1 no-side-padding">
-          <div class="row box-header">
-            <div role="columnheader" aria-label="scheduled-retires" class="col-xs-12 no-side-padding" v-tippy="`Scheduled retries: The number of messages per second scheduled for retries (immediate or delayed).`">
-              Scheduled retries <span class="table-header-unit">(msgs/s)</span>
-            </div>
-          </div>
-        </div>
-        <div class="col-xs-2 col-xl-1 no-side-padding">
-          <div class="row box-header">
-            <div role="columnheader" aria-label="processing-time" class="col-xs-12 no-side-padding" v-tippy="`Processing time: The time taken for a receiving endpoint to successfully process a message.`">
-              Processing Time <span class="table-header-unit">(t)</span>
-            </div>
-          </div>
-        </div>
-        <div class="col-xs-2 col-xl-1 no-side-padding">
-          <div class="row box-header">
-            <div role="columnheader" aria-label="critical-time" class="col-xs-12 no-side-padding" v-tippy="`Critical time: The elapsed time from when a message was sent, until it was successfully processed by a receiving endpoint.`">
-              Critical Time <span class="table-header-unit">(t)</span>
-            </div>
-          </div>
-        </div>
+        <ColumnHeader name="message-type-name" label="Message type name" class="col-xs-4 col-xl-8" />
+        <ColumnHeader name="throughput" label="Throughput" unit="(msgs/s)" class="col-xs-2 col-xl-1 no-side-padding">
+          <template #help>Throughput: The number of messages per second successfully processed by a receiving endpoint.</template>
+        </ColumnHeader>
+        <ColumnHeader name="retires" label="Scheduled retries" unit="(msgs/s)" class="col-xs-2 col-xl-1 no-side-padding">
+          <template #help>Scheduled retries: The number of messages per second scheduled for retries (immediate or delayed).</template>
+        </ColumnHeader>
+        <ColumnHeader name="processing-time" label="Processing time" unit="(t)" class="col-xs-2 col-xl-1 no-side-padding">
+          <template #help>Processing time: The time taken for a receiving endpoint to successfully process a message.</template>
+        </ColumnHeader>
+        <ColumnHeader name="critical-time" label="Critical time" unit="(t)" class="col-xs-2 col-xl-1 no-side-padding">
+          <template #help>Critical time: The elapsed time from when a message was sent, until it was successfully processed by a receiving endpoint.</template>
+        </ColumnHeader>
       </div>
 
       <no-data v-if="!endpoint?.messageTypes?.length" message="No messages processed in this period of time."></no-data>
diff --git a/src/Frontend/src/components/monitoring/endpointTables.css b/src/Frontend/src/components/monitoring/endpointTables.css
index e5ba8a424..143d50f31 100644
--- a/src/Frontend/src/components/monitoring/endpointTables.css
+++ b/src/Frontend/src/components/monitoring/endpointTables.css
@@ -6,7 +6,6 @@
   padding-top: 20px;
   border-bottom: 1px solid #ced6d3;
   border-top: 1px solid #eee;
-  font-size: 12px;
   text-transform: uppercase;
   color: #181919;
 }