diff --git a/templates/index.html b/templates/index.html
index 10c55d9..e360724 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -34,7 +34,7 @@
         }
 
         // Simulierte Aktivitätsdaten (ersetze dies durch deine echten Daten)
-        const activityData = [9, 5, 11, 39, 24, 2, 10, 47, 32, 45, 9, 5, 11, 39, 24, 2, 10, 47, 32, 45];
+        const activityData = [5, 3, 10, 5, 24, 2, 10, 47, 32, 45, 9, 5, 11, 39, 24, 2, 10, 47, 32, 45];
 
         // Funktion zum Erstellen der Heatmap
         function createHeatmap(data) {
@@ -74,6 +74,8 @@
 
         // Erstelle die Heatmap mit den simulierten Daten
         createHeatmap(activityData);
+
+
     </script>
 
     <div class="col-sm-12 col-md-7 col-12">
@@ -102,11 +104,17 @@
                 <button type="button" class="btn btn-xs btn-danger rounded-circle" style="width: 40px; height: 40px" onclick="deleteHabit('{{habit.id}}')">
                     <i class="bi bi-trash3"></i>
                 </button>
+                <div class="col-12">
+                    <div class="progress" style="height: 2px; width: 90%">
+                        <div class="progress-bar" role="progressbar" style="width: {{ habit.percentage }};"></div>
+                    </div>
+                </div>
             </li>
 
             {% endfor %}
         </ul>
     </div>
+
     <script>
         function sendPostRequest(checkboxId) {
             // Get the checkbox element using the provided ID