diff --git a/ui/app/components/app-item/deployment.hbs b/ui/app/components/app-item/deployment.hbs
index f4b35e4b6bf..9c30f3b9774 100644
--- a/ui/app/components/app-item/deployment.hbs
+++ b/ui/app/components/app-item/deployment.hbs
@@ -1,11 +1,11 @@
-<li class={{if (eq @deployment.state 4) "app-item app-item--destroyed" "app-item"}}>
+<li class="{{if (eq @deployment.sequence @latest.sequence) "app-item--latest" "app-item--previous"}} {{if (eq @deployment.state 4) "app-item app-item--destroyed" "app-item"}}">
   <LinkTo @route="workspace.projects.project.app.deployment" @models={{array @deployment.id}}>
     <p>
       <b class="badge badge--version">v{{@deployment.sequence}}</b>
       <code>{{@deployment.id}}</code>
       {{#if (eq @deployment.state 4)}}
         <b class="badge badge--destroyed">
-          <Pds::Icon @type="trash" class="icon" />&nbsp;Destroyed
+          <Pds::Icon @type="trash" class="icon" />&nbsp; {{t "page.deployments.destroyed_label"}}
         </b>
       {{/if}}
     </p>
@@ -21,9 +21,13 @@
       </span>
     </small>
   </LinkTo>
-  {{#if (and @deployment.preload.deployUrl (not-eq @deployment.state 4))}}
+  {{#if (not-eq @latest.id @deployment.id)}}
+  <small class="replacement-info">
+    {{t "page.deployments.replaced_label"}}<b class="badge badge--version">v{{@latest.sequence}}</b>
+  </small>
+  {{else if (and @deployment.preload.deployUrl (not-eq @deployment.state 4))}}
     <ExternalLink href="https://{{@deployment.preload.deployUrl}}" class="button button--secondary button--external-link">
-      <span>{{lowercase @deployment.preload.deployUrl}}</span>
+      <span>{{t "page.deployments.external_url_label"}}</span>
       <Pds::Icon @type="exit" class="icon" />
     </ExternalLink>
   {{/if}}
diff --git a/ui/app/styles/_app-item.scss b/ui/app/styles/_app-item.scss
index 3ef16c6bc61..b717a67e909 100644
--- a/ui/app/styles/_app-item.scss
+++ b/ui/app/styles/_app-item.scss
@@ -64,4 +64,18 @@
       text-overflow: ellipsis;
     }
   }
+
+  .replacement-info {
+    b {
+      text-transform: inherit;
+      margin-left: scale.$sm-2;
+    }
+  }
+
+  &--previous {
+    background: #F7FAFC;
+    background-clip: border-box;
+    margin-bottom: 0px;
+    border-top: 1rem solid #F7FAFC !important;
+  }
 }
diff --git a/ui/app/styles/_page.scss b/ui/app/styles/_page.scss
index 5a168dc74ae..7d775d08af2 100644
--- a/ui/app/styles/_page.scss
+++ b/ui/app/styles/_page.scss
@@ -186,13 +186,12 @@
   ul.list {
     li {
       padding-bottom: scale.$base;
-      margin-bottom: scale.$base;
+      border-top: 1rem solid rgb(var(--background));
+      margin-bottom: 0;
       border-bottom: 1px solid rgb(var(--border));
 
       &:last-child {
-        padding-bottom: 0;
-        margin-bottom: 0;
-        border: none;
+        border-bottom: none;
       }
     }
   }
diff --git a/ui/app/templates/workspace/projects/project/app/deployments.hbs b/ui/app/templates/workspace/projects/project/app/deployments.hbs
index ae3dbe91ca6..bd9970b4145 100644
--- a/ui/app/templates/workspace/projects/project/app/deployments.hbs
+++ b/ui/app/templates/workspace/projects/project/app/deployments.hbs
@@ -5,7 +5,7 @@
 <ul data-test-deployment-list=true class="list">
   {{#each this.deploymentsByGeneration key="generationID" as |group|}}
     {{#each group.deployments key="id" as |deployment|}}
-      <AppItem::Deployment @deployment={{deployment}} />
+      <AppItem::Deployment @deployment={{deployment}} @latest={{group.deployments.[0]}} />
     {{/each}}
   {{else}}
     <EmptyState>
diff --git a/ui/translations/en-us.yaml b/ui/translations/en-us.yaml
index 9e09d702d42..cb9615ff7b3 100644
--- a/ui/translations/en-us.yaml
+++ b/ui/translations/en-us.yaml
@@ -21,6 +21,9 @@ page:
     title: 'Builds'
   deployments:
     title: 'Deployments'
+    destroyed_label: 'Destroyed'
+    external_url_label: 'Visit Deployment'
+    replaced_label: 'Replaced by '
   releases:
     title: 'Releases'