diff --git a/src/Frontend/public/img/all-messages-filter.png b/src/Frontend/public/img/all-messages-filter.png
new file mode 100644
index 000000000..31ed8ffdb
Binary files /dev/null and b/src/Frontend/public/img/all-messages-filter.png differ
diff --git a/src/Frontend/public/img/all-messages-refresh.png b/src/Frontend/public/img/all-messages-refresh.png
new file mode 100644
index 000000000..e6836a0f6
Binary files /dev/null and b/src/Frontend/public/img/all-messages-refresh.png differ
diff --git a/src/Frontend/public/img/all-messages-sort.png b/src/Frontend/public/img/all-messages-sort.png
new file mode 100644
index 000000000..73fa5836e
Binary files /dev/null and b/src/Frontend/public/img/all-messages-sort.png differ
diff --git a/src/Frontend/public/img/all-messages.png b/src/Frontend/public/img/all-messages.png
new file mode 100644
index 000000000..95942c43e
Binary files /dev/null and b/src/Frontend/public/img/all-messages.png differ
diff --git a/src/Frontend/public/img/audit-instance-overview.png b/src/Frontend/public/img/audit-instance-overview.png
new file mode 100644
index 000000000..4e15ca386
Binary files /dev/null and b/src/Frontend/public/img/audit-instance-overview.png differ
diff --git a/src/Frontend/public/img/failed-message-page.png b/src/Frontend/public/img/failed-message-page.png
new file mode 100644
index 000000000..8caa4b220
Binary files /dev/null and b/src/Frontend/public/img/failed-message-page.png differ
diff --git a/src/Frontend/public/img/flow-diagram-nodes.png b/src/Frontend/public/img/flow-diagram-nodes.png
new file mode 100644
index 000000000..72efb5959
Binary files /dev/null and b/src/Frontend/public/img/flow-diagram-nodes.png differ
diff --git a/src/Frontend/public/img/flow-diagram.png b/src/Frontend/public/img/flow-diagram.png
new file mode 100644
index 000000000..b49bb072d
Binary files /dev/null and b/src/Frontend/public/img/flow-diagram.png differ
diff --git a/src/Frontend/public/img/message-details-body.png b/src/Frontend/public/img/message-details-body.png
new file mode 100644
index 000000000..9b5c08647
Binary files /dev/null and b/src/Frontend/public/img/message-details-body.png differ
diff --git a/src/Frontend/public/img/message-details-headers.png b/src/Frontend/public/img/message-details-headers.png
new file mode 100644
index 000000000..910d33055
Binary files /dev/null and b/src/Frontend/public/img/message-details-headers.png differ
diff --git a/src/Frontend/public/img/message-metadata.png b/src/Frontend/public/img/message-metadata.png
new file mode 100644
index 000000000..05c3fd0d2
Binary files /dev/null and b/src/Frontend/public/img/message-metadata.png differ
diff --git a/src/Frontend/public/img/monitor-instance-overview.png b/src/Frontend/public/img/monitor-instance-overview.png
new file mode 100644
index 000000000..f642f37cd
Binary files /dev/null and b/src/Frontend/public/img/monitor-instance-overview.png differ
diff --git a/src/Frontend/public/img/saga-diagram-overview.png b/src/Frontend/public/img/saga-diagram-overview.png
new file mode 100644
index 000000000..49ea00398
Binary files /dev/null and b/src/Frontend/public/img/saga-diagram-overview.png differ
diff --git a/src/Frontend/public/img/saga-diagram-state-change.png b/src/Frontend/public/img/saga-diagram-state-change.png
new file mode 100644
index 000000000..78cc414fc
Binary files /dev/null and b/src/Frontend/public/img/saga-diagram-state-change.png differ
diff --git a/src/Frontend/public/img/saga-diagram-timeout-view.png b/src/Frontend/public/img/saga-diagram-timeout-view.png
new file mode 100644
index 000000000..c61f395ee
Binary files /dev/null and b/src/Frontend/public/img/saga-diagram-timeout-view.png differ
diff --git a/src/Frontend/public/img/sequence-diagram.png b/src/Frontend/public/img/sequence-diagram.png
new file mode 100644
index 000000000..51c632ada
Binary files /dev/null and b/src/Frontend/public/img/sequence-diagram.png differ
diff --git a/src/Frontend/public/img/servicepulse-monitoring-details.png b/src/Frontend/public/img/servicepulse-monitoring-details.png
new file mode 100644
index 000000000..e5380d0f1
Binary files /dev/null and b/src/Frontend/public/img/servicepulse-monitoring-details.png differ
diff --git a/src/Frontend/public/img/servicepulse-monitoring-tab.png b/src/Frontend/public/img/servicepulse-monitoring-tab.png
new file mode 100644
index 000000000..4deeec55b
Binary files /dev/null and b/src/Frontend/public/img/servicepulse-monitoring-tab.png differ
diff --git a/src/Frontend/public/img/servicepulse-physicalinstance-breakdown.png b/src/Frontend/public/img/servicepulse-physicalinstance-breakdown.png
new file mode 100644
index 000000000..207f2abad
Binary files /dev/null and b/src/Frontend/public/img/servicepulse-physicalinstance-breakdown.png differ
diff --git a/src/Frontend/src/components/audit/AuditList.vue b/src/Frontend/src/components/audit/AuditList.vue
index 0a1878051..50d24587b 100644
--- a/src/Frontend/src/components/audit/AuditList.vue
+++ b/src/Frontend/src/components/audit/AuditList.vue
@@ -5,10 +5,16 @@ import { useRoute, useRouter } from "vue-router";
 import ResultsCount from "@/components/ResultsCount.vue";
 import FiltersPanel from "@/components/audit/FiltersPanel.vue";
 import AuditListItem from "@/components/audit/AuditListItem.vue";
-import { onBeforeMount, ref, watch } from "vue";
+import { computed, onBeforeMount, ref, watch } from "vue";
 import RefreshConfig from "../RefreshConfig.vue";
 import LoadingSpinner from "@/components/LoadingSpinner.vue";
 import useFetchWithAutoRefresh from "@/composables/autoRefresh";
+import FAIcon from "@/components/FAIcon.vue";
+import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
+import WizardDialog from "@/components/platformcapabilities/WizardDialog.vue";
+import { getAuditingWizardPages } from "@/components/platformcapabilities/wizards/AuditingWizardPages";
+import { useAuditingCapability } from "@/components/platformcapabilities/capabilities/AuditingCapability";
+import { CapabilityStatus } from "@/components/platformcapabilities/constants";
 
 const store = useAuditStore();
 const { messages, totalCount, sortBy, messageFilterString, selectedEndpointName, itemsPerPage, dateRange } = storeToRefs(store);
@@ -17,6 +23,9 @@ const router = useRouter();
 const autoRefreshValue = ref<number | null>(null);
 const { refreshNow, isRefreshing, updateInterval, isActive, start, stop } = useFetchWithAutoRefresh("audit-list", store.refresh, 0);
 const firstLoad = ref(true);
+const showWizard = ref(false);
+const { status: auditStatus } = useAuditingCapability();
+const wizardPages = computed(() => getAuditingWizardPages(auditStatus.value));
 
 onBeforeMount(() => {
   setQuery();
@@ -100,7 +109,34 @@ watch(autoRefreshValue, (newValue) => {
       <div class="row">
         <ResultsCount :displayed="messages.length" :total="totalCount" />
       </div>
+      <div v-if="auditStatus !== CapabilityStatus.Available" class="no-audit-banner">
+        <div class="banner-content">
+          <FAIcon :icon="faInfoCircle" class="banner-icon" />
+          <div class="banner-text">
+            <template v-if="auditStatus === CapabilityStatus.InstanceNotConfigured">
+              <strong>No ServiceControl Audit instance configured.</strong>
+              <p>A ServiceControl Audit instance is required to view processed messages. Click 'Get Started' to learn how to set one up.</p>
+            </template>
+            <template v-else-if="auditStatus === CapabilityStatus.EndpointsNotConfigured">
+              <strong>No successful audit messages found.</strong>
+              <p>Auditing may not be enabled on your endpoints. Click 'Get Started' to find out how to enable auditing.</p>
+            </template>
+            <template v-else-if="auditStatus === CapabilityStatus.Unavailable">
+              <strong>All ServiceControl Audit instances are not responding.</strong>
+              <p>The configured audit instances appears to be offline or unreachable. Check that the service is running and accessible.</p>
+            </template>
+            <template v-else-if="auditStatus === CapabilityStatus.PartiallyUnavailable">
+              <strong>Some ServiceControl Audit instances are not responding.</strong>
+              <p>One or more audit instances appear to be offline. Some audit data may be unavailable until all instances are restored.</p>
+            </template>
+          </div>
+          <template v-if="auditStatus !== CapabilityStatus.Unavailable && auditStatus !== CapabilityStatus.PartiallyUnavailable">
+            <button class="banner-link" @click="showWizard = true">Get Started</button>
+          </template>
+        </div>
+      </div>
     </div>
+    <WizardDialog v-if="showWizard" title="Getting Started with Auditing" :pages="wizardPages" @close="showWizard = false" />
     <div class="row results-table">
       <LoadingSpinner v-if="firstLoad" />
       <template v-for="message in messages" :key="message.id">
@@ -128,4 +164,62 @@ watch(autoRefreshValue, (newValue) => {
   margin-bottom: 5rem;
   background-color: #ffffff;
 }
+
+.no-audit-banner {
+  background: linear-gradient(135deg, #f6f9fc 0%, #e9f2f9 100%);
+  border: 1px solid #c3ddf5;
+  border-left: 4px solid #007bff;
+  border-radius: 8px;
+  padding: 16px;
+  margin-top: 1rem;
+}
+
+.banner-content {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+.banner-icon {
+  font-size: 24px;
+  flex-shrink: 0;
+  color: #007bff;
+}
+
+.banner-text {
+  flex: 1;
+}
+
+.banner-text strong {
+  display: block;
+  margin-bottom: 4px;
+  color: #333;
+  font-size: 14px;
+}
+
+.banner-text p {
+  margin: 0;
+  color: #666;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.banner-link {
+  padding: 8px 16px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 500;
+  white-space: nowrap;
+  align-self: center;
+  transition: background-color 0.2s ease;
+  cursor: pointer;
+}
+
+.banner-link:hover {
+  background-color: #0056b3;
+}
 </style>
diff --git a/src/Frontend/src/components/platformcapabilities/CapabilityCard.vue b/src/Frontend/src/components/platformcapabilities/CapabilityCard.vue
new file mode 100644
index 000000000..ecf1b3c77
--- /dev/null
+++ b/src/Frontend/src/components/platformcapabilities/CapabilityCard.vue
@@ -0,0 +1,390 @@
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import FAIcon from "@/components/FAIcon.vue";
+import { IconDefinition, faCircle, faTimes } from "@fortawesome/free-solid-svg-icons";
+import { StatusIndicator, WizardPage } from "@/components/platformcapabilities/types";
+import { Capability, CapabilityStatus } from "@/components/platformcapabilities/constants";
+import WizardDialog from "./WizardDialog.vue";
+
+const emit = defineEmits<{
+  hide: [];
+}>();
+
+const props = defineProps<{
+  status: CapabilityStatus;
+  icon: IconDefinition;
+  title: Capability;
+  subtitle: string;
+  helpButtonText: string;
+  helpButtonUrl: string;
+  description: string;
+  indicators?: StatusIndicator[];
+  isLoading?: boolean;
+  wizardPages?: WizardPage[];
+}>();
+
+const showWizard = ref(false);
+
+const shouldShowWizard = computed(() => {
+  return props.wizardPages && props.wizardPages.length > 0 && (props.status === CapabilityStatus.EndpointsNotConfigured || props.status === CapabilityStatus.InstanceNotConfigured);
+});
+
+function handleButtonClick() {
+  if (shouldShowWizard.value) {
+    showWizard.value = true;
+  } else {
+    window.open(props.helpButtonUrl, props.status !== CapabilityStatus.Available ? "_blank" : "_self");
+  }
+}
+</script>
+
+<template>
+  <div
+    class="capability-card"
+    data-testid="capability-card"
+    :class="{
+      'capability-available': !props.isLoading && props.status === CapabilityStatus.Available,
+      'capability-unavailable': !props.isLoading && props.status === CapabilityStatus.Unavailable,
+      'capability-partially-unavailable': !props.isLoading && props.status === CapabilityStatus.PartiallyUnavailable,
+      'capability-loading': props.isLoading,
+      'capability-notconfigured': !props.isLoading && (props.status === CapabilityStatus.EndpointsNotConfigured || props.status === CapabilityStatus.InstanceNotConfigured),
+    }"
+  >
+    <div v-if="props.isLoading" class="loading-overlay">
+      <div class="loading-spinner"></div>
+      <div class="loading-text">Loading {{ props.title }} capability status...</div>
+    </div>
+    <button class="hide-card-btn" @click="emit('hide')" v-tippy="'Hide this card'">
+      <FAIcon :icon="faTimes" />
+    </button>
+    <div v-if="!props.isLoading" class="capability-header">
+      <FAIcon
+        :icon="props.icon"
+        class="capability-icon"
+        :class="{
+          'text-success': props.status === CapabilityStatus.Available,
+          'text-danger': props.status === CapabilityStatus.Unavailable,
+          'text-warning': props.status === CapabilityStatus.PartiallyUnavailable,
+          'text-info': props.status === CapabilityStatus.EndpointsNotConfigured || props.status === CapabilityStatus.InstanceNotConfigured,
+        }"
+      />
+      <div class="capability-info">
+        <div class="capability-title-row">
+          <h6 class="capability-title">{{ props.title }}</h6>
+          <div v-if="props.indicators" class="status-indicators">
+            <div v-for="indicator in props.indicators" :key="indicator.label" class="indicator-item" data-testid="status-indicator" v-tippy="indicator.tooltip">
+              <FAIcon
+                :icon="faCircle"
+                class="indicator-light"
+                :class="{
+                  'light-success': indicator.status === CapabilityStatus.Available,
+                  'light-warning': indicator.status === CapabilityStatus.EndpointsNotConfigured || indicator.status === CapabilityStatus.PartiallyUnavailable,
+                  'light-danger': indicator.status === CapabilityStatus.Unavailable,
+                }"
+              />
+              <span class="indicator-label">{{ indicator.label }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="capability-subtitle">{{ props.subtitle }}</div>
+      </div>
+      <div v-if="props.status !== CapabilityStatus.EndpointsNotConfigured && props.status !== CapabilityStatus.InstanceNotConfigured" class="capability-status">
+        <span
+          class="status-badge"
+          :class="{
+            'status-available': props.status === CapabilityStatus.Available,
+            'status-unavailable': props.status === CapabilityStatus.Unavailable,
+            'status-partially-unavailable': props.status === CapabilityStatus.PartiallyUnavailable,
+          }"
+        >
+          {{ props.status }}
+        </span>
+      </div>
+    </div>
+    <div v-if="!props.isLoading" class="capability-footer">
+      <div class="capability-description">
+        {{ props.description }}
+      </div>
+      <button class="btn-primary learn-more-btn" @click="handleButtonClick">
+        {{ props.helpButtonText }}
+      </button>
+    </div>
+
+    <WizardDialog v-if="showWizard && wizardPages" :title="`Getting Started with ${props.title}`" :pages="wizardPages" @close="showWizard = false" />
+  </div>
+</template>
+
+<style scoped>
+.capability-card {
+  background: var(--card-bg, #fff);
+  border: 1px solid var(--border-color, #e0e0e0);
+  border-radius: 8px;
+  padding: 20px;
+  margin-bottom: 16px;
+  transition: all 0.2s ease;
+  position: relative;
+  min-height: 150px;
+}
+
+.hide-card-btn {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background: none;
+  border: none;
+  color: var(--text-secondary, #999);
+  cursor: pointer;
+  padding: 4px 6px;
+  border-radius: 4px;
+  opacity: 0;
+  transition: all 0.2s ease;
+  font-size: 12px;
+  z-index: 5;
+}
+
+.capability-card:hover .hide-card-btn {
+  opacity: 1;
+}
+
+.hide-card-btn:hover {
+  background-color: var(--hover-bg, #f0f0f0);
+  color: var(--text-primary, #333);
+}
+
+.capability-available {
+  border-left: 4px solid var(--success-color, #28a745);
+}
+
+.capability-unavailable {
+  border-left: 4px solid var(--danger-color, #dc3545);
+}
+
+.capability-partially-unavailable {
+  border-left: 4px solid var(--warning-color, #ffc107);
+}
+
+.capability-loading {
+  border-left: 4px solid var(--border-color, #e0e0e0);
+}
+
+.capability-notconfigured {
+  background: linear-gradient(135deg, #f6f9fc 0%, #e9f2f9 100%);
+  border: 1px solid #c3ddf5;
+  border-left: 4px solid #007bff;
+}
+
+.text-info {
+  color: #007bff;
+}
+
+.text-warning {
+  color: var(--warning-color, #ffc107);
+}
+
+.loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.9);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  z-index: 10;
+}
+
+.loading-spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid var(--border-color, #e0e0e0);
+  border-top-color: var(--primary-color, #007bff);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.loading-text {
+  margin-top: 12px;
+  color: var(--text-secondary, #666);
+  font-size: 14px;
+}
+
+.capability-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  margin-bottom: 12px;
+}
+
+.capability-icon {
+  font-size: 24px;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+.capability-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.capability-title-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 4px;
+}
+
+.capability-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-primary, #333);
+}
+
+.status-indicators {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.indicator-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  cursor: help;
+}
+
+.indicator-light {
+  font-size: 10px;
+}
+
+.light-success {
+  color: var(--success-color, #28a745);
+}
+
+.light-warning {
+  color: var(--warning-color, #ffc107);
+}
+
+.light-danger {
+  color: var(--danger-color, #dc3545);
+}
+
+.indicator-label {
+  font-size: 12px;
+  color: var(--text-secondary, #666);
+  white-space: nowrap;
+}
+
+.capability-subtitle {
+  font-size: 14px;
+  color: var(--text-secondary, #666);
+  line-height: 1.4;
+}
+
+.capability-status {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+}
+
+.status-badge {
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.status-available {
+  background-color: #d4edda;
+  color: #155724;
+}
+
+.status-unavailable {
+  background-color: #f8d7da;
+  color: #721c24;
+}
+
+.status-partially-unavailable {
+  background-color: #fff3cd;
+  color: #856404;
+}
+
+.capability-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid var(--border-color, #e0e0e0);
+}
+
+.capability-description {
+  flex: 1;
+  font-size: 13px;
+  color: var(--text-secondary, #666);
+  line-height: 1.5;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.learn-more-btn {
+  padding: 8px 16px;
+  border-radius: 4px;
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+  border: 1px solid transparent;
+}
+
+.learn-more-btn.btn-primary {
+  background-color: var(--primary-color, #007bff);
+  color: white;
+  border-color: var(--primary-color, #007bff);
+}
+
+.learn-more-btn.btn-primary:hover {
+  background-color: var(--primary-hover-color, #0056b3);
+  border-color: var(--primary-hover-color, #0056b3);
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .capability-header {
+    flex-direction: column;
+  }
+
+  .capability-status {
+    align-items: flex-start;
+    flex-direction: row;
+    gap: 8px;
+  }
+
+  .capability-footer {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .learn-more-btn {
+    width: 100%;
+    text-align: center;
+  }
+}
+</style>
diff --git a/src/Frontend/src/components/platformcapabilities/PlatformCapabilitiesDashboardItem.vue b/src/Frontend/src/components/platformcapabilities/PlatformCapabilitiesDashboardItem.vue
new file mode 100644
index 000000000..c74dcfd6f
--- /dev/null
+++ b/src/Frontend/src/components/platformcapabilities/PlatformCapabilitiesDashboardItem.vue
@@ -0,0 +1,179 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { storeToRefs } from "pinia";
+import CapabilityCard from "@/components/platformcapabilities/CapabilityCard.vue";
+import { useAuditingCapability } from "@/components/platformcapabilities/capabilities/AuditingCapability";
+import { useMonitoringCapability } from "@/components/platformcapabilities/capabilities/MonitoringCapability";
+import { useErrorCapability } from "@/components/platformcapabilities/capabilities/ErrorCapability";
+import { Capability } from "@/components/platformcapabilities/constants";
+import { getAuditingWizardPages } from "@/components/platformcapabilities/wizards/AuditingWizardPages";
+import { getMonitoringWizardPages } from "@/components/platformcapabilities/wizards/MonitoringWizardPages";
+import { usePlatformCapabilitiesStore } from "@/stores/PlatformCapabilitiesStore";
+import FAIcon from "@/components/FAIcon.vue";
+import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
+
+const platformCapabilitiesStore = usePlatformCapabilitiesStore();
+const { visibility } = storeToRefs(platformCapabilitiesStore);
+
+const auditing = useAuditingCapability();
+const monitoring = useMonitoringCapability();
+const error = useErrorCapability();
+
+const auditingWizardPages = computed(() => getAuditingWizardPages(auditing.status.value));
+const monitoringWizardPages = computed(() => getMonitoringWizardPages(monitoring.status.value));
+
+// Check if any cards are hidden (to show restore option)
+const hasHiddenCards = computed(() => !visibility.value.showAuditingCard || !visibility.value.showMonitoringCard || !visibility.value.showErrorCard);
+</script>
+
+<template>
+  <div v-if="visibility.showSection" class="platform-capabilities">
+    <div class="capabilities-header">
+      <div class="capabilities-title-row">
+        <div>
+          <h6>Platform Capabilities</h6>
+          <p class="capabilities-description">Discover and configure the capabilities of the Particular Service Platform</p>
+        </div>
+        <div class="capabilities-actions">
+          <button v-if="hasHiddenCards" class="btn-link restore-btn" @click="platformCapabilitiesStore.showAll()" v-tippy="'Show all hidden cards'">Show All</button>
+          <button class="btn-icon hide-section-btn" @click="platformCapabilitiesStore.toggleSection()" v-tippy="'Hide this section'">
+            <FAIcon :icon="faChevronUp" />
+          </button>
+        </div>
+      </div>
+    </div>
+    <div class="capabilities-list">
+      <CapabilityCard
+        v-if="visibility.showAuditingCard"
+        :title="Capability.Auditing"
+        subtitle="Track and search all successful messages flowing through your system"
+        :status="auditing.status.value"
+        :icon="auditing.icon.value"
+        :description="auditing.description.value"
+        :indicators="auditing.indicators.value"
+        :isLoading="auditing.isLoading.value"
+        :help-button-text="auditing.helpButtonText.value"
+        :help-button-url="auditing.helpButtonUrl.value"
+        :wizard-pages="auditingWizardPages"
+        @hide="platformCapabilitiesStore.toggleAuditingCard()"
+      ></CapabilityCard>
+      <CapabilityCard
+        v-if="visibility.showMonitoringCard"
+        :title="Capability.Monitoring"
+        subtitle="Monitor endpoint performance and throughput"
+        :status="monitoring.status.value"
+        :icon="monitoring.icon.value"
+        :description="monitoring.description.value"
+        :indicators="monitoring.indicators.value"
+        :isLoading="monitoring.isLoading.value"
+        :help-button-text="monitoring.helpButtonText.value"
+        :help-button-url="monitoring.helpButtonUrl.value"
+        :wizard-pages="monitoringWizardPages"
+        @hide="platformCapabilitiesStore.toggleMonitoringCard()"
+      ></CapabilityCard>
+      <CapabilityCard
+        v-if="visibility.showErrorCard"
+        :title="Capability.Error"
+        subtitle="Manage and retry failed messages"
+        :status="error.status.value"
+        :icon="error.icon.value"
+        :description="error.description.value"
+        :indicators="error.indicators.value"
+        :isLoading="error.isLoading.value"
+        :help-button-text="error.helpButtonText.value"
+        :help-button-url="error.helpButtonUrl.value"
+        @hide="platformCapabilitiesStore.toggleErrorCard()"
+      ></CapabilityCard>
+    </div>
+  </div>
+  <div v-else class="platform-capabilities-collapsed">
+    <button class="btn-link expand-btn" @click="platformCapabilitiesStore.toggleSection()">
+      <FAIcon :icon="faChevronDown" />
+      <span>Show Platform Capabilities</span>
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.capabilities-header {
+  margin-bottom: 10px;
+}
+
+.capabilities-title-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.capabilities-description {
+  font-size: 14px;
+  color: var(--text-secondary, #666);
+  margin: 0;
+}
+
+.capabilities-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.btn-link {
+  background: none;
+  border: none;
+  color: var(--primary-color, #007bff);
+  cursor: pointer;
+  font-size: 14px;
+  padding: 4px 8px;
+}
+
+.btn-link:hover {
+  text-decoration: underline;
+}
+
+.btn-icon {
+  background: none;
+  border: none;
+  color: var(--text-secondary, #666);
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+}
+
+.btn-icon:hover {
+  background-color: var(--hover-bg, #f0f0f0);
+  color: var(--text-primary, #333);
+}
+
+.capabilities-list {
+  display: flex;
+  gap: 16px;
+}
+
+.capabilities-list > * {
+  flex: 1;
+}
+
+.platform-capabilities-collapsed {
+  padding: 8px 0;
+}
+
+.expand-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: none;
+  border: none;
+  color: var(--text-secondary, #666);
+  cursor: pointer;
+  font-size: 14px;
+  padding: 8px 12px;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+}
+
+.expand-btn:hover {
+  background-color: var(--hover-bg, #f0f0f0);
+  color: var(--text-primary, #333);
+}
+</style>
diff --git a/src/Frontend/src/components/platformcapabilities/WizardDialog.vue b/src/Frontend/src/components/platformcapabilities/WizardDialog.vue
new file mode 100644
index 000000000..e96ec97dd
--- /dev/null
+++ b/src/Frontend/src/components/platformcapabilities/WizardDialog.vue
@@ -0,0 +1,425 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, nextTick } from "vue";
+import { Modal } from "bootstrap";
+import FAIcon from "@/components/FAIcon.vue";
+import { faChevronLeft, faChevronRight, faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
+import { WizardImage, WizardPage } from "./types";
+
+const props = defineProps<{
+  title: string;
+  pages: WizardPage[];
+}>();
+
+const emit = defineEmits<{ close: [] }>();
+const modalRef = ref<HTMLElement | null>(null);
+let modalInstance: Modal | null = null;
+const lightboxCloseRef = ref<HTMLButtonElement | null>(null);
+const lastFocusedElement = ref<HTMLElement | null>(null);
+
+// page variables
+const currentPageIndex = ref(0);
+const currentPage = computed(() => props.pages[currentPageIndex.value]);
+const isFirstPage = computed(() => currentPageIndex.value === 0);
+const isLastPage = computed(() => currentPageIndex.value === props.pages.length - 1);
+const totalPages = computed(() => props.pages.length);
+
+// image variables
+const isImageExpanded = ref(false);
+const currentImageIndex = ref(0);
+const pageImages = computed((): WizardImage[] => {
+  const page = currentPage.value;
+  if (page.images && page.images.length > 0) {
+    return page.images.map(normalizeImage);
+  }
+  if (page.image) {
+    return [normalizeImage(page.image)];
+  }
+  return [];
+});
+const currentImageData = computed(() => pageImages.value[currentImageIndex.value]);
+const hasMultipleImages = computed(() => pageImages.value.length > 1);
+
+function nextPage() {
+  if (!isLastPage.value) {
+    currentPageIndex.value++;
+    currentImageIndex.value = 0;
+  }
+}
+
+function previousPage() {
+  if (!isFirstPage.value) {
+    currentPageIndex.value--;
+    currentImageIndex.value = 0;
+  }
+}
+
+function goToPage(index: number) {
+  if (index >= 0 && index < props.pages.length) {
+    currentPageIndex.value = index;
+  }
+}
+
+function nextImage() {
+  if (currentImageIndex.value < pageImages.value.length - 1) {
+    currentImageIndex.value++;
+  }
+}
+
+function previousImage() {
+  if (currentImageIndex.value > 0) {
+    currentImageIndex.value--;
+  }
+}
+
+function normalizeImage(img: string | WizardImage): WizardImage {
+  return typeof img === "string" ? { src: img } : img;
+}
+
+function close() {
+  modalInstance?.hide();
+}
+
+function handleHidden() {
+  emit("close");
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (isImageExpanded.value && event.key === "Escape") {
+    closeLightbox();
+    return;
+  }
+  if (event.key === "ArrowRight" && !isLastPage.value) {
+    nextPage();
+  } else if (event.key === "ArrowLeft" && !isFirstPage.value) {
+    previousPage();
+  }
+}
+
+function openLightbox() {
+  lastFocusedElement.value = document.activeElement as HTMLElement;
+  isImageExpanded.value = true;
+  nextTick(() => {
+    lightboxCloseRef.value?.focus();
+  });
+}
+
+function closeLightbox() {
+  isImageExpanded.value = false;
+  nextTick(() => {
+    lastFocusedElement.value?.focus();
+  });
+}
+
+onMounted(() => {
+  if (modalRef.value) {
+    modalInstance = new Modal(modalRef.value, {
+      backdrop: true,
+      keyboard: true,
+    });
+    modalRef.value.addEventListener("hidden.bs.modal", handleHidden);
+    modalInstance.show();
+  }
+  window.addEventListener("keydown", handleKeydown);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("keydown", handleKeydown);
+  if (modalRef.value) {
+    modalRef.value.removeEventListener("hidden.bs.modal", handleHidden);
+  }
+  modalInstance?.dispose();
+});
+</script>
+
+<template>
+  <div ref="modalRef" class="modal fade" tabindex="-1" role="dialog" :aria-label="title">
+    <div class="modal-dialog modal-lg modal-dialog-centered">
+      <div class="modal-content wizard-content">
+        <div class="modal-header">
+          <h5 class="modal-title">{{ title }}</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <div class="wizard-page-content">
+            <h4 class="page-title mb-3">{{ currentPage.title }}</h4>
+            <div class="page-content" v-html="currentPage.content"></div>
+            <div v-if="pageImages.length > 0" class="wizard-image text-center mb-4">
+              <div class="image-carousel">
+                <button v-if="hasMultipleImages" type="button" class="carousel-nav carousel-prev" :disabled="currentImageIndex === 0" @click="previousImage" aria-label="Previous image">
+                  <FAIcon :icon="faChevronLeft" />
+                </button>
+                <figure class="image-figure">
+                  <img
+                    :src="currentImageData?.src"
+                    :alt="currentImageData?.caption || currentPage.title"
+                    class="img-fluid rounded clickable-image"
+                    :style="currentImageData?.maxHeight ? { maxHeight: currentImageData.maxHeight } : {}"
+                    @click="openLightbox"
+                  />
+                  <figcaption v-if="currentImageData?.caption" class="image-caption">{{ currentImageData.caption }}</figcaption>
+                </figure>
+                <button v-if="hasMultipleImages" type="button" class="carousel-nav carousel-next" :disabled="currentImageIndex === pageImages.length - 1" @click="nextImage" aria-label="Next image">
+                  <FAIcon :icon="faChevronRight" />
+                </button>
+              </div>
+              <div v-if="hasMultipleImages" class="image-indicators mt-2">
+                <span v-for="(_, index) in pageImages" :key="index" class="image-dot" :class="{ active: index === currentImageIndex }" @click="currentImageIndex = index"></span>
+              </div>
+            </div>
+            <a v-if="currentPage.learnMoreUrl" :href="currentPage.learnMoreUrl" target="_blank" rel="noopener noreferrer" class="learn-more-link mt-3 d-inline-flex align-items-center gap-2">
+              {{ currentPage.learnMoreText || "Learn more in the documentation" }}
+              <FAIcon :icon="faExternalLinkAlt" class="small" />
+            </a>
+          </div>
+        </div>
+        <div class="modal-footer d-flex justify-content-between align-items-center">
+          <div class="page-indicators d-flex gap-2">
+            <button v-for="(_, index) in pages" :key="index" type="button" class="page-dot" :class="{ active: index === currentPageIndex, visited: index < currentPageIndex }" @click="goToPage(index)" :aria-label="`Go to page ${index + 1}`"></button>
+          </div>
+
+          <div class="page-counter text-muted small">Page {{ currentPageIndex + 1 }} of {{ totalPages }}</div>
+
+          <div class="navigation-buttons d-flex gap-2">
+            <button v-if="!isFirstPage" type="button" class="btn btn-outline-secondary" @click="previousPage">
+              <FAIcon :icon="faChevronLeft" class="me-1" />
+              Back
+            </button>
+
+            <button v-if="!isLastPage" type="button" class="btn btn-primary" @click="nextPage">
+              Next
+              <FAIcon :icon="faChevronRight" class="ms-1" />
+            </button>
+
+            <button v-if="isLastPage" type="button" class="btn btn-primary" @click="close">Got it!</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <Teleport to="body">
+    <div v-if="isImageExpanded && currentImageData" class="image-lightbox" role="dialog" aria-modal="true" aria-label="Expanded image" @click="closeLightbox">
+      <div class="lightbox-content" @click.stop>
+        <button ref="lightboxCloseRef" type="button" class="lightbox-close" @click="closeLightbox" aria-label="Close expanded image">&times;</button>
+        <img :src="currentImageData.src" :alt="currentImageData.caption || currentPage.title" />
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.wizard-content {
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.wizard-image img {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.image-carousel {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+}
+
+.image-figure {
+  margin: 0;
+}
+
+.image-caption {
+  margin-top: 8px;
+  font-size: 0.85rem;
+  color: #666;
+  font-style: italic;
+}
+
+.carousel-nav {
+  background: #f0f0f0;
+  border: none;
+  border-radius: 50%;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+}
+
+.carousel-nav:hover:not(:disabled) {
+  background: #e0e0e0;
+}
+
+.carousel-nav:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.image-indicators {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+}
+
+.image-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #ddd;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.image-dot:hover {
+  background-color: #bbb;
+}
+
+.image-dot.active {
+  background-color: #007bff;
+}
+
+.clickable-image {
+  cursor: zoom-in;
+  transition: transform 0.2s ease;
+}
+
+.clickable-image:hover {
+  transform: scale(1.02);
+}
+
+.image-lightbox {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.9);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2000;
+  cursor: zoom-out;
+}
+
+.lightbox-content {
+  position: relative;
+  max-width: 90%;
+  max-height: 90%;
+  cursor: default;
+}
+
+.lightbox-content img {
+  max-width: 100%;
+  max-height: 90vh;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+}
+
+.lightbox-close {
+  position: absolute;
+  top: -40px;
+  right: 0;
+  background: none;
+  border: none;
+  color: white;
+  font-size: 32px;
+  cursor: pointer;
+  padding: 0;
+  line-height: 1;
+}
+
+.lightbox-close:hover {
+  color: #ccc;
+}
+
+.page-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #333;
+}
+
+.page-content {
+  font-size: 0.95rem;
+  line-height: 1.7;
+  color: #555;
+}
+
+.page-content :deep(p) {
+  margin-bottom: 0.75rem;
+}
+
+.page-content :deep(ul) {
+  margin: 0.75rem 0;
+  padding-left: 1.25rem;
+}
+
+.page-content :deep(li) {
+  margin-bottom: 0.5rem;
+}
+
+.page-content :deep(code) {
+  background-color: #f5f5f5;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 0.9em;
+  color: #d63384;
+}
+
+.page-content :deep(strong) {
+  color: #333;
+}
+
+.page-content :deep(a) {
+  color: #007bff;
+  text-decoration: none;
+}
+
+.page-content :deep(a:hover) {
+  color: #0056b3;
+  text-decoration: underline;
+}
+
+.learn-more-link {
+  color: #007bff;
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.learn-more-link:hover {
+  color: #0056b3;
+  text-decoration: underline;
+}
+
+.page-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  border: none;
+  background-color: #ddd;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  padding: 0;
+}
+
+.page-dot:hover {
+  background-color: #bbb;
+}
+
+.page-dot.visited {
+  background-color: #007bff;
+  opacity: 0.5;
+}
+
+.page-dot.active {
+  background-color: #007bff;
+  opacity: 1;
+  transform: scale(1.2);
+}
+
+.modal-footer {
+  background-color: #f8f9fa;
+}
+</style>
diff --git a/src/Frontend/src/components/platformcapabilities/capabilities/AuditingCapability.ts b/src/Frontend/src/components/platformcapabilities/capabilities/AuditingCapability.ts
new file mode 100644
index 000000000..f644f5254
--- /dev/null
+++ b/src/Frontend/src/components/platformcapabilities/capabilities/AuditingCapability.ts
@@ -0,0 +1,202 @@
+import { computed } from "vue";
+import { StatusIndicator } from "@/components/platformcapabilities/types";
+import { CapabilityStatus } from "@/components/platformcapabilities/constants";
+import useIsAllMessagesSupported, { minimumSCVersionForAllMessages } from "@/components/audit/isAllMessagesSupported";
+import { storeToRefs } from "pinia";
+import { type CapabilityComposable, type CapabilityStatusToStringMap, useCapabilityBase } from "./BaseCapability";
+import useRemoteInstancesAutoRefresh from "@/composables/useRemoteInstancesAutoRefresh";
+import useAuditStoreAutoRefresh from "@/composables/useAuditStoreAutoRefresh";
+import { RemoteInstanceStatus, RemoteInstanceType, type RemoteInstance } from "@/resources/RemoteInstance";
+
+/**
+ * Checks if a remote instance is an audit instance using the cached instance type
+ */
+function isAuditInstance(instance: RemoteInstance): boolean {
+  return instance.cachedInstanceType === RemoteInstanceType.Audit;
+}
+
+/**
+ * Filters remote instances to only include audit instances
+ */
+function filterAuditInstances(instances: RemoteInstance[] | null | undefined): RemoteInstance[] {
+  if (!instances) {
+    return [];
+  }
+  return instances.filter(isAuditInstance);
+}
+
+const AuditingDescriptions: CapabilityStatusToStringMap = {
+  [CapabilityStatus.EndpointsNotConfigured]:
+    "A ServiceControl Auditing instance is connected but no successful messages have been processed yet or you don't have auditing enabled for any endpoints. Click 'Learn More' to find out how to set up auditing for your endpoints.",
+  [CapabilityStatus.InstanceNotConfigured]: "A ServiceControl Auditing instance has not been configured. Click 'Get Started' to learn more about setting up auditing.",
+  [CapabilityStatus.Unavailable]: "All ServiceControl Auditing instances are configured but not responding. Click 'Learn More' for troubleshooting steps.",
+  [CapabilityStatus.PartiallyUnavailable]: "Some ServiceControl Auditing instances are not responding.",
+  [CapabilityStatus.Available]: "All ServiceControl Auditing instances are available and endpoints have been configured to send audit messages.",
+};
+
+const AuditingHelpButtonText: CapabilityStatusToStringMap = {
+  [CapabilityStatus.EndpointsNotConfigured]: "Learn More",
+  [CapabilityStatus.InstanceNotConfigured]: "Get Started",
+  [CapabilityStatus.Available]: "View Messages",
+};
+
+const AuditingHelpButtonUrl: CapabilityStatusToStringMap = {
+  [CapabilityStatus.EndpointsNotConfigured]: "https://docs.particular.net/nservicebus/operations/auditing",
+  [CapabilityStatus.InstanceNotConfigured]: "https://docs.particular.net/servicecontrol/audit-instances/",
+  [CapabilityStatus.Unavailable]: "https://docs.particular.net/servicecontrol/troubleshooting",
+  [CapabilityStatus.PartiallyUnavailable]: "https://docs.particular.net/servicecontrol/troubleshooting",
+  [CapabilityStatus.Available]: "#/messages",
+};
+
+enum AuditingIndicatorTooltip {
+  InstanceAvailable = "The Auditing instance is configured and available",
+  InstanceUnavailable = "The Auditing instance is configured but not responding",
+  MessagesAvailable = "Endpoints have been configured to send audit messages",
+  MessagesUnavailable = "No successful messages have been processed yet or auditing is not enabled for any endpoints",
+  AllMessagesNotSupported = `The 'All Messages' feature requires ServiceControl ${minimumSCVersionForAllMessages} or higher`,
+}
+
+/**
+ * Checks if all audit remote instances are unavailable
+ */
+function allAuditInstancesUnavailable(instances: RemoteInstance[] | null | undefined): boolean {
+  if (!instances || instances.length === 0) {
+    return false;
+  }
+  return instances.every((instance) => instance.status !== RemoteInstanceStatus.Online);
+}
+
+/**
+ * Checks if any audit remote instances are unavailable (but not all)
+ */
+function hasUnavailableAuditInstances(instances: RemoteInstance[] | null | undefined): boolean {
+  if (!instances || instances.length === 0) {
+    return false;
+  }
+  return instances.some((instance) => instance.status !== RemoteInstanceStatus.Online);
+}
+
+/**
+ * Checks if any audit remote instances are available
+ */
+function hasAvailableAuditInstances(instances: RemoteInstance[] | null | undefined): boolean {
+  if (!instances || instances.length === 0) {
+    return false;
+  }
+  return instances.some((instance) => instance.status === RemoteInstanceStatus.Online);
+}
+
+/**
+ * Checks if some but not all audit instances are unavailable
+ */
+function hasPartiallyUnavailableAuditInstances(instances: RemoteInstance[] | null | undefined): boolean {
+  if (!instances || instances.length === 0) {
+    return false;
+  }
+  return hasUnavailableAuditInstances(instances) && hasAvailableAuditInstances(instances);
+}
+
+export function useAuditingCapability(): CapabilityComposable {
+  const { getIconForStatus, getDescriptionForStatus, getHelpButtonTextForStatus, getHelpButtonUrlForStatus, createIndicator } = useCapabilityBase();
+
+  // This gives us the list of remote instances configured in ServiceControl.
+  // Uses auto-refresh to periodically check status (every 5 seconds)
+  const { store: remoteInstancesStore } = useRemoteInstancesAutoRefresh();
+  const { remoteInstances } = storeToRefs(remoteInstancesStore);
+
+  // Filter to only include audit instances (those with audit_retention_period in configuration)
+  const auditInstances = computed(() => filterAuditInstances(remoteInstances.value));
+
+  // This gives us the hasSuccessfulMessages flag which indicates if any successful messages exist.
+  // Uses auto-refresh (minimal) to periodically check for at least 1 successful message (every 5 seconds)
+  const { store: auditStore } = useAuditStoreAutoRefresh();
+  const { hasSuccessfulMessages } = storeToRefs(auditStore);
+
+  // This tells us if the "All Messages" feature is supported by checking the SC version
+  const isAllMessagesSupported = useIsAllMessagesSupported();
+
+  // Determine overall auditing status
+  const auditStatus = computed(() => {
+    // 1. Check if there are any audit instances configured.
+    if (auditInstances.value.length === 0) {
+      return CapabilityStatus.InstanceNotConfigured;
+    }
+
+    // 2. Check if all audit instances are unavailable
+    if (allAuditInstancesUnavailable(auditInstances.value)) {
+      return CapabilityStatus.Unavailable;
+    }
+
+    // 3. Check if some but not all audit instances are unavailable
+    if (hasPartiallyUnavailableAuditInstances(auditInstances.value)) {
+      return CapabilityStatus.PartiallyUnavailable;
+    }
+
+    // 4. Check if the 'All Messages' feature is not supported OR there are no successful messages
+    if (!isAllMessagesSupported.value || !hasSuccessfulMessages.value) {
+      return CapabilityStatus.EndpointsNotConfigured;
+    }
+
+    // 5. Audit instance is available and there are successful audit messages
+    return CapabilityStatus.Available;
+  });
+
+  // Determine icon based on status
+  const auditIcon = computed(() => getIconForStatus(auditStatus.value));
+
+  // Determine description based on status
+  const auditDescription = computed(() => getDescriptionForStatus(auditStatus.value, AuditingDescriptions));
+
+  // Determine help button text based on status
+  const auditHelpButtonText = computed(() => getHelpButtonTextForStatus(auditStatus.value, AuditingHelpButtonText));
+
+  // Determine help button URL based on status
+  const auditHelpButtonUrl = computed(() => getHelpButtonUrlForStatus(auditStatus.value, AuditingHelpButtonUrl));
+
+  // Determine indicators
+  const auditIndicators = computed(() => {
+    const indicators: StatusIndicator[] = [];
+
+    // Add an indicator for each remote audit instance
+    if (auditInstances.value.length > 0) {
+      auditInstances.value.forEach((instance, index) => {
+        const isAvailable = instance.status === RemoteInstanceStatus.Online;
+        const label = auditInstances.value.length > 1 ? `Instance ${index + 1}` : "Instance";
+        const tooltip = isAvailable ? AuditingIndicatorTooltip.InstanceAvailable : AuditingIndicatorTooltip.InstanceUnavailable;
+
+        indicators.push(createIndicator(label, isAvailable ? CapabilityStatus.Available : CapabilityStatus.Unavailable, tooltip, instance.api_uri, instance.version));
+      });
+    }
+
+    // Messages available indicator - show if at least one instance is available
+    if (hasAvailableAuditInstances(auditInstances.value)) {
+      const messagesAvailable = isAllMessagesSupported.value && hasSuccessfulMessages.value;
+
+      let messageTooltip = "";
+      if (messagesAvailable) {
+        messageTooltip = AuditingIndicatorTooltip.MessagesAvailable;
+      } else if (!isAllMessagesSupported.value) {
+        messageTooltip = AuditingIndicatorTooltip.AllMessagesNotSupported;
+      } else {
+        messageTooltip = AuditingIndicatorTooltip.MessagesUnavailable;
+      }
+
+      indicators.push(createIndicator("Messages", messagesAvailable ? CapabilityStatus.Available : CapabilityStatus.EndpointsNotConfigured, messageTooltip));
+    }
+
+    return indicators;
+  });
+
+  // Loading state - true if remote instances haven't been loaded yet
+  const isLoading = computed(() => remoteInstances.value === null || remoteInstances.value === undefined);
+
+  return {
+    status: auditStatus,
+    icon: auditIcon,
+    description: auditDescription,
+    indicators: auditIndicators,
+    isLoading,
+    helpButtonText: auditHelpButtonText,
+    helpButtonUrl: auditHelpButtonUrl,
+  };
+}
diff --git a/src/Frontend/src/components/platformcapabilities/capabilities/BaseCapability.ts b/src/Frontend/src/components/platformcapabilities/capabilities/BaseCapability.ts
new file mode 100644
index 000000000..912084d60
--- /dev/null
+++ b/src/Frontend/src/components/platformcapabilities/capabilities/BaseCapability.ts
@@ -0,0 +1,67 @@
+import { type ComputedRef } from "vue";
+import { faCheck, faInfoCircle, faTimes, faExclamationTriangle, type IconDefinition } from "@fortawesome/free-solid-svg-icons";
+import { StatusIndicator } from "@/components/platformcapabilities/types";
+import { CapabilityStatus } from "@/components/platformcapabilities/constants";
+
+export interface CapabilityComposable {
+  status: ComputedRef<CapabilityStatus>;
+  icon: ComputedRef<IconDefinition>;
+  description: ComputedRef<string>;
+  indicators: ComputedRef<StatusIndicator[]>;
+  isLoading: ComputedRef<boolean>;
+  helpButtonText: ComputedRef<string>;
+  helpButtonUrl: ComputedRef<string>;
+}
+
+export type CapabilityStatusToStringMap = Partial<Record<CapabilityStatus, string>>;
+
+export function useCapabilityBase() {
+  const getIconForStatus = (status: CapabilityStatus): IconDefinition => {
+    switch (status) {
+      case CapabilityStatus.Available:
+        return faCheck;
+      case CapabilityStatus.EndpointsNotConfigured:
+      case CapabilityStatus.InstanceNotConfigured:
+        return faInfoCircle;
+      case CapabilityStatus.Unavailable:
+        return faTimes;
+      case CapabilityStatus.PartiallyUnavailable:
+        return faExclamationTriangle; // Warning icon for partially unavailable
+    }
+  };
+
+  const getDescriptionForStatus = (status: CapabilityStatus, descriptions: CapabilityStatusToStringMap): string => {
+    return descriptions[status] ?? "";
+  };
+
+  const getHelpButtonTextForStatus = (status: CapabilityStatus, helpButtonTexts: CapabilityStatusToStringMap): string => {
+    return helpButtonTexts[status] || "Learn More";
+  };
+
+  const getHelpButtonUrlForStatus = (status: CapabilityStatus, helpButtonUrls: CapabilityStatusToStringMap): string => {
+    return helpButtonUrls[status] || "#/dashboard";
+  };
+
+  const createIndicator = (label: string, status: CapabilityStatus, tooltip: string, url?: string, version?: string): StatusIndicator => {
+    let fullTooltip = tooltip;
+    if (url) {
+      fullTooltip = `${fullTooltip} - ${url}`;
+    }
+    if (version && version !== "Unknown") {
+      fullTooltip = `${fullTooltip} - v${version}`;
+    }
+    return {
+      label,
+      status,
+      tooltip: fullTooltip,
+    };
+  };
+
+  return {
+    getIconForStatus,
+    getDescriptionForStatus,
+    getHelpButtonTextForStatus,
+    getHelpButtonUrlForStatus,
+    createIndicator,
+  };
+}
diff --git a/src/Frontend/src/components/platformcapabilities/capabilities/ErrorCapability.ts b/src/Frontend/src/components/platformcapabilities/capabilities/ErrorCapability.ts
new file mode 100644
index 000000000..856ee60c8
--- /dev/null
+++ b/src/Frontend/src/components/platformcapabilities/capabilities/ErrorCapability.ts
@@ -0,0 +1,154 @@
+import { computed } from "vue";
+import { storeToRefs } from "pinia";
+import { StatusIndicator } from "@/components/platformcapabilities/types";
+import { CapabilityStatus } from "@/components/platformcapabilities/constants";
+import { useConnectionsAndStatsStore } from "@/stores/ConnectionsAndStatsStore";
+import { type CapabilityComposable, type CapabilityStatusToStringMap, useCapabilityBase } from "./BaseCapability";
+import useRemoteInstancesAutoRefresh from "@/composables/useRemoteInstancesAutoRefresh";
+import { RemoteInstanceStatus, RemoteInstanceType, type RemoteInstance } from "@/resources/RemoteInstance";
+import serviceControlClient from "@/components/serviceControlClient";
+import { useEnvironmentAndVersionsStore } from "@/stores/EnvironmentAndVersionsStore";
+
+/**
+ * Checks if a remote instance is an error/recoverability instance using the cached instance type
+ */
+function isErrorInstance(instance: RemoteInstance): boolean {
+  return instance.cachedInstanceType === RemoteInstanceType.Error;
+}
+
+/**
+ * Filters remote instances to only include error/recoverability instances
+ */
+function filterErrorInstances(instances: RemoteInstance[] | null | undefined): RemoteInstance[] {
+  if (!instances) {
+    return [];
+  }
+  return instances.filter(isErrorInstance);
+}
+
+/**
+ * Checks if all error remote instances are unavailable
+ */
+function allErrorInstancesUnavailable(instances: RemoteInstance[]): boolean {
+  if (instances.length === 0) {
+    return false;
+  }
+  return instances.every((instance) => instance.status !== RemoteInstanceStatus.Online);
+}
+
+const ErrorDescriptions: CapabilityStatusToStringMap = {
+  [CapabilityStatus.PartiallyUnavailable]: "Some ServiceControl Error instances are not responding.",
+  [CapabilityStatus.Available]: "All ServiceControl Error instances are available.",
+};
+
+const ErrorHelpButtonText: CapabilityStatusToStringMap = {
+  [CapabilityStatus.Available]: "View Failed Messages",
+};
+
+const ErrorHelpButtonUrl: CapabilityStatusToStringMap = {
+  [CapabilityStatus.PartiallyUnavailable]: "https://docs.particular.net/servicecontrol/troubleshooting",
+  [CapabilityStatus.Available]: "#/failed-messages",
+};
+
+enum ErrorIndicatorTooltip {
+  InstanceAvailable = "The ServiceControl Error instance is configured and available",
+  InstanceUnavailable = "The ServiceControl Error instance is not responding",
+}
+
+export function useErrorCapability(): CapabilityComposable {
+  const { getIconForStatus, getDescriptionForStatus, getHelpButtonTextForStatus, getHelpButtonUrlForStatus, createIndicator } = useCapabilityBase();
+
+  // This tells us the connection state to the primary ServiceControl Error instance.
+  // Auto refreshed every 5 seconds.
+  const connectionsStore = useConnectionsAndStatsStore();
+  const connectionState = connectionsStore.connectionState;
+
+  // This gives us version information for the primary ServiceControl instance
+  const environmentStore = useEnvironmentAndVersionsStore();
+  const { environment } = storeToRefs(environmentStore);
+
+  // This gives us the list of secondary remote instances configured in ServiceControl.
+  // Uses auto-refresh to periodically check status (every 5 seconds)
+  const { store: remoteInstancesStore } = useRemoteInstancesAutoRefresh();
+  const { remoteInstances } = storeToRefs(remoteInstancesStore);
+
+  // Filter secondary instances to only include error instances (those with error_retention_period in configuration)
+  const secondaryErrorInstances = computed(() => filterErrorInstances(remoteInstances.value));
+
+  // Check if primary instance is connected
+  const isPrimaryConnected = computed(() => connectionState.connected && !connectionState.unableToConnect);
+
+  // Total instance count (primary + secondary error instances)
+  const totalInstanceCount = computed(() => 1 + secondaryErrorInstances.value.length);
+
+  // Count of available instances
+  const availableInstanceCount = computed(() => {
+    let count = isPrimaryConnected.value ? 1 : 0;
+    count += secondaryErrorInstances.value.filter((instance) => instance.status === RemoteInstanceStatus.Online).length;
+    return count;
+  });
+
+  // Determine overall error status
+  const errorStatus = computed(() => {
+    // 1. Check if primary instance is unavailable and all secondary error instances are unavailable
+    if (!isPrimaryConnected.value && allErrorInstancesUnavailable(secondaryErrorInstances.value)) {
+      return CapabilityStatus.Unavailable;
+    }
+
+    // 2. Check if some but not all instances are unavailable (partially unavailable)
+    if (availableInstanceCount.value > 0 && availableInstanceCount.value < totalInstanceCount.value) {
+      return CapabilityStatus.PartiallyUnavailable;
+    }
+
+    // 3. All instances are available
+    return CapabilityStatus.Available;
+  });
+
+  // Icon based on status
+  const errorIcon = computed(() => getIconForStatus(errorStatus.value));
+
+  // Determine description based on status
+  const errorDescription = computed(() => getDescriptionForStatus(errorStatus.value, ErrorDescriptions));
+
+  // Determine help button text based on status
+  const errorHelpButtonText = computed(() => getHelpButtonTextForStatus(errorStatus.value, ErrorHelpButtonText));
+
+  // Determine help button URL based on status
+  const errorHelpButtonUrl = computed(() => getHelpButtonUrlForStatus(errorStatus.value, ErrorHelpButtonUrl));
+
+  // Determine indicators
+  const errorIndicators = computed(() => {
+    const indicators: StatusIndicator[] = [];
+
+    // Add indicator for primary instance
+    const primaryLabel = totalInstanceCount.value > 1 ? "Primary" : "Instance";
+    const primaryTooltip = isPrimaryConnected.value ? ErrorIndicatorTooltip.InstanceAvailable : ErrorIndicatorTooltip.InstanceUnavailable;
+    indicators.push(createIndicator(primaryLabel, isPrimaryConnected.value ? CapabilityStatus.Available : CapabilityStatus.Unavailable, primaryTooltip, serviceControlClient.url, environment.value.sc_version));
+
+    // Add an indicator for each secondary error instance
+    if (secondaryErrorInstances.value.length > 0) {
+      secondaryErrorInstances.value.forEach((instance, index) => {
+        const isAvailable = instance.status === RemoteInstanceStatus.Online;
+        const label = `Instance ${index + 2}`; // Start at 2 since primary is Instance 1
+        const tooltip = isAvailable ? ErrorIndicatorTooltip.InstanceAvailable : ErrorIndicatorTooltip.InstanceUnavailable;
+
+        indicators.push(createIndicator(label, isAvailable ? CapabilityStatus.Available : CapabilityStatus.Unavailable, tooltip, instance.api_uri, instance.version));
+      });
+    }
+
+    return indicators;
+  });
+
+  // Loading state - error is loading if we haven't attempted connection yet
+  const isLoading = computed(() => !connectionState.connected && !connectionState.unableToConnect && connectionState.connecting);
+
+  return {
+    status: errorStatus,
+    icon: errorIcon,
+    description: errorDescription,
+    indicators: errorIndicators,
+    isLoading,
+    helpButtonText: errorHelpButtonText,
+    helpButtonUrl: errorHelpButtonUrl,
+  };
+}
diff --git a/src/Frontend/src/components/platformcapabilities/capabilities/MonitoringCapability.ts b/src/Frontend/src/components/platformcapabilities/capabilities/MonitoringCapability.ts
new file mode 100644
index 000000000..72164157b
--- /dev/null
+++ b/src/Frontend/src/components/platformcapabilities/capabilities/MonitoringCapability.ts
@@ -0,0 +1,136 @@
+import { computed } from "vue";
+import { StatusIndicator } from "@/components/platformcapabilities/types";
+import { CapabilityStatus } from "@/components/platformcapabilities/constants";
+import { storeToRefs } from "pinia";
+import { useConnectionsAndStatsStore } from "@/stores/ConnectionsAndStatsStore";
+import useMonitoringStoreAutoRefresh from "@/composables/useMonitoringStoreAutoRefresh";
+import { type CapabilityComposable, type CapabilityStatusToStringMap, useCapabilityBase } from "./BaseCapability";
+import monitoringClient from "@/components/monitoring/monitoringClient";
+import { useEnvironmentAndVersionsStore } from "@/stores/EnvironmentAndVersionsStore";
+
+const MonitoringDescriptions: CapabilityStatusToStringMap = {
+  [CapabilityStatus.EndpointsNotConfigured]:
+    "The ServiceControl Monitoring instance is connected but no endpoints are sending throughput data. This may be because no endpoints are running or no endpoints have the monitoring plugin enabled. Click 'Learn More' to find out how to set up monitoring for your endpoints.",
+  [CapabilityStatus.InstanceNotConfigured]: "The ServiceControl Monitoring instance is not configured. Click 'Get Started' to learn more about setting up monitoring.",
+  [CapabilityStatus.Unavailable]: "The ServiceControl Monitoring instance is configured but not responding. Click 'Learn More' to troubleshoot connection issues.",
+  [CapabilityStatus.Available]: "The ServiceControl Monitoring instance is available and endpoints have been configured to send throughput data.",
+};
+
+const MonitoringHelpButtonText: CapabilityStatusToStringMap = {
+  [CapabilityStatus.EndpointsNotConfigured]: "Learn More",
+  [CapabilityStatus.InstanceNotConfigured]: "Get Started",
+  [CapabilityStatus.Available]: "View Metrics",
+};
+
+const MonitoringHelpButtonUrl: CapabilityStatusToStringMap = {
+  [CapabilityStatus.EndpointsNotConfigured]: "https://docs.particular.net/monitoring/metrics/install-plugin",
+  [CapabilityStatus.InstanceNotConfigured]: "https://docs.particular.net/servicecontrol/monitoring-instances/",
+  [CapabilityStatus.Unavailable]: "https://docs.particular.net/servicecontrol/troubleshooting",
+  [CapabilityStatus.Available]: "#/monitoring",
+};
+
+enum MonitoringIndicatorTooltip {
+  InstanceAvailable = "The Monitoring instance is configured and available",
+  InstanceUnavailable = "The Monitoring instance is configured but not responding",
+  InstanceNotConfigured = "Monitoring is not configured in ServicePulse",
+  DataAvailable = "Endpoints have been configured to send throughput data",
+  DataUnavailable = "No endpoints are sending throughput data. Endpoints may not be running or may not have the monitoring plugin enabled.",
+}
+
+export function useMonitoringCapability(): CapabilityComposable {
+  const { getIconForStatus, getDescriptionForStatus, getHelpButtonTextForStatus, getHelpButtonUrlForStatus, createIndicator } = useCapabilityBase();
+
+  // this tells us if monitoring is configured in ServicePulse
+  const isMonitoringEnabled = monitoringClient.isMonitoringEnabled;
+
+  // this tells us if there are any endpoints sending data
+  // Uses auto-refresh to periodically check for monitored endpoints (every 5 seconds)
+  const { store: monitoringStore } = useMonitoringStoreAutoRefresh();
+  const { hasMonitoredEndpoints } = storeToRefs(monitoringStore);
+
+  // this tells us the connection state to the monitoring instance
+  // this is auto refreshed in the ConnectionsAndStatsStore (every 5 seconds)
+  const connectionsStore = useConnectionsAndStatsStore();
+  const monitoringConnectionState = connectionsStore.monitoringConnectionState;
+
+  // this gives us version information for the monitoring instance
+  const environmentStore = useEnvironmentAndVersionsStore();
+  const { environment } = storeToRefs(environmentStore);
+
+  // Determine overall monitoring status
+  const monitoringStatus = computed(() => {
+    const isConfiguredInServicePulse = isMonitoringEnabled;
+    const connectionSuccessful = monitoringConnectionState.connected && !monitoringConnectionState.unableToConnect;
+
+    // 1. Check if monitoring is configured in ServicePulse
+    if (!isConfiguredInServicePulse) {
+      return CapabilityStatus.InstanceNotConfigured;
+    }
+
+    // 2. Check if we are connected to the monitoring instance
+    if (!connectionSuccessful) {
+      return CapabilityStatus.Unavailable;
+    }
+
+    // 3. Check if there are any endpoints sending data
+    if (!hasMonitoredEndpoints.value) {
+      return CapabilityStatus.EndpointsNotConfigured;
+    }
+
+    // 4. If all checks pass, monitoring is available
+    return CapabilityStatus.Available;
+  });
+
+  // Icon based on status
+  const monitoringIcon = computed(() => getIconForStatus(monitoringStatus.value));
+
+  // Determine description based on status
+  const monitoringDescription = computed(() => getDescriptionForStatus(monitoringStatus.value, MonitoringDescriptions));
+
+  // Determine help button text based on status
+  const monitoringHelpButtonText = computed(() => getHelpButtonTextForStatus(monitoringStatus.value, MonitoringHelpButtonText));
+
+  // Determine help button URL based on status
+  const monitoringHelpButtonUrl = computed(() => getHelpButtonUrlForStatus(monitoringStatus.value, MonitoringHelpButtonUrl));
+
+  // Determine indicators
+  const monitoringIndicators = computed(() => {
+    const indicators: StatusIndicator[] = [];
+
+    // Instance specific states
+    const connectionSuccessful = monitoringConnectionState.connected && !monitoringConnectionState.unableToConnect;
+    const instanceAvailable = isMonitoringEnabled && connectionSuccessful;
+
+    const instanceTooltip = instanceAvailable ? MonitoringIndicatorTooltip.InstanceAvailable : !isMonitoringEnabled ? MonitoringIndicatorTooltip.InstanceNotConfigured : MonitoringIndicatorTooltip.InstanceUnavailable;
+
+    if (isMonitoringEnabled) {
+      indicators.push(createIndicator("Instance", instanceAvailable ? CapabilityStatus.Available : CapabilityStatus.Unavailable, instanceTooltip, monitoringClient.url, environment.value.monitoring_version));
+    }
+
+    // data available indicator - only show if instance is connected
+    if (instanceAvailable) {
+      indicators.push(
+        createIndicator(
+          "Metrics",
+          hasMonitoredEndpoints.value ? CapabilityStatus.Available : CapabilityStatus.EndpointsNotConfigured,
+          hasMonitoredEndpoints.value ? MonitoringIndicatorTooltip.DataAvailable : MonitoringIndicatorTooltip.DataUnavailable
+        )
+      );
+    }
+
+    return indicators;
+  });
+
+  // Loading state - monitoring is loading if we haven't attempted connection yet
+  const isLoading = computed(() => !monitoringConnectionState.connected && !monitoringConnectionState.unableToConnect && monitoringConnectionState.connecting);
+
+  return {
+    status: monitoringStatus,
+    icon: monitoringIcon,
+    description: monitoringDescription,
+    indicators: monitoringIndicators,
+    isLoading,
+    helpButtonText: monitoringHelpButtonText,
+    helpButtonUrl: monitoringHelpButtonUrl,
+  };
+}
diff --git a/src/Frontend/src/components/platformcapabilities/constants.ts b/src/Frontend/src/components/platformcapabilities/constants.ts
new file mode 100644
index 000000000..c2fb1242a
--- /dev/null
+++ b/src/Frontend/src/components/platformcapabilities/constants.ts
@@ -0,0 +1,13 @@
+export enum CapabilityStatus {
+  Unavailable = "Unavailable", // Instance is configured but not responding or not available
+  PartiallyUnavailable = "Degraded", // At least one but not all instances are unavailable
+  Available = "Available", // Instance is available and responding
+  EndpointsNotConfigured = "Endpoints Not Configured", // Instance is not configured. Promo should be shown
+  InstanceNotConfigured = "Instance Not Configured", // Instance is not configured at all
+}
+
+export enum Capability {
+  Monitoring = "Monitoring",
+  Auditing = "Auditing",
+  Error = "Recoverability",
+}
diff --git a/src/Frontend/src/components/platformcapabilities/types.ts b/src/Frontend/src/components/platformcapabilities/types.ts
new file mode 100644
index 000000000..2593d2f0d
--- /dev/null
+++ b/src/Frontend/src/components/platformcapabilities/types.ts
@@ -0,0 +1,22 @@
+import { CapabilityStatus } from "./constants";
+
+export interface StatusIndicator {
+  label: string;
+  status: CapabilityStatus;
+  tooltip: string;
+}
+
+export interface WizardImage {
+  src: string;
+  caption?: string;
+  maxHeight?: string;
+}
+
+export interface WizardPage {
+  title: string;
+  content: string;
+  image?: string | WizardImage;
+  images?: (string | WizardImage)[];
+  learnMoreUrl?: string;
+  learnMoreText?: string;
+}
diff --git a/src/Frontend/src/components/platformcapabilities/wizards/AuditingWizardPages.ts b/src/Frontend/src/components/platformcapabilities/wizards/AuditingWizardPages.ts
new file mode 100644
index 000000000..3777ddc8f
--- /dev/null
+++ b/src/Frontend/src/components/platformcapabilities/wizards/AuditingWizardPages.ts
@@ -0,0 +1,178 @@
+import { CapabilityStatus } from "../constants";
+import { WizardPage } from "../types";
+
+const AuditingInstanceNotConfiguredPages: WizardPage[] = [
+  {
+    title: "What is Auditing?",
+    content: `
+      <p>Auditing captures a copy of every successful message processed by your NServiceBus endpoints, allowing you to:</p>
+      <ul>
+        <li><strong>Display and discover messages</strong> - View processed messages in your system</li>
+        <li><strong>Track message flow</strong> - See the complete journey of messages through your system</li>
+        <li><strong>View the sequence of events</strong> - Understand how messages are processed over time</li>
+        <li><strong>Visualize saga state</strong> - Monitor and debug your saga workflows</li>
+        <li><strong>Debug issues</strong> - Inspect message contents and headers for troubleshooting</li>
+      </ul>
+    `,
+    images: [{ src: "/img/all-messages.png", caption: "Display and Discover Messages" }],
+    learnMoreUrl: "https://docs.particular.net/nservicebus/operations/auditing",
+    learnMoreText: "Learn more about auditing",
+  },
+  {
+    title: "Display and Discover Messages",
+    content: `
+      <p>Browse and search through all processed messages in your system:</p>
+      <ul>
+        <li><strong>Message List</strong> - View all messages in a searchable list</li>
+        <li><strong>Advanced Filtering</strong> - Filter messages by endpoint, time range, and more</li>
+        <li><strong>Full-text Search</strong> - Search message contents to find specific data</li>
+        <li><strong>Sorting Options</strong> - Sort by time processed, endpoint, or message type</li>
+        <li><strong>Auto Refresh</strong> - Keep your message list up to date with the latest processed messages</li>
+      </ul>
+    `,
+    images: [
+      { src: "/img/all-messages-filter.png", caption: "Advanced Filtering and full-text search" },
+      { src: "/img/all-messages-sort.png", caption: "Sorting Options" },
+      { src: "/img/all-messages-refresh.png", caption: "Auto Refresh" },
+    ],
+    learnMoreUrl: "https://docs.particular.net/servicepulse/all-messages",
+    learnMoreText: "Learn about message discovery",
+  },
+  {
+    title: "Track Message Flow",
+    content: `
+      <p>Follow the complete journey of messages through your distributed system:</p>
+      <ul>
+        <li><strong>Conversation tracking</strong> - See all related messages grouped together by conversation ID</li>
+        <li><strong>Message timeline</strong> - View the sequence of events as messages flow between endpoints</li>
+        <li><strong>Endpoint mapping</strong> - Understand which endpoints send and receive each message type</li>
+        <li><strong>Flow visualization</strong> - Get a clear picture of your system's message-based interactions</li>
+      </ul>
+    `,
+    images: [
+      { src: "/img/flow-diagram.png", caption: "Track Message Flow" },
+      { src: "/img/flow-diagram-nodes.png", caption: "Message Nodes", maxHeight: "600px" },
+    ],
+    learnMoreUrl: "https://docs.particular.net/servicepulse/flow-diagram",
+    learnMoreText: "Learn about message tracking",
+  },
+  {
+    title: "View the Sequence of Events",
+    content: `
+      <p>Understand the order and timing of message processing with sequence diagrams:</p>
+      <ul>
+        <li><strong>Timeline view</strong> - See messages arranged chronologically as they were processed</li>
+        <li><strong>Endpoint interactions</strong> - Visualize how endpoints communicate with each other</li>
+        <li><strong>Handler execution</strong> - Track which handlers processed each message</li>
+      </ul>
+    `,
+    images: [{ src: "/img/sequence-diagram.png" }],
+    learnMoreUrl: "https://docs.particular.net/servicepulse/sequence-diagram",
+    learnMoreText: "Learn about sequence diagrams",
+  },
+  {
+    title: "Visualize Workflow State",
+    content: `
+      <p>Monitor and debug your saga workflows with saga diagrams:</p>
+      <ul>
+        <li><strong>Saga lifecycle</strong> - View the complete history of a saga from start to completion</li>
+        <li><strong>State changes</strong> - Track how saga state evolves as messages are processed</li>
+        <li><strong>Message correlation</strong> - See which messages initiated and updated the saga</li>
+        <li><strong>Timeout tracking</strong> - Monitor saga timeouts and their triggers</li>
+      </ul>
+    `,
+    images: [
+      { src: "/img/saga-diagram-overview.png", caption: "Saga Lifecycle" },
+      { src: "/img/saga-diagram-state-change.png", caption: "Saga State Changes" },
+      { src: "/img/saga-diagram-timeout-view.png", caption: "Timeout Tracking" },
+    ],
+    learnMoreUrl: "https://docs.particular.net/servicepulse/saga-diagram",
+    learnMoreText: "Learn about saga diagrams",
+  },
+  {
+    title: "Debug Issues",
+    content: `
+      <p>Inspect message details to troubleshoot problems in your system:</p>
+      <ul>
+        <li><strong>Message headers</strong> - View all metadata including timestamps, correlation IDs, and custom headers</li>
+        <li><strong>Message body</strong> - Examine the full payload content of each message</li>
+        <li><strong>Processing details</strong> - See which endpoint processed the message and when</li>
+        <li><strong>Header Search</strong> - Quickly find specific message headers</li>
+      </ul>
+    `,
+    images: [
+      { src: "/img/message-details-headers.png", caption: "Message Headers" },
+      { src: "/img/message-details-body.png", caption: "Message Body" },
+      { src: "/img/message-metadata.png", caption: "Processing Details" },
+    ],
+    learnMoreUrl: "https://docs.particular.net/servicepulse/message-details",
+    learnMoreText: "Learn about message inspection",
+  },
+  {
+    title: "Setup ServiceControl Audit Instance",
+    content: `
+      <p>To enable auditing in ServicePulse, you need to setup a ServiceControl Audit instance. There are multiple ways to do this:</p>
+      <ul>
+        <li><strong><a href="https://docs.particular.net/servicecontrol/audit-instances/deployment/powershell" target="_blank">Scripted Deployment</a></strong> - Use a script to automate the installation and configuration of the audit instance</li>
+        <li><strong><a href="https://docs.particular.net/servicecontrol/audit-instances/deployment/containers" target="_blank">Containers</a></strong> - Run the audit instance inside a container</li>
+        <li><strong><a href="https://docs.particular.net/servicecontrol/audit-instances/deployment/scmu" target="_blank">ServiceControl Management Utility</a></strong> - Use the management utility to create and configure the audit instance</li>
+      </ul>
+      <p>The audit instance stores processed messages and makes them available for viewing in ServicePulse.</p>
+    `,
+    images: [{ src: "/img/audit-instance-overview.png", caption: "ServiceControl Audit Instance Architecture" }],
+    learnMoreUrl: "https://docs.particular.net/servicecontrol/audit-instances/deployment/",
+    learnMoreText: "Learn about deploying audit instances",
+  },
+];
+
+const AuditingEndpointsNotConfiguredPages: WizardPage[] = [
+  {
+    title: "Enable Auditing for Your Endpoints",
+    content: `
+      <p>Your ServiceControl Audit instance is connected, but no endpoints are sending audit messages yet.</p>
+      <p>To see messages in ServicePulse, you need to enable auditing in your NServiceBus endpoints:</p>
+      <ul>
+        <li><strong>Configure the audit queue</strong> - Tell your endpoints where to send audit copies</li>
+        <li><strong>Deploy your changes</strong> - Restart endpoints with the new configuration</li>
+        <li><strong>Process some messages</strong> - Send test messages to verify auditing works</li>
+      </ul>
+    `,
+    learnMoreUrl: "https://docs.particular.net/nservicebus/operations/auditing",
+    learnMoreText: "Learn how to configure auditing",
+  },
+  {
+    title: "Configure Your Endpoints",
+    content: `
+      <p>Add auditing configuration to your endpoint setup code:</p>
+      <p><code>endpointConfiguration.AuditProcessedMessagesTo("audit");</code></p>
+      <p>Make sure the audit queue name matches what your ServiceControl Audit instance is monitoring.</p>
+    `,
+    learnMoreUrl: "https://docs.particular.net/nservicebus/operations/auditing#configuring-auditing",
+    learnMoreText: "View configuration options",
+  },
+  {
+    title: "Verify Your Setup",
+    content: `
+      <p>Once configured:</p>
+      <ul>
+        <li><strong>Send a test message</strong> through one of your endpoints</li>
+        <li><strong>Check this capability card</strong> - it will automatically update when messages are detected</li>
+        <li><strong>View the All Messages tab</strong> to see your processed messages</li>
+      </ul>
+      <p>If messages still don't appear after a few minutes, check your endpoint logs and ServiceControl logs for any errors.</p>
+    `,
+    learnMoreUrl: "https://docs.particular.net/servicecontrol/troubleshooting",
+    learnMoreText: "Troubleshooting guide",
+  },
+];
+
+export function getAuditingWizardPages(status: CapabilityStatus): WizardPage[] {
+  switch (status) {
+    case CapabilityStatus.InstanceNotConfigured:
+      return AuditingInstanceNotConfiguredPages;
+    case CapabilityStatus.EndpointsNotConfigured:
+      return AuditingEndpointsNotConfiguredPages;
+    default:
+      return [];
+  }
+}
diff --git a/src/Frontend/src/components/platformcapabilities/wizards/MonitoringWizardPages.ts b/src/Frontend/src/components/platformcapabilities/wizards/MonitoringWizardPages.ts
new file mode 100644
index 000000000..dcb04b818
--- /dev/null
+++ b/src/Frontend/src/components/platformcapabilities/wizards/MonitoringWizardPages.ts
@@ -0,0 +1,136 @@
+import { WizardPage } from "../types";
+import { CapabilityStatus } from "../constants";
+
+const MonitoringInstanceNotConfiguredPages: WizardPage[] = [
+  {
+    title: "What is Monitoring?",
+    content: `
+      <p>Monitoring gives you real-time visibility into your NServiceBus system performance:</p>
+      <ul>
+        <li><strong>Overall Performance metrics</strong> - Understand how your endpoints are performing</li>
+        <li><strong>Logical Endpoint Monitoring</strong> - View aggregated metrics across all instances of an endpoint</li>
+        <li><strong>Physical Endpoint Monitoring</strong> - Drill down into individual endpoint instances for detailed metrics</li>
+      </ul>
+    `,
+    images: [{ src: "/img/servicepulse-monitoring-tab.png", caption: "Real-time Performance Metrics" }],
+    learnMoreUrl: "https://docs.particular.net/monitoring/",
+    learnMoreText: "Learn more about monitoring",
+  },
+  {
+    title: "Overall Performance Metrics",
+    content: `
+      <p>Get detailed insights into your endpoint performance with real-time metrics:</p>
+      <ul>
+        <li><strong>Throughput</strong> - Messages processed per second for each endpoint</li>
+        <li><strong>Processing time</strong> - Average time to handle each message type</li>
+        <li><strong>Queue length</strong> - Current number of messages waiting to be processed</li>
+        <li><strong>Critical time</strong> - Total time from message send to processing completion</li>
+      </ul>
+    `,
+    images: [{ src: "/img/servicepulse-monitoring-tab.png", caption: "Real-time Performance Metrics" }],
+    learnMoreUrl: "https://docs.particular.net/monitoring/metrics/definitions",
+    learnMoreText: "Learn about metric definitions",
+  },
+  {
+    title: "Logical Endpoint Monitoring",
+    content: `
+      <p>Monitor your logical endpoints to understand how each service in your system is performing:</p>
+      <ul>
+        <li><strong>Endpoint details</strong> - See your logical endpoint at a glance</li>
+        <li><strong>Aggregated metrics</strong> - View combined metrics across all instances of an endpoint</li>
+        <li><strong>Throughput trends</strong> - Track message processing rates over time</li>
+        <li><strong>Health indicators</strong> - Quickly identify endpoints that need attention</li>
+      </ul>
+    `,
+    images: [{ src: "/img/servicepulse-monitoring-details.png", caption: "Logical Endpoint Monitoring" }],
+    learnMoreUrl: "https://docs.particular.net/monitoring/metrics/in-servicepulse",
+    learnMoreText: "Learn about endpoint monitoring",
+  },
+  {
+    title: "Physical Endpoint Monitoring",
+    content: `
+      <p>Drill down into individual endpoint instances for detailed performance analysis:</p>
+      <ul>
+        <li><strong>Instance-level metrics</strong> - See performance data for each running instance</li>
+        <li><strong>Compare instances</strong> - Identify performance variations between instances</li>
+        <li><strong>Resource utilization</strong> - Understand how each instance is handling its workload</li>
+        <li><strong>Scaling insights</strong> - Make informed decisions about scaling your endpoints</li>
+      </ul>
+    `,
+    images: [{ src: "/img/servicepulse-physicalinstance-breakdown.png", caption: "Physical Endpoint Monitoring" }],
+    learnMoreUrl: "https://docs.particular.net/monitoring/metrics/in-servicepulse",
+    learnMoreText: "Learn about instance monitoring",
+  },
+  {
+    title: "Setup ServiceControl Monitoring Instance",
+    content: `
+      <p>To enable monitoring in ServicePulse, you need to set up a ServiceControl Monitoring instance. There are multiple ways to do this:</p>
+      <ul>
+        <li><strong><a href="https://docs.particular.net/servicecontrol/monitoring-instances/deployment/powershell" target="_blank">Scripted Deployment</a></strong> - Use a script to automate the installation and configuration of the monitoring instance</li>
+        <li><strong><a href="https://docs.particular.net/servicecontrol/monitoring-instances/deployment/containers" target="_blank">Containers</a></strong> - Run the monitoring instance inside a container</li>
+        <li><strong><a href="https://docs.particular.net/servicecontrol/monitoring-instances/deployment/scmu" target="_blank">ServiceControl Management Utility</a></strong> - Use the management utility to create and configure the monitoring instance</li>
+      </ul>
+      <p>The monitoring instance collects and aggregates metrics from your endpoints.</p>
+    `,
+    images: [{ src: "/img/monitor-instance-overview.png", caption: "NServiceBus Monitoring Architecture" }],
+    learnMoreUrl: "https://docs.particular.net/servicecontrol/monitoring-instances/deployment/",
+    learnMoreText: "Learn about deploying monitoring instances",
+  },
+];
+
+const MonitoringEndpointsNotConfiguredPages: WizardPage[] = [
+  {
+    title: "Install the Monitoring Plugin",
+    content: `
+      <p>Your ServiceControl Monitoring instance is connected, but no endpoints are sending metrics yet.</p>
+      <p>To see metrics in ServicePulse, install the monitoring plugin in your NServiceBus endpoints:</p>
+      <ul>
+        <li><strong>Add the NuGet package</strong> - Install <code>NServiceBus.Metrics.ServiceControl</code></li>
+        <li><strong>Configure the plugin</strong> - Point it to your monitoring instance</li>
+        <li><strong>Deploy your changes</strong> - Restart endpoints with the new configuration</li>
+      </ul>
+    `,
+    learnMoreUrl: "https://docs.particular.net/monitoring/metrics/install-plugin",
+    learnMoreText: "Learn how to install the plugin",
+  },
+  {
+    title: "Configure Your Endpoints",
+    content: `
+      <p>Add the metrics plugin to your endpoint configuration:</p>
+      <pre>
+    <code>var metrics = endpointConfiguration.EnableMetrics();
+      metrics.SendMetricDataToServiceControl(
+        serviceControlMetricsAddress: SERVICE_CONTROL_METRICS_ADDRESS,
+        interval: TimeSpan.FromMinutes(1),
+        instanceId: "INSTANCE_ID_OPTIONAL");</code></pre>
+      <p>Make sure the queue name matches your ServiceControl Monitoring instance queue.</p>
+    `,
+    learnMoreUrl: "https://docs.particular.net/monitoring/metrics/install-plugin#configuration",
+    learnMoreText: "View configuration options",
+  },
+  {
+    title: "Verify Your Setup",
+    content: `
+      <p>Once configured:</p>
+      <ul>
+        <li><strong>Start your endpoints</strong> - Metrics will begin flowing immediately</li>
+        <li><strong>Check this capability card</strong> - it will automatically update when metrics are detected</li>
+        <li><strong>View the Monitoring tab</strong> to see real-time performance data</li>
+      </ul>
+      <p>Metrics are sent at regular intervals (default: every 10 seconds), so you should see data appear within a minute.</p>
+    `,
+    learnMoreUrl: "https://docs.particular.net/servicecontrol/troubleshooting",
+    learnMoreText: "Troubleshooting guide",
+  },
+];
+
+export function getMonitoringWizardPages(status: CapabilityStatus): WizardPage[] {
+  switch (status) {
+    case CapabilityStatus.InstanceNotConfigured:
+      return MonitoringInstanceNotConfiguredPages;
+    case CapabilityStatus.EndpointsNotConfigured:
+      return MonitoringEndpointsNotConfiguredPages;
+    default:
+      return [];
+  }
+}
diff --git a/src/Frontend/src/composables/useAuditStoreAutoRefresh.ts b/src/Frontend/src/composables/useAuditStoreAutoRefresh.ts
new file mode 100644
index 000000000..cc6e390fc
--- /dev/null
+++ b/src/Frontend/src/composables/useAuditStoreAutoRefresh.ts
@@ -0,0 +1,10 @@
+import { useAuditStore } from "@/stores/AuditStore";
+import { useStoreAutoRefresh } from "./useAutoRefresh";
+
+// Override the refresh method to use checkForSuccessfulMessages, which is more lightweight
+const useAuditStoreWithRefresh = () => {
+  const store = useAuditStore();
+  return Object.assign(store, { refresh: store.checkForSuccessfulMessages });
+};
+
+export default useStoreAutoRefresh("auditStoreSuccessfulMessages", useAuditStoreWithRefresh, 5000).autoRefresh;
diff --git a/src/Frontend/src/composables/useMonitoringStoreAutoRefresh.ts b/src/Frontend/src/composables/useMonitoringStoreAutoRefresh.ts
new file mode 100644
index 000000000..1dd7cef96
--- /dev/null
+++ b/src/Frontend/src/composables/useMonitoringStoreAutoRefresh.ts
@@ -0,0 +1,10 @@
+import { useMonitoringStore } from "@/stores/MonitoringStore";
+import { useStoreAutoRefresh } from "./useAutoRefresh";
+
+// Override the refresh method to use checkForMonitoredEndpoints, which is more lightweight
+const useMonitoringStoreWithRefresh = () => {
+  const store = useMonitoringStore();
+  return Object.assign(store, { refresh: store.checkForMonitoredEndpoints });
+};
+
+export default useStoreAutoRefresh("monitoringStoreMonitoredEndpoints", useMonitoringStoreWithRefresh, 5000).autoRefresh;
diff --git a/src/Frontend/src/composables/useRemoteInstancesAutoRefresh.ts b/src/Frontend/src/composables/useRemoteInstancesAutoRefresh.ts
new file mode 100644
index 000000000..b5754fc55
--- /dev/null
+++ b/src/Frontend/src/composables/useRemoteInstancesAutoRefresh.ts
@@ -0,0 +1,4 @@
+import { useRemoteInstancesStore } from "@/stores/RemoteInstancesStore";
+import { useStoreAutoRefresh } from "./useAutoRefresh";
+
+export default useStoreAutoRefresh("remoteInstances", useRemoteInstancesStore, 5000).autoRefresh;
diff --git a/src/Frontend/src/resources/RemoteInstance.ts b/src/Frontend/src/resources/RemoteInstance.ts
new file mode 100644
index 000000000..8eff3e4cc
--- /dev/null
+++ b/src/Frontend/src/resources/RemoteInstance.ts
@@ -0,0 +1,28 @@
+export interface RemoteInstanceDataRetention {
+  audit_retention_period?: string;
+  error_retention_period?: string;
+}
+
+export interface RemoteInstanceConfiguration {
+  data_retention?: RemoteInstanceDataRetention;
+}
+
+export enum RemoteInstanceType {
+  Audit = "audit",
+  Error = "error",
+  Unknown = "unknown",
+}
+
+export interface RemoteInstance {
+  api_uri: string;
+  version: string;
+  status: RemoteInstanceStatus;
+  configuration?: RemoteInstanceConfiguration;
+  /** Cached instance type - determined when the instance was last online */
+  cachedInstanceType?: RemoteInstanceType;
+}
+
+export enum RemoteInstanceStatus {
+  Online = "online",
+  Unavailable = "unavailable",
+}
diff --git a/src/Frontend/src/stores/AuditStore.ts b/src/Frontend/src/stores/AuditStore.ts
index f662834df..0293b3045 100644
--- a/src/Frontend/src/stores/AuditStore.ts
+++ b/src/Frontend/src/stores/AuditStore.ts
@@ -1,7 +1,7 @@
 import { acceptHMRUpdate, defineStore } from "pinia";
 import { ref } from "vue";
 import type { SortInfo } from "@/components/SortInfo";
-import Message from "@/resources/Message";
+import Message, { MessageStatus } from "@/resources/Message";
 import { EndpointsView } from "@/resources/EndpointView";
 import type { DateRange } from "@/types/date";
 import serviceControlClient from "@/components/serviceControlClient";
@@ -27,6 +27,19 @@ export const useAuditStore = defineStore("AuditStore", () => {
   const selectedEndpointName = ref<string>("");
   const endpoints = ref<EndpointsView[]>([]);
 
+  const hasSuccessfulMessages = ref(false);
+
+  async function checkForSuccessfulMessages() {
+    try {
+      // Fetch the latest 10 messages and check if any are successful
+      // todo: ideally we would want to filter successful messages server-side, but the API doesn't currently support that
+      const [, data] = await serviceControlClient.fetchTypedFromServiceControl<Message[]>(`messages2/?page_size=10&sort=time_sent&direction=desc`);
+      hasSuccessfulMessages.value = data?.some((msg) => msg.status === MessageStatus.Successful) ?? false;
+    } catch {
+      hasSuccessfulMessages.value = false;
+    }
+  }
+
   async function loadEndpoints() {
     try {
       const [, data] = await serviceControlClient.fetchTypedFromServiceControl<EndpointsView[]>(`endpoints`);
@@ -56,8 +69,10 @@ export const useAuditStore = defineStore("AuditStore", () => {
   return {
     refresh,
     loadEndpoints,
+    checkForSuccessfulMessages,
     sortBy: sortByInstances,
     messages,
+    hasSuccessfulMessages,
     messageFilterString,
     selectedEndpointName,
     itemsPerPage,
diff --git a/src/Frontend/src/stores/MonitoringStore.ts b/src/Frontend/src/stores/MonitoringStore.ts
index 1519bd03d..17248f5bd 100644
--- a/src/Frontend/src/stores/MonitoringStore.ts
+++ b/src/Frontend/src/stores/MonitoringStore.ts
@@ -29,6 +29,7 @@ export const useMonitoringStore = defineStore("MonitoringStore", () => {
 
   const endpointList = ref<Endpoint[]>([]);
   const filterString = ref("");
+  const hasMonitoredEndpoints = ref(false);
   const endpointListCount = computed<number>(() => endpointList.value.length);
   const endpointListIsEmpty = computed<boolean>(() => endpointListCount.value === 0);
   const endpointListIsGrouped = computed<boolean>(() => grouping.value.selectedGrouping !== 0);
@@ -69,6 +70,20 @@ export const useMonitoringStore = defineStore("MonitoringStore", () => {
     }
   }
 
+  async function checkForMonitoredEndpoints() {
+    try {
+      if (!monitoringClient.isMonitoringEnabled || connectionStore.monitoringConnectionState.unableToConnect) {
+        hasMonitoredEndpoints.value = false;
+        return;
+      }
+      // Minimal query: just need to check if any endpoints exist
+      const data = await monitoringClient.getMonitoredEndpoints(1);
+      hasMonitoredEndpoints.value = (data?.length ?? 0) > 0;
+    } catch {
+      hasMonitoredEndpoints.value = false;
+    }
+  }
+
   async function getAllMonitoredEndpoints() {
     let endpoints: Endpoint[] = [];
     if (monitoringClient.isMonitoringEnabled) {
@@ -202,6 +217,7 @@ export const useMonitoringStore = defineStore("MonitoringStore", () => {
     grouping,
     filterString,
     sortBy,
+    hasMonitoredEndpoints,
 
     //getters
     endpointListIsEmpty,
@@ -212,6 +228,7 @@ export const useMonitoringStore = defineStore("MonitoringStore", () => {
     updateSelectedGrouping,
     updateEndpointList,
     updateFilterString,
+    checkForMonitoredEndpoints,
   };
 });
 
diff --git a/src/Frontend/src/stores/PlatformCapabilitiesStore.ts b/src/Frontend/src/stores/PlatformCapabilitiesStore.ts
new file mode 100644
index 000000000..ec5f79176
--- /dev/null
+++ b/src/Frontend/src/stores/PlatformCapabilitiesStore.ts
@@ -0,0 +1,90 @@
+import { acceptHMRUpdate, defineStore } from "pinia";
+import { ref, watch } from "vue";
+
+const STORAGE_KEY = "servicepulse-platform-capabilities-visibility";
+
+interface PlatformCapabilitiesVisibility {
+  showSection: boolean;
+  showAuditingCard: boolean;
+  showMonitoringCard: boolean;
+  showErrorCard: boolean;
+}
+
+const defaultVisibility: PlatformCapabilitiesVisibility = {
+  showSection: true,
+  showAuditingCard: true,
+  showMonitoringCard: true,
+  showErrorCard: true,
+};
+
+function loadVisibility(): PlatformCapabilitiesVisibility {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored) {
+      const parsed = JSON.parse(stored) as Partial<PlatformCapabilitiesVisibility>;
+      return { ...defaultVisibility, ...parsed };
+    }
+  } catch {
+    // Ignore parse errors, use defaults
+  }
+  return { ...defaultVisibility };
+}
+
+function saveVisibility(visibility: PlatformCapabilitiesVisibility): void {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(visibility));
+  } catch {
+    // Ignore storage errors
+  }
+}
+
+export const usePlatformCapabilitiesStore = defineStore("PlatformCapabilitiesStore", () => {
+  const visibility = ref<PlatformCapabilitiesVisibility>(loadVisibility());
+
+  // Watch for changes and persist to localStorage
+  watch(
+    visibility,
+    (newValue) => {
+      saveVisibility(newValue);
+    },
+    { deep: true }
+  );
+
+  function toggleSection() {
+    visibility.value.showSection = !visibility.value.showSection;
+  }
+
+  function toggleAuditingCard() {
+    visibility.value.showAuditingCard = !visibility.value.showAuditingCard;
+  }
+
+  function toggleMonitoringCard() {
+    visibility.value.showMonitoringCard = !visibility.value.showMonitoringCard;
+  }
+
+  function toggleErrorCard() {
+    visibility.value.showErrorCard = !visibility.value.showErrorCard;
+  }
+
+  function showAll() {
+    visibility.value.showSection = true;
+    visibility.value.showAuditingCard = true;
+    visibility.value.showMonitoringCard = true;
+    visibility.value.showErrorCard = true;
+  }
+
+  return {
+    visibility,
+    toggleSection,
+    toggleAuditingCard,
+    toggleMonitoringCard,
+    toggleErrorCard,
+    showAll,
+  };
+});
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(usePlatformCapabilitiesStore, import.meta.hot));
+}
+
+export type PlatformCapabilitiesStore = ReturnType<typeof usePlatformCapabilitiesStore>;
diff --git a/src/Frontend/src/stores/RemoteInstancesStore.ts b/src/Frontend/src/stores/RemoteInstancesStore.ts
new file mode 100644
index 000000000..cdda3508d
--- /dev/null
+++ b/src/Frontend/src/stores/RemoteInstancesStore.ts
@@ -0,0 +1,105 @@
+import { acceptHMRUpdate, defineStore } from "pinia";
+import { ref } from "vue";
+import { RemoteInstance, RemoteInstanceType, RemoteInstanceStatus } from "@/resources/RemoteInstance";
+import serviceControlClient from "@/components/serviceControlClient";
+
+const INSTANCE_TYPE_CACHE_KEY = "servicepulse-remote-instance-types";
+
+/**
+ * Determines the instance type based on configuration data retention settings
+ */
+function determineInstanceType(instance: RemoteInstance): RemoteInstanceType {
+  if (instance.configuration?.data_retention?.audit_retention_period !== undefined) {
+    return RemoteInstanceType.Audit;
+  }
+  if (instance.configuration?.data_retention?.error_retention_period !== undefined) {
+    return RemoteInstanceType.Error;
+  }
+  return RemoteInstanceType.Unknown;
+}
+
+/**
+ * Load instance type cache from localStorage
+ */
+function loadInstanceTypeCache(): Map<string, RemoteInstanceType> {
+  try {
+    const cached = localStorage.getItem(INSTANCE_TYPE_CACHE_KEY);
+    if (cached) {
+      const parsed = JSON.parse(cached) as Record<string, RemoteInstanceType>;
+      return new Map(Object.entries(parsed));
+    }
+  } catch {
+    // Ignore parse errors, start with empty cache
+  }
+  return new Map();
+}
+
+/**
+ * Save instance type cache to localStorage
+ */
+function saveInstanceTypeCache(cache: Map<string, RemoteInstanceType>): void {
+  try {
+    const obj = Object.fromEntries(cache);
+    localStorage.setItem(INSTANCE_TYPE_CACHE_KEY, JSON.stringify(obj));
+  } catch {
+    // Ignore storage errors
+  }
+}
+
+export const useRemoteInstancesStore = defineStore("RemoteInstancesStore", () => {
+  const remoteInstances = ref<RemoteInstance[] | null>(null);
+
+  // Cache to store instance types by api_uri - persists in localStorage across page refreshes
+  const instanceTypeCache = loadInstanceTypeCache();
+
+  async function refresh() {
+    const response = await serviceControlClient.fetchFromServiceControl("configuration/remotes");
+    const instances: RemoteInstance[] = await response.json();
+
+    let cacheUpdated = false;
+
+    // Process each instance to determine and cache its type
+    for (const instance of instances) {
+      // If the instance is online, determine its type from configuration
+      if (instance.status === RemoteInstanceStatus.Online) {
+        const instanceType = determineInstanceType(instance);
+        if (instanceType !== RemoteInstanceType.Unknown) {
+          const existingType = instanceTypeCache.get(instance.api_uri);
+          if (existingType !== instanceType) {
+            instanceTypeCache.set(instance.api_uri, instanceType);
+            cacheUpdated = true;
+          }
+        }
+      }
+
+      // Apply cached type to the instance (whether online or offline)
+      const cachedType = instanceTypeCache.get(instance.api_uri);
+      if (cachedType) {
+        instance.cachedInstanceType = cachedType;
+      } else {
+        // If no cached type and instance is online, try to determine it now
+        instance.cachedInstanceType = determineInstanceType(instance);
+      }
+    }
+
+    // Persist cache to localStorage if it was updated
+    if (cacheUpdated) {
+      saveInstanceTypeCache(instanceTypeCache);
+    }
+
+    remoteInstances.value = instances;
+  }
+
+  refresh();
+
+  return {
+    remoteInstances,
+    refresh,
+  };
+});
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useRemoteInstancesStore, import.meta.hot));
+}
+
+export type RemoteInstancesStore = ReturnType<typeof useRemoteInstancesStore>;
diff --git a/src/Frontend/src/views/DashboardView.vue b/src/Frontend/src/views/DashboardView.vue
index 935e89fba..f49c17cd8 100644
--- a/src/Frontend/src/views/DashboardView.vue
+++ b/src/Frontend/src/views/DashboardView.vue
@@ -5,6 +5,7 @@ import ServiceControlAvailable from "@/components/ServiceControlAvailable.vue";
 import CustomChecksDashboardItem from "@/components/customchecks/CustomChecksDashboardItem.vue";
 import HeartbeatsDashboardItem from "@/components/heartbeats/HeartbeatsDashboardItem.vue";
 import FailedMessagesDashboardItem from "@/components/failedmessages/FailedMessagesDashboardItem.vue";
+import PlatformCapabilitiesDashboardItem from "@/components/platformcapabilities/PlatformCapabilitiesDashboardItem.vue";
 </script>
 
 <template>
@@ -14,6 +15,7 @@ import FailedMessagesDashboardItem from "@/components/failedmessages/FailedMessa
         <div class="row">
           <div class="col-12">
             <h6>System status</h6>
+            <p class="system-status-description">Monitor your system's health and performance.</p>
             <div class="row box system-status">
               <div class="col-12">
                 <div class="row">
@@ -30,6 +32,9 @@ import FailedMessagesDashboardItem from "@/components/failedmessages/FailedMessa
               </div>
             </div>
           </div>
+          <div class="col-12 platform-capabilities-section">
+            <PlatformCapabilitiesDashboardItem />
+          </div>
           <EventItemShort></EventItemShort>
         </div>
       </LicenseNotExpired>
@@ -51,4 +56,13 @@ import FailedMessagesDashboardItem from "@/components/failedmessages/FailedMessa
 .system-status-item {
   flex: 1;
 }
+.system-status-description {
+  font-size: 14px;
+  color: var(--text-secondary, #666);
+  margin: 0 0 10px 0;
+}
+
+.platform-capabilities-section {
+  margin-top: 2em;
+}
 </style>
diff --git a/src/Frontend/src/views/throughputreport/serviceControlWithThroughput.ts b/src/Frontend/src/views/throughputreport/serviceControlWithThroughput.ts
index f8fb63cf4..28e2bc2a2 100644
--- a/src/Frontend/src/views/throughputreport/serviceControlWithThroughput.ts
+++ b/src/Frontend/src/views/throughputreport/serviceControlWithThroughput.ts
@@ -11,4 +11,6 @@ export const serviceControlWithThroughput = async ({ driver }: SetupFactoryOptio
   await driver.setUp(precondition.hasNoHeartbeatsEndpoints);
   await driver.setUp(precondition.hasServiceControlMainInstance(minimumSCVersionForThroughput));
   await driver.setUp(precondition.hasEndpointSettings([]));
+  await driver.setUp(precondition.hasRemoteInstances());
+  await driver.setUp(precondition.hasMessages());
 };
diff --git a/src/Frontend/test/preconditions/auditCapability.ts b/src/Frontend/test/preconditions/auditCapability.ts
new file mode 100644
index 000000000..67a05ecd3
--- /dev/null
+++ b/src/Frontend/test/preconditions/auditCapability.ts
@@ -0,0 +1,153 @@
+import { RemoteInstance, RemoteInstanceStatus, RemoteInstanceType } from "@/resources/RemoteInstance";
+import Message, { MessageStatus } from "@/resources/Message";
+import { SetupFactoryOptions } from "../driver";
+
+/**
+ * Creates a remote audit instance with the given configuration
+ */
+export function createAuditInstance(options: { apiUri?: string; version?: string; status?: RemoteInstanceStatus; retentionPeriod?: string } = {}): RemoteInstance {
+  const { apiUri = "http://localhost:33334/api/", version = "6.6.0", status = RemoteInstanceStatus.Online, retentionPeriod = "7.00:00:00" } = options;
+
+  return {
+    api_uri: apiUri,
+    version,
+    status,
+    configuration: {
+      data_retention: {
+        audit_retention_period: retentionPeriod,
+      },
+    },
+    cachedInstanceType: RemoteInstanceType.Audit,
+  };
+}
+
+/**
+ * Creates a remote error instance with the given configuration
+ */
+export function createErrorInstance(options: { apiUri?: string; version?: string; status?: RemoteInstanceStatus; retentionPeriod?: string } = {}): RemoteInstance {
+  const { apiUri = "http://localhost:33335/api/", version = "6.6.0", status = RemoteInstanceStatus.Online, retentionPeriod = "15.00:00:00" } = options;
+
+  return {
+    api_uri: apiUri,
+    version,
+    status,
+    configuration: {
+      data_retention: {
+        error_retention_period: retentionPeriod,
+      },
+    },
+    cachedInstanceType: RemoteInstanceType.Error,
+  };
+}
+
+/**
+ * Creates a successful message for testing
+ */
+export function createSuccessfulMessage(id: string = "msg-1"): Message {
+  return {
+    id,
+    message_id: id,
+    message_type: "TestMessage",
+    sending_endpoint: { name: "Sender", host_id: "host-1", host: "localhost" },
+    receiving_endpoint: { name: "Receiver", host_id: "host-2", host: "localhost" },
+    time_sent: new Date().toISOString(),
+    processed_at: new Date().toISOString(),
+    critical_time: "00:00:00.1234567",
+    processing_time: "00:00:00.0123456",
+    delivery_time: "00:00:00.0012345",
+    is_system_message: false,
+    conversation_id: "conv-1",
+    headers: [],
+    status: MessageStatus.Successful,
+    message_intent: "send" as never,
+    body_url: "",
+    body_size: 100,
+    instance_id: "instance-1",
+  };
+}
+
+/**
+ * Precondition: No audit instances configured (no remote instances at all)
+ */
+export const hasNoAuditInstances = ({ driver }: SetupFactoryOptions) => {
+  driver.mockEndpoint(`${window.defaultConfig.service_control_url}configuration/remotes`, {
+    body: [],
+  });
+};
+
+/**
+ * Precondition: Single audit instance that is online
+ */
+export const hasAvailableAuditInstance =
+  (auditInstance: RemoteInstance = createAuditInstance()) =>
+  ({ driver }: SetupFactoryOptions) => {
+    driver.mockEndpoint(`${window.defaultConfig.service_control_url}configuration/remotes`, {
+      body: [auditInstance],
+    });
+  };
+
+/**
+ * Precondition: Single audit instance that is unavailable
+ */
+export const hasUnavailableAuditInstance = ({ driver }: SetupFactoryOptions) => {
+  const instance = createAuditInstance({ status: RemoteInstanceStatus.Unavailable });
+  driver.mockEndpoint(`${window.defaultConfig.service_control_url}configuration/remotes`, {
+    body: [instance],
+  });
+};
+
+/**
+ * Precondition: Multiple audit instances with mixed availability
+ */
+export const hasPartiallyUnavailableAuditInstances = ({ driver }: SetupFactoryOptions) => {
+  const onlineInstance = createAuditInstance({ apiUri: "http://localhost:33334/api/" });
+  const offlineInstance = createAuditInstance({ apiUri: "http://localhost:33336/api/", status: RemoteInstanceStatus.Unavailable });
+  driver.mockEndpoint(`${window.defaultConfig.service_control_url}configuration/remotes`, {
+    body: [onlineInstance, offlineInstance],
+  });
+};
+
+/**
+ * Precondition: Multiple audit instances all online
+ */
+export const hasMultipleAvailableAuditInstances = ({ driver }: SetupFactoryOptions) => {
+  const instance1 = createAuditInstance({ apiUri: "http://localhost:33334/api/" });
+  const instance2 = createAuditInstance({ apiUri: "http://localhost:33336/api/" });
+  driver.mockEndpoint(`${window.defaultConfig.service_control_url}configuration/remotes`, {
+    body: [instance1, instance2],
+  });
+};
+
+/**
+ * Precondition: Has successful messages (endpoints configured for auditing)
+ */
+export const hasSuccessfulMessages =
+  (messages: Message[] = [createSuccessfulMessage()]) =>
+  ({ driver }: SetupFactoryOptions) => {
+    driver.mockEndpointDynamic(`${window.defaultConfig.service_control_url}messages2/*`, "get", () =>
+      Promise.resolve({
+        body: messages,
+      })
+    );
+  };
+
+/**
+ * Precondition: No successful messages (no endpoints configured for auditing)
+ */
+export const hasNoSuccessfulMessages = ({ driver }: SetupFactoryOptions) => {
+  driver.mockEndpointDynamic(`${window.defaultConfig.service_control_url}messages2/*`, "get", () =>
+    Promise.resolve({
+      body: [],
+    })
+  );
+};
+
+/**
+ * ServiceControl version that supports All Messages feature (>= 6.6.0)
+ */
+export const serviceControlVersionSupportingAllMessages = "6.6.0";
+
+/**
+ * ServiceControl version that does NOT support All Messages feature (< 6.6.0)
+ */
+export const serviceControlVersionNotSupportingAllMessages = "6.5.0";
diff --git a/src/Frontend/test/preconditions/configuration.ts b/src/Frontend/test/preconditions/configuration.ts
index 7fd7813f2..f8fed22ef 100644
--- a/src/Frontend/test/preconditions/configuration.ts
+++ b/src/Frontend/test/preconditions/configuration.ts
@@ -1,5 +1,7 @@
 import QueueAddress from "@/resources/QueueAddress";
 import Redirect from "@/resources/Redirect";
+import { RemoteInstance } from "@/resources/RemoteInstance";
+import Message from "@/resources/Message";
 import { SetupFactoryOptions } from "test/driver";
 
 export const knownQueuesDefaultHandler = ({ driver }: SetupFactoryOptions) => {
@@ -13,3 +15,21 @@ export const redirectsDefaultHandler = ({ driver }: SetupFactoryOptions) => {
     body: <Redirect[]>[],
   });
 };
+
+export const hasRemoteInstances =
+  (body: RemoteInstance[] = []) =>
+  ({ driver }: SetupFactoryOptions) => {
+    driver.mockEndpoint(`${window.defaultConfig.service_control_url}configuration/remotes`, {
+      body,
+    });
+  };
+
+export const hasMessages =
+  (body: Message[] = []) =>
+  ({ driver }: SetupFactoryOptions) => {
+    driver.mockEndpointDynamic(`${window.defaultConfig.service_control_url}messages2/*`, "get", () =>
+      Promise.resolve({
+        body,
+      })
+    );
+  };
diff --git a/src/Frontend/test/preconditions/index.ts b/src/Frontend/test/preconditions/index.ts
index b2a0bcc10..a23461d64 100644
--- a/src/Frontend/test/preconditions/index.ts
+++ b/src/Frontend/test/preconditions/index.ts
@@ -21,3 +21,6 @@ export { hasLicensingSettingTest } from "../preconditions/hasLicensingSettingTes
 export { hasLicensingEndpoints } from "../preconditions/hasLicensingEndpoints";
 export { hasEndpointSettings } from "./hasEndpointSettings";
 export * from "./configuration";
+export * from "./auditCapability";
+export * from "./monitoringCapability";
+export * from "./recoverabilityCapability";
diff --git a/src/Frontend/test/preconditions/monitoringCapability.ts b/src/Frontend/test/preconditions/monitoringCapability.ts
new file mode 100644
index 000000000..12a796400
--- /dev/null
+++ b/src/Frontend/test/preconditions/monitoringCapability.ts
@@ -0,0 +1,70 @@
+import { Endpoint } from "@/resources/MonitoringEndpoint";
+import { monitoredEndpointTemplate } from "../mocks/monitored-endpoint-template";
+import { SetupFactoryOptions } from "../driver";
+
+/**
+ * Creates a monitored endpoint with the given name
+ */
+export function createMonitoredEndpoint(name: string = "TestEndpoint"): Endpoint {
+  return {
+    ...monitoredEndpointTemplate,
+    name,
+  };
+}
+
+/**
+ * Precondition: Monitoring instance is available with monitored endpoints
+ * This sets up a successful monitoring scenario
+ */
+export const hasMonitoringWithEndpoints =
+  (endpoints: Endpoint[] = [createMonitoredEndpoint()]) =>
+  ({ driver }: SetupFactoryOptions) => {
+    const monitoringInstanceUrl = window.defaultConfig.monitoring_urls[0];
+    driver.mockEndpoint(`${monitoringInstanceUrl}monitored-endpoints`, {
+      body: endpoints,
+    });
+  };
+
+/**
+ * Precondition: Monitoring instance is available but no endpoints are sending data
+ */
+export const hasMonitoringWithNoEndpoints = ({ driver }: SetupFactoryOptions) => {
+  const monitoringInstanceUrl = window.defaultConfig.monitoring_urls[0];
+  driver.mockEndpoint(`${monitoringInstanceUrl}monitored-endpoints`, {
+    body: [],
+  });
+};
+
+/**
+ * Precondition: Monitoring instance is unavailable (returns error)
+ * Note: This simulates an unavailable monitoring instance by not mocking the endpoint,
+ * which will cause the connection to fail
+ */
+export const hasMonitoringUnavailable = ({ driver }: SetupFactoryOptions) => {
+  const monitoringInstanceUrl = window.defaultConfig.monitoring_urls[0];
+  // Return a 500 error to simulate unavailable monitoring
+  driver.mockEndpoint(monitoringInstanceUrl, {
+    body: { error: "Service unavailable" },
+    status: 500,
+  });
+  driver.mockEndpoint(`${monitoringInstanceUrl}monitored-endpoints`, {
+    body: { error: "Service unavailable" },
+    status: 500,
+  });
+};
+
+/**
+ * Precondition: Multiple monitored endpoints
+ */
+export const hasMultipleMonitoredEndpoints =
+  (count: number = 3) =>
+  ({ driver }: SetupFactoryOptions) => {
+    const endpoints: Endpoint[] = [];
+    for (let i = 0; i < count; i++) {
+      endpoints.push(createMonitoredEndpoint(`Endpoint${i + 1}`));
+    }
+    const monitoringInstanceUrl = window.defaultConfig.monitoring_urls[0];
+    driver.mockEndpoint(`${monitoringInstanceUrl}monitored-endpoints`, {
+      body: endpoints,
+    });
+  };
diff --git a/src/Frontend/test/preconditions/recoverabilityCapability.ts b/src/Frontend/test/preconditions/recoverabilityCapability.ts
new file mode 100644
index 000000000..277bdffe5
--- /dev/null
+++ b/src/Frontend/test/preconditions/recoverabilityCapability.ts
@@ -0,0 +1,74 @@
+import { RemoteInstance, RemoteInstanceStatus, RemoteInstanceType } from "@/resources/RemoteInstance";
+import { SetupFactoryOptions } from "../driver";
+
+/**
+ * Creates a remote error/recoverability instance with the given configuration
+ */
+export function createRecoverabilityInstance(options: { apiUri?: string; version?: string; status?: RemoteInstanceStatus; retentionPeriod?: string } = {}): RemoteInstance {
+  const { apiUri = "http://localhost:33335/api/", version = "6.6.0", status = RemoteInstanceStatus.Online, retentionPeriod = "15.00:00:00" } = options;
+
+  return {
+    api_uri: apiUri,
+    version,
+    status,
+    configuration: {
+      data_retention: {
+        error_retention_period: retentionPeriod,
+      },
+    },
+    cachedInstanceType: RemoteInstanceType.Error,
+  };
+}
+
+/**
+ * Precondition: Primary ServiceControl instance is available (no secondary error instances)
+ * This is the default state set by serviceControlWithMonitoring
+ */
+export const hasPrimaryErrorInstanceOnly = ({ driver }: SetupFactoryOptions) => {
+  driver.mockEndpoint(`${window.defaultConfig.service_control_url}configuration/remotes`, {
+    body: [],
+  });
+};
+
+/**
+ * Precondition: Primary instance available with secondary error instance also available
+ */
+export const hasSecondaryErrorInstance =
+  (errorInstance: RemoteInstance = createRecoverabilityInstance()) =>
+  ({ driver }: SetupFactoryOptions) => {
+    driver.mockEndpoint(`${window.defaultConfig.service_control_url}configuration/remotes`, {
+      body: [errorInstance],
+    });
+  };
+
+/**
+ * Precondition: Primary instance available with secondary error instance unavailable
+ * This creates a "Degraded" state
+ */
+export const hasSecondaryErrorInstanceUnavailable = ({ driver }: SetupFactoryOptions) => {
+  const instance = createRecoverabilityInstance({ status: RemoteInstanceStatus.Unavailable });
+  driver.mockEndpoint(`${window.defaultConfig.service_control_url}configuration/remotes`, {
+    body: [instance],
+  });
+};
+
+/**
+ * Precondition: Multiple secondary error instances with mixed availability
+ */
+export const hasMultipleSecondaryErrorInstances =
+  (instances: RemoteInstance[] = [createRecoverabilityInstance({ apiUri: "http://localhost:33335/api/" }), createRecoverabilityInstance({ apiUri: "http://localhost:33336/api/" })]) =>
+  ({ driver }: SetupFactoryOptions) => {
+    driver.mockEndpoint(`${window.defaultConfig.service_control_url}configuration/remotes`, {
+      body: instances,
+    });
+  };
+
+/**
+ * Precondition: Multiple secondary error instances with one unavailable (degraded state)
+ */
+export const hasMultipleSecondaryErrorInstancesPartiallyUnavailable = ({ driver }: SetupFactoryOptions) => {
+  const instances = [createRecoverabilityInstance({ apiUri: "http://localhost:33335/api/", status: RemoteInstanceStatus.Online }), createRecoverabilityInstance({ apiUri: "http://localhost:33336/api/", status: RemoteInstanceStatus.Unavailable })];
+  driver.mockEndpoint(`${window.defaultConfig.service_control_url}configuration/remotes`, {
+    body: instances,
+  });
+};
diff --git a/src/Frontend/test/preconditions/serviceControlWithMonitoring.ts b/src/Frontend/test/preconditions/serviceControlWithMonitoring.ts
index dfae768ac..6312d0036 100644
--- a/src/Frontend/test/preconditions/serviceControlWithMonitoring.ts
+++ b/src/Frontend/test/preconditions/serviceControlWithMonitoring.ts
@@ -83,4 +83,10 @@ export const serviceControlWithMonitoring = async ({ driver }: SetupFactoryOptio
 
   //default handler for /api/queues/addresses
   await driver.setUp(precondition.knownQueuesDefaultHandler);
+
+  //default handler for /api/configuration/remotes
+  await driver.setUp(precondition.hasRemoteInstances());
+
+  //default handler for /api/messages2
+  await driver.setUp(precondition.hasMessages());
 };
diff --git a/src/Frontend/test/specs/platformcapabilities/audit-capability-card.spec.ts b/src/Frontend/test/specs/platformcapabilities/audit-capability-card.spec.ts
new file mode 100644
index 000000000..efaa37f24
--- /dev/null
+++ b/src/Frontend/test/specs/platformcapabilities/audit-capability-card.spec.ts
@@ -0,0 +1,263 @@
+import { test, describe } from "../../drivers/vitest/driver";
+import { expect } from "vitest";
+import * as precondition from "../../preconditions";
+import { waitFor } from "@testing-library/vue";
+import {
+  auditingCapabilityCard,
+  auditingStatusBadge,
+  auditingActionButton,
+  auditingStatusIndicators,
+  isAuditingCardAvailable,
+  isAuditingCardUnavailable,
+  isAuditingCardPartiallyUnavailable,
+  isAuditingCardNotConfigured,
+  auditingIndicatorByLabel,
+} from "./questions/auditCapabilityCard";
+
+describe("FEATURE: Audit capability card", () => {
+  describe("RULE: When no audit instance is configured, show 'Instance Not Configured' status", () => {
+    test("EXAMPLE: No remote audit instances configured shows 'Get Started' button", async ({ driver }) => {
+      // Arrange
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(precondition.hasNoAuditInstances);
+      await driver.setUp(precondition.hasNoSuccessfulMessages);
+
+      // Act
+      await driver.goTo("/");
+
+      // Assert
+      await waitFor(async () => {
+        const card = await auditingCapabilityCard();
+        expect(card).toBeInTheDocument();
+      });
+
+      await waitFor(async () => {
+        expect(await isAuditingCardNotConfigured()).toBe(true);
+      });
+
+      const actionButton = await auditingActionButton();
+      expect(actionButton).toBeInTheDocument();
+      expect(actionButton?.textContent).toMatch(/Get Started/i);
+    });
+  });
+
+  describe("RULE: When audit instance is configured but unavailable, show 'Unavailable' status", () => {
+    test("EXAMPLE: Single audit instance that is offline shows unavailable status", async ({ driver }) => {
+      // Arrange
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(precondition.hasUnavailableAuditInstance);
+      await driver.setUp(precondition.hasNoSuccessfulMessages);
+
+      // Act
+      await driver.goTo("/");
+
+      // Assert
+      await waitFor(async () => {
+        const card = await auditingCapabilityCard();
+        expect(card).toBeInTheDocument();
+      });
+
+      await waitFor(async () => {
+        expect(await isAuditingCardUnavailable()).toBe(true);
+      });
+
+      const statusBadge = await auditingStatusBadge();
+      expect(statusBadge).toBeInTheDocument();
+      expect(statusBadge?.textContent).toMatch(/Unavailable/i);
+
+      const actionButton = await auditingActionButton();
+      expect(actionButton).toBeInTheDocument();
+      expect(actionButton?.textContent).toMatch(/Learn More/i);
+    });
+  });
+
+  describe("RULE: When some audit instances are unavailable, show 'Degraded' status", () => {
+    test("EXAMPLE: Multiple audit instances with mixed availability shows degraded status", async ({ driver }) => {
+      // Arrange
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(precondition.hasPartiallyUnavailableAuditInstances);
+      await driver.setUp(precondition.hasSuccessfulMessages());
+
+      // Act
+      await driver.goTo("/");
+
+      // Assert
+      await waitFor(async () => {
+        const card = await auditingCapabilityCard();
+        expect(card).toBeInTheDocument();
+      });
+
+      await waitFor(async () => {
+        expect(await isAuditingCardPartiallyUnavailable()).toBe(true);
+      });
+
+      const statusBadge = await auditingStatusBadge();
+      expect(statusBadge).toBeInTheDocument();
+      expect(statusBadge?.textContent).toMatch(/Degraded/i);
+    });
+  });
+
+  describe("RULE: When audit instance is available but no messages exist, show 'Endpoints Not Configured' status", () => {
+    test("EXAMPLE: Audit instance available but no successful messages shows not configured status", async ({ driver }) => {
+      // Arrange
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(precondition.hasAvailableAuditInstance());
+      await driver.setUp(precondition.hasNoSuccessfulMessages);
+
+      // Act
+      await driver.goTo("/");
+
+      // Assert
+      await waitFor(async () => {
+        const card = await auditingCapabilityCard();
+        expect(card).toBeInTheDocument();
+      });
+
+      await waitFor(async () => {
+        expect(await isAuditingCardNotConfigured()).toBe(true);
+      });
+
+      const actionButton = await auditingActionButton();
+      expect(actionButton).toBeInTheDocument();
+      expect(actionButton?.textContent).toMatch(/Learn More/i);
+    });
+  });
+
+  describe("RULE: When audit instance is available and messages exist, show 'Available' status", () => {
+    test("EXAMPLE: Audit instance available with successful messages shows available status", async ({ driver }) => {
+      // Arrange
+      // Need to set up ServiceControl with version >= 6.6.0 for "All Messages" feature support
+      await driver.setUp(precondition.hasActiveLicense);
+      await driver.setUp(precondition.hasLicensingSettingTest());
+      await driver.setUp(precondition.hasServiceControlMainInstance(precondition.serviceControlVersionSupportingAllMessages));
+      await driver.setUp(precondition.hasServiceControlMonitoringInstance);
+      await driver.setUp(precondition.hasUpToDateServiceControl);
+      await driver.setUp(precondition.hasUpToDateServicePulse);
+      await driver.setUp(precondition.errorsDefaultHandler);
+      await driver.setUp(precondition.hasCustomChecksEmpty);
+      await driver.setUp(precondition.hasNoDisconnectedEndpoints);
+      await driver.setUp(precondition.hasEventLogItems);
+      await driver.setUp(precondition.hasRecoverabilityGroups);
+      await driver.setUp(precondition.hasNoHeartbeatsEndpoints);
+      await driver.setUp(precondition.hasNoMonitoredEndpoints);
+      await driver.setUp(precondition.endpointRecoverabilityByInstanceDefaultHandler);
+      await driver.setUp(precondition.endpointRecoverabilityByNameDefaultHandler);
+      await driver.setUp(precondition.serviceControlMonitoringOptions);
+      await driver.setUp(precondition.serviceControlConfigurationDefaultHandler);
+      await driver.setUp(precondition.recoverabilityClassifiers);
+      await driver.setUp(precondition.recoverabilityHistoryDefaultHandler);
+      await driver.setUp(precondition.recoverabilityEditConfigDefaultHandler);
+      await driver.setUp(precondition.archivedGroupsWithClassifierDefaulthandler);
+      await driver.setUp(precondition.recoverabilityGroupsWithClassifierDefaulthandler);
+      await driver.setUp(precondition.hasLicensingReportAvailable());
+      await driver.setUp(precondition.hasLicensingEndpoints());
+      await driver.setUp(precondition.hasEndpointSettings([]));
+      await driver.setUp(precondition.redirectsDefaultHandler);
+      await driver.setUp(precondition.knownQueuesDefaultHandler);
+      await driver.setUp(precondition.hasAvailableAuditInstance());
+      await driver.setUp(precondition.hasSuccessfulMessages());
+
+      // Act
+      await driver.goTo("/");
+
+      // Assert
+      await waitFor(async () => {
+        const card = await auditingCapabilityCard();
+        expect(card).toBeInTheDocument();
+      });
+
+      await waitFor(async () => {
+        expect(await isAuditingCardAvailable()).toBe(true);
+      });
+
+      const statusBadge = await auditingStatusBadge();
+      expect(statusBadge).toBeInTheDocument();
+      expect(statusBadge?.textContent).toMatch(/Available/i);
+
+      const actionButton = await auditingActionButton();
+      expect(actionButton).toBeInTheDocument();
+      expect(actionButton?.textContent).toMatch(/View Messages/i);
+    });
+  });
+
+  describe("RULE: Status indicators should show instance and message status", () => {
+    test("EXAMPLE: Available audit instance shows instance indicator as green", async ({ driver }) => {
+      // Arrange
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(precondition.hasAvailableAuditInstance());
+      await driver.setUp(precondition.hasSuccessfulMessages());
+
+      // Act
+      await driver.goTo("/");
+
+      // Assert
+      await waitFor(async () => {
+        const card = await auditingCapabilityCard();
+        expect(card).toBeInTheDocument();
+      });
+
+      await waitFor(async () => {
+        const indicators = await auditingStatusIndicators();
+        expect(indicators).not.toBeNull();
+        expect(indicators!.length).toBeGreaterThanOrEqual(1);
+      });
+
+      const instanceIndicator = await auditingIndicatorByLabel("Instance");
+      expect(instanceIndicator).toBeInTheDocument();
+    });
+
+    test("EXAMPLE: Available audit instance with successful messages shows messages indicator", async ({ driver }) => {
+      // Arrange
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(precondition.hasAvailableAuditInstance());
+      await driver.setUp(precondition.hasSuccessfulMessages());
+
+      // Act
+      await driver.goTo("/");
+
+      // Assert
+      await waitFor(async () => {
+        const card = await auditingCapabilityCard();
+        expect(card).toBeInTheDocument();
+      });
+
+      await waitFor(async () => {
+        const messagesIndicator = await auditingIndicatorByLabel("Messages");
+        expect(messagesIndicator).toBeInTheDocument();
+      });
+    });
+
+    test("EXAMPLE: Multiple audit instances show numbered instance indicators", async ({ driver }) => {
+      // Arrange
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(precondition.hasMultipleAvailableAuditInstances);
+      await driver.setUp(precondition.hasSuccessfulMessages());
+
+      // Act
+      await driver.goTo("/");
+
+      // Assert
+      await waitFor(async () => {
+        const card = await auditingCapabilityCard();
+        expect(card).toBeInTheDocument();
+      });
+
+      await waitFor(async () => {
+        const indicators = await auditingStatusIndicators();
+        expect(indicators).not.toBeNull();
+        // Should have Instance 1, Instance 2, and Messages indicators
+        expect(indicators!.length).toBeGreaterThanOrEqual(3);
+      });
+
+      const instance1Indicator = await auditingIndicatorByLabel("Instance 1");
+      expect(instance1Indicator).toBeInTheDocument();
+
+      const instance2Indicator = await auditingIndicatorByLabel("Instance 2");
+      expect(instance2Indicator).toBeInTheDocument();
+    });
+  });
+
+  // Note: Testing ServiceControl version < 6.6.0 requires more complex setup with environment store reset
+  // The version check happens at app initialization, so changing it mid-test doesn't work without
+  // resetting the pinia stores. This would be better tested as a component unit test.
+});
diff --git a/src/Frontend/test/specs/platformcapabilities/monitoring-capability-card.spec.ts b/src/Frontend/test/specs/platformcapabilities/monitoring-capability-card.spec.ts
new file mode 100644
index 000000000..97fb9aab9
--- /dev/null
+++ b/src/Frontend/test/specs/platformcapabilities/monitoring-capability-card.spec.ts
@@ -0,0 +1,107 @@
+import { test, describe } from "../../drivers/vitest/driver";
+import { expect } from "vitest";
+import * as precondition from "../../preconditions";
+import { waitFor } from "@testing-library/vue";
+import { monitoringCapabilityCard, monitoringStatusBadge, monitoringActionButton, monitoringStatusIndicators, isMonitoringCardAvailable, isMonitoringCardNotConfigured, monitoringIndicatorByLabel } from "./questions/monitoringCapabilityCard";
+
+describe("FEATURE: Monitoring capability card", () => {
+  describe("RULE: When monitoring instance is available with endpoints sending data, show 'Available' status", () => {
+    test("EXAMPLE: Monitoring instance available with monitored endpoints shows available status", async ({ driver }) => {
+      // Arrange
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(precondition.hasMonitoringWithEndpoints());
+
+      // Act
+      await driver.goTo("/");
+
+      // Assert
+      await waitFor(async () => {
+        const card = await monitoringCapabilityCard();
+        expect(card).toBeInTheDocument();
+      });
+
+      await waitFor(async () => {
+        expect(await isMonitoringCardAvailable()).toBe(true);
+      });
+
+      const statusBadge = await monitoringStatusBadge();
+      expect(statusBadge).toBeInTheDocument();
+      expect(statusBadge?.textContent).toMatch(/Available/i);
+
+      const actionButton = await monitoringActionButton();
+      expect(actionButton).toBeInTheDocument();
+      expect(actionButton?.textContent).toMatch(/View Metrics/i);
+    });
+  });
+
+  describe("RULE: When monitoring instance is available but no endpoints are sending data, show 'Endpoints Not Configured' status", () => {
+    test("EXAMPLE: Monitoring instance available but no monitored endpoints shows not configured status", async ({ driver }) => {
+      // Arrange
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(precondition.hasMonitoringWithNoEndpoints);
+
+      // Act
+      await driver.goTo("/");
+
+      // Assert
+      await waitFor(async () => {
+        const card = await monitoringCapabilityCard();
+        expect(card).toBeInTheDocument();
+      });
+
+      await waitFor(async () => {
+        expect(await isMonitoringCardNotConfigured()).toBe(true);
+      });
+
+      const actionButton = await monitoringActionButton();
+      expect(actionButton).toBeInTheDocument();
+      expect(actionButton?.textContent).toMatch(/Learn More/i);
+    });
+  });
+
+  describe("RULE: Status indicators should show instance and metrics status", () => {
+    test("EXAMPLE: Available monitoring instance shows instance indicator", async ({ driver }) => {
+      // Arrange
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(precondition.hasMonitoringWithEndpoints());
+
+      // Act
+      await driver.goTo("/");
+
+      // Assert
+      await waitFor(async () => {
+        const card = await monitoringCapabilityCard();
+        expect(card).toBeInTheDocument();
+      });
+
+      await waitFor(async () => {
+        const indicators = await monitoringStatusIndicators();
+        expect(indicators).not.toBeNull();
+        expect(indicators!.length).toBeGreaterThanOrEqual(1);
+      });
+
+      const instanceIndicator = await monitoringIndicatorByLabel("Instance");
+      expect(instanceIndicator).toBeInTheDocument();
+    });
+
+    test("EXAMPLE: Available monitoring instance with endpoints shows metrics indicator", async ({ driver }) => {
+      // Arrange
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(precondition.hasMonitoringWithEndpoints());
+
+      // Act
+      await driver.goTo("/");
+
+      // Assert
+      await waitFor(async () => {
+        const card = await monitoringCapabilityCard();
+        expect(card).toBeInTheDocument();
+      });
+
+      await waitFor(async () => {
+        const metricsIndicator = await monitoringIndicatorByLabel("Metrics");
+        expect(metricsIndicator).toBeInTheDocument();
+      });
+    });
+  });
+});
diff --git a/src/Frontend/test/specs/platformcapabilities/questions/auditCapabilityCard.ts b/src/Frontend/test/specs/platformcapabilities/questions/auditCapabilityCard.ts
new file mode 100644
index 000000000..3d7bc8bff
--- /dev/null
+++ b/src/Frontend/test/specs/platformcapabilities/questions/auditCapabilityCard.ts
@@ -0,0 +1,164 @@
+import { screen, within } from "@testing-library/vue";
+
+/**
+ * Gets the platform capabilities section element
+ */
+export function platformCapabilitiesSection() {
+  return screen.queryByText("Platform Capabilities")?.closest(".platform-capabilities");
+}
+
+/**
+ * Gets the collapsed platform capabilities button
+ */
+export function platformCapabilitiesCollapsedButton() {
+  return screen.queryByRole("button", { name: /show platform capabilities/i });
+}
+
+/**
+ * Gets all capability cards on the page
+ */
+export function allCapabilityCards() {
+  return screen.queryAllByTestId("capability-card");
+}
+
+/**
+ * Gets the Auditing capability card by looking for the title
+ */
+export async function auditingCapabilityCard() {
+  const cards = await screen.findAllByTestId("capability-card");
+  for (const card of cards) {
+    const title = within(card).queryByText("Auditing");
+    if (title) {
+      return card;
+    }
+  }
+  return null;
+}
+
+/**
+ * Gets the Auditing capability card synchronously (returns null if not found)
+ */
+export function auditingCapabilityCardSync() {
+  const cards = screen.queryAllByTestId("capability-card");
+  for (const card of cards) {
+    const title = within(card).queryByText("Auditing");
+    if (title) {
+      return card;
+    }
+  }
+  return null;
+}
+
+/**
+ * Gets the status badge from the Auditing capability card
+ */
+export async function auditingStatusBadge() {
+  const card = await auditingCapabilityCard();
+  if (!card) return null;
+  return within(card).queryByText(/Available|Unavailable|Degraded/);
+}
+
+/**
+ * Gets the description text from the Auditing capability card
+ */
+export async function auditingDescription() {
+  const card = await auditingCapabilityCard();
+  if (!card) return null;
+  const footer = card.querySelector(".capability-footer");
+  if (!footer) return null;
+  const description = within(footer as HTMLElement).queryByText(/.+/);
+  return description?.textContent;
+}
+
+/**
+ * Gets the help/action button from the Auditing capability card
+ */
+export async function auditingActionButton() {
+  const card = await auditingCapabilityCard();
+  if (!card) return null;
+  return within(card).queryByRole("button", { name: /Learn More|Get Started|View Messages/i });
+}
+
+/**
+ * Gets the status indicators from the Auditing capability card
+ */
+export async function auditingStatusIndicators() {
+  const card = await auditingCapabilityCard();
+  if (!card) return null;
+  return within(card).queryAllByTestId("status-indicator");
+}
+
+/**
+ * Checks if the Auditing card is in loading state
+ */
+export async function isAuditingCardLoading() {
+  const card = await auditingCapabilityCard();
+  if (!card) return false;
+  return card.classList.contains("capability-loading");
+}
+
+/**
+ * Gets the loading text from the Auditing capability card
+ */
+export function auditingLoadingText() {
+  return screen.queryByText(/Loading Auditing capability status/i);
+}
+
+/**
+ * Checks if the Auditing card has the "available" styling (green border)
+ */
+export async function isAuditingCardAvailable() {
+  const card = await auditingCapabilityCard();
+  if (!card) return false;
+  return card.classList.contains("capability-available");
+}
+
+/**
+ * Checks if the Auditing card has the "unavailable" styling (red border)
+ */
+export async function isAuditingCardUnavailable() {
+  const card = await auditingCapabilityCard();
+  if (!card) return false;
+  return card.classList.contains("capability-unavailable");
+}
+
+/**
+ * Checks if the Auditing card has the "partially unavailable" / degraded styling (yellow border)
+ */
+export async function isAuditingCardPartiallyUnavailable() {
+  const card = await auditingCapabilityCard();
+  if (!card) return false;
+  return card.classList.contains("capability-partially-unavailable");
+}
+
+/**
+ * Checks if the Auditing card has the "not configured" styling (blue gradient)
+ */
+export async function isAuditingCardNotConfigured() {
+  const card = await auditingCapabilityCard();
+  if (!card) return false;
+  return card.classList.contains("capability-notconfigured");
+}
+
+/**
+ * Gets the hide card button from the Auditing capability card
+ */
+export async function auditingHideButton() {
+  const card = await auditingCapabilityCard();
+  if (!card) return null;
+  return within(card).queryByRole("button", { name: /hide this card/i }) || card.querySelector(".hide-card-btn");
+}
+
+/**
+ * Gets the indicator for a specific label (e.g., "Instance", "Messages")
+ */
+export async function auditingIndicatorByLabel(label: string) {
+  const indicators = await auditingStatusIndicators();
+  if (!indicators) return null;
+  for (const indicator of indicators) {
+    if (indicator.textContent?.includes(label)) {
+      return indicator;
+    }
+  }
+  return null;
+}
diff --git a/src/Frontend/test/specs/platformcapabilities/questions/monitoringCapabilityCard.ts b/src/Frontend/test/specs/platformcapabilities/questions/monitoringCapabilityCard.ts
new file mode 100644
index 000000000..0af7fd8da
--- /dev/null
+++ b/src/Frontend/test/specs/platformcapabilities/questions/monitoringCapabilityCard.ts
@@ -0,0 +1,97 @@
+import { screen, within } from "@testing-library/vue";
+
+/**
+ * Gets the Monitoring capability card by looking for the title
+ */
+export async function monitoringCapabilityCard() {
+  const cards = await screen.findAllByTestId("capability-card");
+  for (const card of cards) {
+    const title = within(card).queryByText("Monitoring");
+    if (title) {
+      return card;
+    }
+  }
+  return null;
+}
+
+/**
+ * Gets the Monitoring capability card synchronously (returns null if not found)
+ */
+export function monitoringCapabilityCardSync() {
+  const cards = screen.queryAllByTestId("capability-card");
+  for (const card of cards) {
+    const title = within(card).queryByText("Monitoring");
+    if (title) {
+      return card;
+    }
+  }
+  return null;
+}
+
+/**
+ * Gets the status badge from the Monitoring capability card
+ */
+export async function monitoringStatusBadge() {
+  const card = await monitoringCapabilityCard();
+  if (!card) return null;
+  return within(card).queryByText(/Available|Unavailable|Degraded/);
+}
+
+/**
+ * Gets the help/action button from the Monitoring capability card
+ */
+export async function monitoringActionButton() {
+  const card = await monitoringCapabilityCard();
+  if (!card) return null;
+  return within(card).queryByRole("button", { name: /Learn More|Get Started|View Metrics/i });
+}
+
+/**
+ * Gets the status indicators from the Monitoring capability card
+ */
+export async function monitoringStatusIndicators() {
+  const card = await monitoringCapabilityCard();
+  if (!card) return null;
+  return within(card).queryAllByTestId("status-indicator");
+}
+
+/**
+ * Checks if the Monitoring card has the "available" styling (green border)
+ */
+export async function isMonitoringCardAvailable() {
+  const card = await monitoringCapabilityCard();
+  if (!card) return false;
+  return card.classList.contains("capability-available");
+}
+
+/**
+ * Checks if the Monitoring card has the "unavailable" styling (red border)
+ */
+export async function isMonitoringCardUnavailable() {
+  const card = await monitoringCapabilityCard();
+  if (!card) return false;
+  return card.classList.contains("capability-unavailable");
+}
+
+/**
+ * Checks if the Monitoring card has the "not configured" styling (blue gradient)
+ */
+export async function isMonitoringCardNotConfigured() {
+  const card = await monitoringCapabilityCard();
+  if (!card) return false;
+  return card.classList.contains("capability-notconfigured");
+}
+
+/**
+ * Gets the indicator for a specific label (e.g., "Instance", "Metrics")
+ */
+export async function monitoringIndicatorByLabel(label: string) {
+  const indicators = await monitoringStatusIndicators();
+  if (!indicators) return null;
+  for (const indicator of indicators) {
+    if (indicator.textContent?.includes(label)) {
+      return indicator;
+    }
+  }
+  return null;
+}
diff --git a/src/Frontend/test/specs/platformcapabilities/questions/recoverabilityCapabilityCard.ts b/src/Frontend/test/specs/platformcapabilities/questions/recoverabilityCapabilityCard.ts
new file mode 100644
index 000000000..78606a06e
--- /dev/null
+++ b/src/Frontend/test/specs/platformcapabilities/questions/recoverabilityCapabilityCard.ts
@@ -0,0 +1,97 @@
+import { screen, within } from "@testing-library/vue";
+
+/**
+ * Gets the Recoverability capability card by looking for the title
+ */
+export async function recoverabilityCapabilityCard() {
+  const cards = await screen.findAllByTestId("capability-card");
+  for (const card of cards) {
+    const title = within(card).queryByText("Recoverability");
+    if (title) {
+      return card;
+    }
+  }
+  return null;
+}
+
+/**
+ * Gets the Recoverability capability card synchronously (returns null if not found)
+ */
+export function recoverabilityCapabilityCardSync() {
+  const cards = screen.queryAllByTestId("capability-card");
+  for (const card of cards) {
+    const title = within(card).queryByText("Recoverability");
+    if (title) {
+      return card;
+    }
+  }
+  return null;
+}
+
+/**
+ * Gets the status badge from the Recoverability capability card
+ */
+export async function recoverabilityStatusBadge() {
+  const card = await recoverabilityCapabilityCard();
+  if (!card) return null;
+  return within(card).queryByText(/Available|Unavailable|Degraded/);
+}
+
+/**
+ * Gets the help/action button from the Recoverability capability card
+ */
+export async function recoverabilityActionButton() {
+  const card = await recoverabilityCapabilityCard();
+  if (!card) return null;
+  return within(card).queryByRole("button", { name: /Learn More|View Failed Messages/i });
+}
+
+/**
+ * Gets the status indicators from the Recoverability capability card
+ */
+export async function recoverabilityStatusIndicators() {
+  const card = await recoverabilityCapabilityCard();
+  if (!card) return null;
+  return within(card).queryAllByTestId("status-indicator");
+}
+
+/**
+ * Checks if the Recoverability card has the "available" styling (green border)
+ */
+export async function isRecoverabilityCardAvailable() {
+  const card = await recoverabilityCapabilityCard();
+  if (!card) return false;
+  return card.classList.contains("capability-available");
+}
+
+/**
+ * Checks if the Recoverability card has the "unavailable" styling (red border)
+ */
+export async function isRecoverabilityCardUnavailable() {
+  const card = await recoverabilityCapabilityCard();
+  if (!card) return false;
+  return card.classList.contains("capability-unavailable");
+}
+
+/**
+ * Checks if the Recoverability card has the "partially unavailable" / degraded styling (yellow border)
+ */
+export async function isRecoverabilityCardPartiallyUnavailable() {
+  const card = await recoverabilityCapabilityCard();
+  if (!card) return false;
+  return card.classList.contains("capability-partially-unavailable");
+}
+
+/**
+ * Gets the indicator for a specific label (e.g., "Instance", "Primary")
+ */
+export async function recoverabilityIndicatorByLabel(label: string) {
+  const indicators = await recoverabilityStatusIndicators();
+  if (!indicators) return null;
+  for (const indicator of indicators) {
+    if (indicator.textContent?.includes(label)) {
+      return indicator;
+    }
+  }
+  return null;
+}
diff --git a/src/Frontend/test/specs/platformcapabilities/recoverability-capability-card.spec.ts b/src/Frontend/test/specs/platformcapabilities/recoverability-capability-card.spec.ts
new file mode 100644
index 000000000..fb4faae65
--- /dev/null
+++ b/src/Frontend/test/specs/platformcapabilities/recoverability-capability-card.spec.ts
@@ -0,0 +1,191 @@
+import { test, describe } from "../../drivers/vitest/driver";
+import { expect } from "vitest";
+import * as precondition from "../../preconditions";
+import { waitFor } from "@testing-library/vue";
+import {
+  recoverabilityCapabilityCard,
+  recoverabilityStatusBadge,
+  recoverabilityActionButton,
+  recoverabilityStatusIndicators,
+  isRecoverabilityCardAvailable,
+  isRecoverabilityCardPartiallyUnavailable,
+  recoverabilityIndicatorByLabel,
+} from "./questions/recoverabilityCapabilityCard";
+
+describe("FEATURE: Recoverability capability card", () => {
+  describe("RULE: When primary ServiceControl instance is available, show 'Available' status", () => {
+    test("EXAMPLE: Primary instance available shows available status", async ({ driver }) => {
+      // Arrange
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(precondition.hasPrimaryErrorInstanceOnly);
+
+      // Act
+      await driver.goTo("/");
+
+      // Assert
+      await waitFor(async () => {
+        const card = await recoverabilityCapabilityCard();
+        expect(card).toBeInTheDocument();
+      });
+
+      await waitFor(async () => {
+        expect(await isRecoverabilityCardAvailable()).toBe(true);
+      });
+
+      const statusBadge = await recoverabilityStatusBadge();
+      expect(statusBadge).toBeInTheDocument();
+      expect(statusBadge?.textContent).toMatch(/Available/i);
+
+      const actionButton = await recoverabilityActionButton();
+      expect(actionButton).toBeInTheDocument();
+      expect(actionButton?.textContent).toMatch(/View Failed Messages/i);
+    });
+  });
+
+  describe("RULE: When primary and secondary instances are available, show 'Available' status", () => {
+    test("EXAMPLE: Primary and secondary error instances available shows available status", async ({ driver }) => {
+      // Arrange
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(precondition.hasSecondaryErrorInstance());
+
+      // Act
+      await driver.goTo("/");
+
+      // Assert
+      await waitFor(async () => {
+        const card = await recoverabilityCapabilityCard();
+        expect(card).toBeInTheDocument();
+      });
+
+      await waitFor(async () => {
+        expect(await isRecoverabilityCardAvailable()).toBe(true);
+      });
+
+      const statusBadge = await recoverabilityStatusBadge();
+      expect(statusBadge).toBeInTheDocument();
+      expect(statusBadge?.textContent).toMatch(/Available/i);
+    });
+  });
+
+  describe("RULE: When some instances are unavailable, show 'Degraded' status", () => {
+    test("EXAMPLE: Primary available but secondary unavailable shows degraded status", async ({ driver }) => {
+      // Arrange
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(precondition.hasSecondaryErrorInstanceUnavailable);
+
+      // Act
+      await driver.goTo("/");
+
+      // Assert
+      await waitFor(async () => {
+        const card = await recoverabilityCapabilityCard();
+        expect(card).toBeInTheDocument();
+      });
+
+      await waitFor(async () => {
+        expect(await isRecoverabilityCardPartiallyUnavailable()).toBe(true);
+      });
+
+      const statusBadge = await recoverabilityStatusBadge();
+      expect(statusBadge).toBeInTheDocument();
+      expect(statusBadge?.textContent).toMatch(/Degraded/i);
+    });
+
+    test("EXAMPLE: Multiple secondary instances with mixed availability shows degraded status", async ({ driver }) => {
+      // Arrange
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(precondition.hasMultipleSecondaryErrorInstancesPartiallyUnavailable);
+
+      // Act
+      await driver.goTo("/");
+
+      // Assert
+      await waitFor(async () => {
+        const card = await recoverabilityCapabilityCard();
+        expect(card).toBeInTheDocument();
+      });
+
+      await waitFor(async () => {
+        expect(await isRecoverabilityCardPartiallyUnavailable()).toBe(true);
+      });
+
+      const statusBadge = await recoverabilityStatusBadge();
+      expect(statusBadge).toBeInTheDocument();
+      expect(statusBadge?.textContent).toMatch(/Degraded/i);
+    });
+  });
+
+  describe("RULE: Status indicators should show instance status", () => {
+    test("EXAMPLE: Single primary instance shows 'Instance' indicator", async ({ driver }) => {
+      // Arrange
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(precondition.hasPrimaryErrorInstanceOnly);
+
+      // Act
+      await driver.goTo("/");
+
+      // Assert
+      await waitFor(async () => {
+        const card = await recoverabilityCapabilityCard();
+        expect(card).toBeInTheDocument();
+      });
+
+      await waitFor(async () => {
+        const indicators = await recoverabilityStatusIndicators();
+        expect(indicators).not.toBeNull();
+        expect(indicators!.length).toBeGreaterThanOrEqual(1);
+      });
+
+      const instanceIndicator = await recoverabilityIndicatorByLabel("Instance");
+      expect(instanceIndicator).toBeInTheDocument();
+    });
+
+    test("EXAMPLE: Primary with secondary instances shows 'Primary' indicator", async ({ driver }) => {
+      // Arrange
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(precondition.hasSecondaryErrorInstance());
+
+      // Act
+      await driver.goTo("/");
+
+      // Assert
+      await waitFor(async () => {
+        const card = await recoverabilityCapabilityCard();
+        expect(card).toBeInTheDocument();
+      });
+
+      await waitFor(async () => {
+        const primaryIndicator = await recoverabilityIndicatorByLabel("Primary");
+        expect(primaryIndicator).toBeInTheDocument();
+      });
+    });
+
+    test("EXAMPLE: Multiple instances show numbered indicators", async ({ driver }) => {
+      // Arrange
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(precondition.hasMultipleSecondaryErrorInstances());
+
+      // Act
+      await driver.goTo("/");
+
+      // Assert
+      await waitFor(async () => {
+        const card = await recoverabilityCapabilityCard();
+        expect(card).toBeInTheDocument();
+      });
+
+      await waitFor(async () => {
+        const indicators = await recoverabilityStatusIndicators();
+        expect(indicators).not.toBeNull();
+        // Should have Primary, Instance 2, Instance 3 indicators
+        expect(indicators!.length).toBeGreaterThanOrEqual(3);
+      });
+
+      const primaryIndicator = await recoverabilityIndicatorByLabel("Primary");
+      expect(primaryIndicator).toBeInTheDocument();
+
+      const instance2Indicator = await recoverabilityIndicatorByLabel("Instance 2");
+      expect(instance2Indicator).toBeInTheDocument();
+    });
+  });
+});