diff --git a/static/script.js b/static/script.js
index 8fcf5437..909f1cec 100644
--- a/static/script.js
+++ b/static/script.js
@@ -1379,13 +1379,22 @@ function renderInventoryState(state) {
   const burdenUnits = Number(stats.burden_units || 0);
   const encumbranceCapacity = Number(stats.encumbrance_capacity || 0);
   const burdenPct = encumbranceCapacity > 0
-    ? Math.max(0, Math.min(100, (burdenUnits / encumbranceCapacity) * 100))
+    ? Math.max(0, Math.min(200, (burdenUnits / encumbranceCapacity) * 100))
     : 0;
-  state.burdenLabel.textContent = `${Math.round(burdenPct)}%`;
+  const burdenDisplay = Math.floor(burdenPct);
+  state.burdenLabel.textContent = `${burdenDisplay}%`;
   state.burdenLabel.title = burdenUnits > 0 && encumbranceCapacity > 0
     ? `${burdenUnits}/${encumbranceCapacity}`
     : '';
-  state.burdenFill.style.height = `${burdenPct}%`;
+  state.burdenFill.style.height = `${Math.min(100, burdenPct / 2)}%`;
+  state.burdenFill.className = 'inv-burden-fill';
+  if (burdenPct > 150) {
+    state.burdenFill.classList.add('is-danger');
+  } else if (burdenPct > 100) {
+    state.burdenFill.classList.add('is-warning');
+  } else {
+    state.burdenFill.classList.add('is-safe');
+  }
 
   // 4. Sort containers for stable sidebar order (by unsigned item_id)
   containers.sort((a, b) => {
diff --git a/static/style.css b/static/style.css
index ffb87c1b..f4bf1ae1 100644
--- a/static/style.css
+++ b/static/style.css
@@ -838,6 +838,18 @@ body.noselect, body.noselect * {
   transition: height 0.3s ease;
 }
 
+.inv-burden-fill.is-safe {
+  background: var(--ac-green);
+}
+
+.inv-burden-fill.is-warning {
+  background: #d8a431;
+}
+
+.inv-burden-fill.is-danger {
+  background: #b7432c;
+}
+
 .inv-burden-label {
   position: absolute;
   top: -18px;