diff --git a/templates/index.html b/templates/index.html
index 8e32da8..f00d2ea 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" id="progress-bar-{{habit.id}}" role="progressbar" style="width: {{ habit.percentage }}%;"></div>
+                        <div class="progress-bar" id="progress-bar-{{habit.id}}" role="progressbar" style="width: {{ habit.percentage }}%; background-color: {% if habit.percentage >= 100 %} green {% else %} primary {% endif %}" aria-valuenow="{{ habit.percentage }}" aria-valuemin="0" aria-valuemax="100"></div>
                     </div>
                 </div>
             </li>
@@ -146,6 +146,22 @@
 
 
     <script>
+        function checkCompletionAndAnimate(habitId, percentage) {
+            var progressBar = document.getElementById("progress-bar-" + habitId);
+            var habitBlock = document.getElementById("habit-" + habitId);
+
+            if (percentage >= 100) {
+                progressBar.style.backgroundColor = "green";
+                habitBlock.classList.add("animate-bounce");
+                setTimeout(function () {
+                    habitBlock.classList.remove("animate-bounce");
+                }, 2000);
+            } else {
+                progressBar.style.backgroundColor = "";
+                habitBlock.classList.remove("animate-bounce");
+            }
+        }
+
         function sendPostRequest(checkboxId) {
             // Get the checkbox element using the provided ID
             var checkbox = document.getElementById(checkboxId);
@@ -167,6 +183,7 @@
                 var percentage = response.data.percentage;
                 var progressBar = document.getElementById("progress-bar-" + habitId);
                 progressBar.style.width = percentage + "%";
+                checkCompletionAndAnimate(habitId, percentage);
             }).catch(function (error) {
                 // Handle the error if needed
                 console.error('Error:', error);
diff --git a/templates/layouts/main.html b/templates/layouts/main.html
index e38aaa5..dfbae44 100644
--- a/templates/layouts/main.html
+++ b/templates/layouts/main.html
@@ -7,7 +7,7 @@
 
     <!-- Bootstrap CSS -->
     <link rel="stylesheet" href="/static/main.css">
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/fastbootstrap@2.2.0/dist/css/fastbootstrap.min.css" rel="stylesheet" integrity="sha256-V6lu+OdYNKTKTsVFBuQsyIlDiRWiOmtC8VQ8Lzdm2i4=" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
 
     <!-- Axios Library-->
@@ -52,8 +52,7 @@
     {% block content %} {% endblock %}
 
     <!-- Bootstrap JS -->
-    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
 </div>
 </body>
 </html>
\ No newline at end of file