diff --git a/public/app.js b/public/app.js
index ef1498c..8c12ad8 100644
--- a/public/app.js
+++ b/public/app.js
@@ -359,9 +359,10 @@ function updateDownloadCard(card, download) {
       peersEl.textContent = download.peers;
     }
     
-    const availabilityEl = card.querySelector('.detail-item[data-label="Availability"] .detail-value');
-    if (availabilityEl && download.availability !== undefined) {
-      availabilityEl.textContent = `${download.availability}%`;
+    const availabilityItem = card.querySelector('.detail-item[data-label="Availability"]');
+    if (availabilityItem && download.availability !== undefined) {
+      availabilityItem.querySelector('.detail-value').textContent = `${download.availability}%`;
+      availabilityItem.classList.toggle('availability-warning', parseFloat(download.availability) < 100);
     }
   }
 }
@@ -558,6 +559,7 @@ function createDownloadCard(download) {
     
     if (download.availability !== undefined) {
       const availability = createDetailItem('Availability', `${download.availability}%`);
+      if (parseFloat(download.availability) < 100) availability.classList.add('availability-warning');
       details.appendChild(availability);
     }
   }
diff --git a/public/style.css b/public/style.css
index 8e8220b..ca25ed6 100644
--- a/public/style.css
+++ b/public/style.css
@@ -462,17 +462,26 @@ body {
 .download-details {
   display: flex;
   flex-wrap: wrap;
-  gap: 4px 14px;
+  gap: 4px 6px;
   padding-top: 6px;
   border-top: 1px solid var(--border);
   align-items: center;
 }
 
 .detail-item {
-  display: flex;
+  display: inline-flex;
   align-items: baseline;
-  gap: 4px;
+  gap: 3px;
   font-size: 0.78rem;
+  background: var(--bg-secondary, rgba(0,0,0,0.04));
+  border-radius: 4px;
+  padding: 2px 6px;
+  white-space: nowrap;
+}
+
+.detail-item.availability-warning .detail-value {
+  color: var(--danger, #e53e3e);
+  font-weight: 700;
 }
 
 .detail-label {
@@ -1021,11 +1030,6 @@ body {
     width: 40px;
   }
 
-  .download-details {
-    flex-direction: column;
-    gap: 2px;
-  }
-
   .progress-container {
     flex-wrap: wrap;
   }