diff --git a/.changelog/16134.txt b/.changelog/16134.txt
new file mode 100644
index 000000000..f0a8309fe
--- /dev/null
+++ b/.changelog/16134.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Added a new Job Status Panel that helps show allocation status throughout a deployment and in steady state
+```
diff --git a/ui/app/components/job-status/panel/deploying.hbs b/ui/app/components/job-status/panel/deploying.hbs
index 14f09360e..95bdca403 100644
--- a/ui/app/components/job-status/panel/deploying.hbs
+++ b/ui/app/components/job-status/panel/deploying.hbs
@@ -76,9 +76,9 @@
                   <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" />
+                        <Hds::Badge @text="unknown" class="version-label" @type="inverted" />
                       {{else}}
-                        <Hds::Badge @text={{concat "v" versionObj.version}} class="version-label" />
+                        <Hds::Badge @text={{concat "v" versionObj.version}} class="version-label" @type="inverted" />
                       {{/if}}
                       <Hds::Badge @text={{versionObj.allocations.length}} class="version-count" />
                     </LinkTo>
@@ -94,11 +94,11 @@
             <legend>
               <span class="legend-item {{if (eq (get this.oldRunningHealthyAllocBlocks "length") 0) "faded"}}">
                 <span class="represented-allocation running"></span>
-                {{get this.oldRunningHealthyAllocBlocks "length"}} Running
+                <span class="count">{{get this.oldRunningHealthyAllocBlocks "length"}} Running</span>
               </span>
               <span class="legend-item {{if (eq (get this.oldCompleteHealthyAllocBlocks "length") 0) "faded"}}">
                 <span class="represented-allocation complete"></span>
-                {{get this.oldCompleteHealthyAllocBlocks "length"}} Complete
+                <span class="count">{{get this.oldCompleteHealthyAllocBlocks "length"}} Complete</span>
               </span>
             </legend>
           </div>
@@ -108,7 +108,7 @@
         <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" />
+            <Hds::Badge @text={{concat "v" @job.version}} @type="inverted" class="version-label" />
           </LinkTo>
           </span>
         </h4>
@@ -131,7 +131,7 @@
               @label="View {{status}} allocations"
             >
               <span class="represented-allocation {{status}}"></span>
-                {{count}} {{capitalize status}}
+              <span class="count">{{count}} {{capitalize status}}</span>
             </ConditionalLinkTo>
           {{/each-in}}
 
@@ -148,7 +148,7 @@
                   {{/if}}
                 </span>
               </span>
-              {{count}} {{humanize health}}
+              <span class="count">{{count}} {{humanize health}}</span>
             </span>
           {{/each-in}}
 
@@ -156,7 +156,7 @@
             <span class="represented-allocation legend-example canary">
               <span class="alloc-canary-indicator" />
             </span>
-            {{this.newAllocsByCanary.canary}} Canary
+            <span class="count">{{this.newAllocsByCanary.canary}} Canary</span>
           </span>
 
         </legend>
diff --git a/ui/app/components/job-status/panel/steady.hbs b/ui/app/components/job-status/panel/steady.hbs
index 4ac134844..cd65fc31e 100644
--- a/ui/app/components/job-status/panel/steady.hbs
+++ b/ui/app/components/job-status/panel/steady.hbs
@@ -59,7 +59,7 @@
               @label="View {{type.label}} allocations"
             >
               <span class="represented-allocation {{type.label}}"></span>
-              {{get (get (get (get this.allocBlocks type.label) 'healthy') 'nonCanary') "length"}} {{capitalize type.label}}
+              <span class="count">{{get (get (get (get this.allocBlocks type.label) 'healthy') 'nonCanary') "length"}} {{capitalize type.label}}</span>
             </ConditionalLinkTo>
           {{/each}}
         </legend>
@@ -79,9 +79,9 @@
               <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" @type="filled" class="version-label" />
+                    <Hds::Badge @text="unknown" @type="inverted" class="version-label" />
                   {{else}}
-                    <Hds::Badge @text={{concat "v" versionObj.version}} @type="filled" class="version-label" />
+                    <Hds::Badge @text={{concat "v" versionObj.version}} @type="inverted" class="version-label" />
                   {{/if}}
                   <Hds::Badge @text={{versionObj.allocations.length}} @type="filled" class="version-count" />
                 </LinkTo>
diff --git a/ui/app/components/job-status/update-params.hbs b/ui/app/components/job-status/update-params.hbs
index 3d1c1c3e3..99472d0d9 100644
--- a/ui/app/components/job-status/update-params.hbs
+++ b/ui/app/components/job-status/update-params.hbs
@@ -7,7 +7,7 @@
   {{did-insert trigger.fns.do}}
 
   <div class="update-parameters">
-    <h4 class="title is-5">Update Params</h4>
+    <h4 class="title is-4">Update Params</h4>
     <code>
 
       {{#if (and trigger.data.isSuccess (not trigger.data.isError))}}
diff --git a/ui/app/styles/components/job-status-panel.scss b/ui/app/styles/components/job-status-panel.scss
index 1c4c81900..f2525bc6d 100644
--- a/ui/app/styles/components/job-status-panel.scss
+++ b/ui/app/styles/components/job-status-panel.scss
@@ -89,6 +89,7 @@
         display: grid;
         grid-template-columns: auto 1fr;
         gap: 0.5rem;
+        margin-top: 1rem;
 
         & > .versions > ul {
           grid-template-columns: unset;
@@ -106,10 +107,14 @@
   .versions {
     & > ul {
       display: grid;
-      grid-template-columns: repeat(auto-fit, 100px);
+      grid-template-columns: repeat(auto-fit, 65px);
       gap: 0.5rem;
       & > li {
         white-space: nowrap;
+        &:has(.version-count) .version-label {
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
+        }
       }
       a {
         text-decoration: none;
@@ -128,7 +133,6 @@
       z-index: 1;
       left: -1rem;
       padding-left: 1rem;
-      background-color: var(--token-color-surface-faint);
     }
   }
 
@@ -150,9 +154,9 @@
 
     legend {
       display: grid;
-      grid-template-columns: repeat(4, 1fr);
-      grid-auto-rows: max-content;
+      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
       gap: 0.5rem;
+      grid-template-rows: min-content;
     }
     .latest-deployment {
       h4 svg {
@@ -405,16 +409,14 @@
     animation: none;
   }
 
-  & > .boxed-section-body > .deployment-allocations {
-    margin-bottom: 1rem;
-  }
-
   .legend-item {
     display: grid;
     gap: 0.5rem;
     grid-template-columns: auto 1fr;
+    white-space: nowrap;
+    flex: 1 0 auto;
 
-    &.faded {
+    &.faded .count {
       opacity: 0.5;
     }
 
@@ -433,7 +435,12 @@
     display: grid;
     grid-template-columns: 70% auto;
     gap: 1rem;
-    margin-top: 1rem;
+    margin-top: 2rem;
+    & > .deployment-history,
+    & > .update-parameters {
+      display: grid;
+      grid-template-rows: 50px auto;
+    }
   }
 
   &.steady-state .history-and-params {
@@ -521,6 +528,10 @@
       overflow-y: auto;
       display: block;
     }
+    & > .title {
+      display: grid;
+      align-content: center;
+    }
     ul,
     span.notification {
       display: block;
diff --git a/ui/tests/acceptance/allocation-detail-test.js b/ui/tests/acceptance/allocation-detail-test.js
index 9b79bdf2c..ead79edb9 100644
--- a/ui/tests/acceptance/allocation-detail-test.js
+++ b/ui/tests/acceptance/allocation-detail-test.js
@@ -16,6 +16,7 @@ import a11yAudit from 'nomad-ui/tests/helpers/a11y-audit';
 import Allocation from 'nomad-ui/tests/pages/allocations/detail';
 import moment from 'moment';
 import formatHost from 'nomad-ui/utils/format-host';
+import faker from 'nomad-ui/mirage/faker';
 
 let job;
 let node;
@@ -687,6 +688,7 @@ module('Acceptance | allocation detail (services)', function (hooks) {
     const runningAlloc = server.create('allocation', {
       jobId: job.id,
       forceRunningClientStatus: true,
+      clientStatus: 'running',
     });
     const otherAlloc = server.db.allocations.reject((j) => j.jobId !== job.id);
 
@@ -735,8 +737,10 @@ module('Acceptance | allocation detail (services)', function (hooks) {
   });
 
   test('Allocation has a list of services with active checks', async function (assert) {
+    faker.seed(1);
     const runningAlloc = server.db.allocations.findBy({
       jobId: 'service-haver',
+      forceRunningClientStatus: true,
       clientStatus: 'running',
     });
     await Allocation.visit({ id: runningAlloc.id });