diff --git a/frontend/app.js b/frontend/app.js
index 2874cf8..2c1b830 100644
--- a/frontend/app.js
+++ b/frontend/app.js
@@ -1540,12 +1540,19 @@ function renderDrugs() {
             ${drug.variants.map(variant => {
                 const variantIsLowStock = variant.quantity <= variant.low_stock_threshold;
                 const variantExpanded = expandedVariants.has(variant.id);
+                const expiredQuantity = (variant.batches || [])
+                    .filter(batch => Number(batch.quantity) > 0 && isBatchExpired(batch))
+                    .reduce((sum, batch) => sum + Number(batch.quantity || 0), 0);
+                const inDateQuantity = Math.max(0, Number(variant.quantity || 0) - expiredQuantity);
+                const quantityDisplay = expiredQuantity > 0
+                    ? `${formatDisplayNumber(inDateQuantity)} ${escapeHtml(variant.unit)} (${formatDisplayNumber(expiredQuantity)} expired)`
+                    : `${formatDisplayNumber(variant.quantity)} ${escapeHtml(variant.unit)}`;
                 return `
                     <div class="variant-item ${variantIsLowStock ? 'low-stock' : ''}" onclick="toggleVariantExpansion(${variant.id}, event)">
                         <div class="variant-info">
                             <div class="variant-details">
                                 <div class="variant-name">${escapeHtml(drug.name)} ${escapeHtml(variant.strength)}</div>
-                                <div class="variant-quantity">${variant.quantity} ${escapeHtml(variant.unit)}</div>
+                                <div class="variant-quantity">${quantityDisplay}</div>
                             </div>
                             <div class="variant-status">
                                 <span class="variant-badge ${variantIsLowStock ? 'badge-low' : 'badge-normal'}">