diff --git a/static/js/main.js b/static/js/main.js
index 9beaa43..d9112bc 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -350,6 +350,30 @@ class TypewriterApp {
         }
     }
 
+    /**
+     * Update progress bar based on current position in lesson
+     */
+    updateProgressBar() {
+        const totalChars = this.fullText.length;
+        const currentChars = this.currentCharIndex;
+        const progressPercent = totalChars > 0 ? Math.round((currentChars / totalChars) * 100) : 0;
+
+        // Update text values
+        const progressCurrent = document.getElementById('progress-current');
+        const progressTotal = document.getElementById('progress-total');
+        const progressPercentElement = document.getElementById('progress-percent');
+        const progressBar = document.getElementById('progress-bar');
+
+        if (progressCurrent) progressCurrent.textContent = currentChars;
+        if (progressTotal) progressTotal.textContent = totalChars;
+        if (progressPercentElement) progressPercentElement.textContent = `${progressPercent}%`;
+        if (progressBar) {
+            progressBar.style.width = `${progressPercent}%`;
+            progressBar.setAttribute('aria-valuenow', currentChars);
+            progressBar.setAttribute('aria-valuemax', totalChars);
+        }
+    }
+
     /**
      * Update text display
      * @param {boolean} isKeystroke - Whether this is triggered by a keystroke
@@ -357,6 +381,7 @@ class TypewriterApp {
     updateDisplay(isKeystroke = false) {
         this.textDisplayManager.updateDisplay(this.userInput, this.currentCharIndex, isKeystroke);
         this.updateTrainingTimeDisplay();
+        this.updateProgressBar();
     }
 
     /**
diff --git a/templates/index.html b/templates/index.html
index 8045bb0..b3f79b0 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -61,15 +61,15 @@
                         <!-- Fortschrittsbalken -->
                         <div class="mb-3">
                             <div class="d-flex justify-content-between align-items-center">
-                                <small>Fortschritt: {{ current_lesson_index + 1 }} von {{ lessons|length }}</small>
-                                <small>{{ ((current_lesson_index + 1) / lessons|length * 100) | round | int }}%</small>
+                                <small id="progress-text">Fortschritt: <span id="progress-current">{{ current_position }}</span> von <span id="progress-total">{{ current_text|length }}</span></small>
+                                <small id="progress-percent">{{ ((current_position / current_text|length * 100) if current_text|length > 0 else 0) | round | int }}%</small>
                             </div>
                             <div class="progress" style="height: 8px;">
-                                <div class="progress-bar" role="progressbar" 
-                                     style="width: {{ ((current_lesson_index + 1) / lessons|length * 100) | round | int }}%;"
-                                     aria-valuenow="{{ current_lesson_index + 1 }}" 
-                                     aria-valuemin="0" 
-                                     aria-valuemax="{{ lessons|length }}">
+                                <div id="progress-bar" class="progress-bar" role="progressbar"
+                                     style="width: {{ ((current_position / current_text|length * 100) if current_text|length > 0 else 0) | round | int }}%;"
+                                     aria-valuenow="{{ current_position }}"
+                                     aria-valuemin="0"
+                                     aria-valuemax="{{ current_text|length }}">
                                 </div>
                             </div>
                         </div>