diff --git a/app.py b/app.py
index 790685c..dc0f442 100644
--- a/app.py
+++ b/app.py
@@ -329,7 +329,8 @@ def check_habit():
 
     return {
         "habitId": habit_id,
-        "unchecked": not delete_tracking
+        "unchecked": not delete_tracking,
+        "percentage": habit.percentage,
     }
 
 @app.route('/delete', methods=['POST'])
diff --git a/templates/index.html b/templates/index.html
index 10c55d9..2c391df 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -13,8 +13,8 @@
     }
 
     .day {
-        width: 50px; /* Ändere die Breite nach Bedarf */
-        height: 50px; /* Ändere die Höhe nach Bedarf */
+        width: 50px;
+        height: 50px;
         border: 1px solid #ccc;
         display: flex;
         align-items: center;
@@ -24,7 +24,10 @@
 
 <div class="row">
 
-    <div class="col-sm-12 col-md-5 col-12" id="heatmap"></div>
+    <div class="col-md-5 col-12">
+        <div id="heatmap"></div>
+    </div>
+
     <script>
         // Funktion zur Rückgabe des Montagsdatums
         function getMonday(date) {
@@ -34,7 +37,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,9 +77,11 @@
 
         // Erstelle die Heatmap mit den simulierten Daten
         createHeatmap(activityData);
+
+
     </script>
 
-    <div class="col-sm-12 col-md-7 col-12">
+    <div class="col-md-7 col-12">
         <div class="row mb-3">
             <h2 class="col-10">Task List</h2>
             <a class="col-2 btn btn-primary" role="button" href="/habit">
@@ -99,14 +104,40 @@
                     {{ habit.note }}
                 </div>
 
-                <button type="button" class="btn btn-xs btn-danger rounded-circle" style="width: 40px; height: 40px" onclick="deleteHabit('{{habit.id}}')">
+                <button type="button" class="btn btn-xs btn-danger rounded-circle" data-bs-toggle="modal" data-bs-target="#exampleModal" style="width: 40px; height: 40px" onclick="() => { let habitId = {{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" id="progress-bar-{{habit.id}}" role="progressbar" style="width: {{ habit.percentage }};"></div>
+                    </div>
+                </div>
             </li>
 
             {% endfor %}
         </ul>
     </div>
+
+
+    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    ...
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                    <button type="button" class="btn btn-primary btn-danger" onclick="deleteHabit(habitId) ">Löschen</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
     <script>
         function sendPostRequest(checkboxId) {
             // Get the checkbox element using the provided ID
@@ -124,6 +155,11 @@
             }).then(function (response) {
                 // Handle the success response if needed
                 console.log(response.data);
+
+                // Set the percentage of the habit. percentage received as integer
+                var percentage = response.data.percentage;
+                var progressBar = document.getElementById("progress-bar-" + habitId);
+                progressBar.style.width = percentage + "%";
             }).catch(function (error) {
                 // Handle the error if needed
                 console.error('Error:', error);
@@ -132,6 +168,7 @@
 
         function deleteHabit(habitId) {
             // Make a POST request to /delete with the habit id
+
             axios.post('/delete', { habitId: habitId }, {
                 headers: {
                     'Content-Type': 'application/json'