diff --git a/templates/index.html b/templates/index.html
index e767f0c..a2acf8a 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -109,7 +109,7 @@
                 </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 class="progress-bar" id="progress-bar-{{habit.id}}" role="progressbar" style="width: {{ habit.percentage }};"></div>
                     </div>
                 </div>
             </li>
@@ -135,6 +135,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);