diff --git a/web/app.js b/web/app.js
index f291098..bfc716d 100644
--- a/web/app.js
+++ b/web/app.js
@@ -375,20 +375,26 @@ function updatePotVisualization() {
 	const potInnerBottom = 172;
 	const potInnerH = potInnerBottom - potInnerTop; // 142
 
-	const particlesEl  = document.getElementById('grain-particles');
+	const particlesEl   = document.getElementById('grain-particles');
 	const waterClipRect = document.getElementById('water-clip-rect');
+	const levelTickEl   = document.getElementById('level-tick');
+	const levelLabelEl  = document.getElementById('level-label');
 
 	if (sudEmpty || sudVolumen <= 0) {
 		waterFillEl.setAttribute('height', '0');
 		waterWaveEl.setAttribute('d', '');
 		if (waterClipRect) waterClipRect.setAttribute('height', '0');
-		if (particlesEl)  particlesEl.style.opacity = '0';
+		if (particlesEl)   particlesEl.style.opacity = '0';
+		if (levelTickEl)   levelTickEl.style.display  = 'none';
+		if (levelLabelEl)  levelLabelEl.style.display = 'none';
 		return;
 	}
 
-	const fillFraction = Math.min(1, Math.max(0, currentStepWaterMass() / sudVolumen));
-	const waterH = fillFraction * potInnerH;
-	const waterTop = potInnerBottom - waterH;
+	const grainMass      = currentStepGrainMass();
+	const utilizedVolume = currentStepWaterMass() + grainMass * 0.7;
+	const fillFraction   = Math.min(1, Math.max(0, utilizedVolume / sudVolumen));
+	const waterH         = fillFraction * potInnerH;
+	const waterTop       = potInnerBottom - waterH;
 	waterFillEl.setAttribute('y', waterTop.toFixed(1));
 	waterFillEl.setAttribute('height', waterH.toFixed(1));
 	waterWaveEl.setAttribute('d', wavePathD(63, 177, waterTop, 3, 28));
@@ -398,7 +404,16 @@ function updatePotVisualization() {
 		waterClipRect.setAttribute('height', waterH.toFixed(1));
 	}
 	if (particlesEl) {
-		particlesEl.style.opacity = currentStepGrainMass() > 0 ? '1' : '0';
+		particlesEl.style.opacity = grainMass > 0 ? '1' : '0';
+	}
+	if (levelTickEl && levelLabelEl) {
+		const ty = waterTop.toFixed(1);
+		levelTickEl.setAttribute('y1', ty);
+		levelTickEl.setAttribute('y2', ty);
+		levelLabelEl.setAttribute('y', ty);
+		levelLabelEl.textContent = utilizedVolume.toFixed(1) + ' L';
+		levelTickEl.style.display  = '';
+		levelLabelEl.style.display = '';
 	}
 }
 
diff --git a/web/index.html b/web/index.html
index 9b13ded..e9ece89 100644
--- a/web/index.html
+++ b/web/index.html
@@ -144,6 +144,12 @@
     <line x1="60"  y1="174" x2="180" y2="174" stroke="#bbb" stroke-width="4" stroke-linecap="round"/>
     <line x1="60"  y1="28"  x2="180" y2="28"  stroke="#bbb" stroke-width="4" stroke-linecap="round"/>
 
+    <!-- Utilized volume level indicator (JS-positioned) -->
+    <line id="level-tick" x1="52" y1="172" x2="60" y2="172"
+          stroke="#4a9ed8" stroke-width="1.5" stroke-linecap="round" style="display:none"/>
+    <text id="level-label" x="50" y="172" font-size="8" fill="#4a9ed8"
+          dominant-baseline="middle" text-anchor="end" style="display:none">0.0 L</text>
+
     <!-- Stirrer blades (inside pot) -->
     <g id="stirrer-blades" clip-path="url(#pot-clip)">
       <rect x="87"  y="133" width="31" height="5" fill="#666" rx="1"/>