diff --git a/.changelog/2606.txt b/.changelog/2606.txt
new file mode 100644
index 00000000000..2896c7786d5
--- /dev/null
+++ b/.changelog/2606.txt
@@ -0,0 +1,3 @@
+```release-note:feature
+ui: reformatted app overview page and header of artifact details page
+```
diff --git a/ui/app/components/git-commit.hbs b/ui/app/components/git-commit.hbs
index 51bf32aa814..bff5b234935 100644
--- a/ui/app/components/git-commit.hbs
+++ b/ui/app/components/git-commit.hbs
@@ -1,7 +1,9 @@
 {{#if @commit}}
   <span class="git-commit" title="Triggered by commit: {{@commit}}">
+    <Pds::Icon @type="git-commit"/>
+    {{!-- TODO: add git profile picture of user whose commit it was when possible --}}
     <CopyButton @clipboardText={{@commit}}>
-      <Pds::Icon @type="git-commit"/><span class="git-commit__sha">{{truncate-commit @commit}}</span>
+     <span class="git-commit__sha">{{truncate-commit @commit}}</span>
     </CopyButton>
   </span>
 {{/if}}
\ No newline at end of file
diff --git a/ui/app/components/panel-header.hbs b/ui/app/components/panel-header.hbs
new file mode 100644
index 00000000000..f8b6542cfd4
--- /dev/null
+++ b/ui/app/components/panel-header.hbs
@@ -0,0 +1,25 @@
+{{#let
+  (hash
+    title=(or
+      (and (eq @artifact "deployment") "page.deployment.title")
+      (and (eq @artifact "build") "page.build.title")
+      (and (eq @artifact "release") "page.release.title")
+      "page.unavailable.title"
+    )
+  )
+  as |vars|
+}}
+<header data-test-panel-header class="panel-header {{@className}}">
+  <div class="title">
+    <h1>{{t vars.title}}
+      {{#if @sequence}}
+        <b class="badge badge--version">v{{@sequence}}</b>
+      {{/if}}
+    </h1>
+    {{yield to="title"}}
+  </div>
+  <div class="actions">
+    {{yield to="actions"}}
+  </div>
+</header>
+{{/let}}
diff --git a/ui/app/components/section.hbs b/ui/app/components/section.hbs
index 7f17d2ee81c..471892ece17 100644
--- a/ui/app/components/section.hbs
+++ b/ui/app/components/section.hbs
@@ -6,22 +6,26 @@
 >
   <div class="section__header">
     <h2 class="section__heading">
-      <Pds::Icon
-        @type={{if this.expanded "chevron-down" "chevron-right"}}
-      />
+      {{#if this.isExpandable}}
+        <Pds::Icon
+          @type={{if this.expanded "chevron-down" "chevron-right"}}
+        />
+      {{/if}}
       <span>
         {{yield to="heading"}}
       </span>
     </h2>
 
-    <button
-      data-test-section-toggle
-      type="button"
-      class="section__toggle"
-      title={{if this.expanded (t "section.collapse") (t "section.expand")}}
-      aria-expanded={{if this.expanded "true" "false"}}
-      {{on "click" this.toggleExpanded}}
-    ></button>
+    {{#if this.isExpandable}}
+      <button
+        data-test-section-toggle
+        type="button"
+        class="section__toggle"
+        title={{if this.expanded (t "section.collapse") (t "section.expand")}}
+        aria-expanded={{if this.expanded "true" "false"}}
+        {{on "click" this.toggleExpanded}}
+      ></button>
+    {{/if}}
   </div>
 
   {{#if this.expanded}}
diff --git a/ui/app/components/section.ts b/ui/app/components/section.ts
index d55558a0df1..eb7b8e4a93e 100644
--- a/ui/app/components/section.ts
+++ b/ui/app/components/section.ts
@@ -4,11 +4,16 @@ import { action } from '@ember/object';
 
 type Args = {
   expanded?: boolean;
+  isExpandable?: boolean;
 };
 
 export default class extends Component<Args> {
   @tracked expanded = this.args.expanded ?? true;
 
+  get isExpandable(): boolean {
+    return this.args.isExpandable ?? true;
+  }
+
   @action
   toggleExpanded(): void {
     this.expanded = !this.expanded;
diff --git a/ui/app/components/status-report-meta-table/index.hbs b/ui/app/components/status-report-meta-table/index.hbs
index 2e3067e0ee0..33c0f6f9656 100644
--- a/ui/app/components/status-report-meta-table/index.hbs
+++ b/ui/app/components/status-report-meta-table/index.hbs
@@ -1,35 +1,60 @@
+{{#let
+  (hash
+    shouldRenderHealthAndTag=(and
+      (or
+        (eq @artifactType "Deployment")
+        (eq @artifactType "Release")
+      )
+      @model.statusReport
+    )
+    shouldRenderCommit=@model.preload.jobDataSourceRef.git.commit
+  )
+  as |vars|
+}}
 <div class="artifact-overview">
   <table>
     <tbody>
-      {{#if @model.statusReport}}
-        <tr>
-          <th scope="row">{{t "page.deployment.overview.health-check"}}</th>
-          <td>
-            <div class="status-indicator">
-              <StatusReportIndicator @statusReport={{@model.statusReport}} /> &nbsp;
-              <Pds::Button
-                @variant="ghost"
-                @iconStart="refresh-default"
-                class="refresh-health-check-button"
-                disabled={{this.isRefreshRunning}}
-                {{on "click" this.refreshHealthCheck}}
-              >
-                {{t "page.deployment.overview.re-run-health-check"}}
-              </Pds::Button>
-            </div>
-          </td>
-        </tr>
+      {{#if (or (has-block) vars.shouldRenderCommit vars.shouldRenderHealthAndTag)}}
+        {{yield}}
+      {{else}}
+        {{t "page.artifact.overview.unavailable"}}
+      {{/if}}
+      {{#if vars.shouldRenderHealthAndTag}}
+      <tr>
+        <th scope="row">{{t "page.artifact.overview.health-check"}}</th>
+        <td>
+          <div class="status-indicator">
+            <StatusReportIndicator @statusReport={{@model.statusReport}} /> &nbsp;
+            <Pds::Button
+              @variant="ghost"
+              @iconStart="refresh-default"
+              class="refresh-health-check-button"
+              disabled={{this.isRefreshRunning}}
+              {{on "click" this.refreshHealthCheck}}
+            >
+              {{t "page.artifact.overview.re-run-health-check"}}
+            </Pds::Button>
+          </div>
+        </td>
+      </tr>
+      <tr>
+        <th scope="row">
+          {{t "page.artifact.overview.image"}}
+        </th>
+        <td>
+          <ContainerImageTag @statusReport={{@model.statusReport}}/>
+        </td>
+      </tr>
+      {{/if}}
+      {{#if vars.shouldRenderCommit}}
         <tr>
-          <th scope="row">
-            {{t "page.deployment.overview.image"}}
-          </th>
+          <th scope="row">{{t "page.artifact.overview.commit"}}</th>
           <td>
-            <ContainerImageTag @statusReport={{@model.statusReport}}/>
+            <GitCommit @commit={{@model.preload.jobDataSourceRef.git.commit}}/>
           </td>
         </tr>
-      {{else}}
-        {{t "page.deployment.overview.unavailable"}}
       {{/if}}
     </tbody>
   </table>
 </div>
+{{/let}}
\ No newline at end of file
diff --git a/ui/app/routes/workspace/projects/project/app/index.ts b/ui/app/routes/workspace/projects/project/app/index.ts
index b607f2bee07..5b9ba3c7e83 100644
--- a/ui/app/routes/workspace/projects/project/app/index.ts
+++ b/ui/app/routes/workspace/projects/project/app/index.ts
@@ -3,6 +3,6 @@ import { Model as AppRouteModel } from '../app';
 
 export default class AppIndex extends Route {
   redirect(model: AppRouteModel): void {
-    this.transitionTo('workspace.projects.project.app.logs', model.application.application);
+    this.transitionTo('workspace.projects.project.app.deployments', model.application.application);
   }
 }
diff --git a/ui/app/styles/_layout.scss b/ui/app/styles/_layout.scss
index 96c462dbcd7..6f14863cc12 100644
--- a/ui/app/styles/_layout.scss
+++ b/ui/app/styles/_layout.scss
@@ -74,13 +74,16 @@ ul.list {
   border-bottom: none;
 }
 
+.list-heading {
+  @include Typography.Heading(3);
+}
+
 .status-row {
   // status information on specific build/deployment/release page
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: scale.$base 0;
-  border-top: 1px solid rgb(var(--border));
   color: rgb(var(--text-muted));
   @include Typography.Interface(M);
 
@@ -109,7 +112,7 @@ ul.list {
 // Waypoint styles
 
 code {
-  font-family: ui-monospace, 'Menlo', monospace;
+  font-family: var(--monospace);
   white-space: nowrap;
   color: rgb(var(--text));
   background: none;
diff --git a/ui/app/styles/_variables.scss b/ui/app/styles/_variables.scss
index 97266bb34df..34aefdf3675 100644
--- a/ui/app/styles/_variables.scss
+++ b/ui/app/styles/_variables.scss
@@ -12,6 +12,7 @@ $button-shadow: 0 3px 2px rgba(var(--shadow), 0.2);
 }
 
 :root {
+  --monospace: ui-monospace, 'Menlo', monospace;
   --brand: #{dehex($brand-color)};
   --background: #{dehex(color.$white)};
   --text: #{dehex(color.$black)};
@@ -22,8 +23,8 @@ $button-shadow: 0 3px 2px rgba(var(--shadow), 0.2);
   --outline: #{dehex(color.$ui-gray-300)};
   --card: #{dehex(color.$white)};
   --panel: #{dehex(color.$ui-cool-gray-050)};
-  --badge: #{dehex(color.$blue-050)};
-  --badge-text: #{dehex(color.$blue-500)};
+  --badge: #{dehex(color.$ui-gray-200)};
+  --badge-text: #{dehex(color.$ui-gray-800)};
   --badge-neutral: #{dehex(color.$ui-cool-gray-100)};
   --badge-neutral-text: #{dehex(color.$ui-cool-gray-700)};
   --shadow: #{dehex(color.$ui-cool-gray-900)};
diff --git a/ui/app/styles/components/_index.scss b/ui/app/styles/components/_index.scss
index 2fb79c95834..f25d9557deb 100644
--- a/ui/app/styles/components/_index.scss
+++ b/ui/app/styles/components/_index.scss
@@ -1,5 +1,3 @@
-@import 'app-card';
-@import 'app-card-item';
 @import 'app-item';
 @import 'badge';
 @import 'button';
@@ -20,6 +18,7 @@
 @import 'navigation/header';
 @import 'navigation/footer';
 @import 'navigation/page-header';
+@import 'navigation/panel-header';
 @import 'notifications';
 @import 'operation-status-indicator';
 @import 'output-pane';
diff --git a/ui/app/styles/components/badge.scss b/ui/app/styles/components/badge.scss
index 12f9c169592..396c45bcd07 100644
--- a/ui/app/styles/components/badge.scss
+++ b/ui/app/styles/components/badge.scss
@@ -9,6 +9,7 @@
 
   &--version {
     @include Typography.Interface(M);
+    font-family: var(--monospace);
     border-radius: scale.$base;
   }
 
diff --git a/ui/app/styles/components/git-commit.scss b/ui/app/styles/components/git-commit.scss
index 1502a9a6b8b..bfe94ad5505 100644
--- a/ui/app/styles/components/git-commit.scss
+++ b/ui/app/styles/components/git-commit.scss
@@ -1,13 +1,12 @@
 .git-commit {
-  display: flex;
-  align-items: center;
   @include Typography.Interface(S);
-  background: rgb(var(--badge));
-  color: rgb(var(--text-muted));
   border-radius: 2px;
   padding: scale.$sm-4 scale.$sm-4;
   &__sha {
-    padding: 0 scale.$sm-4;
+    color: rgb(var(--text-muted));
+    background: rgb(var(--badge));
+    padding: scale.$sm-4;
+    border-radius: scale.$sm-4;
   }
   .copy-btn {
     @include button-reset;
diff --git a/ui/app/styles/components/navigation/artifact-overview.scss b/ui/app/styles/components/navigation/artifact-overview.scss
index 5179bc0aaf4..fe0290d5747 100644
--- a/ui/app/styles/components/navigation/artifact-overview.scss
+++ b/ui/app/styles/components/navigation/artifact-overview.scss
@@ -24,6 +24,7 @@
       color: rgb(var(--text-muted));
       padding-right: scale.$lg--10;
       text-align: left;
+      width: 158px;
     }
 
     .status-indicator {
diff --git a/ui/app/styles/components/navigation/page-header.scss b/ui/app/styles/components/navigation/page-header.scss
index 6c09ef1162a..1a113636201 100644
--- a/ui/app/styles/components/navigation/page-header.scss
+++ b/ui/app/styles/components/navigation/page-header.scss
@@ -30,13 +30,6 @@
         font-weight: 600;
         margin: scale.$sm-2 0 scale.$sm-4;
       }
-
-      .badge {
-        font-size: 1rem;
-        position: relative;
-        top: -2px;
-        margin-right: scale.$sm-4;
-      }
     }
 
     small {
@@ -57,57 +50,4 @@
   &.projects-header {
     margin-top: scale.$lg-4;
   }
-
-  .actions {
-    position: relative;
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    max-width: 100%;
-    margin: scale.$sm-4 0;
-
-    .button-group {
-      display: flex;
-      max-width: 100%;
-
-      .button:first-child {
-        flex-shrink: 1;
-        overflow: hidden;
-      }
-    }
-
-    .button {
-      margin: scale.$sm-3 0;
-
-      span {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        min-width: 0;
-      }
-
-      & + .button {
-        margin-left: scale.$base;
-      }
-    }
-
-    .first-run-hint {
-      p {
-        color: rgb(var(--text-muted));
-        @include Typography.Interface(S);
-        display: inline-block;
-        margin-right: scale.$sm-2;
-      }
-
-      .copyable-code {
-        margin: scale.$sm-2 0;
-
-        code {
-          display: inline-flex;
-          font-size: 11px;
-          flex-shrink: 0;
-        }
-      }
-    }
-  }
 }
diff --git a/ui/app/styles/components/navigation/panel-header.scss b/ui/app/styles/components/navigation/panel-header.scss
new file mode 100644
index 00000000000..4fb386706fd
--- /dev/null
+++ b/ui/app/styles/components/navigation/panel-header.scss
@@ -0,0 +1,79 @@
+.panel-header {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  font-size: 0.9em;
+  font-weight: 400;
+  color: rgb(var(--text-muted));
+  
+  h1 {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    @include Typography.Interface(M);
+
+    .badge {
+      font-size: 1rem;
+      position: relative;
+      top: -2px;
+      margin-left: scale.$sm-3;
+    }
+  }
+
+  .actions {
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    max-width: 100%;
+    margin: scale.$sm-4 0;
+    margin-left: auto;
+
+    .button-group {
+      display: flex;
+      max-width: 100%;
+
+      .button:first-child {
+        flex-shrink: 1;
+        overflow: hidden;
+      }
+    }
+
+    .button {
+      margin: scale.$sm-3 0;
+
+      span {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        min-width: 0;
+      }
+
+      & + .button {
+        margin-left: scale.$base;
+      }
+    }
+
+    .first-run-hint {
+      p {
+        color: rgb(var(--text-muted));
+        @include Typography.Interface(S);
+        display: inline-block;
+        margin-right: scale.$sm-2;
+      }
+
+      .copyable-code {
+        margin: scale.$sm-2 0;
+
+        code {
+          display: inline-flex;
+          font-size: 11px;
+          flex-shrink: 0;
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/ui/app/styles/components/section.scss b/ui/app/styles/components/section.scss
index 3acc9395f48..3c73b924f42 100644
--- a/ui/app/styles/components/section.scss
+++ b/ui/app/styles/components/section.scss
@@ -2,11 +2,13 @@
   position: relative;
 
   margin-bottom: scale.$base;
+  padding-bottom: scale.$sm--1;
+  border-bottom: 1px solid rgb(var(--border));
+
 
   &__header {
     position: relative;
 
-    border-bottom: 1px solid rgb(var(--border));
     margin-bottom: scale.$sm--1;
   }
 
diff --git a/ui/app/styles/components/structure/pds-tabnav.scss b/ui/app/styles/components/structure/pds-tabnav.scss
index 4bad4d765f1..0f2ea476cda 100644
--- a/ui/app/styles/components/structure/pds-tabnav.scss
+++ b/ui/app/styles/components/structure/pds-tabnav.scss
@@ -1,5 +1,4 @@
 .pds-tabNav {
-  padding-top: scale.$sm-2;
   margin-bottom: scale.$lg-4;
 
   :any-link:not(.pds-button) {
diff --git a/ui/app/templates/workspace/projects/project/app.hbs b/ui/app/templates/workspace/projects/project/app.hbs
index c9ab4cce931..4d3a239f629 100644
--- a/ui/app/templates/workspace/projects/project/app.hbs
+++ b/ui/app/templates/workspace/projects/project/app.hbs
@@ -10,17 +10,6 @@
 <PageHeader @iconName="git-repository">
   <div class="title">
     <h1>{{@model.application.application}}</h1>
-    <small>
-      {{#if @model.releases.length}}
-      {{#if (eq @model.releases.[0].status.state 2)}}
-      Last released {{date-format-distance-to-now @model.releases.[0].status.completeTime.seconds}}
-      {{else}}
-      Release in progress...
-      {{/if}}
-      {{else}}
-      Not released yet
-      {{/if}}
-    </small>
   </div>
   <div class="actions">
     {{#if (and (project-is-remote-uppable @model.project) (not @model.releases.length))}}
@@ -47,38 +36,27 @@
   </div>
 </PageHeader>
 
-<div class="cards app-latest">
-  <div class="cards-wrap">
-    <div class="cards-inner">
-      <div class="card-outer"><AppCard::Builds @builds={{@model.builds}} /></div>
-      <div class="card-outer"><AppCard::Deployments @deployments={{@model.deployments}} /></div>
-      <div class="card-outer"><AppCard::Releases @releases={{@model.releases}} /></div>
-    </div>
-  </div>
-</div>
-
-
 <Pds::TabNav>
-  <LinkTo @route="workspace.projects.project.app.logs"
+  <LinkTo @route="workspace.projects.project.app.deployments"
     @models={{array @model.application.project @model.application.application }}>
-    <Pds::Icon @type="page-outline" class="icon" />
-    {{t "nav.logs"}}
+    <Pds::Icon @type="upload" class="icon" />
+    {{t "nav.deployments"}}
   </LinkTo>
   <LinkTo @route="workspace.projects.project.app.builds"
     @models={{array @model.application.project @model.application.application }}>
     <Pds::Icon @type="build" class="icon" />
     {{t "nav.builds"}}
   </LinkTo>
-  <LinkTo @route="workspace.projects.project.app.deployments"
-    @models={{array @model.application.project @model.application.application }}>
-    <Pds::Icon @type="upload" class="icon" />
-    {{t "nav.deployments"}}
-  </LinkTo>
   <LinkTo @route="workspace.projects.project.app.releases"
     @models={{array @model.application.project @model.application.application }}>
     <Pds::Icon @type="public-default" class="icon" />
     {{t "nav.releases"}}
   </LinkTo>
+  <LinkTo @route="workspace.projects.project.app.logs"
+    @models={{array @model.application.project @model.application.application }}>
+    <Pds::Icon @type="page-outline" class="icon" />
+    {{t "nav.logs"}}
+  </LinkTo>
   <LinkTo @route="workspace.projects.project.app.exec"
     @models={{array @model.application.project @model.application.application }}>
     <Pds::Icon @type="exec" class="icon" />
diff --git a/ui/app/templates/workspace/projects/project/app/build.hbs b/ui/app/templates/workspace/projects/project/app/build.hbs
index 7f80f04e226..ac59258e220 100644
--- a/ui/app/templates/workspace/projects/project/app/build.hbs
+++ b/ui/app/templates/workspace/projects/project/app/build.hbs
@@ -1,44 +1,44 @@
 {{page-title (concat "Build" " v" @model.sequence)}}
 
 {{#let (or @model.pushedArtifact @model) as |operation|}}
-  <PageHeader @iconName="build">
-    <div class="title">
-      <h2>
-        <b class="badge badge--version">v{{@model.sequence}}</b>
-      </h2>
-      <small>
-        <Pds::Icon
-          @type={{icon-for-component operation.component.name}}
-          class="icon"
-        />
-
-        <span>
-          {{t
-            (concat
-              "build_status"
-              ".type-" operation.component.type
-              ".state-" operation.status.state
-            )
-          }}
-          <b>{{component-name operation.component.name}}</b>
-        </span>
-      </small>
-      {{#if @model.preload.jobDataSourceRef.git.commit}}
-        <small>
-          <GitCommit @commit={{@model.preload.jobDataSourceRef.git.commit}}/>
-        </small>
-      {{/if}}
-    </div>
-    <div class="actions">
+  <PanelHeader @artifact="build" @sequence={{@model.sequence}}>
+    <:actions>
       <Actions::Deploy @sequence={{@model.sequence}} />
-    </div>
-  </PageHeader>
+    </:actions>
+  </PanelHeader>
 
-  <div class="status-row">
-    <div class="item">
-      <OperationStatusIndicator @status={{operation.status}} />
-    </div>
-  </div>
+  <Section @isExpandable={{false}}>
+    <:heading>{{t "page.build.overview.heading"}}</:heading>
+    <:body>
+      <StatusReportMetaTable @model={{@model}} @artifactType="Build">
+        <tr>
+          <th scope="row">{{t "page.build.overview.status"}}</th>
+          <td>
+            <Pds::Icon
+              @type={{icon-for-component operation.component.name}}
+              class="icon"
+            />
+            <span>
+              {{t
+                (concat
+                  "build_status"
+                  ".type-" operation.component.type
+                  ".state-" operation.status.state
+                )
+              }}
+              <b>{{component-name operation.component.name}}</b>
+            </span>
+            <OperationStatusIndicator @status={{operation.status}} />
+          </td>
+        </tr>
+      </StatusReportMetaTable>
+    </:body>
+  </Section>
 {{/let}}
 
-<OperationLogs @jobId={{@model.jobId}} />
+<Section>
+    <:heading>{{t "page.deployment.logs.heading"}}</:heading>
+    <:body>
+      <OperationLogs @jobId={{@model.jobId}} />
+    </:body>
+</Section>
diff --git a/ui/app/templates/workspace/projects/project/app/builds.hbs b/ui/app/templates/workspace/projects/project/app/builds.hbs
index 1b619eb63cd..9a5fd5267e0 100644
--- a/ui/app/templates/workspace/projects/project/app/builds.hbs
+++ b/ui/app/templates/workspace/projects/project/app/builds.hbs
@@ -1,6 +1,6 @@
 {{page-title (concat @model.application.application "Builds")}}
 
-<h3>{{t "page.builds.title"}}</h3>
+<h2 class="list-heading">{{t "page.builds.title"}}</h2>
 
 <ul data-test-build-list class="list">
   {{#each @model key="id" as |build|}}
diff --git a/ui/app/templates/workspace/projects/project/app/deployment.hbs b/ui/app/templates/workspace/projects/project/app/deployment.hbs
index 5738570d9f5..8551e6689cd 100644
--- a/ui/app/templates/workspace/projects/project/app/deployment.hbs
+++ b/ui/app/templates/workspace/projects/project/app/deployment.hbs
@@ -1,22 +1,8 @@
 {{page-title (concat "Deployment" " v" @model.sequence)}}
 
 {{#if (not-eq this.target.currentRouteName "workspace.projects.project.app.deployment.resource")}}
-  <PageHeader @iconName="upload">
-    <div class="title">
-      <h1><b class="badge badge--version">v{{@model.sequence}}</b></h1>
-      <small>
-        <Pds::Icon @type={{icon-for-component @model.component.name}} class="icon" />
-        <span>Deployed by <b>{{component-name @model.component.name}}</b>
-          {{date-format-distance-to-now @model.status.startTime.seconds }}
-        </span>
-      </small>
-      {{#if @model.preload.jobDataSourceRef.git.commit}}
-        <small>
-          <GitCommit @commit={{@model.preload.jobDataSourceRef.git.commit}}/>
-        </small>
-      {{/if}}
-    </div>
-    <div class="actions">
+  <PanelHeader @artifact="deployment" @sequence={{@model.sequence}}>
+    <:actions>
       <div class="button-group">
         <ExternalLink
           href={{enforce-protocol @model.preload.deployUrl}}
@@ -26,13 +12,23 @@
         </ExternalLink>
         <Actions::Release @sequence={{@model.sequence}} />
       </div>
-    </div>
-  </PageHeader>
+    </:actions>
+  </PanelHeader>
 
-  <Section>
+  <Section @isExpandable={{false}}>
     <:heading>{{t "page.deployment.overview.heading"}}</:heading>
     <:body>
-      <StatusReportMetaTable @model={{@model}} @artifactType="Deployment" />
+      <StatusReportMetaTable @model={{@model}} @artifactType="Deployment">
+        <tr>
+          <th scope="row">{{t "page.deployment.overview.status"}}</th>
+          <td>
+            <Pds::Icon @type={{icon-for-component @model.component.name}} class="icon" />
+            <span>Deployed by <b>{{component-name @model.component.name}}</b>
+              {{date-format-distance-to-now @model.status.startTime.seconds }}
+            </span>
+          </td>
+        </tr>
+      </StatusReportMetaTable>
     </:body>
   </Section>
 
diff --git a/ui/app/templates/workspace/projects/project/app/deployments.hbs b/ui/app/templates/workspace/projects/project/app/deployments.hbs
index 45379885c2f..a5ef49efa3e 100644
--- a/ui/app/templates/workspace/projects/project/app/deployments.hbs
+++ b/ui/app/templates/workspace/projects/project/app/deployments.hbs
@@ -1,8 +1,6 @@
 {{page-title (concat @model.application.application "Deployments")}}
 
-<h3>
-  {{t "page.deployments.title"}}
-</h3>
+<h2 class="list-heading">{{t "page.deployments.title"}}</h2>
 
 <ul data-test-deployment-list class="list">
   {{#each this.deploymentsByGeneration key="generationID" as |group|}}
diff --git a/ui/app/templates/workspace/projects/project/app/release.hbs b/ui/app/templates/workspace/projects/project/app/release.hbs
index 2c5a24a2773..e99882afd3a 100644
--- a/ui/app/templates/workspace/projects/project/app/release.hbs
+++ b/ui/app/templates/workspace/projects/project/app/release.hbs
@@ -1,45 +1,33 @@
 {{page-title (concat "Release" " v" @model.sequence)}}
 
 {{#if (not-eq this.target.currentRouteName "workspace.projects.project.app.release.resource")}}
-  <PageHeader @iconName="public-default">
-    <div class="title">
-      {{! TODO(jgwhite): Make this a real <h1> }}
-      <h2 aria-level="1"><b class="badge badge--version">v{{@model.sequence}}</b></h2>
-      <small>
-        <Pds::Icon @type={{icon-for-component @model.component.name}} class="icon" />
-        <span>Released on <b>{{component-name @model.component.name}}</b>
-          {{date-format-distance-to-now @model.status.startTime.seconds }}</span>
-      </small>
-      {{#if @model.preload.jobDataSourceRef.git.commit}}
-        <small>
-          <GitCommit @commit={{@model.preload.jobDataSourceRef.git.commit}}/>
-        </small>
-      {{/if}}
-    </div>
-    <div class="actions">
+  <PanelHeader @artifact="release" @sequence={{@model.sequence}}>
+    <:actions>
       {{#if @isLatest}}
-      <button class="button button--primary" type="button">
-        <span>{{@model.release.url}}</span>
-        <Pds::Icon @type="exit" class="icon" />
-      </button>
+        <button class="button button--primary" type="button">
+          <span>{{@model.release.url}}</span>
+          <Pds::Icon @type="exit" class="icon" />
+        </button>
       {{/if}}
-    </div>
-  </PageHeader>
+    </:actions>
+  </PanelHeader>
 
-  <StatusReportBar @model={{@model}} @artifactType="Release">
-    {{!-- todo(pearkes): API doesn't return this object but just a string of it, so wait for that to be fixed --}}
-    {{#if @model.deployment }}
-      <div class="item">
-        <small>
-          Released deployment <LinkTo @route="workspace.projects.project.app.deployment"
-            @models={{array @model.deployment.id}}>
-            <b class="badge badge--version">v{{@model.deployment.sequence}}</b>
-            <code>{{@model.deployment.id}}</code>
-          </LinkTo>
-        </small>
-      </div>
-    {{/if}}
-  </StatusReportBar>
+  <Section @isExpandable={{false}}>
+    <:heading>{{t "page.release.overview.heading"}}</:heading>
+    <:body>
+      <StatusReportMetaTable @model={{@model}} @artifactType="Release">
+        <tr>
+          <th scope="row">{{t "page.release.overview.status"}}</th>
+          <td>
+            <Pds::Icon @type={{icon-for-component @model.component.name}} class="icon" />
+            <span>Released on <b>{{component-name @model.component.name}}</b>
+              <small>{{date-format-distance-to-now @model.status.startTime.seconds}}</small>
+            </span>
+          </td>
+        </tr>
+      </StatusReportMetaTable>
+    </:body>
+  </Section>
 
   {{#if @model.statusReport.resourcesList.length}}
     <Section>
diff --git a/ui/app/templates/workspace/projects/project/app/releases.hbs b/ui/app/templates/workspace/projects/project/app/releases.hbs
index 5dc5e0acd9b..9fb352f0499 100644
--- a/ui/app/templates/workspace/projects/project/app/releases.hbs
+++ b/ui/app/templates/workspace/projects/project/app/releases.hbs
@@ -1,6 +1,6 @@
 {{page-title (concat @model.application.application "Releases")}}
 
-<h3>{{t "page.releases.title"}}</h3>
+<h2 class="list-heading">{{t "page.releases.title"}}</h2>
 
 <ul data-test-release-list class="list">
   {{#each @model key="id" as |release releaseIndex|}}
diff --git a/ui/tests/integration/components/panel-header-test.ts b/ui/tests/integration/components/panel-header-test.ts
new file mode 100644
index 00000000000..22c63298a4d
--- /dev/null
+++ b/ui/tests/integration/components/panel-header-test.ts
@@ -0,0 +1,35 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | panel-header', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders an empty component when params not passed', async function (assert) {
+    await render(hbs`<PanelHeader/>`);
+
+    assert.dom('[data-test-panel-header]').exists();
+    assert.equal(this.element?.textContent?.trim(), '');
+  });
+
+  test('it renders an empty component when params passed', async function (assert) {
+    await render(hbs`
+      <PanelHeader @artifact="build" @sequence={{3}}/>
+    `);
+
+    assert.dom('[data-test-panel-header]').exists();
+    assert.dom('[data-test-panel-header]').containsText('Build');
+    assert.dom('[data-test-panel-header]').containsText('v3');
+  });
+
+  test('it does not renders empty badge when sequence param missing', async function (assert) {
+    await render(hbs`
+      <PanelHeader @artifact="build"/>
+    `);
+
+    assert.dom('[data-test-panel-header]').exists();
+    assert.dom('[data-test-panel-header]').containsText('Build');
+    assert.dom('[data-test-panel-header]').doesNotContainText('v');
+  });
+});
diff --git a/ui/translations/en-us.yaml b/ui/translations/en-us.yaml
index 8427f2c5df8..34271e50540 100644
--- a/ui/translations/en-us.yaml
+++ b/ui/translations/en-us.yaml
@@ -17,8 +17,20 @@ product:
   name: 'Waypoint'
 
 page:
+  artifact:
+    overview:
+      image: 'Image'
+      health-check: 'Health'
+      re-run-health-check: 'Re-run'
+      unavailable: 'Currently unavailable'
+      commit: 'Commit'
   builds:
     title: 'Builds'
+  build:
+    title: 'Build'
+    overview:
+      heading: 'Overview'
+      status: 'Status'
   deployments:
     title: 'Deployments'
     destroyed_label: 'Destroyed'
@@ -31,26 +43,30 @@ page:
       2: 'Deployed by ' # SUCCESS
       3: 'Failed to deploy by ' # ERROR
   deployment:
+    title: 'Deployment'
     resources:
       heading: Resources
       deployment-table-caption: Resources created by <b>this deployment</b>
       release-table-caption-prefix: Resources created by <b>Release</b>
     overview:
-      heading: Overview
-      image: Image
-      health-check: Health
-      re-run-health-check: Re-run
-      unavailable: Currently unavailable
+      heading: 'Overview'
+      status: 'Status'
     logs:
       heading: Deployment Logs
   releases:
     title: 'Releases'
   release:
+    title: 'Release'
     resources:
       heading: Resources
       table-caption: Resources created by <b>this release</b>
+    overview:
+      heading: 'Overview'
+      status: 'Status'
     logs:
       heading: Release Logs
+  unavailable:
+    title: ''
 
 form:
   project_new: