diff --git a/models/Habit.py b/models/Habit.py
index 45787e1..41a310d 100644
--- a/models/Habit.py
+++ b/models/Habit.py
@@ -1,3 +1,4 @@
+import json
 from dataclasses import dataclass
 from datetime import datetime
 
@@ -23,22 +24,20 @@ class Habit:
     slot: int
     percentage: int = 0
 
-
     def __post_init__(self):
         self.fill_statistics()
 
-
     @staticmethod
     def create(user_id: int, name: str, times: int, note: str | None = None, unit: int | None = 1):
         slot = get_next_slot(user_id)
         id = create_habit(user_id, name, times, unit, slot, note)
         return Habit(id, user_id, name, note, times, unit, slot)
 
-
     @staticmethod
     def get(id: int):
         habit = get_habit(id)
         habit = Habit(habit[0], habit[1], habit[2], habit[3], habit[4], habit[5], habit[6]) if habit else None
+
         return habit
 
 
@@ -56,7 +55,6 @@ class Habit:
 
     def update_slot(self, new_slot: int):
         slots = get_slots(self.user_id)
-        print(slots)
         if new_slot > self.slot:
             slots = slots[self.slot:new_slot]
             for slot in slots:
@@ -115,8 +113,5 @@ class Habit:
         self.percentage = int(count / self.times * 100)
 
 
-# Test for update Slot
-    #user = User.get(1)
-    #habits = user.get_habits()
-    #print(habits[6])
-    #habits[6].update_slot(3)
\ No newline at end of file
+    def to_json(self):
+        return json.dumps(self, default=lambda o: o.__dict__, sort_keys=True, indent=4)
diff --git a/templates/index.html b/templates/index.html
index f00d2ea..8feb3eb 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -92,6 +92,9 @@
         <ul class="task-list row">
             {% for habit in habits %}
             <li class="row d-flex align-items-center mb-2" id="habit-{{habit.id}}">
+                <div class="col-auto drag-handle" style="cursor: grab;">
+                    <i class="bi bi-grip-vertical"></i>
+                </div>
                 <div class="col-auto">
                     <input {% if habit.checked %} checked {% endif %} type="checkbox" class="task-checkbox" id="{{habit.id}}" onclick="sendPostRequest('{{habit.id}}')">
                 </div>
@@ -100,10 +103,14 @@
                     {{ habit.name }}
                 </div>
 
-                <div class="col-8" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
+                <div class="col-6" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
                     {{ habit.note }}
                 </div>
 
+                <div class="col-2" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
+                    0 🔥
+                </div>
+
                 <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="setSelectedHabitId({{habit.id}})">
                     <i class="bi bi-trash3"></i>
                 </button>
@@ -150,7 +157,7 @@
             var progressBar = document.getElementById("progress-bar-" + habitId);
             var habitBlock = document.getElementById("habit-" + habitId);
 
-            if (percentage >= 100) {
+            if (percentage == 100) {
                 progressBar.style.backgroundColor = "green";
                 habitBlock.classList.add("animate-bounce");
                 setTimeout(function () {
@@ -212,4 +219,32 @@
     </script>
 </div>
 
+<script>
+    document.addEventListener('DOMContentLoaded', (event) => {
+        var el = document.querySelector('.task-list');
+        Sortable.create(el, {
+            handle: '.drag-handle',
+            animation: 150,
+            onEnd: function(evt) {
+                console.log(evt.oldIndex, evt.newIndex);
+
+                var habitId = el.children[evt.newIndex].id.split('-')[1];
+                var oldIndex = evt.oldIndex;
+                var newIndex = evt.newIndex;
+
+                axios.post('/reorder', { habitId: habitId, oldIndex: oldIndex, newIndex: newIndex }, {
+                    headers: {
+                        'Content-Type': 'application/json'
+                    }
+                }).then(function (response) {
+                    // Handle the success response if needed
+                    console.log(response.data);
+                }).catch(function (error) {
+                    // Handle the error if needed
+                    console.error('Error:', error);
+                });
+            }
+        });
+    });
+</script>
 {% endblock %}
\ No newline at end of file
diff --git a/templates/layouts/main.html b/templates/layouts/main.html
index dfbae44..c375f6a 100644
--- a/templates/layouts/main.html
+++ b/templates/layouts/main.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" >
     <title>{{ title }} - HabitTracker</title>
 
-    <!-- Bootstrap CSS -->
+    <!-- CSS -->
     <link rel="stylesheet" href="/static/main.css">
     <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">
@@ -53,6 +53,7 @@
 
     <!-- Bootstrap JS -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js"></script>
 </div>
 </body>
 </html>
\ No newline at end of file