diff --git a/ui/src/pages/AppsTab/AppDeploymentPage/AppDeploymentPage.module.css b/ui/src/pages/AppsTab/AppDeploymentPage/AppDeploymentPage.module.css
index d439806e..d1c38ec4 100644
--- a/ui/src/pages/AppsTab/AppDeploymentPage/AppDeploymentPage.module.css
+++ b/ui/src/pages/AppsTab/AppDeploymentPage/AppDeploymentPage.module.css
@@ -109,6 +109,10 @@
   font-size: 12px;
 }
 
+.checkpointsTable tr.checkpointArchived {
+  opacity: 0.55;
+}
+
 .checkpointEmpty {
   color: var(--text-muted);
   font-size: 13px;
diff --git a/ui/src/pages/AppsTab/AppDeploymentPage/CheckpointsTable.tsx b/ui/src/pages/AppsTab/AppDeploymentPage/CheckpointsTable.tsx
index 676ab7d9..5e738358 100644
--- a/ui/src/pages/AppsTab/AppDeploymentPage/CheckpointsTable.tsx
+++ b/ui/src/pages/AppsTab/AppDeploymentPage/CheckpointsTable.tsx
@@ -32,7 +32,7 @@ export function CheckpointsTable({
     return <div className={styles.checkpointEmpty}>No past deployments yet.</div>;
   }
 
-  const cap = (jarRetentionCount ?? 0) > 0 ? jarRetentionCount! : FALLBACK_CAP;
+  const cap = jarRetentionCount && jarRetentionCount > 0 ? jarRetentionCount : FALLBACK_CAP;
   const visible = expanded ? checkpoints : checkpoints.slice(0, cap);
   const hidden = checkpoints.length - visible.length;
 
@@ -87,7 +87,7 @@ export function CheckpointsTable({
                 </td>
                 <td>
                   <span
-                    className={`${styles.outcomePill} ${styles[`outcome-${d.status}` as keyof typeof styles]}`}
+                    className={`${styles.outcomePill} ${styles[`outcome-${d.status}` as keyof typeof styles] || ''}`}
                   >
                     {d.status}
                   </span>