diff --git a/ui/app/components/job-status/panel/deploying.hbs b/ui/app/components/job-status/panel/deploying.hbs
index 3cea5faf8..14f09360e 100644
--- a/ui/app/components/job-status/panel/deploying.hbs
+++ b/ui/app/components/job-status/panel/deploying.hbs
@@ -65,7 +65,28 @@
 
       <div class="deployment-allocations">
         {{#if this.oldVersionAllocBlockIDs.length}}
-          <h4 class="title is-5" data-test-old-allocation-tally>Previous allocations: {{#if this.oldVersionAllocBlocks.running}}{{this.oldRunningHealthyAllocBlocks.length}} running{{/if}}</h4>
+          <h4 class="title is-5 previous-allocations-heading" data-test-old-allocation-tally>
+            <span>
+              Previous allocations: {{#if this.oldVersionAllocBlocks.running}}{{this.oldRunningHealthyAllocBlocks.length}} running{{/if}}
+            </span>
+
+            <section class="versions">
+              <ul>
+                {{#each this.oldVersions as |versionObj|}}
+                  <li>
+                    <LinkTo data-version={{versionObj.version}} @route="jobs.job.allocations" @model={{@job}} @query={{hash version=(concat '[' versionObj.version ']')    status=(concat '["running", "pending", "failed"]')         }}>
+                      {{#if (eq versionObj.version "unknown")}}
+                        <Hds::Badge @text="unknown" class="version-label" />
+                      {{else}}
+                        <Hds::Badge @text={{concat "v" versionObj.version}} class="version-label" />
+                      {{/if}}
+                      <Hds::Badge @text={{versionObj.allocations.length}} class="version-count" />
+                    </LinkTo>
+                  </li>
+                {{/each}}
+              </ul>
+            </section>
+          </h4>
           <div class="previous-allocations">
             <JobStatus::AllocationStatusRow @allocBlocks={{this.oldVersionAllocBlocks}} @steady={{true}} />
           </div>
@@ -84,7 +105,13 @@
 
         {{/if}}
 
-        <h4 class="title is-5" data-test-new-allocation-tally>New allocations: {{this.newRunningHealthyAllocBlocks.length}}/{{this.totalAllocs}} running and healthy</h4>
+        <h4 class="title is-5" data-test-new-allocation-tally><span>New allocations: {{this.newRunningHealthyAllocBlocks.length}}/{{this.totalAllocs}} running and healthy</span>
+          <span class="versions">
+          <LinkTo data-version={{@job.version}} @route="jobs.job.allocations" @model={{@job}} @query={{hash version=(concat '[' @job.version ']')}}>
+            <Hds::Badge @text={{concat "v" @job.version}} class="version-label" />
+          </LinkTo>
+          </span>
+        </h4>
         <div class="new-allocations">
           <JobStatus::AllocationStatusRow @allocBlocks={{this.newVersionAllocBlocks}} />
         </div>
diff --git a/ui/app/components/job-status/panel/deploying.js b/ui/app/components/job-status/panel/deploying.js
index 759e5dada..e544abdbc 100644
--- a/ui/app/components/job-status/panel/deploying.js
+++ b/ui/app/components/job-status/panel/deploying.js
@@ -254,4 +254,48 @@ export default class JobStatusPanelDeployingComponent extends Component {
   get deploymentIsAutoPromoted() {
     return this.job.latestDeployment?.get('isAutoPromoted');
   }
+
+  get oldVersions() {
+    const oldVersions = Object.values(this.oldRunningHealthyAllocBlocks)
+      .map((a) => (!isNaN(a?.jobVersion) ? a.jobVersion : 'unknown')) // "starting" allocs, GC'd allocs, etc. do not have a jobVersion
+      .sort((a, b) => a - b)
+      .reduce((result, item) => {
+        const existingVersion = result.find((v) => v.version === item);
+        if (existingVersion) {
+          existingVersion.allocations.push(item);
+        } else {
+          result.push({ version: item, allocations: [item] });
+        }
+        return result;
+      }, []);
+
+    return oldVersions;
+  }
+
+  get newVersions() {
+    // Note: it's probably safe to assume all new allocs have the latest job version, but
+    // let's map just in case there's ever a situation with multiple job versions going out
+    // in a deployment for some reason
+    const newVersions = Object.values(this.newVersionAllocBlocks)
+      .flatMap((allocType) => Object.values(allocType))
+      .flatMap((allocHealth) => Object.values(allocHealth))
+      .flatMap((allocCanary) => Object.values(allocCanary))
+      .filter((a) => a.jobVersion && a.jobVersion !== 'unknown')
+      .map((a) => a.jobVersion)
+      .sort((a, b) => a - b)
+      .reduce((result, item) => {
+        const existingVersion = result.find((v) => v.version === item);
+        if (existingVersion) {
+          existingVersion.allocations.push(item);
+        } else {
+          result.push({ version: item, allocations: [item] });
+        }
+        return result;
+      }, []);
+    return newVersions;
+  }
+
+  get versions() {
+    return [...this.oldVersions, ...this.newVersions];
+  }
 }
diff --git a/ui/app/components/job-status/panel/steady.hbs b/ui/app/components/job-status/panel/steady.hbs
index 2402d1fd0..4ac134844 100644
--- a/ui/app/components/job-status/panel/steady.hbs
+++ b/ui/app/components/job-status/panel/steady.hbs
@@ -79,11 +79,11 @@
               <li>
                 <LinkTo data-version={{versionObj.version}} @route="jobs.job.allocations" @model={{@job}} @query={{hash version=(concat '[' versionObj.version ']')    status=(concat '["running", "pending", "failed"]')         }}>
                   {{#if (eq versionObj.version "unknown")}}
-                    <Hds::Badge @text="unknown" />
+                    <Hds::Badge @text="unknown" @type="filled" class="version-label" />
                   {{else}}
-                    <Hds::Badge @text={{concat "v" versionObj.version}} />
+                    <Hds::Badge @text={{concat "v" versionObj.version}} @type="filled" class="version-label" />
                   {{/if}}
-                  <Hds::BadgeCount @text={{versionObj.allocations.length}} @type="inverted" />
+                  <Hds::Badge @text={{versionObj.allocations.length}} @type="filled" class="version-count" />
                 </LinkTo>
               </li>
             {{/each}}
diff --git a/ui/app/styles/components/job-status-panel.scss b/ui/app/styles/components/job-status-panel.scss
index 3c2e6810c..1c4c81900 100644
--- a/ui/app/styles/components/job-status-panel.scss
+++ b/ui/app/styles/components/job-status-panel.scss
@@ -86,6 +86,15 @@
 
       & > h4 {
         margin-bottom: -0.5rem;
+        display: grid;
+        grid-template-columns: auto 1fr;
+        gap: 0.5rem;
+
+        & > .versions > ul {
+          grid-template-columns: unset;
+          grid-auto-columns: min-content;
+          grid-auto-flow: column;
+        }
       }
     }
 
@@ -94,6 +103,35 @@
     }
   }
 
+  .versions {
+    & > ul {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, 100px);
+      gap: 0.5rem;
+      & > li {
+        white-space: nowrap;
+      }
+      a {
+        text-decoration: none;
+      }
+    }
+    .version-label {
+      position: relative;
+      z-index: 2;
+      & > .hds-badge__text {
+        font-weight: 700;
+      }
+    }
+    .version-count {
+      color: $blue;
+      position: relative;
+      z-index: 1;
+      left: -1rem;
+      padding-left: 1rem;
+      background-color: var(--token-color-surface-faint);
+    }
+  }
+
   .legend-and-summary {
     // grid-area: legend-and-summary;
     // TODO: may revisit this grid-area later, but is currently used in 2 competing ways
@@ -116,19 +154,6 @@
       grid-auto-rows: max-content;
       gap: 0.5rem;
     }
-    .versions {
-      & > ul {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, 100px);
-        gap: 0.5rem;
-        & > li {
-          white-space: nowrap;
-          & a {
-            text-decoration: none;
-          }
-        }
-      }
-    }
     .latest-deployment {
       h4 svg {
         position: relative;
diff --git a/ui/tests/integration/components/job-status-panel-test.js b/ui/tests/integration/components/job-status-panel-test.js
index 54c37ddff..0c272e46d 100644
--- a/ui/tests/integration/components/job-status-panel-test.js
+++ b/ui/tests/integration/components/job-status-panel-test.js
@@ -201,7 +201,7 @@ module(
         );
 
       assert.equal(
-        find('[data-test-new-allocation-tally]').textContent.trim(),
+        find('[data-test-new-allocation-tally] > span').textContent.trim(),
         `New allocations: ${
           this.job.allocations.filter(
             (a) =>
@@ -292,7 +292,7 @@ module(
         );
 
       assert.equal(
-        find('[data-test-new-allocation-tally]').textContent.trim(),
+        find('[data-test-new-allocation-tally] > span').textContent.trim(),
         `New allocations: ${
           this.job.allocations.filter(
             (a) =>
@@ -304,7 +304,7 @@ module(
       );
 
       assert.equal(
-        find('[data-test-old-allocation-tally]').textContent.trim(),
+        find('[data-test-old-allocation-tally] > span').textContent.trim(),
         `Previous allocations: ${
           this.job.allocations.filter(
             (a) =>
@@ -356,7 +356,7 @@ module(
         );
 
       assert.equal(
-        find('[data-test-old-allocation-tally]').textContent.trim(),
+        find('[data-test-old-allocation-tally] > span').textContent.trim(),
         `Previous allocations: ${
           this.job.allocations.filter(
             (a) =>