diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index c1ba10e96..2ab753230 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -24,7 +24,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v4.1.0
         with:
-          node-version: 21.6.x
+          node-version: 22.13.x
       - name: Build Frontend
         run: .\build.ps1
         working-directory: src/ServicePulse.Host
diff --git a/src/Frontend/src/components/DashboardItem.vue b/src/Frontend/src/components/DashboardItem.vue
index 924db999f..30ff82483 100644
--- a/src/Frontend/src/components/DashboardItem.vue
+++ b/src/Frontend/src/components/DashboardItem.vue
@@ -7,9 +7,9 @@ const props = defineProps<{
 </script>
 
 <template>
-  <RouterLink class="summary-item" :class="{ 'summary-danger': counter > 0, 'summary-info': counter === 0 || !counter }" :to="url">
+  <RouterLink aria-label="Dashboard Item" class="summary-item" :class="{ 'summary-danger': counter > 0, 'summary-info': counter === 0 || !counter }" :to="url">
     <i class="fa fa-3x" :class="props.iconClass"> </i>
-    <span v-if="counter > 0" class="badge badge-important">{{ counter }}</span>
+    <span v-if="counter > 0" aria-label="Alert Count" class="badge badge-important">{{ counter }}</span>
     <h4>
       <slot></slot>
     </h4>
diff --git a/src/Frontend/src/components/NoData.vue b/src/Frontend/src/components/NoData.vue
index b8929b154..8725df681 100644
--- a/src/Frontend/src/components/NoData.vue
+++ b/src/Frontend/src/components/NoData.vue
@@ -11,7 +11,7 @@ const props = defineProps<{
         <div class="col-sm-12">
           <div class="row box-header">
             <div class="col-sm-12">
-              <p class="lead hard-wrap">{{ props.message }}</p>
+              <p class="lead hard-wrap" role="status">{{ props.message }}</p>
               <slot>
                 <p>&nbsp;</p>
               </slot>
diff --git a/src/Frontend/src/components/OnOffSwitch.vue b/src/Frontend/src/components/OnOffSwitch.vue
index dd494359e..04e6cfa29 100644
--- a/src/Frontend/src/components/OnOffSwitch.vue
+++ b/src/Frontend/src/components/OnOffSwitch.vue
@@ -9,7 +9,7 @@ const emit = defineEmits<{ toggle: [] }>();
 
 <template>
   <div class="onoffswitch">
-    <input type="checkbox" :id="`onoffswitch${id}`" :name="`onoffswitch${id}`" class="onoffswitch-checkbox" @click="emit('toggle')" :checked="value ?? false" />
+    <input type="checkbox" :id="`onoffswitch${id}`" :name="`onoffswitch${id}`" :aria-label="`onoffswitch${id}`" class="onoffswitch-checkbox" @click="emit('toggle')" :checked="value ?? false" />
     <label class="onoffswitch-label" :for="`onoffswitch${id}`">
       <span class="onoffswitch-inner"></span>
       <span class="onoffswitch-switch"></span>
diff --git a/src/Frontend/src/components/TimeSince.vue b/src/Frontend/src/components/TimeSince.vue
index 56d62e17e..85583ddd4 100644
--- a/src/Frontend/src/components/TimeSince.vue
+++ b/src/Frontend/src/components/TimeSince.vue
@@ -4,7 +4,7 @@ import moment from "moment";
 
 const emptyDate = "0001-01-01T00:00:00";
 
-const props = withDefaults(defineProps<{ dateUtc?: string; defaultTextOnFailure?: string }>(), { dateUtc: emptyDate, defaultTextOnFailure: "n/a" });
+const props = withDefaults(defineProps<{ dateUtc?: string; defaultTextOnFailure?: string; titleValue?: string }>(), { dateUtc: emptyDate, defaultTextOnFailure: "n/a", titleValue: undefined });
 
 let interval: number | undefined = undefined;
 
@@ -15,9 +15,10 @@ function updateText() {
   if (props.dateUtc != null && props.dateUtc !== emptyDate) {
     const m = moment.utc(props.dateUtc);
     text.value = m.fromNow();
-    title.value = m.local().format("LLLL") + " (local)\n" + m.utc().format("LLLL") + " (UTC)";
+    title.value = props.titleValue ?? m.local().format("LLLL") + " (local)\n" + m.utc().format("LLLL") + " (UTC)";
   } else {
-    text.value = title.value = props.defaultTextOnFailure;
+    text.value = props.defaultTextOnFailure;
+    title.value = props.titleValue ?? props.defaultTextOnFailure;
   }
 }
 
diff --git a/src/Frontend/src/components/heartbeats/EndpointInstances.vue b/src/Frontend/src/components/heartbeats/EndpointInstances.vue
index 9b3742111..9853305a4 100644
--- a/src/Frontend/src/components/heartbeats/EndpointInstances.vue
+++ b/src/Frontend/src/components/heartbeats/EndpointInstances.vue
@@ -207,12 +207,12 @@ async function toggleAlerts(instance: EndpointsView) {
         <template #data="{ pageData }">
           <div role="rowgroup" aria-label="endpoints">
             <div role="row" :aria-label="instance.name" class="row grid-row" v-for="instance in pageData" :key="instance.id">
-              <div role="cell" aria-label="instance-name" class="col-6 host-name">
+              <div role="cell" class="col-6 host-name">
                 <span role="status" class="status-icon">
                   <i v-if="instance.heartbeat_information?.reported_status !== EndpointStatus.Alive" aria-label="instance dead" class="fa fa-heartbeat text-danger" />
                   <i v-else aria-label="instance alive" class="fa fa-heartbeat text-success" />
                 </span>
-                <span class="lead">{{ instance.host_display_name }}</span>
+                <span class="lead" aria-label="instance-name">{{ instance.host_display_name }}</span>
               </div>
               <div role="cell" aria-label="last-heartbeat" class="col-2 last-heartbeat">
                 <LastHeartbeat :date="instance.heartbeat_information?.last_report_at" tooltip-target="instance" />
diff --git a/src/Frontend/src/components/heartbeats/HealthyEndpoints.vue b/src/Frontend/src/components/heartbeats/HealthyEndpoints.vue
index 943cc1819..b36e356d4 100644
--- a/src/Frontend/src/components/heartbeats/HealthyEndpoints.vue
+++ b/src/Frontend/src/components/heartbeats/HealthyEndpoints.vue
@@ -13,7 +13,7 @@ const { healthyEndpoints, filteredHealthyEndpoints } = storeToRefs(store);
   <div class="row">
     <ResultsCount :displayed="filteredHealthyEndpoints.length" :total="healthyEndpoints.length" />
   </div>
-  <section name="healthy_endpoints">
+  <section name="healthy_endpoints" aria-label="Healthy Endpoints">
     <no-data v-if="healthyEndpoints.length === 0" message="No healthy endpoints"></no-data>
     <div v-if="healthyEndpoints.length > 0" class="row">
       <div class="col-sm-12 no-side-padding">
diff --git a/src/Frontend/src/components/heartbeats/HeartbeatConfiguration.vue b/src/Frontend/src/components/heartbeats/HeartbeatConfiguration.vue
index 6342f2d64..73e2529b1 100644
--- a/src/Frontend/src/components/heartbeats/HeartbeatConfiguration.vue
+++ b/src/Frontend/src/components/heartbeats/HeartbeatConfiguration.vue
@@ -91,7 +91,7 @@ async function toggleDefaultSetting() {
     <div class="row">
       <ResultsCount :displayed="filteredEndpoints.length" :total="sortedEndpoints.length" />
     </div>
-    <section name="endpoint_configuration">
+    <section name="endpoint_configuration" aria-label="Endpoint Configuration">
       <div class="row">
         <div class="col-9 no-side-padding">
           <no-data v-if="sortedEndpoints.length === 0" message="Nothing to configure" />
diff --git a/src/Frontend/src/components/heartbeats/HeartbeatsList.vue b/src/Frontend/src/components/heartbeats/HeartbeatsList.vue
index de47e72ad..7a59e2957 100644
--- a/src/Frontend/src/components/heartbeats/HeartbeatsList.vue
+++ b/src/Frontend/src/components/heartbeats/HeartbeatsList.vue
@@ -81,7 +81,7 @@ function endpointHealth(endpoint: LogicalEndpoint) {
                 </tippy>
               </div>
             </div>
-            <div v-if="columns.includes(ColumnNames.InstancesTotal) || columns.includes(ColumnNames.InstancesDown)" role="cell" aria-label="instance-count" class="col-2">
+            <div v-if="columns.includes(ColumnNames.InstancesTotal) || columns.includes(ColumnNames.InstancesDown)" role="cell" class="col-2">
               <tippy :delay="[300, 0]">
                 <template #content>
                   <template v-if="endpoint.track_instances">
@@ -96,15 +96,15 @@ function endpointHealth(endpoint: LogicalEndpoint) {
                 </template>
                 <i v-if="endpoint.track_instances" class="fa fa-server" :class="endpointHealth(endpoint)"></i>
                 <i v-else class="fa fa-sellsy" :class="endpointHealth(endpoint)"></i>&nbsp;
-                <span class="endpoint-count">{{ store.instanceDisplayText(endpoint) }}</span>
+                <span class="endpoint-count" aria-label="instance-count">{{ store.instanceDisplayText(endpoint) }}</span>
               </tippy>
             </div>
             <div v-if="columns.includes(ColumnNames.LastHeartbeat)" role="cell" aria-label="last-heartbeat" class="col-2 last-heartbeat">
               <LastHeartbeat :date="endpoint.heartbeat_information?.last_report_at" tooltip-target="endpoint" />
             </div>
             <div v-if="columns.includes(ColumnNames.Tracked)" role="cell" aria-label="tracked-instances" class="col-1 centre">
-              <tippy v-if="endpoint.track_instances" content="Instances are being tracked" :delay="[1000, 0]">
-                <i class="fa fa-check text-success"></i>
+              <tippy v-if="endpoint.track_instances" id="tracked-instance-desc" content="Instances are being tracked" :delay="[1000, 0]">
+                <i class="fa fa-check text-success" aria-title="Instances are being tracked"></i>
               </tippy>
             </div>
             <div v-if="columns.includes(ColumnNames.TrackToggle)" role="cell" aria-label="tracked-instances" class="col-2 centre">
@@ -117,7 +117,7 @@ function endpointHealth(endpoint: LogicalEndpoint) {
                 <tippy content="All instances have alerts muted" :delay="[300, 0]">
                   <i class="fa fa-bell-slash text-danger" />
                 </tippy>
-                <span class="instances-muted">{{ endpoint.muted_count }}</span>
+                <span class="instances-muted" aria-label="Muted instance count">{{ endpoint.muted_count }}</span>
               </template>
               <template v-else-if="endpoint.muted_count > 0">
                 <tippy :content="`${endpoint.muted_count} instance(s) have alerts muted`" :delay="[300, 0]">
diff --git a/src/Frontend/src/components/heartbeats/HeartbeatsMenuItem.vue b/src/Frontend/src/components/heartbeats/HeartbeatsMenuItem.vue
index 213adff42..c02261408 100644
--- a/src/Frontend/src/components/heartbeats/HeartbeatsMenuItem.vue
+++ b/src/Frontend/src/components/heartbeats/HeartbeatsMenuItem.vue
@@ -8,10 +8,10 @@ const { failedHeartbeatsCount } = storeToRefs(useHeartbeatsStore());
 </script>
 
 <template>
-  <RouterLink :to="routeLinks.heartbeats.root">
+  <RouterLink aria-label="Heartbeats Menu Item" :to="routeLinks.heartbeats.root">
     <i class="fa fa-heartbeat icon-white" title="Heartbeats"></i>
     <span class="navbar-label">Heartbeats</span>
-    <span v-if="failedHeartbeatsCount > 0" class="badge badge-important">{{ failedHeartbeatsCount }}</span>
+    <span v-if="failedHeartbeatsCount > 0" class="badge badge-important" aria-label="Alert Count">{{ failedHeartbeatsCount }}</span>
   </RouterLink>
 </template>
 
diff --git a/src/Frontend/src/components/heartbeats/LastHeartbeat.vue b/src/Frontend/src/components/heartbeats/LastHeartbeat.vue
index 52ce096ff..bc60b02a0 100644
--- a/src/Frontend/src/components/heartbeats/LastHeartbeat.vue
+++ b/src/Frontend/src/components/heartbeats/LastHeartbeat.vue
@@ -6,14 +6,14 @@ defineProps<{ date?: string; tooltipTarget: string }>();
 </script>
 
 <template>
-  <p v-if="date"><time-since :date-utc="date" default-text-on-failure="unknown" /></p>
+  <p v-if="date"><time-since :date-utc="date" default-text-on-failure="unknown" title-value="Last Heartbeat" /></p>
   <p v-else>
     <tippy :delay="[1000, 300]" :interactive="true">
       <template #content>
         <p>No heartbeat data received for this {{ tooltipTarget }}.</p>
         <p>Have you installed and configured the <a target="_blank" href="https://docs.particular.net/monitoring/heartbeats/install-plugin">heartbeats plugin</a> for this {{ tooltipTarget }}?</p>
       </template>
-      <div>No data available</div>
+      <span title="Last Heartbeat">No data available</span>
     </tippy>
   </p>
 </template>
diff --git a/src/Frontend/src/components/heartbeats/UnhealthyEndpoints.vue b/src/Frontend/src/components/heartbeats/UnhealthyEndpoints.vue
index 4c4c8c2a2..0f494d928 100644
--- a/src/Frontend/src/components/heartbeats/UnhealthyEndpoints.vue
+++ b/src/Frontend/src/components/heartbeats/UnhealthyEndpoints.vue
@@ -13,7 +13,7 @@ const { unhealthyEndpoints, filteredUnhealthyEndpoints } = storeToRefs(store);
   <div class="row">
     <ResultsCount :displayed="filteredUnhealthyEndpoints.length" :total="unhealthyEndpoints.length" />
   </div>
-  <section name="unhealthy_endpoints">
+  <section name="unhealthy_endpoints" aria-label="Unhealthy Endpoints">
     <no-data v-if="unhealthyEndpoints.length === 0" message="No unhealthy endpoints"></no-data>
     <div v-else class="row">
       <div class="col-sm-12 no-side-padding">
diff --git a/src/Frontend/src/stores/HeartbeatsStore.spec.ts b/src/Frontend/src/stores/HeartbeatsStore.spec.ts
index e78b32606..703481bdd 100644
--- a/src/Frontend/src/stores/HeartbeatsStore.spec.ts
+++ b/src/Frontend/src/stores/HeartbeatsStore.spec.ts
@@ -14,13 +14,12 @@ import { EndpointStatus } from "@/resources/Heartbeat";
 import { ColumnNames, useHeartbeatsStore } from "@/stores/HeartbeatsStore";
 
 describe("HeartbeatsStore tests", () => {
-  async function setup(endpoints: EndpointsView[], endpointSettings: EndpointSettings[], preSetup: (driver: Driver) => Promise<void> = () => Promise.resolve()) {
+  async function setup(endpoints: EndpointsView[], endpointSettings: EndpointSettings[] = [{ name: "", track_instances: true }], preSetup: (driver: Driver) => Promise<void> = () => Promise.resolve()) {
     const driver = makeDriverForTests();
 
     await preSetup(driver);
     await driver.setUp(serviceControlWithHeartbeats);
-    await driver.setUp(precondition.hasEndpointSettings(endpointSettings));
-    await driver.setUp(precondition.hasHeartbeatsEndpoints(endpoints));
+    await driver.setUp(precondition.hasHeartbeatsEndpoints(endpoints, endpointSettings));
 
     useServiceControlUrls();
     await useServiceControl();
@@ -34,7 +33,7 @@ describe("HeartbeatsStore tests", () => {
   }
 
   test("no endpoints", async () => {
-    const { filteredHealthyEndpoints, filteredUnhealthyEndpoints } = await setup([], []);
+    const { filteredHealthyEndpoints, filteredUnhealthyEndpoints } = await setup([]);
 
     expect(filteredHealthyEndpoints.value.length).toBe(0);
     expect(filteredUnhealthyEndpoints.value.length).toBe(0);
diff --git a/src/Frontend/src/views/HeartbeatsView.vue b/src/Frontend/src/views/HeartbeatsView.vue
index d7494040e..270af2715 100644
--- a/src/Frontend/src/views/HeartbeatsView.vue
+++ b/src/Frontend/src/views/HeartbeatsView.vue
@@ -29,21 +29,21 @@ const isMassTransitConnected = useIsMassTransitConnected();
         </div>
         <div class="row">
           <div class="col-sm-12">
-            <div class="tabs">
+            <div class="tabs" role="tablist">
               <div>
                 <!--Inactive Endpoints-->
                 <h5 :class="{ active: isRouteSelected(routeLinks.heartbeats.unhealthy.link) }">
-                  <RouterLink :to="routeLinks.heartbeats.unhealthy.link"> Unhealthy Endpoints ({{ unhealthyEndpoints.length }}) </RouterLink>
+                  <RouterLink role="tab" :aria-selected="isRouteSelected(routeLinks.heartbeats.unhealthy.link)" :to="routeLinks.heartbeats.unhealthy.link"> Unhealthy Endpoints ({{ unhealthyEndpoints.length }}) </RouterLink>
                 </h5>
 
                 <!--Active Endpoints-->
                 <h5 :class="{ active: isRouteSelected(routeLinks.heartbeats.healthy.link) }">
-                  <RouterLink :to="routeLinks.heartbeats.healthy.link"> Healthy Endpoints ({{ healthyEndpoints.length }}) </RouterLink>
+                  <RouterLink role="tab" :aria-selected="isRouteSelected(routeLinks.heartbeats.healthy.link)" :to="routeLinks.heartbeats.healthy.link"> Healthy Endpoints ({{ healthyEndpoints.length }}) </RouterLink>
                 </h5>
 
                 <!--Configuration-->
                 <h5 :class="{ active: isRouteSelected(routeLinks.heartbeats.configuration.link) }">
-                  <RouterLink :to="routeLinks.heartbeats.configuration.link"> Configuration </RouterLink>
+                  <RouterLink role="tab" :aria-selected="isRouteSelected(routeLinks.heartbeats.configuration.link)" :to="routeLinks.heartbeats.configuration.link"> Configuration </RouterLink>
                 </h5>
               </div>
               <div class="filter-group">
diff --git a/src/Frontend/test/mocks/heartbeat-endpoint-template.ts b/src/Frontend/test/mocks/heartbeat-endpoint-template.ts
new file mode 100644
index 000000000..35978b161
--- /dev/null
+++ b/src/Frontend/test/mocks/heartbeat-endpoint-template.ts
@@ -0,0 +1,20 @@
+import { EndpointsView } from "@/resources/EndpointView";
+import { EndpointStatus } from "@/resources/Heartbeat";
+
+export const healthyEndpointTemplate = <EndpointsView>{
+  is_sending_heartbeats: true,
+  id: "HealthyEndpoint",
+  name: "HealthyEndpoint",
+  monitor_heartbeat: true,
+  host_display_name: "HealhtyEndpoint.Hostname",
+  heartbeat_information: { reported_status: EndpointStatus.Alive, last_report_at: new Date().toISOString() },
+};
+
+export const unHealthyEndpointTemplate = <EndpointsView>{
+  is_sending_heartbeats: true,
+  id: "UnHealthyEndpoint",
+  name: `UnHealthyEndpoint`,
+  monitor_heartbeat: true,
+  host_display_name: "UnHealhtyEndpoint.Hostname",
+  heartbeat_information: { reported_status: EndpointStatus.Dead, last_report_at: new Date().toISOString() },
+};
diff --git a/src/Frontend/test/preconditions/hasHeartbeatEndpoints.ts b/src/Frontend/test/preconditions/hasHeartbeatEndpoints.ts
index 0bf18f2ff..ca6a5df54 100644
--- a/src/Frontend/test/preconditions/hasHeartbeatEndpoints.ts
+++ b/src/Frontend/test/preconditions/hasHeartbeatEndpoints.ts
@@ -1,13 +1,184 @@
-import { SetupFactoryOptions } from "../driver";
+import { MockEndpointDynamicOptions, SetupFactoryOptions } from "../driver";
 import { EndpointsView } from "@/resources/EndpointView";
+import { healthyEndpointTemplate, unHealthyEndpointTemplate } from "../mocks/heartbeat-endpoint-template";
+import { DefaultBodyType, PathParams, StrictRequest } from "msw";
+import { EndpointSettings } from "@/resources/EndpointSettings";
 
-export const hasHeartbeatsEndpoints =
-  (endpoints: EndpointsView[]) =>
-  ({ driver }: SetupFactoryOptions) => {
-    driver.mockEndpoint(`${window.defaultConfig.service_control_url}endpoints`, {
-      body: endpoints,
+interface ChangeTracking {
+  track_instances: boolean;
+}
+
+interface MonitorHeartbeat {
+  monitor_heartbeat: boolean;
+}
+
+export const hasHeartbeatsEndpoints = (
+  endpoints: EndpointsView[],
+  endpointSettings = [
+    {
+      name: "",
+      track_instances: true,
+    },
+  ]
+) => {
+  const endpointSettingsList: EndpointSettings[] = [...endpointSettings];
+
+  const endpointsList = [...endpoints];
+
+  return ({ driver }: SetupFactoryOptions) => {
+    driver.mockEndpointDynamic(`${window.defaultConfig.service_control_url}endpoints`, "get", () => {
+      return Promise.resolve({
+        body: endpointsList,
+      });
+    });
+
+    driver.mockEndpointDynamic(`${window.defaultConfig.service_control_url}endpointssettings`, "get", () => {
+      return Promise.resolve({
+        body: endpointSettingsList,
+      });
+    });
+
+    endpointsList.forEach((e) => {
+      driver.mockEndpointDynamic(`${window.defaultConfig.service_control_url}endpoints/${e.id}`, "patch", async (_url: URL, _params: PathParams, request: StrictRequest<DefaultBodyType>) => {
+        const requestBody = <MonitorHeartbeat>await request.json();
+
+        e.monitor_heartbeat = requestBody.monitor_heartbeat;
+
+        return Promise.resolve(<MockEndpointDynamicOptions>{
+          status: 200,
+        });
+      });
+
+      driver.mockEndpointDynamic(`${window.defaultConfig.service_control_url}endpointssettings/${e.id}`, "patch", async (url: URL, params: PathParams, request: StrictRequest<DefaultBodyType>) => {
+        const requestBody = <ChangeTracking>await request.json();
+
+        let endpointSettings = endpointSettingsList.find((setting) => setting.name === e.name);
+
+        if (!endpointSettings) {
+          endpointSettings = {
+            name: e.name,
+            track_instances: requestBody.track_instances,
+          };
+          endpointSettingsList.push(endpointSettings);
+        } else {
+          endpointSettings.track_instances = requestBody.track_instances;
+        }
+
+        return <MockEndpointDynamicOptions>{
+          status: 200,
+        };
+      });
     });
-    return endpoints;
   };
+};
+
+export const hasUnhealthyHeartbeatsEndpoints = (numberOfUnhealthyEndpoints: number, endpointNamePrefix: string) => {
+  const unhealthyEndpoints = [];
+
+  for (let i = 0; i < numberOfUnhealthyEndpoints; i++) {
+    unhealthyEndpoints.push(<EndpointsView>{
+      ...unHealthyEndpointTemplate,
+      id: `${endpointNamePrefix}_${i}`,
+      name: `${endpointNamePrefix}_${i}`,
+    });
+  }
+
+  return hasHeartbeatsEndpoints(unhealthyEndpoints);
+};
+
+export const hasAnUnhealthyEndpoint = () => hasUnhealthyHeartbeatsEndpoints(1, "UnhealthyHeartbeatEndpoint");
+
+export const hasUnhealthyEndpoints = (numberOfUnhealthyHeartbeats: number) => hasUnhealthyHeartbeatsEndpoints(numberOfUnhealthyHeartbeats, "UnhealthyHeartbeatEndpoint");
+
+export const hasAnUnhealthyEndpointWithNamePrefix = (endpointNamePrefix: string) => hasUnhealthyHeartbeatsEndpoints(1, endpointNamePrefix);
+
+export const hasHealthyHeartbeatsEndpoints = (numberOfHealthyEndpoints: number, endpointNamePrefix: string) => {
+  const healthyEndpoints = [];
+
+  for (let i = 0; i < numberOfHealthyEndpoints; i++) {
+    healthyEndpoints.push(<EndpointsView>{
+      ...healthyEndpointTemplate,
+      id: `${endpointNamePrefix}_${i}`,
+      name: `${endpointNamePrefix}_${i}`,
+    });
+  }
+  return hasHeartbeatsEndpoints(healthyEndpoints);
+};
+
+export const hasAHealthyEndpoint = () => hasHealthyHeartbeatsEndpoints(1, "HealthyHeartbeatEndpoit");
+
+export const hasHealthyEndpoints = (numberOfUnhealthyHeartbeats: number) => hasHealthyHeartbeatsEndpoints(numberOfUnhealthyHeartbeats, "HealthyHeartbeatEndpoint");
+
+export const hasAHealthyEndpointWithNamePrefix = (endpointNamePrefix: string) => hasHealthyHeartbeatsEndpoints(1, endpointNamePrefix);
 
 export const hasNoHeartbeatsEndpoints = hasHeartbeatsEndpoints([]);
+
+export const hasAnUnhealthyUnMonitoredEndpoint = () => {
+  return hasHeartbeatsEndpoints([
+    <EndpointsView>{
+      ...unHealthyEndpointTemplate,
+      id: `Unhealthy_UnmonitoredEndpoint`,
+      name: `Unhealthy_UnmonitoredEndpoint`,
+      monitor_heartbeat: false,
+    },
+  ]);
+};
+
+export const hasAHealthyButUnMonitoredEndpoint = () => {
+  return hasHeartbeatsEndpoints([
+    <EndpointsView>{
+      ...healthyEndpointTemplate,
+      id: `Healthy_UnmonitoredEndpoint`,
+      name: `Healthy_UnmonitoredEndpoint`,
+      monitor_heartbeat: false,
+    },
+  ]);
+};
+
+export const HasHealthyAndUnHealthyNamedEndpoints = (numberOfHealthyEndpoints: number, numberOfUnhealthyEndpoints: number, endpointNamePrefix: string) => {
+  const endpoints: EndpointsView[] = [];
+
+  const repeat = (action: (count: number) => void, count: number) => {
+    if (count) {
+      repeat(action, count - 1);
+      action(count);
+    }
+  };
+
+  repeat(
+    (count) =>
+      endpoints.push(<EndpointsView>{
+        ...healthyEndpointTemplate,
+        id: `${endpointNamePrefix}_${count}`,
+        name: `${endpointNamePrefix}_${count}`,
+      }),
+    numberOfHealthyEndpoints
+  );
+
+  repeat(
+    (count) =>
+      endpoints.push(<EndpointsView>{
+        ...unHealthyEndpointTemplate,
+        id: `${endpointNamePrefix}_${numberOfHealthyEndpoints + count}`,
+        name: `${endpointNamePrefix}_${numberOfHealthyEndpoints + count}`,
+      }),
+    numberOfUnhealthyEndpoints
+  );
+
+  return hasHeartbeatsEndpoints(endpoints);
+  // for (let i = 0; i < numberOfHealthyEndpoints; i++) {
+  //   endpoints.push(<EndpointsView>{
+  //     ...healthyEndpointTemplate,
+  //     name: `${endpointNamePrefix}_${i}`,
+  //   });
+  // }
+
+  // for (let i = 0; i < numberOfUnhealthyEndpoints; i++) {
+  //   endpoints.push(<EndpointsView>{
+  //     ...unHealthyEndpointTemplate,
+  //     name: `${endpointNamePrefix}_${i}`,
+  //   });
+  // }
+};
+
+export const HasHealthyAndUnHealthyEndpoints = (numberOfHealthyEndpoints: number, numberOfUnhealthyEndpoints: number) => HasHealthyAndUnHealthyNamedEndpoints(numberOfHealthyEndpoints, numberOfUnhealthyEndpoints, "TestEndpoint");
diff --git a/src/Frontend/test/preconditions/hasServiceControlMainInstance.ts b/src/Frontend/test/preconditions/hasServiceControlMainInstance.ts
index e7a9eb7e1..e5ba80228 100644
--- a/src/Frontend/test/preconditions/hasServiceControlMainInstance.ts
+++ b/src/Frontend/test/preconditions/hasServiceControlMainInstance.ts
@@ -2,7 +2,7 @@ import { serviceControlMainInstance } from "../mocks/service-control-instance-te
 import { SetupFactoryOptions } from "../driver";
 
 export const hasServiceControlMainInstance =
-  (serviceControlVersion = "5.0.4") =>
+  (serviceControlVersion = "6.1.1") =>
   ({ driver }: SetupFactoryOptions) => {
     const serviceControlInstanceUrl = window.defaultConfig.service_control_url;
     driver.mockEndpoint(serviceControlInstanceUrl, {
diff --git a/src/Frontend/test/preconditions/index.ts b/src/Frontend/test/preconditions/index.ts
index 0c20e7a9f..8951e91ba 100644
--- a/src/Frontend/test/preconditions/index.ts
+++ b/src/Frontend/test/preconditions/index.ts
@@ -12,7 +12,7 @@ export { hasEventLogItems } from "../preconditions/hasEventLogItems";
 export { hasRecoverabilityGroups } from "../preconditions/hasEmptyRecoverabilityGroups";
 export * from "./hasEndpointsWithHistoryPeriodData";
 export * from "./hasMonitoredEndpointDetails";
-export { hasNoHeartbeatsEndpoints, hasHeartbeatsEndpoints } from "../preconditions/hasHeartbeatEndpoints";
+export * from "../preconditions/hasHeartbeatEndpoints";
 export { serviceControlWithMonitoring } from "./serviceControlWithMonitoring";
 export * from "./recoverability";
 export { hasLicensingReportAvailable } from "../preconditions/hasLicensingReportAvailable";
diff --git a/src/Frontend/test/specs/heartbeats/actions/navigateToHeartbeatsTabs.ts b/src/Frontend/test/specs/heartbeats/actions/navigateToHeartbeatsTabs.ts
new file mode 100644
index 000000000..20a1b8473
--- /dev/null
+++ b/src/Frontend/test/specs/heartbeats/actions/navigateToHeartbeatsTabs.ts
@@ -0,0 +1,25 @@
+import { screen } from "@testing-library/vue";
+
+export async function navigateToHeartbeatsConfiguration() {
+  const configurationTab = await screen.findByRole("tab", { name: "Configuration" });
+  configurationTab.click();
+
+  // Wait for the tab to switch
+  await screen.findByRole("region", { name: "Endpoint Configuration" });
+}
+
+export async function navigateToHealthyHeartbeats() {
+  const healthyHeartbeatsTab = await screen.findByRole("tab", { name: /Healthy Endpoints \(\d+\)/i });
+  healthyHeartbeatsTab.click();
+
+  // Wait for the tab to switch
+  await screen.findByRole("region", { name: "Healthy Endpoints" });
+}
+
+export async function navigateToUnHealthyHeartbeats() {
+  const unhealthyHeartbeatsTab = await screen.findByRole("tab", { name: /Unhealthy Endpoints \(\d+\)/i });
+  unhealthyHeartbeatsTab.click();
+
+  // Wait for the tab to switch
+  await screen.findByRole("region", { name: "Unhealthy Endpoints" });
+}
diff --git a/src/Frontend/test/specs/heartbeats/actions/setHeartbeatFilter.ts b/src/Frontend/test/specs/heartbeats/actions/setHeartbeatFilter.ts
new file mode 100644
index 000000000..00ec01cd3
--- /dev/null
+++ b/src/Frontend/test/specs/heartbeats/actions/setHeartbeatFilter.ts
@@ -0,0 +1,12 @@
+import { screen } from "@testing-library/vue";
+import UserEvent from "@testing-library/user-event";
+
+export async function setHeartbeatFilter(filterText: string) {
+  const filterBox = <HTMLInputElement>await screen.findByRole("searchbox", { name: "filter by name" });
+
+  if (filterText.length > 0) {
+    await UserEvent.type(filterBox, filterText);
+  } else {
+    await UserEvent.clear(filterBox);
+  }
+}
diff --git a/src/Frontend/test/specs/heartbeats/actions/toggleHeartbeatMonitoring.ts b/src/Frontend/test/specs/heartbeats/actions/toggleHeartbeatMonitoring.ts
new file mode 100644
index 000000000..1f4a5f3b9
--- /dev/null
+++ b/src/Frontend/test/specs/heartbeats/actions/toggleHeartbeatMonitoring.ts
@@ -0,0 +1,7 @@
+import { screen, within } from "@testing-library/vue";
+
+export async function toggleHeartbeatMonitoring(instanceName: string) {
+  const endpointRow = await screen.findByRole("row", { name: instanceName });
+
+  (<HTMLInputElement>within(endpointRow).getByRole("checkbox", { hidden: true })).click();
+}
diff --git a/src/Frontend/test/specs/heartbeats/configuring-heartbeats.spec.ts b/src/Frontend/test/specs/heartbeats/configuring-heartbeats.spec.ts
index a5f35bf50..4a2065c72 100644
--- a/src/Frontend/test/specs/heartbeats/configuring-heartbeats.spec.ts
+++ b/src/Frontend/test/specs/heartbeats/configuring-heartbeats.spec.ts
@@ -1,65 +1,132 @@
 import { test, describe } from "../../drivers/vitest/driver";
+import * as precondition from "../../preconditions";
+import { expect } from "vitest";
+import { getNothingToConfigureStatus } from "./questions/getNothingToConfigureStatus";
+import { navigateToHeartbeatsConfiguration, navigateToUnHealthyHeartbeats } from "./actions/navigateToHeartbeatsTabs";
+import { getEndpointsForConfiguration } from "./questions/getEndpointsForConfiguration";
+import { getEndpointInstance } from "./questions/getEndpointInstance";
+import { toggleHeartbeatMonitoring } from "./actions/toggleHeartbeatMonitoring";
+import { getAllHeartbeatEndpointRecords, getHeartbeatEndpointRecord } from "./questions/getHeartbeatEndpointRecord";
+import flushPromises from "flush-promises";
+import { healthyEndpointTemplate } from "../../mocks/heartbeat-endpoint-template";
+import { setHeartbeatFilter } from "./actions/setHeartbeatFilter";
+import { getHeartbeatFilterValue } from "./questions/getHeartbeatFilterValue";
 
 describe("FEATURE: Heartbeats configuration", () => {
   describe("RULE: A list of all endpoints with the heartbeats plug-in installed should be displayed", () => {
-    test.todo("EXAMPLE: With no endpoints, the text 'Nothing to configure' should be displayed");
+    test("EXAMPLE: With no endpoints, the text 'Nothing to configure' should be displayed", async ({ driver }) => {
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.goTo("heartbeats/unhealthy");
 
-    /* SCENARIO
-      No endpoints
+      await navigateToHeartbeatsConfiguration();
 
-      Given no endpoint instances
-      When the configuration screen is loaded
-      Then the text "Nothing to configure" should be displayed
-    */
+      const nothingToConfigureElement = await getNothingToConfigureStatus();
 
-    test.todo("EXAMPLE: 3 endpoints should be displayed in the list");
-    /* SCENARIO
-      Some endpoints
+      expect(nothingToConfigureElement).toBeTruthy();
+      expect(nothingToConfigureElement.textContent).toBe("Nothing to configure");
+    });
 
-      Given 3 endpoint instances
-        Name |
-        Foo1
-        Foo2
-        Foo3
-      When the configuration screen is loaded
-      Then All 3 endpoints should be displayed
-    */
+    test("EXAMPLE: 3 endpoints should be displayed in the list", async ({ driver }) => {
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(precondition.hasHealthyEndpoints(3));
+      await driver.goTo("heartbeats/unhealthy");
 
-    /* NOTES
-      Endpoint name
-      Host id
-      last reported heartbeat
-      Monitoring status
-    */
+      await navigateToHeartbeatsConfiguration();
+
+      const endpointRows = await getEndpointsForConfiguration();
+
+      expect(endpointRows.size).toBe(3);
+    });
   });
+
   describe("RULE: Toggling on/off heartbeat monitoring for endpoints should be possible", () => {
-    test.todo("EXAMPLE: Heartbeat monitoring toggle should be off by default");
+    test("EXAMPLE: Heartbeat monitoring toggle should be off by default", async ({ driver }) => {
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(precondition.HasHealthyAndUnHealthyEndpoints(1, 1));
+      await driver.goTo("heartbeats/instances/TestEndpoint_2");
+
+      const endpointInstance = await getEndpointInstance("TestEndpoint_2");
+
+      expect(endpointInstance.muted).toBe(false);
+      await flushPromises();
+    });
 
     /* SCENARIO
       Given a monitored endpoint instance
       When the monitoring toggle is clicked
       Then the endpoint instance is no longer monitored
-      And should not appear in the inactive endpoints list
-      And should not appear in the active endpoints list
+      And should appear in the unhealthy endpoints list
+      And should indicate the number of untracked instances.
     */
+    test("EXAMPLE: Clicking the monitoring toggle for an active, healthy endpoint deactivates heartbeat monitoring for that instance", async ({ driver }) => {
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(precondition.HasHealthyAndUnHealthyEndpoints(1, 1));
+      await driver.goTo("heartbeats/instances/TestEndpoint_1");
+
+      await toggleHeartbeatMonitoring("TestEndpoint_1");
+
+      await driver.goTo("heartbeats/unhealthy");
+      // Force all the initial pending remote calls on the page to resolve.
+      await flushPromises();
+
+      const unhealthyEndpoint = await getHeartbeatEndpointRecord("TestEndpoint_1");
+
+      expect(unhealthyEndpoint).toBeTruthy();
+      expect(unhealthyEndpoint?.instancesMuted).toBe(1);
+      await flushPromises();
+    });
 
-    test.todo("EXAMPLE: Clicking the monitoring toggle for an endpoint should activate heartbeat monitoring of the endpoint");
     /* SCENARIO
       Given an unmonitored endpoint instance
       And the instance is sending heartbeats
       When the monitoring toggle is clicked
       Then the endpoint instance is monitored
-      And should appear in the Active Endpoints list
+      And should appear in the Healthy Endpoints list
     */
+    test("EXAMPLE: Clicking the monitoring toggle for a unmonitored, healthy endpoint will activate heartbeat monitoring of the endpoint", async ({ driver }) => {
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(precondition.hasAHealthyButUnMonitoredEndpoint());
+      await driver.goTo("heartbeats/instances/Healthy_UnmonitoredEndpoint");
+
+      await toggleHeartbeatMonitoring("Healthy_UnmonitoredEndpoint");
+
+      await driver.goTo("heartbeats/healthy");
+      // Force all the initial pending remote calls on the page to resolve.
+      await flushPromises();
+
+      const healthyEndpoint = await getHeartbeatEndpointRecord("Healthy_UnmonitoredEndpoint");
+
+      expect(healthyEndpoint).toBeTruthy();
+      expect(healthyEndpoint?.instancesMuted).toBe(0);
+      await flushPromises();
+    });
 
     /* SCENARIO
       Given an unmonitored endpoint instance
       And the instance is not sending heartbeats
       When the monitoring toggle is clicked
       Then the endpoint instance is monitored
-      And should appear in the Inactive Endpoints list
+      And should appear in the Unhealthy Endpoints list
     */
+    test("EXAMPLE: Clicking the monitoring toggle for an unmonitored, unhealthy endpoint will activate heartbeat monitoring of the endpoint", async ({ driver }) => {
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(precondition.hasAnUnhealthyUnMonitoredEndpoint());
+      await driver.goTo("heartbeats/instances/Unhealthy_UnmonitoredEndpoint");
+
+      await toggleHeartbeatMonitoring("Unhealthy_UnmonitoredEndpoint");
+
+      await driver.goTo("heartbeats/unhealthy");
+      // Force all the initial pending remote calls on the page to resolve.
+      await flushPromises();
+
+      const healthyEndpoint = await getHeartbeatEndpointRecord("Unhealthy_UnmonitoredEndpoint");
+
+      expect(healthyEndpoint).toBeTruthy();
+      expect(healthyEndpoint?.instancesMuted).toBe(0);
+      await flushPromises();
+    });
   });
+
   describe("RULE: Sorting by of the name of an endpoint should be possible in all displays", () => {
     test.todo("EXAMPLE: List of endpoints should be sorted by name in ascending order");
 
@@ -103,9 +170,8 @@ describe("FEATURE: Heartbeats configuration", () => {
       And the Sort By field has the same value on all other Endpoint Heartbeats tabs
     */
   });
-  describe("RULE: Filtering endpoints by name should be possible", () => {
-    test.todo("EXAMPLE: Filter string matches a subset of endpoint names should display only those endpoints");
 
+  describe("RULE: Filtering endpoints by name should be possible", () => {
     /* SCENARIO
       Given 3 endpoint instances
         Name |
@@ -117,8 +183,26 @@ describe("FEATURE: Heartbeats configuration", () => {
        And Foo2 should be shown
       And Bar should not be shown
     */
+    test("EXAMPLE: When the filter string matches a subset of endpoint names, only those endpoints should be displayed", async ({ driver }) => {
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(
+        precondition.hasHeartbeatsEndpoints([
+          { ...healthyEndpointTemplate, id: "Foo1", name: "Foo1", host_display_name: "Foo1.Hostname" },
+          { ...healthyEndpointTemplate, id: "Bar", name: "Bar", host_display_name: "Bar.Hostname" },
+          { ...healthyEndpointTemplate, id: "Foo2", name: "Foo2", host_display_name: "Foo2.Hostname" },
+        ])
+      );
+      await driver.goTo("heartbeats/healthy");
+
+      await setHeartbeatFilter("Foo");
+
+      const visibleEndpoints = await getAllHeartbeatEndpointRecords();
+      const unexpectedEndpoints = visibleEndpoints.filter((e) => e.name !== "Foo1" && e.name !== "Foo2");
+
+      expect(unexpectedEndpoints.length).toBe(0);
+      expect(visibleEndpoints.length).toBe(2);
+    });
 
-    test.todo("EXAMPLE: Filter string matches no endpoint names should display no endpoints");
     /* SCENARIO
       Given 3 endpoint instances
         Name |
@@ -130,16 +214,46 @@ describe("FEATURE: Heartbeats configuration", () => {
        And Foo2 should not be shown
       And Foo3 should not be shown
     */
+    test("EXAMPLE: Filter string matches no endpoint names should display no endpoints", async ({ driver }) => {
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(
+        precondition.hasHeartbeatsEndpoints([
+          { ...healthyEndpointTemplate, id: "Foo1", name: "Foo1", host_display_name: "Foo1.Hostname" },
+          { ...healthyEndpointTemplate, id: "Foo2", name: "Foo2", host_display_name: "Foo2.Hostname" },
+          { ...healthyEndpointTemplate, id: "Foo3", name: "Foo3", host_display_name: "Foo3.Hostname" },
+        ])
+      );
+      await driver.goTo("heartbeats/healthy");
+
+      await setHeartbeatFilter("bar");
+
+      const visibleEndpoints = await getAllHeartbeatEndpointRecords();
+      const unexpectedEndpoints = visibleEndpoints.filter((e) => e.name !== "Foo1" && e.name !== "Foo2" && e.name !== "Foo3");
+
+      expect(unexpectedEndpoints.length).toBe(0);
+      expect(visibleEndpoints.length).toBe(0);
+    });
 
-    test.todo("EXAMPLE: The filter string should be persisted on page refresh and across tabs");
     /* SCENARIO
       Given the filter string is ""
       When the text "Foo" is entered into the filter control
       Then the list is filtered (see above)
-      And the filter control on the Active Endpoints tab contains "Foo"
-      And the filter control on the Inactive endpoints tab contains "Foo"
+      And the filter control on the Healthy Endpoints tab contains "Foo"
+      And the filter control on the Unhealthy endpoints tab contains "Foo"
     */
+    test("EXAMPLE: The filter string is persisted on page refresh and across tabs", async ({ driver }) => {
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+
+      await driver.goTo("heartbeats/healthy");
+
+      await setHeartbeatFilter("bar");
+
+      await navigateToUnHealthyHeartbeats();
+
+      expect(await getHeartbeatFilterValue()).toBe("bar");
+    });
   });
+
   describe("RULE: A performance monitoring warning should be displayed", () => {
     test.todo("EXAMPLE: A warning should be displayed when the configuration screen is loaded");
 
diff --git a/src/Frontend/test/specs/heartbeats/dashboard-item.spec.ts b/src/Frontend/test/specs/heartbeats/dashboard-item.spec.ts
index 77ed6080f..740e88b9a 100644
--- a/src/Frontend/test/specs/heartbeats/dashboard-item.spec.ts
+++ b/src/Frontend/test/specs/heartbeats/dashboard-item.spec.ts
@@ -1,7 +1,53 @@
 import { test, describe } from "../../drivers/vitest/driver";
+import * as precondition from "../../preconditions";
+import { expect } from "vitest";
+import { queryHeartbeatDashboardItem } from "./questions/queryHeartbeatDashboardItem";
+import { waitFor } from "@testing-library/vue";
 
 describe("FEATURE: Dashboard item", () => {
-  describe("RULE: The count of inactive endpoints should be displayed", () => {
-    test.todo("Not implemented");
+  describe("RULE: The count of unhealthy endpoints should be displayed", () => {
+    test("EXAMPLE: No unhealthy endpoints.", async ({ driver }) => {
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(precondition.hasAHealthyEndpoint());
+
+      await driver.goTo("dashboard");
+
+      await waitFor(async () => {
+        const heartbeatDashboardItem = await queryHeartbeatDashboardItem();
+
+        // Reverse logic here to make sure the heartbeatDashboardItem is defined but the flag is falsey.
+        expect(heartbeatDashboardItem && !heartbeatDashboardItem.isCounterVisible).toBeTruthy();
+      });
+    });
+
+    test("EXAMPLE: One unhealthy endpoint.", async ({ driver }) => {
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(precondition.hasAnUnhealthyEndpoint());
+
+      await driver.goTo("dashboard");
+
+      await waitFor(async () => {
+        const heartbeatDashboardItem = await queryHeartbeatDashboardItem();
+        // check the endpoint data has been updated immediately
+        expect(heartbeatDashboardItem && heartbeatDashboardItem.isCounterVisible).toBeTruthy();
+        expect(heartbeatDashboardItem && heartbeatDashboardItem.counterValue).toBe(1);
+      });
+    });
+
+    test("EXAMPLE: Three unhealthy endpoints.", async ({ driver }) => {
+      const numberOfUnhealthyEndpoints = 3;
+
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(precondition.hasUnhealthyEndpoints(numberOfUnhealthyEndpoints));
+
+      await driver.goTo("dashboard");
+
+      await waitFor(async () => {
+        const heartbeatDashboardItem = await queryHeartbeatDashboardItem();
+
+        expect(heartbeatDashboardItem && heartbeatDashboardItem.isCounterVisible).toBeTruthy();
+        expect(heartbeatDashboardItem && heartbeatDashboardItem.counterValue).toBe(numberOfUnhealthyEndpoints);
+      });
+    });
   });
 });
diff --git a/src/Frontend/test/specs/heartbeats/menu-item.spec.ts b/src/Frontend/test/specs/heartbeats/menu-item.spec.ts
index 9318662d5..df3c68420 100644
--- a/src/Frontend/test/specs/heartbeats/menu-item.spec.ts
+++ b/src/Frontend/test/specs/heartbeats/menu-item.spec.ts
@@ -1,29 +1,82 @@
+import { expect, vi } from "vitest";
 import { test, describe } from "../../drivers/vitest/driver";
+import * as precondition from "../../preconditions";
+import { queryHeartbeatMenuItem } from "./questions/queryHeartbeatMenuItem";
+import { waitFor } from "@testing-library/vue";
+import flushPromises from "flush-promises";
 
 describe("FEATURE: Menu item", () => {
   describe("RULE: The count of inactive endpoints should be displayed in the navigation menu", () => {
-    test.todo("EXAMPLE: An instance stops sending heartbeats, the menu item should show a badge with (1) of inactive endpoints");
+    test("EXAMPLE: One unhealthy endpoint", async ({ driver }) => {
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(precondition.hasAnUnhealthyEndpoint());
+
+      await driver.goTo("dashboard");
+
+      await waitFor(async () => {
+        const heartbeatMenuItem = await queryHeartbeatMenuItem();
+
+        expect(heartbeatMenuItem && heartbeatMenuItem.isCounterVisible).toBeTruthy();
+        expect(heartbeatMenuItem && heartbeatMenuItem.counterValue).toBe(1);
+      });
+
+      await flushPromises();
+    });
 
     /* SCENARIO
-      Given 5 monitored endpoint instances sending heartbeats
-      When 1 of the endpoint instances stops sending heartbeats
-      Then the menu item in the page header updates to include a badge indicating how many have stopped
+      Given a monitored endpoint instance sending heartbeats
+      When the endpoint instance stops sending heartbeats
+      Then the menu item in the page header updates to include a badge indicating it has stopped
     */
+    test("EXAMPLE: An instance starts sending heartbeats, the menu item should remove the badge", async ({ driver }) => {
+      vi.useFakeTimers();
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(precondition.hasAnUnhealthyEndpointWithNamePrefix("ResurrectingEndpoint"));
+
+      await driver.goTo("dashboard");
+
+      vi.advanceTimersByTime(5000);
+
+      await waitFor(async () => {
+        const heartbeatMenuItem = await queryHeartbeatMenuItem();
+
+        expect(heartbeatMenuItem && heartbeatMenuItem.isCounterVisible).toBeTruthy();
+        expect(heartbeatMenuItem && heartbeatMenuItem.counterValue).toBe(1);
+      });
+
+      await driver.setUp(precondition.hasAHealthyEndpointWithNamePrefix("ResurrectingEndpoint"));
+      vi.advanceTimersByTime(5000);
+
+      await waitFor(async () => {
+        const heartbeatMenuItem = await queryHeartbeatMenuItem();
+
+        expect(heartbeatMenuItem && !heartbeatMenuItem.isCounterVisible).toBeTruthy();
+        expect(heartbeatMenuItem && heartbeatMenuItem.counterValue).toBe(0);
+      });
+
+      vi.restoreAllMocks();
+      await flushPromises();
+    });
 
-    test.todo("EXAMPLE: An instance starts sending heartbeats, the menu item should remove the badge");
     /* SCENARIO
       Given a set of monitored endpoint instances
       When all instances are sending heartbeats
       Then the menu item in the page header does not include a badge
     */
+    test("EXAMPLE: An unmonitored instance stops sending heartbeats, the menu item should not show a badge with a count", async ({ driver }) => {
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(precondition.hasAnUnhealthyUnMonitoredEndpoint());
 
-    test.todo("EXAMPLE: An unmonitored instance stops sending heartbeats, the menu item should not show a badge with a count");
+      await driver.goTo("dashboard");
 
-    /* SCENARIO
-      Given a set of monitored endpoint instances
-      And 1 unmonitored endpoint instance
-      When the unmonitored endpoint instance is not sending heartbeats
-      Then the menu item badge is not displayed
-    */
+      await waitFor(async () => {
+        const heartbeatMenuItem = await queryHeartbeatMenuItem();
+
+        expect(heartbeatMenuItem && !heartbeatMenuItem.isCounterVisible).toBeTruthy();
+        expect(heartbeatMenuItem && heartbeatMenuItem.counterValue).toBe(0);
+      });
+
+      await flushPromises();
+    });
   });
 });
diff --git a/src/Frontend/test/specs/heartbeats/questions/getDashboardItems.ts b/src/Frontend/test/specs/heartbeats/questions/getDashboardItems.ts
new file mode 100644
index 000000000..3c326e434
--- /dev/null
+++ b/src/Frontend/test/specs/heartbeats/questions/getDashboardItems.ts
@@ -0,0 +1,29 @@
+import { screen, within } from "@testing-library/vue";
+
+export interface DashboardItemData {
+  name: string;
+  isCounterVisible: boolean;
+  counterValue: number;
+  dashboardItem: HTMLElement;
+}
+
+export async function getDashboardItems() {
+  const dashboardItems = await screen.findAllByRole("link", { name: "Dashboard Item" });
+
+  return new Map<string, DashboardItemData>(
+    dashboardItems.map((di) => {
+      const name = String(within(di).getByRole("heading").textContent);
+      const counterElement = within(di).queryByLabelText("Alert Count");
+
+      return [
+        name,
+        {
+          name: name,
+          isCounterVisible: counterElement !== null,
+          counterValue: counterElement ? Number(counterElement.textContent) : 0,
+          dashboardItem: di,
+        },
+      ];
+    })
+  );
+}
diff --git a/src/Frontend/test/specs/heartbeats/questions/getEndpointInstance.ts b/src/Frontend/test/specs/heartbeats/questions/getEndpointInstance.ts
new file mode 100644
index 000000000..30711c38b
--- /dev/null
+++ b/src/Frontend/test/specs/heartbeats/questions/getEndpointInstance.ts
@@ -0,0 +1,16 @@
+import { screen, within } from "@testing-library/vue";
+
+// Assumes the current page is /heartbeats/instances/{instance name}
+export async function getEndpointInstance(instanceName: string) {
+  const endpointRow = await screen.findByRole("row", { name: instanceName });
+  const hostName = within(endpointRow).getByLabelText("instance-name").textContent;
+  const lastHeartbeat = within(endpointRow).getByTitle("Last Heartbeat").textContent;
+  const muted = (<HTMLInputElement>within(endpointRow).getByRole("checkbox", { hidden: true })).checked;
+
+  return {
+    hostName,
+    lastHeartbeat,
+    muted,
+    endpointRow,
+  };
+}
diff --git a/src/Frontend/test/specs/heartbeats/questions/getEndpointsForConfiguration.ts b/src/Frontend/test/specs/heartbeats/questions/getEndpointsForConfiguration.ts
new file mode 100644
index 000000000..b963dce8d
--- /dev/null
+++ b/src/Frontend/test/specs/heartbeats/questions/getEndpointsForConfiguration.ts
@@ -0,0 +1,37 @@
+import { screen, within } from "@testing-library/vue";
+
+export interface EndpointConfigurationItem {
+  endpointName: string;
+  instances: string;
+  lastHeartbeat: string;
+  trackingEnabled: boolean;
+  endpointRow: HTMLElement;
+}
+
+export async function getEndpointsForConfiguration() {
+  const endpointList = await screen.findByRole("rowgroup", { name: "endpoints" });
+  const endpointRows = await within(endpointList).findAllByRole("row");
+
+  const map = new Map<string, EndpointConfigurationItem>(
+    endpointRows.map((row) => {
+      const endpointName = String(within(row).getByRole("link", { name: "details-link" }).textContent);
+      const instances = String(within(row).getByLabelText("instance-count").textContent);
+      const lastHeartbeat = String(within(row).getByTitle("Last Heartbeat").textContent);
+      const trackingCheckbox = <HTMLInputElement>within(row).getByRole("checkbox", { hidden: true });
+      const trackingEnabled = trackingCheckbox.ariaLabel === `onoffswitch${endpointName}` && trackingCheckbox.checked;
+
+      return [
+        endpointName,
+        {
+          endpointName: endpointName,
+          instances: instances,
+          lastHeartbeat: lastHeartbeat,
+          trackingEnabled: trackingEnabled,
+          endpointRow: row,
+        },
+      ];
+    })
+  );
+
+  return map;
+}
diff --git a/src/Frontend/test/specs/heartbeats/questions/getHeartbeatEndpointRecord.ts b/src/Frontend/test/specs/heartbeats/questions/getHeartbeatEndpointRecord.ts
new file mode 100644
index 000000000..29de4437e
--- /dev/null
+++ b/src/Frontend/test/specs/heartbeats/questions/getHeartbeatEndpointRecord.ts
@@ -0,0 +1,36 @@
+import { screen, within, waitFor } from "@testing-library/vue";
+
+export type EndpointRecord = {
+  name: string;
+  instanceCount: string;
+  lastHeartbeat: string;
+  trackInstances: boolean;
+  instancesMuted: number;
+};
+
+export async function getHeartbeatEndpointRecord(endpointName: string) {
+  const endpointRow = await waitFor(() => screen.queryByRole("row", { name: endpointName }));
+
+  if (!endpointRow) {
+    return null;
+  }
+  return createRecordFromRowElement(endpointRow);
+}
+
+export async function getAllHeartbeatEndpointRecords() {
+  const endpointRowgroup = await screen.findByRole("rowgroup", { name: "endpoints" });
+  const endpointRows = within(endpointRowgroup).queryAllByRole("row");
+  return endpointRows ? endpointRows.map((row) => createRecordFromRowElement(row)) : [];
+}
+
+function createRecordFromRowElement(endpointRow: HTMLElement) {
+  const mutedInstanceCountElement = within(endpointRow).queryByLabelText("Muted instance count");
+
+  return <EndpointRecord>{
+    name: within(endpointRow).getByRole("link", { name: "details-link" }).textContent,
+    instanceCount: within(endpointRow).getByLabelText("instance-count").textContent,
+    lastHeartbeat: within(endpointRow).getByTitle("Last Heartbeat").textContent,
+    trackInstances: within(endpointRow).queryByTitle("Instances are being tracked") != null,
+    instancesMuted: mutedInstanceCountElement === null ? 0 : Number(mutedInstanceCountElement.textContent),
+  };
+}
diff --git a/src/Frontend/test/specs/heartbeats/questions/getHeartbeatFilterValue.ts b/src/Frontend/test/specs/heartbeats/questions/getHeartbeatFilterValue.ts
new file mode 100644
index 000000000..396025016
--- /dev/null
+++ b/src/Frontend/test/specs/heartbeats/questions/getHeartbeatFilterValue.ts
@@ -0,0 +1,7 @@
+import { screen } from "@testing-library/vue";
+
+export async function getHeartbeatFilterValue() {
+  const filterBox = <HTMLInputElement>await screen.findByRole("searchbox", { name: "filter by name" });
+
+  return filterBox.value;
+}
diff --git a/src/Frontend/test/specs/heartbeats/questions/getNothingToConfigureStatus.ts b/src/Frontend/test/specs/heartbeats/questions/getNothingToConfigureStatus.ts
new file mode 100644
index 000000000..d1b80bdbd
--- /dev/null
+++ b/src/Frontend/test/specs/heartbeats/questions/getNothingToConfigureStatus.ts
@@ -0,0 +1,5 @@
+import { screen } from "@testing-library/vue";
+
+export async function getNothingToConfigureStatus() {
+  return await screen.findByRole("status");
+}
diff --git a/src/Frontend/test/specs/heartbeats/questions/queryHeartbeatDashboardItem.ts b/src/Frontend/test/specs/heartbeats/questions/queryHeartbeatDashboardItem.ts
new file mode 100644
index 000000000..ee13610c1
--- /dev/null
+++ b/src/Frontend/test/specs/heartbeats/questions/queryHeartbeatDashboardItem.ts
@@ -0,0 +1,6 @@
+import { getDashboardItems } from "./getDashboardItems";
+
+export async function queryHeartbeatDashboardItem() {
+  const dashboardItems = await getDashboardItems();
+  return dashboardItems ? dashboardItems.get("Heartbeats") : null;
+}
diff --git a/src/Frontend/test/specs/heartbeats/questions/queryHeartbeatMenuItem.ts b/src/Frontend/test/specs/heartbeats/questions/queryHeartbeatMenuItem.ts
new file mode 100644
index 000000000..9b8a71bd0
--- /dev/null
+++ b/src/Frontend/test/specs/heartbeats/questions/queryHeartbeatMenuItem.ts
@@ -0,0 +1,13 @@
+import { screen, within } from "@testing-library/vue";
+
+export async function queryHeartbeatMenuItem() {
+  const navBar = await screen.findByRole("navigation");
+  const menuItem = await within(navBar).getByRole("link", { name: "Heartbeats Menu Item" });
+  const counter = within(menuItem).queryByLabelText("Alert Count");
+
+  return {
+    menuItemName: menuItem.ariaLabel,
+    isCounterVisible: counter && true,
+    counterValue: counter ? Number(counter.textContent) : 0,
+  };
+}
diff --git a/src/Frontend/test/specs/licensing/license-enforcement.spec.ts b/src/Frontend/test/specs/licensing/license-enforcement.spec.ts
index ac4e5427d..4e929a358 100644
--- a/src/Frontend/test/specs/licensing/license-enforcement.spec.ts
+++ b/src/Frontend/test/specs/licensing/license-enforcement.spec.ts
@@ -5,6 +5,7 @@ import { expiredLicenseMessageWithValue } from "./questions/expiredLicenseMessag
 import { viewYourLicenseButton } from "./questions/viewYourLicenseButton";
 import { extendYourLicenseButton } from "./questions/extendYourLicenseButton";
 import { getAlertNotifications } from "./questions/alertNotifications";
+import flushPromises from "flush-promises";
 
 describe("FEATURE: EXPIRING license detection", () => {
   describe("RULE: The user should be alerted while using the monitoring endpoint list functionality about an EXPIRING license", () => {
@@ -21,6 +22,7 @@ describe("FEATURE: EXPIRING license detection", () => {
         expect(notification).not.toBeUndefined();
         expect(notification?.hasLink({ caption: "Extend your license", address: licenseExtensionUrl })).toBeTruthy();
         expect(notification?.hasLink({ caption: "View license details", address: "#/configuration" })).toBeTruthy();
+        await flushPromises();
       });
     });
 
@@ -39,6 +41,7 @@ describe("FEATURE: EXPIRING license detection", () => {
 
         expect(notification).not.toBeUndefined();
         expect(notification?.hasLink({ caption: "View license details", address: "#/configuration" })).toBeTruthy();
+        await flushPromises();
       });
     });
   });
@@ -64,6 +67,7 @@ describe("FEATURE: EXPIRED license detection", () => {
 
       expect(notification).not.toBeUndefined();
       expect(notification?.hasLink({ caption: "http://particular.net/support", address: "http://particular.net/support" })).toBeTruthy();
+      await flushPromises();
     });
 
     test("EXAMPLE: Expired platform subscription", async ({ driver }) => {
@@ -83,6 +87,7 @@ describe("FEATURE: EXPIRED license detection", () => {
 
       expect(notification).not.toBeUndefined();
       expect(notification?.hasLink({ caption: "http://particular.net/support", address: "http://particular.net/support" })).toBeTruthy();
+      await flushPromises();
     });
 
     test("EXAMPLE: Expired upgrade protection", async ({ driver }) => {
@@ -101,6 +106,7 @@ describe("FEATURE: EXPIRED license detection", () => {
 
       expect(notification).not.toBeUndefined();
       expect(notification?.hasLink({ caption: "http://particular.net/support", address: "http://particular.net/support" })).toBeTruthy();
+      await flushPromises();
     });
   });
 });
diff --git a/src/Frontend/test/specs/licensing/trial-license-notifications.spec.ts b/src/Frontend/test/specs/licensing/trial-license-notifications.spec.ts
index 2e5df8cd9..3a7ff95a1 100644
--- a/src/Frontend/test/specs/licensing/trial-license-notifications.spec.ts
+++ b/src/Frontend/test/specs/licensing/trial-license-notifications.spec.ts
@@ -3,6 +3,7 @@ import { expect } from "vitest";
 import { test, describe } from "../../drivers/vitest/driver";
 import * as precondition from "../../preconditions";
 import { getTrialBar } from "./questions/trialLicenseBar";
+import flushPromises from "flush-promises";
 
 describe("FEATURE: Trial license notifications", () => {
   describe("RULE: The user should know they are using a trial license at all times", () => {
@@ -17,6 +18,8 @@ describe("FEATURE: Trial license notifications", () => {
         const trialBar = await getTrialBar();
         expect(trialBar.textMatches(/non-production use only/i)).toBeTruthy();
         expect(trialBar.hasLinkWithCaption("Trial license").address).toBe("#/configuration/license");
+
+        await flushPromises();
       });
     });
   });
@@ -31,6 +34,8 @@ describe("FEATURE: Trial license notifications", () => {
 
         //This has to use waitFor because of shared state between test runs. See issue documented issue and proposed solution https://github.com/Particular/ServicePulse/issues/1905
         await waitFor(() => expect(screen.queryByRole("status", { name: /trial license bar information/i })).toBeNull());
+
+        await flushPromises();
       });
     });
   });