diff --git a/src/Frontend/src/assets/pagination.css b/src/Frontend/src/assets/pagination.css
index 9c289e5892..39b3d67c78 100644
--- a/src/Frontend/src/assets/pagination.css
+++ b/src/Frontend/src/assets/pagination.css
@@ -17,7 +17,7 @@
 }
 
 .pagination {
-  margin: 1.5em;
+  margin: 1.5rem;
 }
 
 .pagination > li > button:hover,
diff --git a/src/Frontend/src/components/DataView.vue b/src/Frontend/src/components/DataView.vue
index 6bc625c5d5..7b6fb9e58c 100644
--- a/src/Frontend/src/components/DataView.vue
+++ b/src/Frontend/src/components/DataView.vue
@@ -9,6 +9,7 @@ const props = withDefaults(
     itemsPerPageOptions?: number[];
     itemsPerPage?: number;
     showPagination?: boolean;
+    stickyPagination?: boolean;
     showItemsPerPage?: boolean;
   }>(),
   { itemsPerPageOptions: () => [20, 35, 50, 75], itemsPerPage: 50, showPagination: true, showItemsPerPage: false }
@@ -18,15 +19,37 @@ const pageNumber = ref(1);
 const itemsPerPage = ref(props.itemsPerPage);
 const pageData = computed(() => props.data.slice((pageNumber.value - 1) * itemsPerPage.value, Math.min(pageNumber.value * itemsPerPage.value, props.data.length)));
 
-const emit = defineEmits<{ itemsPerPageChanged: [value: number] }>();
+const emit = defineEmits<{ itemsPerPageChanged: [value: number]; pageChanged: [] }>();
 
 watch(itemsPerPage, () => emit("itemsPerPageChanged", itemsPerPage.value));
+watch(pageNumber, () => emit("pageChanged"));
 </script>
 
 <template>
-  <slot name="data" :pageData="pageData" />
-  <div class="row">
+  <slot name="data" :pageData="pageData" :pageNumber="pageNumber" />
+  <div class="row" :class="{ 'sticky-pagination': stickyPagination }">
     <ItemsPerPage v-if="showItemsPerPage" v-model="itemsPerPage" :options="itemsPerPageOptions" />
     <PaginationStrip v-if="showPagination" v-model="pageNumber" :totalCount="data.length" :itemsPerPage="itemsPerPage" />
   </div>
 </template>
+
+<style scoped>
+.sticky-pagination {
+  position: sticky;
+  bottom: 0;
+  margin-bottom: 0;
+  margin-top: 3em;
+}
+
+.sticky-pagination {
+  --shadow-color: hsl(215deg 50% 30%);
+  filter: drop-shadow(2px 4px 8px hsl(from var(--shadow-color) h s l / 0.4));
+}
+</style>
+
+<style>
+/* use smaller margins for sticky version, since we want it close to the bottom of the screen when scrolling */
+.sticky-pagination .pagination {
+  margin: 0 1.5rem;
+}
+</style>
diff --git a/src/Frontend/src/components/DetailsItem.vue b/src/Frontend/src/components/DetailsItem.vue
new file mode 100644
index 0000000000..ab6b6f3742
--- /dev/null
+++ b/src/Frontend/src/components/DetailsItem.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+defineProps<{ label: string; tooltip?: string; ariaLabel?: string }>();
+</script>
+
+<template>
+  <div class="details-item">
+    <label>{{ label }}</label>
+    <!-- role and aria-label are used for tests -->
+    <span role="note" :title="tooltip" :aria-label="ariaLabel"><slot></slot></span>
+  </div>
+</template>
+
+<style scoped>
+.details-item {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: 1fr 1fr;
+  align-items: center;
+}
+
+.details-item label {
+  font-weight: bold;
+  margin: 0;
+}
+
+.details-item label::after {
+  content: ":";
+}
+
+.details-item span {
+  padding: 0.375rem 0;
+}
+</style>
diff --git a/src/Frontend/src/components/ExclamationMark.vue b/src/Frontend/src/components/ExclamationMark.vue
index 504e51b314..397cf31cfb 100644
--- a/src/Frontend/src/components/ExclamationMark.vue
+++ b/src/Frontend/src/components/ExclamationMark.vue
@@ -24,11 +24,12 @@ const props = withDefaults(
 }
 
 .danger {
-  color: #ce4844 !important;
+  /* NOTE: this is currently being overwritten from main.css. https://github.com/Particular/ServicePulse/issues/3072 should address this */
+  color: #ce4844;
   background: linear-gradient(white, white) center/20% 72% no-repeat;
 }
 
 .warning {
-  color: var(--reduced-emphasis);
+  color: var(--bs-warning);
 }
 </style>
diff --git a/src/Frontend/src/components/PaginationStrip.vue b/src/Frontend/src/components/PaginationStrip.vue
index 3f11a59f0f..90d750cf54 100644
--- a/src/Frontend/src/components/PaginationStrip.vue
+++ b/src/Frontend/src/components/PaginationStrip.vue
@@ -118,7 +118,7 @@ const pages = computed(() => {
 </script>
 
 <template>
-  <div v-if="showPagination" class="col align-self-center">
+  <div v-if="showPagination" class="pagination-controls col align-self-center">
     <ul aria-label="pagination" class="pagination justify-content-center">
       <li v-for="page of pages" class="page-item" :key="page.key">
         <button :aria-pressed="page.class?.active" :disabled="page.class?.disabled" :aria-label="page.key" class="page-link" @click="pageNumber = page.page" :class="page.class">{{ page.label }}</button>
@@ -136,4 +136,13 @@ const pages = computed(() => {
   cursor: not-allowed;
   pointer-events: all !important;
 }
+
+.pagination-controls {
+  display: flex;
+  justify-content: center;
+}
+
+.pagination-controls .page-link.active {
+  z-index: 0; /* pagination.scss has this set higher, for no obvious reason, which messes up with sticky-pagination over the top of other pagination */
+}
 </style>
diff --git a/src/Frontend/src/components/configuration/PlatformLicense.vue b/src/Frontend/src/components/configuration/PlatformLicense.vue
index 6ff30fb838..e45ba21f93 100644
--- a/src/Frontend/src/components/configuration/PlatformLicense.vue
+++ b/src/Frontend/src/components/configuration/PlatformLicense.vue
@@ -11,6 +11,7 @@ import { useLicenseStore } from "@/stores/LicenseStore";
 import LoadingSpinner from "../LoadingSpinner.vue";
 import ColumnHeader from "../ColumnHeader.vue";
 import DataView from "../DataView.vue";
+import DetailsItem from "../DetailsItem.vue";
 
 const configurationStore = useConfigurationStore();
 const { configuration } = storeToRefs(configurationStore);
@@ -29,13 +30,9 @@ const { licenseStatus, license } = licenseStore;
           <div class="box">
             <div class="row">
               <div class="license-info">
-                <div>
-                  <b>Platform license type:</b> <span role="note" aria-label="license-type">{{ typeText(license, configuration) }}{{ licenseEdition }}</span>
-                </div>
-
+                <DetailsItem label="Platform License Type" aria-label="license-type"> {{ typeText(license, configuration) }}{{ licenseEdition }} </DetailsItem>
                 <template v-if="licenseStatus.isSubscriptionLicense">
-                  <div>
-                    <b>License expiry date: </b>
+                  <DetailsItem label="License Expiry Date">
                     <span
                       role="note"
                       aria-label="license-expiry-date"
@@ -47,12 +44,11 @@ const { licenseStatus, license } = licenseStore;
                       <span role="note" aria-label="license-days-left">{{ licenseStatus.subscriptionDaysLeft }}</span>
                       <exclamation-mark :type="convertToWarningLevel(licenseStatus.warningLevel)" />
                     </span>
-                    <div class="license-expired-text" role="note" aria-label="license-expired" v-if="licenseStatus.isPlatformExpired">Your license expired. Please update the license to continue using the Particular Service Platform.</div>
-                  </div>
+                  </DetailsItem>
+                  <div class="license-expired-text" role="note" aria-label="license-expired" v-if="licenseStatus.isPlatformExpired">Your license expired. Please update the license to continue using the Particular Service Platform.</div>
                 </template>
                 <template v-if="licenseStatus.isTrialLicense">
-                  <div>
-                    <b>License expiry date: </b>
+                  <DetailsItem label="License Expiry Date">
                     <span
                       role="note"
                       aria-label="license-expiry-date"
@@ -64,41 +60,35 @@ const { licenseStatus, license } = licenseStore;
                       <span role="note" aria-label="license-days-left"> {{ licenseStatus.trialDaysLeft }}</span>
                       <exclamation-mark :type="convertToWarningLevel(licenseStatus.warningLevel)" />
                     </span>
-                    <div class="license-expired-text" role="note" aria-label="license-expired" v-if="licenseStatus.isPlatformTrialExpired">
-                      Your license expired. To continue using the Particular Service Platform you'll need to extend your license.
-                    </div>
-                    <div class="license-page-extend-trial" v-if="licenseStatus.isPlatformTrialExpiring && licenseStatus.isPlatformTrialExpired">
-                      <a class="btn btn-default btn-primary" :href="license.license_extension_url" target="_blank">Extend your license <FAIcon :icon="faExternalLink" /></a>
-                    </div>
+                  </DetailsItem>
+                  <div class="license-expired-text" role="note" aria-label="license-expired" v-if="licenseStatus.isPlatformTrialExpired">Your license expired. To continue using the Particular Service Platform you'll need to extend your license.</div>
+                  <div class="license-page-extend-trial" v-if="licenseStatus.isPlatformTrialExpiring && licenseStatus.isPlatformTrialExpired">
+                    <a class="btn btn-default btn-primary" :href="license.license_extension_url" target="_blank">Extend your license <FAIcon :icon="faExternalLink" /></a>
                   </div>
                 </template>
                 <template v-if="licenseStatus.isUpgradeProtectionLicense">
-                  <div>
-                    <span>
-                      <b>Upgrade protection expiry date:</b>
-                      <span
-                        role="note"
-                        aria-label="license-expiry-date"
-                        :class="{
-                          'license-expired': licenseStatus.isInvalidDueToUpgradeProtectionExpired,
-                        }"
-                      >
-                        {{ formattedUpgradeProtectionExpiration }}
-                        <span role="note" aria-label="license-days-left">{{ licenseStatus.upgradeDaysLeft }}</span>
-                        <exclamation-mark :type="convertToWarningLevel(licenseStatus.warningLevel)" />
-                      </span>
+                  <DetailsItem label="Upgrade Protection Expiry Date">
+                    <span
+                      role="note"
+                      aria-label="license-expiry-date"
+                      :class="{
+                        'license-expired': licenseStatus.isInvalidDueToUpgradeProtectionExpired,
+                      }"
+                    >
+                      {{ formattedUpgradeProtectionExpiration }}
+                      <span role="note" aria-label="license-days-left">{{ licenseStatus.upgradeDaysLeft }}</span>
+                      <exclamation-mark :type="convertToWarningLevel(licenseStatus.warningLevel)" />
                     </span>
-                    <div class="license-expired-text" role="note" aria-label="license-expired" v-if="licenseStatus.isValidWithExpiredUpgradeProtection || licenseStatus.isValidWithExpiringUpgradeProtection">
-                      <b>Warning:</b> Once upgrade protection expires, you'll no longer have access to support or new product versions.
-                    </div>
-                    <div class="license-expired-text" v-if="licenseStatus.isInvalidDueToUpgradeProtectionExpired">Your license upgrade protection expired before this version of ServicePulse was released.</div>
+                  </DetailsItem>
+                  <div class="license-expired-text" role="note" aria-label="license-expired" v-if="licenseStatus.isValidWithExpiredUpgradeProtection || licenseStatus.isValidWithExpiringUpgradeProtection">
+                    <b>Warning:</b> Once upgrade protection expires, you'll no longer have access to support or new product versions.
                   </div>
+                  <div class="license-expired-text" v-if="licenseStatus.isInvalidDueToUpgradeProtectionExpired">Your license upgrade protection expired before this version of ServicePulse was released.</div>
                 </template>
-                <div>
-                  <b>ServiceControl instance:</b>
+                <DetailsItem label="ServiceControl Instance">
                   {{ formattedInstanceName }}
-                </div>
-                <ul class="license-install-info">
+                </DetailsItem>
+                <ul class="license-install-info mt-2">
                   <li>
                     <a href="https://docs.particular.net/servicecontrol/license" target="_blank">Install or update a ServiceControl license</a>
                   </li>
@@ -143,7 +133,7 @@ const { licenseStatus, license } = licenseStore;
 <style scoped>
 .license-info {
   font-size: 16px;
-  line-height: 3em;
+  max-width: 35em;
 }
 
 .license-install-info li {
@@ -171,4 +161,15 @@ const { licenseStatus, license } = licenseStore;
 .licensed-endpoints span {
   padding: 10px;
 }
+
+.license-expired {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.license-expired-text {
+  overflow: visible;
+  white-space: nowrap;
+}
 </style>
diff --git a/src/Frontend/src/components/platformcapabilities/CapabilityCard.vue b/src/Frontend/src/components/platformcapabilities/CapabilityCard.vue
index b196067510..b9d61921f2 100644
--- a/src/Frontend/src/components/platformcapabilities/CapabilityCard.vue
+++ b/src/Frontend/src/components/platformcapabilities/CapabilityCard.vue
@@ -2,7 +2,7 @@
 import { ref, computed } from "vue";
 import { useRouter } from "vue-router";
 import FAIcon from "@/components/FAIcon.vue";
-import { faCircle, faTimes } from "@fortawesome/free-solid-svg-icons";
+import { faCircle, faExternalLink, faTimes } from "@fortawesome/free-solid-svg-icons";
 import type { StatusIndicator, WizardPage } from "@/components/platformcapabilities/types";
 import { Capability, CapabilityStatus } from "@/components/platformcapabilities/constants";
 import WizardDialog from "./WizardDialog.vue";
@@ -13,17 +13,21 @@ const emit = defineEmits<{
   hide: [];
 }>();
 
-const props = defineProps<{
-  status: CapabilityStatus;
-  title: Capability;
-  subtitle: string;
-  helpButtonText: string;
-  helpButtonUrl: string;
-  description: string;
-  indicators?: StatusIndicator[];
-  isLoading?: boolean;
-  wizardPages?: WizardPage[];
-}>();
+const props = withDefaults(
+  defineProps<{
+    status: CapabilityStatus;
+    title: Capability;
+    subtitle: string;
+    helpButtonText: string;
+    helpButtonUrl: string;
+    description: string;
+    indicators?: StatusIndicator[];
+    isLoading?: boolean;
+    wizardPages?: WizardPage[];
+    allowDismiss?: boolean;
+  }>(),
+  { allowDismiss: true }
+);
 
 const showWizard = ref(false);
 
@@ -33,14 +37,12 @@ const shouldShowWizard = computed(() => {
 
 const dataStatus = computed(() => (props.isLoading ? "loading" : props.status.toLowerCase().replace(/ /g, "-")));
 
-function isExternalUrl(url: string): boolean {
-  return url.startsWith("http://") || url.startsWith("https://");
-}
+const isExternalUrl = computed(() => props.helpButtonUrl.startsWith("http://") || props.helpButtonUrl.startsWith("https://"));
 
 function handleButtonClick() {
   if (shouldShowWizard.value) {
     showWizard.value = true;
-  } else if (isExternalUrl(props.helpButtonUrl)) {
+  } else if (isExternalUrl.value) {
     window.open(props.helpButtonUrl, "_blank");
   } else {
     router.push(props.helpButtonUrl);
@@ -83,7 +85,7 @@ function handleButtonClick() {
           >
             {{ props.status }}
           </span>
-          <button class="hide-card-btn" @click="emit('hide')" v-tippy="'Hide this card'">
+          <button v-if="allowDismiss" class="hide-card-btn" @click="emit('hide')" v-tippy="'Hide this card'">
             <FAIcon :icon="faTimes" />
           </button>
         </div>
@@ -94,9 +96,7 @@ function handleButtonClick() {
       <div class="capability-description">
         {{ props.description }}
       </div>
-      <button class="btn btn-primary" @click="handleButtonClick">
-        {{ props.helpButtonText }}
-      </button>
+      <button class="btn btn-primary" @click="handleButtonClick">{{ props.helpButtonText }} <FAIcon v-if="!shouldShowWizard && isExternalUrl" :icon="faExternalLink" /></button>
     </div>
 
     <WizardDialog v-if="showWizard && wizardPages" :title="`Getting Started with ${props.title}`" :pages="wizardPages" @close="showWizard = false" />
diff --git a/src/Frontend/src/components/platformcapabilities/constants.ts b/src/Frontend/src/components/platformcapabilities/constants.ts
index c2fb1242ad..3986b12e60 100644
--- a/src/Frontend/src/components/platformcapabilities/constants.ts
+++ b/src/Frontend/src/components/platformcapabilities/constants.ts
@@ -10,4 +10,5 @@ export enum Capability {
   Monitoring = "Monitoring",
   Auditing = "Auditing",
   Error = "Recoverability",
+  LicensedEndpointTracking = "Licensed Endpoint Tracking",
 }
diff --git a/src/Frontend/src/components/serviceControlClient.ts b/src/Frontend/src/components/serviceControlClient.ts
index 3455bbe784..774289b81d 100644
--- a/src/Frontend/src/components/serviceControlClient.ts
+++ b/src/Frontend/src/components/serviceControlClient.ts
@@ -37,7 +37,18 @@ class ServiceControlClient {
   public async fetchTypedFromUrl<T>(url: string, signal?: AbortSignal): Promise<[Response, T]> {
     const response = await authFetch(url, { signal });
     if (!response.ok) throw new HttpError(response.status, response.statusText ?? "No response");
-    const data = await response.json();
+    if (!response.ok) {
+      let error: Error = new HttpError(response.status, response.statusText ?? "No response");
+      if (response.status === 400) {
+        try {
+          const errorResponse = await response.json();
+          error = new Error(errorResponse.detail ?? errorResponse.title);
+          // eslint-disable-next-line no-empty
+        } catch {}
+      }
+      throw error;
+    }
+    const data = response.status !== 204 && (await response.json());
 
     return [response, data];
   }
@@ -53,6 +64,18 @@ class ServiceControlClient {
     return await authFetch(`${this.url}${suffix}`, requestOptions);
   }
 
+  public async postFileToServiceControl(suffix: string, file: File, paramName = "file") {
+    const formData = new FormData();
+    formData.append(paramName, file);
+
+    const requestOptions: RequestInit = {
+      method: "POST",
+      body: formData,
+    };
+
+    return await authFetch(`${this.url}${suffix}`, requestOptions);
+  }
+
   public async putToServiceControl(suffix: string, payload: object | null) {
     const requestOptions: RequestInit = {
       method: "PUT",
diff --git a/src/Frontend/src/resources/EndpointThroughputSummary.ts b/src/Frontend/src/resources/EndpointThroughputSummary.ts
deleted file mode 100644
index 764e6455cf..0000000000
--- a/src/Frontend/src/resources/EndpointThroughputSummary.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-interface EndpointThroughputSummary {
-  name: string;
-  is_known_endpoint: boolean;
-  user_indicator: string;
-  max_daily_throughput: number;
-  monthly_throughput?: MonthlyThroughput[];
-  max_monthly_throughput?: number;
-}
-
-export interface MonthlyThroughput {
-  month: string;
-  throughput: number;
-}
-
-export type { EndpointThroughputSummary as default };
diff --git a/src/Frontend/src/resources/LicenseDetails.ts b/src/Frontend/src/resources/LicenseDetails.ts
new file mode 100644
index 0000000000..682c536688
--- /dev/null
+++ b/src/Frontend/src/resources/LicenseDetails.ts
@@ -0,0 +1,89 @@
+import type QueueThroughputSummary from "@/resources/QueueThroughputSummary";
+
+export interface LicensedEndpointDetails {
+  endpoints: ApiEndpoint[];
+  infrastructure_queues: ApiQueue[];
+  excluded_queues: ApiQueue[];
+  service_end_date: string;
+  products: ApiProduct[];
+  valid_id: boolean;
+}
+
+export interface ApiEndpoint {
+  name: string;
+  classification: EndpointClassification;
+  endpoint_size: string;
+  queues: ApiQueue[];
+}
+
+export interface ApiQueue {
+  name_hash: string;
+  scope: string;
+}
+
+interface ApiProduct {
+  product_code: string;
+  monthly_throughput: number | null;
+}
+
+export enum EndpointClassification {
+  Full = 0,
+  SendOnly = 1,
+}
+
+export interface Queue {
+  nameHash: string;
+  scope: string;
+  details: QueueThroughputSummary;
+}
+
+export class Endpoint {
+  readonly clientId: string;
+  name: string;
+  readonly queues: Queue[];
+  readonly classification: EndpointClassification;
+  readonly endpointSize: EndpointSize;
+  readonly availableSizes: EndpointSize[];
+
+  constructor(clientId: string, name: string, queues: Queue[], classification: EndpointClassification, endpointSize: EndpointSize, availableSizes: EndpointSize[]) {
+    this.clientId = clientId;
+    this.name = name;
+    this.queues = queues;
+    this.classification = classification;
+    this.endpointSize = endpointSize;
+    this.availableSizes = availableSizes;
+  }
+
+  get totalMonthlyThroughput() {
+    return this.queues.map((queue) => queue.details?.average_monthly_throughput ?? 0).reduce((total, value) => total + value, 0);
+  }
+
+  get currentSize() {
+    return this.availableSizes.find((size) => size.throughputMin <= this.totalMonthlyThroughput && (size.throughputMax ?? Number.MAX_VALUE) > this.totalMonthlyThroughput)!;
+  }
+
+  get isInBreach() {
+    return this.endpointSize !== this.currentSize;
+  }
+}
+
+export class EndpointSize {
+  readonly name: string;
+  readonly throughputMin: number;
+  readonly throughputMax: number | null;
+
+  constructor(name: string, throughputMin: number, throughputMax: number | null) {
+    this.name = name;
+    this.throughputMin = throughputMin;
+    this.throughputMax = throughputMax;
+  }
+
+  get throughputText() {
+    switch (this.throughputMax) {
+      case null:
+        return "Unlimited";
+      default:
+        return `between ${this.throughputMin.toLocaleString()} and ${this.throughputMax.toLocaleString()} messages per month`;
+    }
+  }
+}
diff --git a/src/Frontend/src/resources/QueueThroughputSummary.ts b/src/Frontend/src/resources/QueueThroughputSummary.ts
new file mode 100644
index 0000000000..271b3b2c92
--- /dev/null
+++ b/src/Frontend/src/resources/QueueThroughputSummary.ts
@@ -0,0 +1,19 @@
+//Note that this is called EndpointThroughputSummary in ServiceControl, but
+// due to endpoints being used on LicensedEndpointView, it makes the data clearer
+// to name it QueueThroughputSummary (which is what it actually is)
+interface QueueThroughputSummary {
+  name: string;
+  name_hash: string;
+  is_known_endpoint: boolean;
+  user_indicator: string;
+  max_daily_throughput: number;
+  monthly_throughput?: MonthlyThroughput[];
+  average_monthly_throughput?: number;
+}
+
+export interface MonthlyThroughput {
+  month: string;
+  throughput: number;
+}
+
+export type { QueueThroughputSummary as default };
diff --git a/src/Frontend/src/router/config.ts b/src/Frontend/src/router/config.ts
index 10ed24d8e2..9f52b219bc 100644
--- a/src/Frontend/src/router/config.ts
+++ b/src/Frontend/src/router/config.ts
@@ -148,23 +148,54 @@ const config: RouteItem[] = [
     path: routeLinks.throughput.root,
     component: ThroughputReportView,
     title: "Usage",
-    redirect: routeLinks.throughput.endpoints.root,
+    redirect: routeLinks.throughput.queues.root,
     children: [
       {
         title: "Endpoints",
-        path: routeLinks.throughput.endpoints.root,
-        redirect: routeLinks.throughput.endpoints.detectedEndpoints.link,
+        path: routeLinks.throughput.queues.root,
+        redirect: routeLinks.throughput.queues.detectedEndpoints.link,
         component: () => import("@/views/throughputreport/EndpointsView.vue"),
         children: [
           {
-            title: "Detected Endpoints",
-            path: routeLinks.throughput.endpoints.detectedEndpoints.template,
-            component: () => import("@/views/throughputreport/endpoints/DetectedEndpointsView.vue"),
+            title: "Detected Endpoint Queues",
+            path: routeLinks.throughput.queues.detectedEndpoints.template,
+            component: () => import("@/views/throughputreport/queues/DetectedEndpointsView.vue"),
           },
           {
             title: "Detected Broker Queues",
-            path: routeLinks.throughput.endpoints.detectedBrokerQueues.template,
-            component: () => import("@/views/throughputreport/endpoints/DetectedBrokerQueuesView.vue"),
+            path: routeLinks.throughput.queues.detectedBrokerQueues.template,
+            component: () => import("@/views/throughputreport/queues/DetectedBrokerQueuesView.vue"),
+          },
+        ],
+      },
+      {
+        title: "License Details",
+        path: routeLinks.throughput.licenseDetails.root,
+        redirect: routeLinks.throughput.licenseDetails.licensedEndpoints.link,
+        component: () => import("@/views/throughputreport/EndpointsView.vue"),
+        children: [
+          {
+            title: "License Details",
+            path: routeLinks.throughput.licenseDetails.root,
+            redirect: routeLinks.throughput.licenseDetails.licensedEndpoints.link,
+            component: () => import("@/views/throughputreport/licenseDetails/LicenseDetails.vue"),
+            children: [
+              {
+                title: "Licensed Endpoints",
+                path: routeLinks.throughput.licenseDetails.licensedEndpoints.template,
+                component: () => import("@/views/throughputreport/licenseDetails/LicensedEndpointsView.vue"),
+              },
+              {
+                title: "Infrastructure Queues",
+                path: routeLinks.throughput.licenseDetails.infrastructureQueues.template,
+                component: () => import("@/views/throughputreport/licenseDetails/InfrastructureQueuesView.vue"),
+              },
+              {
+                title: "Excluded Queues",
+                path: routeLinks.throughput.licenseDetails.excludedQueues.template,
+                component: () => import("@/views/throughputreport/licenseDetails/ExcludedQueuesView.vue"),
+              },
+            ],
           },
         ],
       },
diff --git a/src/Frontend/src/router/routeLinks.ts b/src/Frontend/src/router/routeLinks.ts
index cd83e3a902..6bfb979d8a 100644
--- a/src/Frontend/src/router/routeLinks.ts
+++ b/src/Frontend/src/router/routeLinks.ts
@@ -59,7 +59,8 @@ const configurationLinks = (root: string) => {
 const throughputLinks = (root: string) => {
   return {
     root: root,
-    endpoints: throughputEndpointLinks(`${root}/endpoints`),
+    queues: throughputQueuesLinks(`${root}/queues`),
+    licenseDetails: throughputEndpointLinks(`${root}/license-details`),
     setup: throughputSetupLinks(`${root}/setup`),
   };
 };
@@ -77,7 +78,7 @@ const throughputSetupLinks = (root: string) => {
   };
 };
 
-const throughputEndpointLinks = (root: string) => {
+const throughputQueuesLinks = (root: string) => {
   function createLink(template: string) {
     return { link: `${root}/${template}`, template: template };
   }
@@ -89,6 +90,19 @@ const throughputEndpointLinks = (root: string) => {
   };
 };
 
+const throughputEndpointLinks = (root: string) => {
+  function createLink(template: string) {
+    return { link: `${root}/${template}`, template: template };
+  }
+
+  return {
+    root,
+    licensedEndpoints: createLink("licensed"),
+    infrastructureQueues: createLink("infrastructure"),
+    excludedQueues: createLink("excluded"),
+  };
+};
+
 const monitoringLinks = (root: string) => {
   return {
     root,
diff --git a/src/Frontend/src/stores/LicenseDetailsStore.ts b/src/Frontend/src/stores/LicenseDetailsStore.ts
new file mode 100644
index 0000000000..3c5b19a21e
--- /dev/null
+++ b/src/Frontend/src/stores/LicenseDetailsStore.ts
@@ -0,0 +1,82 @@
+import { acceptHMRUpdate, defineStore } from "pinia";
+import logger from "@/logger";
+import { ref, watch } from "vue";
+import createThroughputClient from "@/views/throughputreport/throughputClient";
+import { Endpoint, EndpointSize, type Queue, type LicensedEndpointDetails, type ApiQueue } from "@/resources/LicenseDetails";
+import serviceControlClient from "@/components/serviceControlClient";
+import useIsLicenseDetailsSupported from "@/views/throughputreport/licenseDetails/isLicenseDetailsSupported";
+
+export const useLicenseDetailsStore = defineStore("LicenseDetailsStore", () => {
+  const isLicenseDetailsSupported = useIsLicenseDetailsSupported();
+
+  const endpointSizes = ref<EndpointSize[]>([]);
+  const endpoints = ref<Endpoint[]>([]);
+  const infrastructureQueues = ref<Queue[]>([]);
+  const excludedQueues = ref<Queue[]>([]);
+  const serviceEndDate = ref<Date>();
+  const validId = ref<boolean>(true);
+  const hasLicenseDetails = ref(false);
+  const error = ref<string | null>();
+
+  async function refresh() {
+    if (!isLicenseDetailsSupported) return;
+    try {
+      error.value = null;
+      const [, data] = await serviceControlClient.fetchTypedFromServiceControl<LicensedEndpointDetails>("license/details");
+      if (!data) return;
+
+      hasLicenseDetails.value = true;
+      const throughputClient = createThroughputClient();
+      const scQueues = await throughputClient.queues();
+
+      const toQueue = (metaQ: ApiQueue) =>
+        ({
+          nameHash: metaQ.name_hash,
+          scope: metaQ.scope,
+          details: scQueues.find((scQ) => scQ.name_hash === metaQ.name_hash),
+        }) as Queue;
+
+      const sortedProducts = data.products.toSorted((p1, p2) => (p1.monthly_throughput ?? Number.MAX_VALUE) - (p2.monthly_throughput ?? Number.MAX_VALUE));
+      const sortedEndpointSizes = sortedProducts.map((product, i) => new EndpointSize(product.product_code, i > 0 ? (sortedProducts[i - 1].monthly_throughput ?? 0) : 0, product.monthly_throughput));
+      endpointSizes.value = sortedEndpointSizes;
+      endpoints.value = data.endpoints.map((metaEp) => new Endpoint(crypto.randomUUID(), metaEp.name, metaEp.queues.map(toQueue), metaEp.classification, sortedEndpointSizes.find((es) => es.name === metaEp.endpoint_size)!, sortedEndpointSizes));
+      infrastructureQueues.value = data.infrastructure_queues.map(toQueue);
+      excludedQueues.value = data.excluded_queues.map(toQueue);
+      serviceEndDate.value = new Date(data.service_end_date);
+      validId.value = data.valid_id;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (err: any) {
+      error.value = `Error fetching endpoint metadata: ${err.message ?? err}`;
+      logger.error("Error fetching endpoint metadata", err);
+    }
+  }
+
+  async function uploadEndpointMetadata(file: File) {
+    const response = await serviceControlClient.postFileToServiceControl("license/detailsUpload", file);
+    if (!response.ok) {
+      const text = await response.text();
+      throw new Error(`Upload Failed: ${response.status} ${response.statusText} - ${text}`);
+    }
+    await refresh();
+  }
+
+  watch(isLicenseDetailsSupported, (supported: boolean) => supported && refresh());
+
+  return {
+    endpoints,
+    endpointSizes,
+    infrastructureQueues,
+    excludedQueues,
+    serviceEndDate,
+    validId,
+    hasLicenseDetails,
+    error,
+    uploadEndpointMetadata,
+  };
+});
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useLicenseDetailsStore, import.meta.hot));
+}
+
+export type LicenseDetailsStore = ReturnType<typeof useLicenseDetailsStore>;
diff --git a/src/Frontend/src/views/ThroughputReportView.spec.ts b/src/Frontend/src/views/ThroughputReportView.spec.ts
index 4d34cc4867..2f215b3bb6 100644
--- a/src/Frontend/src/views/ThroughputReportView.spec.ts
+++ b/src/Frontend/src/views/ThroughputReportView.spec.ts
@@ -92,7 +92,7 @@ describe("EndpointsView tests", () => {
 
       await renderComponent(Transport.AmazonSQS, async (driver) => {
         await driver.setUp(precondition.hasLicensingReportAvailable());
-        await driver.setUp(precondition.hasLicensingEndpoints([{ name: "foo", is_known_endpoint: false, user_indicator: "something", max_daily_throughput: 0 }]));
+        await driver.setUp(precondition.hasLicensingEndpoints([{ name: "foo", name_hash: "", is_known_endpoint: false, user_indicator: "something", max_daily_throughput: 0 }]));
         driver.mockEndpoint(`${window.defaultConfig.service_control_url}licensing/report/file`, {
           body: {},
           headers: {
@@ -110,7 +110,7 @@ describe("EndpointsView tests", () => {
     test("and there are warnings, dialog is displayed", async () => {
       await renderComponent(Transport.AmazonSQS, async (driver) => {
         await driver.setUp(precondition.hasLicensingReportAvailable());
-        await driver.setUp(precondition.hasLicensingEndpoints([{ name: "foo", is_known_endpoint: false, user_indicator: "", max_daily_throughput: 0 }]));
+        await driver.setUp(precondition.hasLicensingEndpoints([{ name: "foo", name_hash: "", is_known_endpoint: false, user_indicator: "", max_daily_throughput: 0 }]));
       });
 
       const use = userEvent.setup();
diff --git a/src/Frontend/src/views/ThroughputReportView.vue b/src/Frontend/src/views/ThroughputReportView.vue
index 62561c15c1..da157a91d9 100644
--- a/src/Frontend/src/views/ThroughputReportView.vue
+++ b/src/Frontend/src/views/ThroughputReportView.vue
@@ -19,7 +19,7 @@ const throughputClient = createThroughputClient();
 const reportState = computedAsync(async () => (isThroughputSupported.value ? await throughputClient.reportAvailable() : null), null);
 
 async function generateReport() {
-  const results = await throughputClient.endpoints();
+  const results = await throughputClient.queues();
   const hasNonUserIndicatorEndpoint = results.find((value) => !value.user_indicator);
 
   if (hasNonUserIndicatorEndpoint) {
diff --git a/src/Frontend/src/views/throughputreport/EndpointsView.spec.ts b/src/Frontend/src/views/throughputreport/EndpointsView.spec.ts
index fbdd07cd38..85a1b81d62 100644
--- a/src/Frontend/src/views/throughputreport/EndpointsView.spec.ts
+++ b/src/Frontend/src/views/throughputreport/EndpointsView.spec.ts
@@ -1,4 +1,4 @@
-import { describe, expect, test } from "vitest";
+import { describe, expect, test, vi } from "vitest";
 import * as precondition from "../../../test/preconditions";
 import { createTestingPinia } from "@pinia/testing";
 import { Transport } from "@/views/throughputreport/transport";
@@ -28,6 +28,10 @@ describe("EndpointsView tests", () => {
     const driver = await setup(transport);
     await preSetup(driver);
 
+    vi.mock("@/composables/isRouteSelected.ts", () => ({
+      default: vi.fn(() => true),
+    }));
+
     const { debug } = render(EndpointsView, {
       global: {
         stubs: {
@@ -52,7 +56,7 @@ describe("EndpointsView tests", () => {
 
     const use = userEvent.setup();
 
-    await use.click(screen.getByRole("link", { name: /Show Endpoint Types meaning/i }));
+    await use.click(screen.getByRole("button", { name: /Show Endpoint Types meaning/i }));
 
     expect(screen.queryByText(/Hide Endpoint Types meaning/i)).toBeInTheDocument();
   });
diff --git a/src/Frontend/src/views/throughputreport/EndpointsView.vue b/src/Frontend/src/views/throughputreport/EndpointsView.vue
index 8bb1f99f8d..f961ba5301 100644
--- a/src/Frontend/src/views/throughputreport/EndpointsView.vue
+++ b/src/Frontend/src/views/throughputreport/EndpointsView.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import routeLinks from "@/router/routeLinks";
 import isRouteSelected from "@/composables/isRouteSelected";
-import { UserIndicator } from "@/views/throughputreport/endpoints/userIndicator";
-import { userIndicatorMapper } from "@/views/throughputreport/endpoints/userIndicatorMapper";
-import { ref, type Component } from "vue";
+import { UserIndicator } from "@/views/throughputreport/queues/userIndicator.ts";
+import { userIndicatorMapper } from "@/views/throughputreport/queues/userIndicatorMapper.ts";
+import { computed, ref, type Component } from "vue";
 import { storeToRefs } from "pinia";
 import LegendNServiceBusEndpoint from "./LegendNServiceBusEndpoint.vue";
 import LegendNServiceBusEndpointNoLongerInUse from "./LegendNServiceBusEndpointNoLongerInUse.vue";
@@ -14,9 +14,19 @@ import LegendNotNServiceBusEndpoint from "./LegendNotNServiceBusEndpoint.vue";
 import LegendGatewayOrBridgeEndpoint from "./LegendGatewayOrBridgeEndpoint.vue";
 import LegendParticularPlatformEndpoint from "./LegendParticularPlatformEndpoint.vue";
 import useThroughputStoreAutoRefresh from "@/composables/useThroughputStoreAutoRefresh";
+import ExclamationMark from "@/components/ExclamationMark.vue";
+import { useLicenseDetailsStore } from "@/stores/LicenseDetailsStore.ts";
+import { WarningLevel } from "@/components/WarningLevel.ts";
+import { useLicenseStore } from "@/stores/LicenseStore.ts";
 
 const { store } = useThroughputStoreAutoRefresh();
 const { isBrokerTransport } = storeToRefs(store);
+const licenseDetailsStore = useLicenseDetailsStore();
+const { endpoints, validId, error: licenseDetailsError } = storeToRefs(licenseDetailsStore);
+const licenseStore = useLicenseStore();
+const { license } = storeToRefs(licenseStore);
+const enableLicenseDetails = computed(() => license.value.edition === "Endpoint Size");
+
 const showLegend = ref(false);
 
 const legendOptions = new Map<UserIndicator, Component>([
@@ -36,13 +46,32 @@ function toggleOptionsLegendVisible() {
 </script>
 
 <template>
-  <div class="box">
-    <div class="row">
+  <div class="row">
+    <div class="col-sm-12">
+      <div class="nav tabs">
+        <h5 class="nav-item" :class="{ active: isRouteSelected(routeLinks.throughput.queues.detectedEndpoints.link) }">
+          <RouterLink :to="routeLinks.throughput.queues.detectedEndpoints.link">Detected Endpoint Queues</RouterLink>
+        </h5>
+        <h5 v-if="isBrokerTransport" class="nav-item" role="tab" :class="{ active: isRouteSelected(routeLinks.throughput.queues.detectedBrokerQueues.link) }">
+          <RouterLink :to="routeLinks.throughput.queues.detectedBrokerQueues.link">Detected Broker Queues</RouterLink>
+        </h5>
+        <h5 class="nav-item" v-if="enableLicenseDetails" :class="{ active: isRouteSelected(routeLinks.throughput.licenseDetails.root) }">
+          <RouterLink :to="routeLinks.throughput.licenseDetails.licensedEndpoints.link">
+            <span>License Details</span>
+            <ExclamationMark v-if="licenseDetailsError || !validId" :type="WarningLevel.Danger" />
+            <ExclamationMark v-else-if="endpoints.some((endpoint) => endpoint.isInBreach)" :type="WarningLevel.Warning" />
+          </RouterLink>
+        </h5>
+      </div>
+    </div>
+  </div>
+  <div class="box" v-if="isRouteSelected(routeLinks.throughput.queues.root)">
+    <div class="row mt-2">
       <p>
-        Set an Endpoint Type for all detected endpoints and broker queues with the most appropriate option.<br />
+        Set an Endpoint Type for all detected endpoint and broker queues with the most appropriate option.<br />
         Use the filters to bulk set the Endpoint Types on similar named endpoints/queues.<br />
         If the names of the endpoints/queues contain confidential or proprietary information, make sure you set up <RouterLink :to="routeLinks.throughput.setup.mask.link">masking in Configuration</RouterLink>.<br />
-        <a href="#" :aria-label="`${showLegend ? 'Hide' : 'Show'} Endpoint Types meaning`" @click.prevent="toggleOptionsLegendVisible()">{{ showLegend ? "Hide" : "Show" }} Endpoint Types meaning.</a>
+        <button class="btn btn-secondary" :aria-label="`${showLegend ? 'Hide' : 'Show'} Endpoint Types meaning`" @click.prevent="toggleOptionsLegendVisible()">{{ showLegend ? "Hide" : "Show" }} Endpoint Types meaning.</button>
       </p>
       <div v-show="showLegend" class="alert alert-info">
         <div v-for="[key, LegendComponent] in legendOptions" :key="key">
@@ -53,22 +82,9 @@ function toggleOptionsLegendVisible() {
         </p>
       </div>
     </div>
-    <div class="row">
-      <div class="col-sm-12">
-        <div class="nav tabs">
-          <h5 class="nav-item" :class="{ active: isRouteSelected(routeLinks.throughput.endpoints.detectedEndpoints.link) }">
-            <RouterLink :to="routeLinks.throughput.endpoints.detectedEndpoints.link">Detected Endpoints</RouterLink>
-          </h5>
-          <h5 v-if="isBrokerTransport" class="nav-item" role="tab" :class="{ active: isRouteSelected(routeLinks.throughput.endpoints.detectedBrokerQueues.link) }">
-            <RouterLink :to="routeLinks.throughput.endpoints.detectedBrokerQueues.link">Detected Broker Queues</RouterLink>
-          </h5>
-        </div>
-      </div>
-    </div>
-    <div class="intro">
-      <RouterView />
-    </div>
+    <RouterView />
   </div>
+  <RouterView v-else />
 </template>
 
 <style scoped></style>
diff --git a/src/Frontend/src/views/throughputreport/ThroughputMenuItem.vue b/src/Frontend/src/views/throughputreport/ThroughputMenuItem.vue
index bcdd9a0e59..a203e7ee4e 100644
--- a/src/Frontend/src/views/throughputreport/ThroughputMenuItem.vue
+++ b/src/Frontend/src/views/throughputreport/ThroughputMenuItem.vue
@@ -3,12 +3,21 @@ import { RouterLink } from "vue-router";
 import routeLinks from "@/router/routeLinks";
 import FAIcon from "@/components/FAIcon.vue";
 import { faFileLines } from "@fortawesome/free-solid-svg-icons";
+import { useLicenseDetailsStore } from "@/stores/LicenseDetailsStore";
+import { storeToRefs } from "pinia";
+import ExclamationMark from "@/components/ExclamationMark.vue";
+import { WarningLevel } from "@/components/WarningLevel";
+
+const licenseDetailsStore = useLicenseDetailsStore();
+const { endpoints, validId, error: licenseDetailsError } = storeToRefs(licenseDetailsStore);
 </script>
 
 <template>
   <RouterLink :to="routeLinks.throughput.root">
     <FAIcon :icon="faFileLines" title="Usage" />
     <span class="navbar-label">Usage</span>
+    <ExclamationMark v-if="licenseDetailsError || !validId" :type="WarningLevel.Danger" />
+    <ExclamationMark v-else-if="endpoints.some((endpoint) => endpoint.isInBreach)" :type="WarningLevel.Warning" />
   </RouterLink>
 </template>
 
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/CollapsedEndpoint.vue b/src/Frontend/src/views/throughputreport/licenseDetails/CollapsedEndpoint.vue
new file mode 100644
index 0000000000..0c52ae264e
--- /dev/null
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/CollapsedEndpoint.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { EndpointClassification, type Endpoint } from "@/resources/LicenseDetails";
+import FAIcon from "@/components/FAIcon.vue";
+import { faCircleChevronDown } from "@fortawesome/free-solid-svg-icons";
+
+const props = defineProps<{ endpoint: Endpoint }>();
+const emit = defineEmits(["expand"]);
+
+const endpointClassificationStyle = computed(() => {
+  switch (props.endpoint.classification) {
+    case EndpointClassification.Full:
+      return props.endpoint.isInBreach ? "--breach" : "--full";
+    case EndpointClassification.SendOnly:
+      return "--send-only";
+    default:
+      throw new Error("Invalid endpoint classification");
+  }
+});
+</script>
+
+<template>
+  <div class="endpoint-header" :style="{ '--endpoint-header-bg': `var(${endpointClassificationStyle})` }">
+    <div class="endpoint-name">
+      <FAIcon :icon="faCircleChevronDown" class="expand-button" size="lg" tabindex="0" title="expand" @click="emit('expand')" />
+      <strong :title="endpoint.name">{{ endpoint.name }}</strong>
+    </div>
+    <div class="details">
+      <span class="queues">Queues: {{ endpoint.queues.length }}</span>
+      <span class="throughput">Throughput: {{ endpoint.totalMonthlyThroughput.toLocaleString() }}</span>
+      <span class="c-size">Current Size: {{ endpoint.currentSize.name }}</span>
+      <span class="l-size">Licensed Size: {{ endpoint.endpointSize.name }} </span>
+    </div>
+    <!-- <div>
+      <RemoveEndpoint :endpoint="endpoint" />
+    </div> -->
+  </div>
+</template>
+
+<style scoped>
+.endpoint-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: hsl(from var(--endpoint-header-bg) h s 90%);
+  border-radius: 5px;
+}
+
+.dark-mode .endpoint-header {
+  background-color: var(--endpoint-header-bg);
+}
+
+.endpoint-header div {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.endpoint-header div.header-buttons {
+  gap: 0.25rem;
+}
+
+.expand-button {
+  cursor: pointer;
+  color: hsl(from var(--bs-body-color) h s l / 50%);
+}
+
+.expand-button:hover {
+  color: inherit;
+}
+
+.endpoint-header .details {
+  font-size: 0.9em;
+  gap: 1em;
+  flex-basis: 60em;
+}
+
+.endpoint-header .details .queues {
+  width: 7em;
+}
+
+.endpoint-header .details .l-size,
+.endpoint-header .details .c-size {
+  width: 10em;
+}
+
+.endpoint-header .details .throughput {
+  width: 12em;
+}
+
+.endpoint-header .endpoint-name {
+  flex-basis: calc(min(40em, 35vw));
+  overflow: hidden;
+}
+
+.endpoint-header .endpoint-name strong {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+</style>
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/EndpointDetails.vue b/src/Frontend/src/views/throughputreport/licenseDetails/EndpointDetails.vue
new file mode 100644
index 0000000000..2d427b0b30
--- /dev/null
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/EndpointDetails.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { EndpointClassification, type Endpoint } from "@/resources/LicenseDetails";
+import QueueData from "./QueueData.vue";
+import { computed } from "vue";
+import type { MonthlyThroughput } from "@/resources/QueueThroughputSummary.ts";
+import ThroughputGraph from "../queues/ThroughputGraph.vue";
+import DetailsItem from "@/components/DetailsItem.vue";
+
+const props = defineProps<{ endpoint: Endpoint }>();
+
+const throughputByMonth = computed(() =>
+  [
+    ...props.endpoint.queues
+      .flatMap((queue) => queue.details?.monthly_throughput ?? [])
+      .reduce((result, { month, throughput }) => {
+        const existing = result.get(month) ?? 0;
+        result.set(month, existing + throughput);
+        return result;
+      }, new Map<string, number>()),
+  ]
+    .toSorted(([x1], [x2]) => x1.localeCompare(x2))
+    .map(([month, throughput]) => ({ month, throughput }) as MonthlyThroughput)
+);
+const sortedQueues = computed(() => props.endpoint.queues.toSorted((q1, q2) => q1.details?.name.toLowerCase().localeCompare(q2.details?.name.toLowerCase())));
+</script>
+
+<template>
+  <div class="card-body" :key="endpoint.clientId">
+    <div class="details">
+      <DetailsItem label="Average Throughput/Month">
+        {{ endpoint.totalMonthlyThroughput.toLocaleString() }}
+      </DetailsItem>
+      <DetailsItem v-if="endpoint.classification === EndpointClassification.Full" label="Current Size" :tooltip="endpoint.currentSize.throughputText">
+        {{ endpoint.currentSize.name }}
+      </DetailsItem>
+      <DetailsItem label="Licensed Size" :tooltip="endpoint.classification === EndpointClassification.Full ? endpoint.endpointSize.throughputText : undefined">
+        {{ endpoint.classification === EndpointClassification.Full ? endpoint.endpointSize.name : "Send Only" }}
+      </DetailsItem>
+    </div>
+    <ThroughputGraph :data="throughputByMonth" class="graph" v-if="throughputByMonth.length" />
+    <div class="queue-data">
+      <QueueData :queues="sortedQueues" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.card-body {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 2px;
+}
+
+.details {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  max-width: 28em;
+}
+
+.graph {
+  height: 7rem;
+  justify-self: flex-end;
+}
+
+.queue-data {
+  flex-basis: 100%;
+}
+</style>
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/EndpointHeader.vue b/src/Frontend/src/views/throughputreport/licenseDetails/EndpointHeader.vue
new file mode 100644
index 0000000000..a42df05792
--- /dev/null
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/EndpointHeader.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import { EndpointClassification, type Endpoint } from "@/resources/LicenseDetails";
+import FAIcon from "@/components/FAIcon.vue";
+import { faCircleChevronUp } from "@fortawesome/free-solid-svg-icons";
+
+const props = defineProps<{ endpoint: Endpoint }>();
+const emit = defineEmits(["collapse"]);
+
+const endpointClassificationStyle = computed(() => {
+  switch (props.endpoint.classification) {
+    case EndpointClassification.Full:
+      return props.endpoint.isInBreach ? "--breach" : "--full";
+    case EndpointClassification.SendOnly:
+      return "--send-only";
+    default:
+      throw new Error("Invalid endpoint classification");
+  }
+});
+
+const endpointName = ref(props.endpoint.name);
+
+watch(
+  () => props.endpoint.name,
+  (newValue) => (endpointName.value = newValue)
+);
+</script>
+
+<template>
+  <div class="endpoint-header" :key="endpoint.clientId" :style="{ '--endpoint-header-bg': `var(${endpointClassificationStyle})` }">
+    <div class="endpoint-name">
+      <FAIcon :icon="faCircleChevronUp" class="collapse-button" size="lg" tabindex="0" title="collapse" @click="emit('collapse')" />
+      <strong :title="endpoint.name">{{ endpoint.name }}</strong>
+    </div>
+    <div class="header-buttons d-print-none"></div>
+  </div>
+</template>
+
+<style scoped>
+.endpoint-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: hsl(from var(--endpoint-header-bg) h s 90%);
+}
+
+/* not currently used */
+.dark-mode .endpoint-header {
+  background-color: var(--endpoint-header-bg);
+}
+
+.endpoint-header div {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.endpoint-header div.header-buttons {
+  gap: 0.25rem;
+}
+
+.collapse-button {
+  cursor: pointer;
+  color: hsl(from var(--bs-body-color) h s l / 50%);
+}
+
+.collapse-button:hover {
+  color: inherit;
+}
+
+.endpoint-header .endpoint-name {
+  flex-basis: calc(min(40em, 35vw));
+  overflow: hidden;
+}
+
+.endpoint-header .endpoint-name strong {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+</style>
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/ExcludedQueuesView.vue b/src/Frontend/src/views/throughputreport/licenseDetails/ExcludedQueuesView.vue
new file mode 100644
index 0000000000..16df26f2c5
--- /dev/null
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/ExcludedQueuesView.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { useLicenseDetailsStore } from "@/stores/LicenseDetailsStore";
+import { storeToRefs } from "pinia";
+import QueueData from "./QueueData.vue";
+import NoData from "@/components/NoData.vue";
+
+const licenseDetailsStore = useLicenseDetailsStore();
+const { excludedQueues } = storeToRefs(licenseDetailsStore);
+</script>
+
+<template>
+  <div class="mt-2" v-if="excludedQueues.length">
+    <QueueData :queues="excludedQueues" />
+  </div>
+  <NoData v-else message="There are currently no excluded queues associated with your license"></NoData>
+</template>
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/InfrastructureQueuesView.vue b/src/Frontend/src/views/throughputreport/licenseDetails/InfrastructureQueuesView.vue
new file mode 100644
index 0000000000..b67adcce4a
--- /dev/null
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/InfrastructureQueuesView.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { useLicenseDetailsStore } from "@/stores/LicenseDetailsStore";
+import { storeToRefs } from "pinia";
+import QueueData from "./QueueData.vue";
+import NoData from "@/components/NoData.vue";
+
+const licenseDetailsStore = useLicenseDetailsStore();
+const { infrastructureQueues } = storeToRefs(licenseDetailsStore);
+</script>
+
+<template>
+  <QueueData v-if="infrastructureQueues.length" :queues="infrastructureQueues" />
+  <NoData v-else message="There are currently no infrastructure queues associated with your license"></NoData>
+</template>
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/LicenseDetails.vue b/src/Frontend/src/views/throughputreport/licenseDetails/LicenseDetails.vue
new file mode 100644
index 0000000000..7f04468a89
--- /dev/null
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/LicenseDetails.vue
@@ -0,0 +1,170 @@
+<script setup lang="ts">
+import routeLinks from "@/router/routeLinks";
+import isRouteSelected from "@/composables/isRouteSelected";
+import { useLicenseDetailsStore } from "@/stores/LicenseDetailsStore";
+import { storeToRefs } from "pinia";
+import { computed } from "vue";
+import DataView from "@/components/DataView.vue";
+import ColumnHeader from "@/components/ColumnHeader.vue";
+import ExclamationMark from "@/components/ExclamationMark.vue";
+import { faExternalLink, faWarning } from "@fortawesome/free-solid-svg-icons";
+import { WarningLevel } from "@/components/WarningLevel";
+import useIsLicenseDetailsSupported, { minimumSCVersionForLicenseDetails } from "./isLicenseDetailsSupported";
+import ConditionalRender from "@/components/ConditionalRender.vue";
+import NoMetadata from "./NoMetadata.vue";
+import FAIcon from "@/components/FAIcon.vue";
+import UploadMetadata from "./UploadMetadata.vue";
+import DetailsItem from "@/components/DetailsItem.vue";
+
+const isLicenseDetailsSupported = useIsLicenseDetailsSupported();
+
+const licenseDetailsStore = useLicenseDetailsStore();
+const { endpoints, endpointSizes, serviceEndDate, validId, hasLicenseDetails, error } = storeToRefs(licenseDetailsStore);
+
+const sizes = computed(() =>
+  endpoints.value.reduce(
+    (result, endpoint) => {
+      const { licensed, current } = result;
+      const licensedCount = licensed.get(endpoint.endpointSize.name) ?? 0;
+      const currentCount = current.get(endpoint.currentSize.name) ?? 0;
+      licensed.set(endpoint.endpointSize.name, licensedCount + 1);
+      current.set(endpoint.currentSize.name, currentCount + 1);
+      return { licensed, current };
+    },
+    { licensed: new Map<string, number>(), current: new Map<string, number>() }
+  )
+);
+const licensedCounts = computed(() => sizes.value.licensed);
+const currentCounts = computed(() => sizes.value.current);
+const allSizes = computed(() => [...new Set([...licensedCounts.value.keys(), ...currentCounts.value.keys()])].sort((a, b) => endpointSizes.value.findIndex((size) => size.name === a) - endpointSizes.value.findIndex((size) => size.name === b)));
+const estimateUrlParams = computed(() => [...currentCounts.value.entries().map(([endpointSize, count]) => `${endpointSize}=${count}`)].join("&"));
+</script>
+
+<template>
+  <ConditionalRender :supported="isLicenseDetailsSupported">
+    <template #unsupported>
+      <div class="not-supported">
+        <p>
+          The minimum version of ServiceControl required to enable this feature is
+          <span> {{ minimumSCVersionForLicenseDetails }} </span>.
+        </p>
+        <div>
+          <a class="btn btn-default btn-primary" href="https://particular.net/downloads" target="_blank">Update ServiceControl to latest version</a>
+        </div>
+      </div>
+    </template>
+
+    <ConditionalRender :supported="hasLicenseDetails">
+      <template #unsupported>
+        <NoMetadata :metadataError="error" />
+      </template>
+      <template v-if="!validId">
+        <div class="id-warning alert alert-danger">
+          <span>The stored endpoint metadata file does not match the current license. Please download a new version from the Particular customer portal</span>
+          <a href="https://customers.particular.net" class="btn btn-primary" target="_blank">Customer Portal <FAIcon :icon="faExternalLink" /></a>
+        </div>
+        <UploadMetadata />
+      </template>
+      <div class="license-details box">
+        <div class="details col-6">
+          <DetailsItem label="License Expiry Date" class="license-expiry">
+            {{ serviceEndDate?.toLocaleDateString() }}
+          </DetailsItem>
+          <h3>Licensed Endpoints</h3>
+          <div class="licensed-endpoints">
+            <div role="row" aria-label="column-headers" class="row table-head-row" :style="{ borderTop: 0 }">
+              <ColumnHeader name="Size" label="Size (Average Messages/Month)" class="col-8" />
+              <ColumnHeader name="Licensed" label="Licensed" class="col-2" />
+              <ColumnHeader name="Used" label="Used" class="col-2" />
+            </div>
+            <DataView :data="allSizes">
+              <template #data="{ pageData }">
+                <div role="rowgroup" aria-label="endpoints">
+                  <div role="row" class="row grid-row" v-for="size in pageData" :key="size">
+                    <span class="col-8" :title="endpointSizes.find((eps) => eps.name === size)?.throughputText">
+                      {{ size }}
+                    </span>
+                    <span class="col-2">
+                      {{ (licensedCounts.get(size) ?? 0).toLocaleString() }}
+                    </span>
+                    <span class="col-2 current-size">
+                      {{ (currentCounts.get(size) ?? 0).toLocaleString() }}
+                      <ExclamationMark v-if="(licensedCounts.get(size) ?? 0) !== (currentCounts.get(size) ?? 0)" :icon="faWarning" :type="WarningLevel.Warning" />
+                    </span>
+                  </div>
+                </div>
+              </template>
+            </DataView>
+          </div>
+        </div>
+        <!-- awaiting update to the pricing page to support this functionality -->
+        <div v-if="false">
+          <a :href="`https://particular.net/pricing?${estimateUrlParams}`" class="btn btn-primary" target="_blank">Estimate Renewal Price <FAIcon :icon="faExternalLink" /></a>
+        </div>
+      </div>
+      <div>
+        <div class="row mt-3">
+          <div class="col-sm-12">
+            <div class="nav tabs">
+              <h5 class="nav-item" :class="{ active: isRouteSelected(routeLinks.throughput.licenseDetails.licensedEndpoints.link) }">
+                <RouterLink :to="routeLinks.throughput.licenseDetails.licensedEndpoints.link">Licensed Endpoints</RouterLink>
+              </h5>
+              <h5 class="nav-item" role="tab" :class="{ active: isRouteSelected(routeLinks.throughput.licenseDetails.infrastructureQueues.link) }">
+                <RouterLink :to="routeLinks.throughput.licenseDetails.infrastructureQueues.link">Infrastructure Queues</RouterLink>
+              </h5>
+              <h5 class="nav-item" :class="{ active: isRouteSelected(routeLinks.throughput.licenseDetails.excludedQueues.link) }">
+                <RouterLink :to="routeLinks.throughput.licenseDetails.excludedQueues.link">Excluded Queues</RouterLink>
+              </h5>
+            </div>
+          </div>
+        </div>
+        <RouterView />
+      </div>
+    </ConditionalRender>
+  </ConditionalRender>
+</template>
+
+<style scoped>
+.table-head-row {
+  font-weight: bold;
+}
+
+.licensed-endpoints .grid-row {
+  border-top: 1px solid #eee;
+  border-right: 1px solid #fff;
+  border-bottom: 1px solid #eee;
+  border-left: 1px solid #fff;
+  background-color: #fff;
+}
+
+.current-size {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.license-details {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.license-details .details > div {
+  margin-bottom: 0.5rem;
+}
+
+.license-expiry {
+  max-width: 22em;
+}
+
+.id-warning {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.id-warning button {
+  flex: 0;
+  white-space: nowrap;
+}
+</style>
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/LicensedEndpointsView.vue b/src/Frontend/src/views/throughputreport/licenseDetails/LicensedEndpointsView.vue
new file mode 100644
index 0000000000..b3cccabdc5
--- /dev/null
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/LicensedEndpointsView.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import DataView from "@/components/DataView.vue";
+import { computed, reactive } from "vue";
+import CollapsedEndpoint from "./CollapsedEndpoint.vue";
+import EndpointHeader from "./EndpointHeader.vue";
+import EndpointDetails from "./EndpointDetails.vue";
+import { useLicenseDetailsStore } from "@/stores/LicenseDetailsStore.ts";
+import { storeToRefs } from "pinia";
+
+const licenseDetailsStore = useLicenseDetailsStore();
+const { endpoints } = storeToRefs(licenseDetailsStore);
+
+const expandedEndpoints = reactive(new Map());
+const expandedLength = computed(() => [...expandedEndpoints.values()].filter((value) => value).length);
+</script>
+
+<template>
+  <div class="mt-2">
+    <DataView :data="endpoints" :items-per-page="100" @page-changed="expandedEndpoints.clear()" sticky-pagination>
+      <template #data="{ pageData, pageNumber }">
+        <!--parent div with key ensures that any state for the details below is reset on page change-->
+        <div :key="pageNumber">
+          <div class="actions mb-2">
+            <div class="backdrop"></div>
+            <button type="button" class="btn btn-secondary" :disabled="expandedLength === pageData.length" @click="pageData.forEach((endpoint) => expandedEndpoints.set(endpoint, true))">Expand All</button>
+            <button type="button" class="btn btn-secondary" :disabled="expandedLength === 0" @click="pageData.forEach((endpoint) => expandedEndpoints.set(endpoint, false))">Collapse All</button>
+          </div>
+          <div class="card mb-3" v-for="endpoint in pageData" :key="endpoint.clientId">
+            <template v-if="expandedEndpoints.get(endpoint)">
+              <EndpointHeader :endpoint="endpoint" class="card-header" @collapse="expandedEndpoints.set(endpoint, false)" />
+              <EndpointDetails :endpoint="endpoint" />
+            </template>
+            <CollapsedEndpoint class="card-header" v-else :endpoint="endpoint" @expand="expandedEndpoints.set(endpoint, true)" />
+          </div>
+        </div>
+      </template>
+    </DataView>
+  </div>
+</template>
+
+<style scoped>
+.card {
+  --full: hsl(196deg 100% 31%);
+  --send-only: hsl(159deg 100% 31%);
+  --breach: hsl(40deg 80% 64%);
+  --shadow-color: hsl(215deg 50% 30%);
+  box-shadow:
+    0px 0.1px 0.4px hsl(from var(--shadow-color) h s l / 0.34),
+    0px 0.1px 0.4px 0.7px hsl(from var(--shadow-color) h s l / 0.3),
+    0px 0.4px 1.2px 1.4px hsl(from var(--shadow-color) h s l / 0.25),
+    0px 1px 3px 2.1px hsl(from var(--shadow-color) h s l / 0.21),
+    0px 2.3px 7px 2.9px hsl(from var(--shadow-color) h s l / 0.17),
+    0px 4.3px 13.2px 3.6px hsl(from var(--shadow-color) h s l / 0.13),
+    0px 7.3px 22.4px 4.3px hsl(from var(--shadow-color) h s l / 0.09),
+    0px 11.6px 35.6px 5px hsl(from var(--shadow-color) h s l / 0.04);
+}
+
+.actions {
+  display: flex;
+  gap: 5px;
+  position: sticky;
+  /* the main container-fluid has 40px of top padding */
+  top: -40px;
+  z-index: 10;
+}
+
+.actions .backdrop {
+  position: absolute;
+  inset: 0;
+  backdrop-filter: blur(16px);
+  z-index: -1;
+}
+</style>
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/NoMetadata.vue b/src/Frontend/src/views/throughputreport/licenseDetails/NoMetadata.vue
new file mode 100644
index 0000000000..3477b0713f
--- /dev/null
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/NoMetadata.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import CapabilityCard from "@/components/platformcapabilities/CapabilityCard.vue";
+import { Capability, CapabilityStatus } from "@/components/platformcapabilities/constants";
+import UploadMetadata from "./UploadMetadata.vue";
+
+defineProps<{ metadataError?: string | null }>();
+</script>
+
+<template>
+  <div class="no-metadata mt-2">
+    <div v-if="metadataError" class="alert alert-danger">{{ metadataError }}</div>
+    <CapabilityCard
+      :title="Capability.LicensedEndpointTracking"
+      subtitle="Track throughput against licensed endpoints"
+      :status="CapabilityStatus.InstanceNotConfigured"
+      description="Depending on your system setup, it is possible to track current usage and maintain queues associated with licensed endpoints. This can assist when determining renewal costs, and also assists Particular with determining the correct processing of your usage report. This functionality requires an endpoint metadata file which is linked to your license and, if available for your system, can be downloaded from the customer portal to be uploaded into ServiceControl here."
+      help-button-text="Customer Portal"
+      help-button-url="https://customers.particular.net"
+      :allow-dismiss="false"
+    />
+    <UploadMetadata />
+  </div>
+</template>
+
+<style scoped>
+.no-metadata {
+  max-width: 80em;
+  color: #666;
+}
+
+.alert {
+  font-size: 0.8rem;
+}
+</style>
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/QueueData.vue b/src/Frontend/src/views/throughputreport/licenseDetails/QueueData.vue
new file mode 100644
index 0000000000..7b85cd4245
--- /dev/null
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/QueueData.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import DataView from "@/components/DataView.vue";
+import InlineThroughputGraph from "../queues/InlineThroughputGraph.vue";
+import QueueName from "./QueueName.vue";
+import type { Queue } from "@/resources/LicenseDetails";
+
+defineProps<{
+  queues: Queue[];
+  actionsComponent?: object;
+  additionalData?: object;
+}>();
+</script>
+
+<template>
+  <DataView v-if="queues" :data="queues" :items-per-page="100">
+    <template #data="{ pageData }">
+      <table class="table">
+        <thead>
+          <tr>
+            <th class="queue-name">Queue Name</th>
+            <th class="text-end">Throughput</th>
+            <th v-if="actionsComponent"></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="queue in pageData" :key="`${queue.nameHash}`">
+            <td class="queue-name">
+              <QueueName :queue="queue" />
+            </td>
+            <td class="text-end">
+              <div class="throughput">
+                <InlineThroughputGraph class="position-right" v-if="queue.details?.monthly_throughput?.length" :data="queue.details.monthly_throughput" />
+                {{ queue.details?.average_monthly_throughput?.toLocaleString() }}
+              </div>
+            </td>
+            <td v-if="actionsComponent">
+              <component :is="actionsComponent" :queue="queue" :additional-data="additionalData" />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </template>
+  </DataView>
+</template>
+
+<style scoped>
+.table {
+  width: 100%;
+}
+
+.table thead tr th {
+  background-color: transparent;
+}
+
+td:not(.queue-name),
+th:not(.queue-name) {
+  width: 0;
+}
+
+td {
+  padding-top: 0.1rem;
+  padding-bottom: 0.1rem;
+}
+
+td.queue-name {
+  display: flex;
+  gap: 3px;
+}
+
+.throughput {
+  display: flex;
+  justify-content: space-between;
+}
+</style>
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/QueueName.vue b/src/Frontend/src/views/throughputreport/licenseDetails/QueueName.vue
new file mode 100644
index 0000000000..2211ab5f99
--- /dev/null
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/QueueName.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { Queue } from "@/resources/LicenseDetails";
+import { faWarning } from "@fortawesome/free-solid-svg-icons";
+import ExclamationMark from "@/components/ExclamationMark.vue";
+import { WarningLevel } from "@/components/WarningLevel";
+
+defineProps<{ queue: Queue }>();
+</script>
+
+<template>
+  <div class="queue-name">
+    <span>
+      <span class="scope" v-if="queue.scope != null">{{ queue.scope }}</span>
+      <span class="name" v-if="queue.details">{{ queue.details.name }}</span>
+      <ExclamationMark v-else :icon="faWarning" :type="WarningLevel.Danger" title="A queue existed when the usage report for the last license was generated which no longer exists. Please contact Particular Support" />
+    </span>
+  </div>
+</template>
+
+<style scoped>
+.queue-name {
+  display: flex;
+  flex-direction: column;
+}
+
+.scope {
+  border: solid 1px #666;
+  border-radius: 4px;
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 13px;
+  padding: 2px;
+  margin-right: 4px;
+  white-space: nowrap;
+}
+
+.name {
+  overflow-wrap: anywhere;
+}
+</style>
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/UploadMetadata.vue b/src/Frontend/src/views/throughputreport/licenseDetails/UploadMetadata.vue
new file mode 100644
index 0000000000..f5824d1220
--- /dev/null
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/UploadMetadata.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import ActionButton from "@/components/ActionButton.vue";
+import { useLicenseDetailsStore } from "@/stores/LicenseDetailsStore";
+import { computed, ref } from "vue";
+
+const licenseDetailsStore = useLicenseDetailsStore();
+
+const file = ref<File>();
+const canUpload = computed(() => file.value);
+function enableUploadFile(event: Event) {
+  file.value = ((event.target as HTMLInputElement)?.files ?? [])[0];
+}
+
+const saving = ref(false);
+const uploadError = ref(false);
+async function handleSubmit() {
+  if (!file.value) return;
+
+  uploadError.value = false;
+  saving.value = true;
+  try {
+    await licenseDetailsStore.uploadEndpointMetadata(file.value);
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error(e);
+    uploadError.value = true;
+  } finally {
+    saving.value = false;
+  }
+}
+</script>
+
+<template>
+  <div class="box">
+    <span>Once you have an endpoint metadata file from Particular, upload it into ServiceControl here:</span>
+    <div class="alert alert-danger" role="alert" v-if="uploadError">Upload Failed!</div>
+    <form method="post" enctype="multipart/form-data" @submit.prevent="handleSubmit">
+      <div>
+        <input id="file-upload" type="file" class="form-control" accept=".plm" :onchange="enableUploadFile" :disabled="saving" />
+      </div>
+      <div class="mt-3">
+        <ActionButton variant="secondary" type="submit" id="submit-upload-files" :loading="saving" :disabled="!canUpload">Upload File</ActionButton>
+      </div>
+    </form>
+  </div>
+</template>
diff --git a/src/Frontend/src/views/throughputreport/licenseDetails/isLicenseDetailsSupported.ts b/src/Frontend/src/views/throughputreport/licenseDetails/isLicenseDetailsSupported.ts
new file mode 100644
index 0000000000..5eb415eb43
--- /dev/null
+++ b/src/Frontend/src/views/throughputreport/licenseDetails/isLicenseDetailsSupported.ts
@@ -0,0 +1,8 @@
+import useEnvironmentAndVersionsAutoRefresh from "@/composables/useEnvironmentAndVersionsAutoRefresh";
+
+export const minimumSCVersionForLicenseDetails = "6.19.0";
+
+export default function useIsLicenseDetailsSupported() {
+  const { store: environmentStore } = useEnvironmentAndVersionsAutoRefresh();
+  return environmentStore.serviceControlIsGreaterThan(minimumSCVersionForLicenseDetails);
+}
diff --git a/src/Frontend/src/views/throughputreport/endpoints/DetectedBrokerQueuesView.vue b/src/Frontend/src/views/throughputreport/queues/DetectedBrokerQueuesView.vue
similarity index 88%
rename from src/Frontend/src/views/throughputreport/endpoints/DetectedBrokerQueuesView.vue
rename to src/Frontend/src/views/throughputreport/queues/DetectedBrokerQueuesView.vue
index 26c1fb4efe..56914f305b 100644
--- a/src/Frontend/src/views/throughputreport/endpoints/DetectedBrokerQueuesView.vue
+++ b/src/Frontend/src/views/throughputreport/queues/DetectedBrokerQueuesView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import DetectedListView from "@/views/throughputreport/endpoints/DetectedListView.vue";
-import { DataSource } from "@/views/throughputreport/endpoints/dataSource";
-import { UserIndicator } from "@/views/throughputreport/endpoints/userIndicator";
+import DetectedListView from "@/views/throughputreport/queues/DetectedListView.vue";
+import { DataSource } from "@/views/throughputreport/queues/dataSource";
+import { UserIndicator } from "@/views/throughputreport/queues/userIndicator";
 import routeLinks from "@/router/routeLinks";
 import { storeToRefs } from "pinia";
 import FAIcon from "@/components/FAIcon.vue";
diff --git a/src/Frontend/src/views/throughputreport/endpoints/DetectedEndpointsView.vue b/src/Frontend/src/views/throughputreport/queues/DetectedEndpointsView.vue
similarity index 88%
rename from src/Frontend/src/views/throughputreport/endpoints/DetectedEndpointsView.vue
rename to src/Frontend/src/views/throughputreport/queues/DetectedEndpointsView.vue
index 9366e44294..a6d3b91e40 100644
--- a/src/Frontend/src/views/throughputreport/endpoints/DetectedEndpointsView.vue
+++ b/src/Frontend/src/views/throughputreport/queues/DetectedEndpointsView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import DetectedListView from "@/views/throughputreport/endpoints/DetectedListView.vue";
-import { DataSource } from "@/views/throughputreport/endpoints/dataSource";
-import { UserIndicator } from "@/views/throughputreport/endpoints/userIndicator";
+import DetectedListView from "@/views/throughputreport/queues/DetectedListView.vue";
+import { DataSource } from "@/views/throughputreport/queues/dataSource";
+import { UserIndicator } from "@/views/throughputreport/queues/userIndicator";
 import routeLinks from "@/router/routeLinks";
 import { storeToRefs } from "pinia";
 import FAIcon from "@/components/FAIcon.vue";
diff --git a/src/Frontend/src/views/throughputreport/endpoints/DetectedListView.spec.ts b/src/Frontend/src/views/throughputreport/queues/DetectedListView.spec.ts
similarity index 81%
rename from src/Frontend/src/views/throughputreport/endpoints/DetectedListView.spec.ts
rename to src/Frontend/src/views/throughputreport/queues/DetectedListView.spec.ts
index 1709c4d031..fd18085709 100644
--- a/src/Frontend/src/views/throughputreport/endpoints/DetectedListView.spec.ts
+++ b/src/Frontend/src/views/throughputreport/queues/DetectedListView.spec.ts
@@ -4,9 +4,9 @@ import { Transport } from "@/views/throughputreport/transport";
 import { makeDriverForTests, render, screen, userEvent } from "@component-test-utils";
 import type { Driver, SetupFactoryOptions } from "../../../../test/driver";
 import { disableMonitoring } from "../../../../test/drivers/vitest/setup";
-import DetectedListView, { type DetectedListViewProps } from "@/views/throughputreport/endpoints/DetectedListView.vue";
-import { DataSource } from "@/views/throughputreport/endpoints/dataSource";
-import { UserIndicator } from "@/views/throughputreport/endpoints/userIndicator";
+import DetectedListView, { type DetectedListViewProps } from "@/views/throughputreport/queues/DetectedListView.vue";
+import { DataSource } from "@/views/throughputreport/queues/dataSource";
+import { UserIndicator } from "@/views/throughputreport/queues/userIndicator";
 import { within } from "@testing-library/vue";
 import type UpdateUserIndicator from "@/resources/UpdateUserIndicator";
 import { serviceControlWithThroughput } from "@/views/throughputreport/serviceControlWithThroughput";
@@ -62,8 +62,8 @@ describe("DetectedListView tests", () => {
       await renderComponent({}, async (driver) => {
         await driver.setUp(
           precondition.hasLicensingEndpoints([
-            { name: "I am a queue", is_known_endpoint: false, user_indicator: "", max_daily_throughput: 10 },
-            { name: "I am an endpoint", is_known_endpoint: true, user_indicator: "", max_daily_throughput: 100 },
+            { name: "I am a queue", name_hash: "", is_known_endpoint: false, user_indicator: "", max_daily_throughput: 10 },
+            { name: "I am an endpoint", name_hash: "", is_known_endpoint: true, user_indicator: "", max_daily_throughput: 100 },
           ])
         );
       });
@@ -76,8 +76,8 @@ describe("DetectedListView tests", () => {
       await renderComponent({ source: DataSource.WellKnownEndpoint }, async (driver) => {
         await driver.setUp(
           precondition.hasLicensingEndpoints([
-            { name: "I am a queue", is_known_endpoint: false, user_indicator: "", max_daily_throughput: 10 },
-            { name: "I am an endpoint", is_known_endpoint: true, user_indicator: "", max_daily_throughput: 100 },
+            { name: "I am a queue", name_hash: "", is_known_endpoint: false, user_indicator: "", max_daily_throughput: 10 },
+            { name: "I am an endpoint", name_hash: "", is_known_endpoint: true, user_indicator: "", max_daily_throughput: 100 },
           ])
         );
       });
@@ -104,9 +104,9 @@ describe("DetectedListView tests", () => {
       await renderComponent({ source: DataSource.WellKnownEndpoint }, async (driver) => {
         await driver.setUp(
           precondition.hasLicensingEndpoints([
-            ...[...Array(10).keys()].map((i) => ({ name: `Alpha${i}`, is_known_endpoint: true, user_indicator: "", max_daily_throughput: i })),
-            ...[...Array(10).keys()].map((i) => ({ name: `${i}Beta`, is_known_endpoint: true, user_indicator: "", max_daily_throughput: i })),
-            ...[...Array(10).keys()].map((i) => ({ name: `${i}Delta${i}`, is_known_endpoint: true, user_indicator: "", max_daily_throughput: i })),
+            ...[...Array(10).keys()].map((i) => ({ name: `Alpha${i}`, name_hash: "", is_known_endpoint: true, user_indicator: "", max_daily_throughput: i })),
+            ...[...Array(10).keys()].map((i) => ({ name: `${i}Beta`, name_hash: "", is_known_endpoint: true, user_indicator: "", max_daily_throughput: i })),
+            ...[...Array(10).keys()].map((i) => ({ name: `${i}Delta${i}`, name_hash: "", is_known_endpoint: true, user_indicator: "", max_daily_throughput: i })),
           ])
         );
       });
@@ -141,9 +141,9 @@ describe("DetectedListView tests", () => {
       await renderComponent({ source: DataSource.Broker, indicatorOptions: [UserIndicator.NServiceBusEndpoint] }, async (driver) => {
         await driver.setUp(
           precondition.hasLicensingEndpoints([
-            ...[...Array(10).keys()].map((i) => ({ name: `Alpha${i}`, is_known_endpoint: false, user_indicator: "", max_daily_throughput: i })),
-            ...[...Array(10).keys()].map((i) => ({ name: `${i}Beta`, is_known_endpoint: false, user_indicator: UserIndicator.NServiceBusEndpoint, max_daily_throughput: i })),
-            ...[...Array(10).keys()].map((i) => ({ name: `${i}Delta${i}`, is_known_endpoint: false, user_indicator: "", max_daily_throughput: i })),
+            ...[...Array(10).keys()].map((i) => ({ name: `Alpha${i}`, name_hash: "", is_known_endpoint: false, user_indicator: "", max_daily_throughput: i })),
+            ...[...Array(10).keys()].map((i) => ({ name: `${i}Beta`, name_hash: "", is_known_endpoint: false, user_indicator: UserIndicator.NServiceBusEndpoint, max_daily_throughput: i })),
+            ...[...Array(10).keys()].map((i) => ({ name: `${i}Delta${i}`, name_hash: "", is_known_endpoint: false, user_indicator: "", max_daily_throughput: i })),
           ])
         );
       });
@@ -163,10 +163,10 @@ describe("DetectedListView tests", () => {
       await renderComponent({ source: DataSource.Broker, indicatorOptions: [UserIndicator.NServiceBusEndpoint], ariaLabel: tableName }, async (driver) => {
         await driver.setUp(
           precondition.hasLicensingEndpoints([
-            ...[...Array(5).keys()].map((i) => ({ name: `${i}Beta`, is_known_endpoint: false, user_indicator: UserIndicator.PlannedToDecommission, max_daily_throughput: i })),
-            ...[...Array(8).keys()].map((i) => ({ name: `${i}Beta`, is_known_endpoint: false, user_indicator: UserIndicator.PlannedToDecommission, max_daily_throughput: i })),
-            ...[...Array(2).keys()].map((i) => ({ name: `${i}Delta${i}`, is_known_endpoint: false, user_indicator: UserIndicator.PlannedToDecommission, max_daily_throughput: i })),
-            { name: "boo", is_known_endpoint: false, user_indicator: "", max_daily_throughput: 11 },
+            ...[...Array(5).keys()].map((i) => ({ name: `${i}Beta`, name_hash: "", is_known_endpoint: false, user_indicator: UserIndicator.PlannedToDecommission, max_daily_throughput: i })),
+            ...[...Array(8).keys()].map((i) => ({ name: `${i}Beta`, name_hash: "", is_known_endpoint: false, user_indicator: UserIndicator.PlannedToDecommission, max_daily_throughput: i })),
+            ...[...Array(2).keys()].map((i) => ({ name: `${i}Delta${i}`, name_hash: "", is_known_endpoint: false, user_indicator: UserIndicator.PlannedToDecommission, max_daily_throughput: i })),
+            { name: "boo", name_hash: "", is_known_endpoint: false, user_indicator: "", max_daily_throughput: 11 },
           ])
         );
       });
@@ -193,7 +193,9 @@ describe("DetectedListView tests", () => {
       const dataLength = 5;
 
       await renderComponent({ source: DataSource.Broker, indicatorOptions: [UserIndicator.NServiceBusEndpoint], ariaLabel: tableName }, async (driver) => {
-        await driver.setUp(precondition.hasLicensingEndpoints([...[...Array(dataLength).keys()].map((i) => ({ name: `${i}Beta`, is_known_endpoint: false, user_indicator: UserIndicator.PlannedToDecommission, max_daily_throughput: i }))]));
+        await driver.setUp(
+          precondition.hasLicensingEndpoints([...[...Array(dataLength).keys()].map((i) => ({ name: `${i}Beta`, name_hash: "", is_known_endpoint: false, user_indicator: UserIndicator.PlannedToDecommission, max_daily_throughput: i }))])
+        );
       });
 
       const user = userEvent.setup();
@@ -243,7 +245,7 @@ describe("DetectedListView tests", () => {
       ];
 
       await renderComponent({ source: DataSource.Broker, indicatorOptions: [UserIndicator.NServiceBusEndpoint], ariaLabel: tableName }, async (driver) => {
-        await driver.setUp(precondition.hasLicensingEndpoints([...[...unsortedNames].map((name, idx) => ({ name, is_known_endpoint: false, user_indicator: UserIndicator.PlannedToDecommission, max_daily_throughput: idx }))]));
+        await driver.setUp(precondition.hasLicensingEndpoints([...[...unsortedNames].map((name, idx) => ({ name, name_hash: "", is_known_endpoint: false, user_indicator: UserIndicator.PlannedToDecommission, max_daily_throughput: idx }))]));
       });
 
       const user = userEvent.setup();
@@ -294,8 +296,8 @@ describe("DetectedListView tests", () => {
       const { driver } = await renderComponent({ source: DataSource.Broker, indicatorOptions: [UserIndicator.PlannedToDecommission, UserIndicator.NServiceBusEndpoint], ariaLabel: tableName }, async (driver) => {
         await driver.setUp(
           precondition.hasLicensingEndpoints([
-            { name: `Not set yet`, is_known_endpoint: false, user_indicator: "", max_daily_throughput: 100 },
-            { name: `Set and needs updating`, is_known_endpoint: false, user_indicator: UserIndicator.PlannedToDecommission, max_daily_throughput: 50 },
+            { name: `Not set yet`, name_hash: "", is_known_endpoint: false, user_indicator: "", max_daily_throughput: 100 },
+            { name: `Set and needs updating`, name_hash: "", is_known_endpoint: false, user_indicator: UserIndicator.PlannedToDecommission, max_daily_throughput: 50 },
           ])
         );
         await driver.setUp(updateLicensingEndpoints());
@@ -307,8 +309,8 @@ describe("DetectedListView tests", () => {
 
       await driver.setUp(
         precondition.hasLicensingEndpoints([
-          { name: `Not set yet`, is_known_endpoint: false, user_indicator: UserIndicator.NServiceBusEndpoint, max_daily_throughput: 100 },
-          { name: `Set and needs updating`, is_known_endpoint: false, user_indicator: UserIndicator.NServiceBusEndpoint, max_daily_throughput: 50 },
+          { name: `Not set yet`, name_hash: "", is_known_endpoint: false, user_indicator: UserIndicator.NServiceBusEndpoint, max_daily_throughput: 100 },
+          { name: `Set and needs updating`, name_hash: "", is_known_endpoint: false, user_indicator: UserIndicator.NServiceBusEndpoint, max_daily_throughput: 50 },
         ])
       );
 
diff --git a/src/Frontend/src/views/throughputreport/endpoints/DetectedListView.vue b/src/Frontend/src/views/throughputreport/queues/DetectedListView.vue
similarity index 84%
rename from src/Frontend/src/views/throughputreport/endpoints/DetectedListView.vue
rename to src/Frontend/src/views/throughputreport/queues/DetectedListView.vue
index 210f76dc0e..bcfd01c6e9 100644
--- a/src/Frontend/src/views/throughputreport/endpoints/DetectedListView.vue
+++ b/src/Frontend/src/views/throughputreport/queues/DetectedListView.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import type EndpointThroughputSummary from "@/resources/EndpointThroughputSummary";
-import { UserIndicator } from "@/views/throughputreport/endpoints/userIndicator";
+import type QueueThroughputSummary from "@/resources/QueueThroughputSummary.ts";
+import { UserIndicator } from "@/views/throughputreport/queues/userIndicator.ts";
 import DropDown, { type Item } from "@/components/DropDown.vue";
 import { computed, onMounted, reactive, ref, watch } from "vue";
 import createThroughputClient from "@/views/throughputreport/throughputClient";
 import type UpdateUserIndicator from "@/resources/UpdateUserIndicator";
 import { TYPE } from "vue-toastification";
-import { DataSource } from "@/views/throughputreport/endpoints/dataSource";
-import { userIndicatorMapper } from "./userIndicatorMapper";
+import { DataSource } from "@/views/throughputreport/queues/dataSource.ts";
+import { userIndicatorMapper } from "./userIndicatorMapper.ts";
 import ConfirmDialog from "@/components/ConfirmDialog.vue";
 import { useShowToast } from "@/composables/toast";
 import ResultsCount from "@/components/ResultsCount.vue";
-import { useHiddenFeature } from "./useHiddenFeature";
+import { useHiddenFeature } from "./useHiddenFeature.ts";
 import FAIcon from "@/components/FAIcon.vue";
 import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
 import { useLicenseStore } from "@/stores/LicenseStore";
@@ -26,13 +26,13 @@ enum NameFilterType {
 interface SortData {
   text: string;
   value: string;
-  comparer: (a: EndpointThroughputSummary, b: EndpointThroughputSummary) => number;
+  comparer: (a: QueueThroughputSummary, b: QueueThroughputSummary) => number;
 }
 
 const sortData: SortData[] = [
-  { text: "name", comparer: (a: EndpointThroughputSummary, b: EndpointThroughputSummary) => a.name.localeCompare(b.name) },
-  { text: "throughput", comparer: (a: EndpointThroughputSummary, b: EndpointThroughputSummary) => a.max_daily_throughput - b.max_daily_throughput },
-  { text: "endpoint type", comparer: (a: EndpointThroughputSummary, b: EndpointThroughputSummary) => a.user_indicator.localeCompare(b.user_indicator) },
+  { text: "name", comparer: (a: QueueThroughputSummary, b: QueueThroughputSummary) => a.name.localeCompare(b.name) },
+  { text: "throughput", comparer: (a: QueueThroughputSummary, b: QueueThroughputSummary) => a.max_daily_throughput - b.max_daily_throughput },
+  { text: "endpoint type", comparer: (a: QueueThroughputSummary, b: QueueThroughputSummary) => a.user_indicator.localeCompare(b.user_indicator) },
 ].flatMap((item) => {
   return [
     { text: item.text, value: item.text, comparer: item.comparer },
@@ -50,7 +50,7 @@ export interface DetectedListViewProps {
 
 const props = defineProps<DetectedListViewProps>();
 
-const data = ref<EndpointThroughputSummary[]>([]);
+const data = ref<QueueThroughputSummary[]>([]);
 const dataChanges = ref(new Map<string, { indicator: string }>());
 const filterData = reactive({ name: "", nameFilterType: NameFilterType.beginsWith, sort: "name", showUnsetOnly: false });
 
@@ -58,9 +58,9 @@ const licenseStore = useLicenseStore();
 const { license } = licenseStore;
 
 const filterNameOptions = [
-  { text: NameFilterType.beginsWith, filter: (a: EndpointThroughputSummary) => a.name.toLowerCase().startsWith(filterData.name.toLowerCase()) },
-  { text: NameFilterType.contains, filter: (a: EndpointThroughputSummary) => a.name.toLowerCase().includes(filterData.name.toLowerCase()) },
-  { text: NameFilterType.endsWith, filter: (a: EndpointThroughputSummary) => a.name.toLowerCase().endsWith(filterData.name.toLowerCase()) },
+  { text: NameFilterType.beginsWith, filter: (a: QueueThroughputSummary) => a.name.toLowerCase().startsWith(filterData.name.toLowerCase()) },
+  { text: NameFilterType.contains, filter: (a: QueueThroughputSummary) => a.name.toLowerCase().includes(filterData.name.toLowerCase()) },
+  { text: NameFilterType.endsWith, filter: (a: QueueThroughputSummary) => a.name.toLowerCase().endsWith(filterData.name.toLowerCase()) },
 ];
 const filteredData = computed(() => {
   const sortItem = sortData.find((value) => value.value === filterData.sort);
@@ -76,8 +76,8 @@ const filteredData = computed(() => {
     .sort(sortItem?.comparer);
 });
 // We can remove this hidden toggle once we have new edition licenses.
-const hiddenFeatureToggle = useHiddenFeature(["ArrowUp", "ArrowUp", "ArrowDown", "ArrowDown"]);
-const showMonthly = computed(() => license.edition === "MonthlyUsage" || hiddenFeatureToggle.value);
+const hiddenFeatureToggle = useHiddenFeature(["ArrowUp", "ArrowUp", "ArrowDown", "ArrowDown", "m"]);
+const showMonthly = computed(() => license.edition === "Endpoint Size" || hiddenFeatureToggle.value);
 
 const throughputClient = createThroughputClient();
 
@@ -105,7 +105,7 @@ function proceedWithChangesWarning() {
 }
 
 async function loadData() {
-  const results = await throughputClient.endpoints();
+  const results = await throughputClient.queues();
 
   data.value = results.filter((row) => row.is_known_endpoint === (props.source === DataSource.WellKnownEndpoint));
 }
@@ -153,7 +153,7 @@ function showUnsetChanged(event: Event) {
 
 const bulkOperation = ref<UserIndicator>(UserIndicator.NServiceBusEndpoint);
 
-function getDefaultEndpointType(row: EndpointThroughputSummary) {
+function getDefaultEndpointType(row: QueueThroughputSummary) {
   if (row.is_known_endpoint) {
     return UserIndicator.NServiceBusEndpoint.toString();
   }
@@ -236,7 +236,7 @@ async function save() {
     <thead>
       <tr>
         <th scope="col">{{ props.columnTitle }}</th>
-        <th v-if="showMonthly" scope="col" class="text-end formatThroughputColumn">Highest monthly throughput <FAIcon :icon="faInfoCircle" class="text-primary" v-tippy="'In the last 12 months'" /></th>
+        <th v-if="showMonthly" scope="col" class="text-end formatThroughputColumn">Average monthly throughput <FAIcon :icon="faInfoCircle" class="text-primary" v-tippy="'In the last 12 months'" /></th>
         <th v-else scope="col" class="text-end formatThroughputColumn">Maximum daily throughput <FAIcon :icon="faInfoCircle" class="text-primary" v-tippy="'In the last 12 months'" /></th>
         <th scope="col">Endpoint Type <FAIcon :icon="faInfoCircle" class="text-primary" v-tippy="'Pick the most correct option'" /></th>
       </tr>
@@ -252,7 +252,7 @@ async function save() {
             {{ row.name }}
           </div>
         </td>
-        <td v-if="showMonthly" class="col text-end formatThroughputColumn" style="width: 250px" aria-label="maximum usage throughput">{{ row.max_monthly_throughput ? row.max_monthly_throughput.toLocaleString() : "0" }}</td>
+        <td v-if="showMonthly" class="col text-end formatThroughputColumn" style="width: 250px" aria-label="average monthly throughput">{{ row.average_monthly_throughput ? row.average_monthly_throughput.toLocaleString() : "0" }}</td>
         <td v-else class="col text-end formatThroughputColumn" style="width: 250px" aria-label="maximum usage throughput">{{ row.max_daily_throughput.toLocaleString() }}</td>
         <td class="col" style="width: 350px" aria-label="endpoint type">
           <select class="form-select endpointType format-text" @change="(event) => updateIndicator(event, row.name)">
diff --git a/src/Frontend/src/views/throughputreport/endpoints/InlineThroughputGraph.vue b/src/Frontend/src/views/throughputreport/queues/InlineThroughputGraph.vue
similarity index 88%
rename from src/Frontend/src/views/throughputreport/endpoints/InlineThroughputGraph.vue
rename to src/Frontend/src/views/throughputreport/queues/InlineThroughputGraph.vue
index 3281f4cc5e..99c93d9ff5 100644
--- a/src/Frontend/src/views/throughputreport/endpoints/InlineThroughputGraph.vue
+++ b/src/Frontend/src/views/throughputreport/queues/InlineThroughputGraph.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import ThroughputGraph from "./ThroughputGraph.vue";
-import type { MonthlyThroughput } from "@/resources/EndpointThroughputSummary.ts";
+import type { MonthlyThroughput } from "@/resources/QueueThroughputSummary.ts";
 import FAIcon from "@/components/FAIcon.vue";
 import { faLineChart } from "@fortawesome/free-solid-svg-icons";
 
@@ -47,6 +47,11 @@ const showContent = ref(false);
   box-shadow: 1px 2px 3px hsl(var(--shadow-color));
 }
 
+.position-right .graph {
+  left: unset;
+  right: 20%;
+}
+
 .graph-container:hover .graph,
 .graph-container.showContent .graph,
 .graph-container:has(svg:focus) .graph {
diff --git a/src/Frontend/src/views/throughputreport/endpoints/ThroughputGraph.vue b/src/Frontend/src/views/throughputreport/queues/ThroughputGraph.vue
similarity index 87%
rename from src/Frontend/src/views/throughputreport/endpoints/ThroughputGraph.vue
rename to src/Frontend/src/views/throughputreport/queues/ThroughputGraph.vue
index afd23f7927..af311ed1f3 100644
--- a/src/Frontend/src/views/throughputreport/endpoints/ThroughputGraph.vue
+++ b/src/Frontend/src/views/throughputreport/queues/ThroughputGraph.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { MonthlyThroughput } from "@/resources/EndpointThroughputSummary";
+import type { MonthlyThroughput } from "@/resources/QueueThroughputSummary";
 import { computed } from "vue";
 
 const props = defineProps<{ data: MonthlyThroughput[] }>();
@@ -43,12 +43,12 @@ const dots = computed(() =>
 <template>
   <div class="graph" :style="{ '--pips': reportPeriod.length * 2 }">
     <div class="graph-content">
-      <svg class="graph-content" :viewBox="`-0.2 -0.03 ${reportPeriod.length * 2 + 0.1} 1.07`" preserveAspectRatio="none">
+      <svg class="graph-content" :viewBox="`-0.3 -0.07 ${reportPeriod.length * 2 + 0.1} 1.15`" preserveAspectRatio="none">
         <line v-for="({ x1, y1, x2, y2, isPartMonth }, i) in lines" :key="i" :x1="x1 * 2" :y1="y1" :x2="x2 * 2" :y2="y2" stroke="var(--bs-primary)" stroke-width="1" :stroke-dasharray="isPartMonth ? 4 : 0" vector-effect="non-scaling-stroke" />
         <line v-for="(_, pip) in reportPeriod" :key="pip" :x1="pip * 2" y1="1.07" :x2="pip * 2" y2="1" stroke="var(--bs-body-color)" stroke-width="1" vector-effect="non-scaling-stroke" />
         <g v-for="{ pip, value } in dots" :key="pip">
           <title>{{ value.toLocaleString() }}</title>
-          <path r="1" :cx="pip * 2" :cy="1 - value / maxValue" :d="`M ${pip * 2} ${1 - value / maxValue} l 0.0001 0`" vector-effect="non-scaling-stroke" stroke-width="5" stroke-linecap="round" :stroke="value === 0 ? 'red' : 'var(--bs-primary)'" />
+          <path :d="`M ${pip * 2} ${1 - value / maxValue} l 0.0001 0`" vector-effect="non-scaling-stroke" stroke-width="7.5" stroke-linecap="round" :stroke="value === 0 ? 'red' : 'var(--bs-primary)'" />
         </g>
       </svg>
       <div class="y-axis">
diff --git a/src/Frontend/src/views/throughputreport/endpoints/dataSource.ts b/src/Frontend/src/views/throughputreport/queues/dataSource.ts
similarity index 100%
rename from src/Frontend/src/views/throughputreport/endpoints/dataSource.ts
rename to src/Frontend/src/views/throughputreport/queues/dataSource.ts
diff --git a/src/Frontend/src/views/throughputreport/endpoints/useHiddenFeature.ts b/src/Frontend/src/views/throughputreport/queues/useHiddenFeature.ts
similarity index 100%
rename from src/Frontend/src/views/throughputreport/endpoints/useHiddenFeature.ts
rename to src/Frontend/src/views/throughputreport/queues/useHiddenFeature.ts
diff --git a/src/Frontend/src/views/throughputreport/endpoints/userIndicator.ts b/src/Frontend/src/views/throughputreport/queues/userIndicator.ts
similarity index 100%
rename from src/Frontend/src/views/throughputreport/endpoints/userIndicator.ts
rename to src/Frontend/src/views/throughputreport/queues/userIndicator.ts
diff --git a/src/Frontend/src/views/throughputreport/endpoints/userIndicatorMapper.ts b/src/Frontend/src/views/throughputreport/queues/userIndicatorMapper.ts
similarity index 89%
rename from src/Frontend/src/views/throughputreport/endpoints/userIndicatorMapper.ts
rename to src/Frontend/src/views/throughputreport/queues/userIndicatorMapper.ts
index 09f5c8d0df..7ae3d57da1 100644
--- a/src/Frontend/src/views/throughputreport/endpoints/userIndicatorMapper.ts
+++ b/src/Frontend/src/views/throughputreport/queues/userIndicatorMapper.ts
@@ -1,4 +1,4 @@
-import { UserIndicator } from "@/views/throughputreport/endpoints/userIndicator";
+import { UserIndicator } from "@/views/throughputreport/queues/userIndicator";
 
 export const userIndicatorMapper = new Map<UserIndicator, string>([
   [UserIndicator.NServiceBusEndpoint, "NServiceBus Endpoint"],
diff --git a/src/Frontend/src/views/throughputreport/throughputClient.ts b/src/Frontend/src/views/throughputreport/throughputClient.ts
index 704d815c56..973347b50a 100644
--- a/src/Frontend/src/views/throughputreport/throughputClient.ts
+++ b/src/Frontend/src/views/throughputreport/throughputClient.ts
@@ -1,4 +1,4 @@
-import type EndpointThroughputSummary from "@/resources/EndpointThroughputSummary";
+import type QueueThroughputSummary from "@/resources/QueueThroughputSummary";
 import type UpdateUserIndicator from "@/resources/UpdateUserIndicator";
 import type ConnectionTestResults from "@/resources/ConnectionTestResults";
 import type ThroughputConnectionSettings from "@/resources/ThroughputConnectionSettings";
@@ -10,8 +10,8 @@ import serviceControlClient from "@/components/serviceControlClient";
 class ThroughputClient {
   constructor(readonly basePath: string) {}
 
-  public async endpoints() {
-    const [, data] = await serviceControlClient.fetchTypedFromServiceControl<EndpointThroughputSummary[]>(`${this.basePath}/endpoints`);
+  public async queues() {
+    const [, data] = await serviceControlClient.fetchTypedFromServiceControl<QueueThroughputSummary[]>(`${this.basePath}/endpoints`);
 
     return data;
   }
diff --git a/src/Frontend/test/preconditions/hasLicensingEndpoints.ts b/src/Frontend/test/preconditions/hasLicensingEndpoints.ts
index c4131a96d8..c2e810a751 100644
--- a/src/Frontend/test/preconditions/hasLicensingEndpoints.ts
+++ b/src/Frontend/test/preconditions/hasLicensingEndpoints.ts
@@ -1,10 +1,10 @@
 import type { SetupFactoryOptions } from "../driver";
-import type EndpointThroughputSummary from "@/resources/EndpointThroughputSummary";
+import type QueueThroughputSummary from "@/resources/QueueThroughputSummary";
 
 export const hasLicensingEndpoints =
   (
-    body: EndpointThroughputSummary[] = [
-      <EndpointThroughputSummary>{
+    body: QueueThroughputSummary[] = [
+      <QueueThroughputSummary>{
         name: "Sender",
         is_known_endpoint: true,
         user_indicator: "",