diff --git a/api/migrations/0010_trainingentry_order.py b/api/migrations/0010_trainingentry_order.py
new file mode 100644
index 0000000..8d7e7e6
--- /dev/null
+++ b/api/migrations/0010_trainingentry_order.py
@@ -0,0 +1,18 @@
+# Generated by Django 2.2.14 on 2021-11-13 09:02
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('api', '0009_auto_20211110_1936'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='trainingentry',
+            name='order',
+            field=models.IntegerField(default=0),
+        ),
+    ]
diff --git a/api/models.py b/api/models.py
index cdc8a68..cedf8a0 100644
--- a/api/models.py
+++ b/api/models.py
@@ -123,6 +123,10 @@ class TrainingEntry(models.Model):
     sets = models.IntegerField()
     comment = models.CharField(max_length=300, blank=True)
     exercise = models.ForeignKey(ExerciseType, on_delete=models.CASCADE, related_name='Exercise')
+    order = models.IntegerField(default=0)
+
+    class Meta:
+        ordering = ['day', 'order']
 
     def __str__(self):
         return "Phase " + str(self.phase) + " Week " + str(self.week) + " Day " + str(self.day) + " " + str(self.exercise.name)
diff --git a/api/serializers.py b/api/serializers.py
index 54903d9..8d45036 100644
--- a/api/serializers.py
+++ b/api/serializers.py
@@ -29,7 +29,8 @@ def id_field(self, training):
         return training.id
     class Meta:
         model = TrainingEntry
-        fields = ("id",
+
+        fields = ('id',
                   'user',
                   'phase',
                   'week',
@@ -38,7 +39,8 @@ class Meta:
                   'weight',
                   'sets',
                   'exercise',
-                  'comment'
+                  'comment',
+                  'order'
                   )
 
 class SetFeedbackSerializer(serializers.ModelSerializer):
diff --git a/trainerInterface/templates/trainerInterface/trainPlan.html b/trainerInterface/templates/trainerInterface/trainPlan.html
index e1c21dc..e0a4310 100644
--- a/trainerInterface/templates/trainerInterface/trainPlan.html
+++ b/trainerInterface/templates/trainerInterface/trainPlan.html
@@ -537,6 +537,9 @@
             border-radius: 5px;
             color: #f4eb49;
     }
+    .exerciseCell{
+        cursor: pointer;
+    }
     </style>
     <div class="topBarPhaseSelector">
         <div class="phaseSelectorWrapper">
@@ -622,7 +625,8 @@
                     {% for week in phase.weeks.all %}
                         {% for day in week.days.all %}
                             <div class="dayTable" id ="Phase{{ phase.phase }}Week{{ week.week }}Day{{ day.day }}" style="display: none">
-                                <table class="table-striped" style="width: 100%">
+                                <table id="table{{ phase.phase }}{{ week.week }}{{ day.day }}" class="table-striped" style="width: 100%">
+                                    <thead>
                                         <tr>
                                             <td class="addEntryButtonWrapper" colspan="6">
                                                 <div class="dayTitle"> Day {{ day.day }} </div>
@@ -636,25 +640,27 @@
                                             <th>Comment</th>
                                             <th></th>
                                         </tr>
-
-                                        {% for entry in day.entrys.all|dictsort:"id" %}
-                                        <tr style="text-align: center" onclick='editEntry("{{ entry.exercise.name }}", "{{ entry.reps }}", "{{ entry.weight }}","{{ entry.sets }}", "{{ entry.comment }}", "{{ entry.id }}")'>
+                                    </thead>
+                                    <tbody>
+                                        {% for entry in day.entrys.all|dictsort:"order" %}
+                                        <tr class = "entryRow" id="{{ entry.id }}" style="text-align: center" >
                                             <td class="exerciseCell">{{ entry.exercise.name }}</td>
-                                            <td>{{ entry.reps }}</td>
-                                            <td>{{ entry.weight }}</td>
-                                            <td>{{ entry.sets }}</td>
-                                            <td>{{ entry.comment }}</td>
+                                            <td onclick='editEntry("{{ entry.exercise.name }}", "{{ entry.reps }}", "{{ entry.weight }}","{{ entry.sets }}", "{{ entry.comment }}", "{{ entry.id }}")'>{{ entry.reps }}</td>
+                                            <td onclick='editEntry("{{ entry.exercise.name }}", "{{ entry.reps }}", "{{ entry.weight }}","{{ entry.sets }}", "{{ entry.comment }}", "{{ entry.id }}")'>{{ entry.weight }}</td>
+                                            <td onclick='editEntry("{{ entry.exercise.name }}", "{{ entry.reps }}", "{{ entry.weight }}","{{ entry.sets }}", "{{ entry.comment }}", "{{ entry.id }}")'>{{ entry.sets }}</td>
+                                            <td onclick='editEntry("{{ entry.exercise.name }}", "{{ entry.reps }}", "{{ entry.weight }}","{{ entry.sets }}", "{{ entry.comment }}", "{{ entry.id }}")'>{{ entry.comment }}</td>
                                             <td style="width: 50px"><button class="deleteEntryButtonWrapper"
                                                                             type="button" name="button"
                                                                             onclick="deleteEntry({{ entry.id }})">
                                                 <div class="deleteEntryButton">+</div></button></td>
                                         </tr>
                                         {% endfor %}
-                                        <tr>
-                                            <td class="addEntryButtonWrapper" colspan="6">
-                                                <button id="add-entry" class="addEntryButton" type="button" name="button" onclick="toggleAddEntry({{phase.phase}}, {{week.week}}, {{day.day}})">+</button>
-                                            </td>
-                                        </tr>
+                                    </tbody>
+                                    <tr>
+                                        <td id="addentry" class="addEntryButtonWrapper" colspan="6">
+                                            <button id="add-entry" class="addEntryButton" type="button" name="button" onclick="toggleAddEntry({{phase.phase}}, {{week.week}}, {{day.day}})">+</button>
+                                        </td>
+                                    </tr>
                                 </table>
                             </div>
                         {% endfor %}
@@ -853,6 +859,266 @@
     <script src="{% static '/assets/js/jquery.bootstrap.modal.forms.js' %}"></script>
     <script src="{% static '/bootstrap/js/bootstrap.js' %}"></script>
 
+    <script>
+
+            document.addEventListener('DOMContentLoaded', function () {
+                // const table = document.getElementById('table511');
+                var table;
+                $('td.exerciseCell').mousedown(function() {
+                    event.stopPropagation();
+                    var tableId = $(this).parents("table").attr("id");
+
+                    table = document.getElementById(tableId);
+                    getRows();
+                    var cell = $(this).children("td").get(0);
+                    if (typeof cell !== "undefined" && cell.id !== "addentry") {
+                      mouseDownHandlerJ($(this).get(0));
+                    }
+                });
+
+
+                let draggingEle;
+                let draggingRowIndex;
+                let placeholder;
+                let list;
+                let isDraggingStarted = false;
+
+                // The current position of mouse relative to the dragging element
+                let x = 0;
+                let y = 0;
+
+                // Swap two nodes
+                const swap = function (nodeA, nodeB) {
+                    const parentA = nodeA.parentNode;
+                    const siblingA = nodeA.nextSibling === nodeB ? nodeA : nodeA.nextSibling;
+
+                    // Move `nodeA` to before the `nodeB`
+                    nodeB.parentNode.insertBefore(nodeA, nodeB);
+
+                    // Move `nodeB` to before the sibling of `nodeA`
+                    parentA.insertBefore(nodeB, siblingA);
+                };
+
+                // Check if `nodeA` is above `nodeB`
+                const isAbove = function (nodeA, nodeB) {
+                    // Get the bounding rectangle of nodes
+                    const rectA = nodeA.getBoundingClientRect();
+                    const rectB = nodeB.getBoundingClientRect();
+
+                    return rectA.top + rectA.height / 2 < rectB.top + rectB.height / 2;
+                };
+
+                const cloneTable = function () {
+                    const rect = table.getBoundingClientRect();
+                    const width = parseInt(window.getComputedStyle(table).width);
+
+                    list = document.createElement('div');
+                    list.classList.add('clone-list');
+                    list.style.position = 'relative';
+                    // list.style.left = `${rect.left}px`;
+                    // list.style.top = `${rect.top}px`;
+                    table.parentNode.insertBefore(list, table);
+
+                    // Hide the original table
+                    table.style.display = 'none';
+
+                    table.querySelectorAll('tr').forEach(function (row) {
+                        // Create a new table from given row
+                        const item = document.createElement('div');
+                        item.classList.add('draggable');
+
+                        const newTable = document.createElement('table');
+                        newTable.setAttribute('class', 'clone-table');
+                        newTable.style.width = `${width}px`;
+
+                        const newRow = document.createElement('tr');
+                        const cells = [].slice.call(row.children);
+                        cells.forEach(function (cell) {
+                            const newCell = cell.cloneNode(true);
+                            newCell.style.width = `${parseInt(window.getComputedStyle(cell).width)}px`;
+                            newRow.appendChild(newCell);
+                        });
+
+                        newTable.appendChild(newRow);
+                        item.appendChild(newTable);
+                        list.appendChild(item);
+                    });
+                };
+                const mouseDownHandlerJ = function (e) {
+                    // Get the original row
+                    event.stopPropagation();
+                    const originalRow = e.parentNode;
+                    draggingRowIndex = [].slice.call(table.querySelectorAll('tr')).indexOf(originalRow);
+                    console.log(draggingRowIndex)
+                    // Determine the mouse position
+                    if (draggingRowIndex !== 0 && draggingRowIndex !== 1) {
+                        x = e.clientX;
+                        y = e.clientY;
+
+                        // Attach the listeners to `document`
+                        document.addEventListener('mousemove', mouseMoveHandler);
+                        document.addEventListener('mouseup', mouseUpHandler);
+
+                    }
+                };
+                const mouseDownHandler = function (e) {
+                    // Get the original row
+                    event.stopPropagation();
+                    const originalRow = e.target.parentNode;
+                    draggingRowIndex = [].slice.call(table.querySelectorAll('tr')).indexOf(originalRow);
+                    console.log(draggingRowIndex)
+                    // Determine the mouse position
+                    if (draggingRowIndex !== 0 && draggingRowIndex !== 1) {
+                        x = e.clientX;
+                        y = e.clientY;
+
+                        // Attach the listeners to `document`
+                        var editwindow = document.getElementById("edit-entry-modal");
+                        console.log(editwindow.style.display);
+
+                        document.addEventListener('mousemove', mouseMoveHandler);
+                        document.addEventListener('mouseup', mouseUpHandler);
+
+                    }
+                };
+
+
+                function mouseMoveHandler(e) {
+                    if (!isDraggingStarted) {
+                        isDraggingStarted = true;
+
+                        cloneTable();
+
+                        draggingEle = [].slice.call(list.children)[draggingRowIndex];
+                        draggingEle.classList.add('dragging');
+
+                        // Let the placeholder take the height of dragging element
+                        // So the next element won't move up
+                        placeholder = document.createElement('div');
+                        placeholder.classList.add('placeholder');
+                        draggingEle.parentNode.insertBefore(placeholder, draggingEle.nextSibling);
+                        placeholder.style.height = `${draggingEle.offsetHeight}px`;
+                    }
+
+                    // Set position for dragging element
+                    draggingEle.style.position = 'absolute';
+                    draggingEle.style.top = `${draggingEle.offsetTop + e.clientY - y}px`;
+                    draggingEle.style.left = `${draggingEle.offsetLeft + e.clientX - x}px`;
+
+                    // Reassign the position of mouse
+                    x = e.clientX;
+                    y = e.clientY;
+
+                    // The current order
+                    // prevEle
+                    // draggingEle
+                    // placeholder
+                    // nextEle
+                    const prevEle = draggingEle.previousElementSibling;
+                    const nextEle = placeholder.nextElementSibling;
+
+                    // The dragging element is above the previous element
+                    // User moves the dragging element to the top
+                    // We don't allow to drop above the header
+                    // (which doesn't have `previousElementSibling`)
+                    if (prevEle && prevEle.previousElementSibling && prevEle.previousElementSibling.previousElementSibling && isAbove(draggingEle, prevEle)) {
+                        // The current order    -> The new order
+                        // prevEle              -> placeholder
+                        // draggingEle          -> draggingEle
+                        // placeholder          -> prevEle
+                        swap(placeholder, draggingEle);
+                        swap(placeholder, prevEle);
+                        return;
+                    }
+
+                    // The dragging element is below the next element
+                    // User moves the dragging element to the bottom
+                    if (nextEle && nextEle.nextElementSibling && isAbove(nextEle, draggingEle)) {
+                        // The current order    -> The new order
+                        // draggingEle          -> nextEle
+                        // placeholder          -> placeholder
+                        // nextEle              -> draggingEle
+                        swap(nextEle, placeholder);
+                        swap(nextEle, draggingEle);
+                    }
+                };
+
+                function mouseUpHandler() {
+                    // Remove the placeholder
+                    placeholder && placeholder.parentNode.removeChild(placeholder);
+
+                    draggingEle.classList.remove('dragging');
+                    draggingEle.style.removeProperty('top');
+                    draggingEle.style.removeProperty('left');
+                    draggingEle.style.removeProperty('position');
+
+                    // Get the end index
+                    const endRowIndex = [].slice.call(list.children).indexOf(draggingEle);
+
+                    isDraggingStarted = false;
+
+                    // Remove the `list` element
+                    list.parentNode.removeChild(list);
+
+                    // Move the dragged row to `endRowIndex`
+                    let rows = [].slice.call(table.querySelectorAll('tr'));
+                    draggingRowIndex > endRowIndex
+                        ? rows[endRowIndex].parentNode.insertBefore(rows[draggingRowIndex], rows[endRowIndex])
+                        : rows[endRowIndex].parentNode.insertBefore(
+                              rows[draggingRowIndex],
+                              rows[endRowIndex].nextSibling
+                          );
+
+                    // Bring back the table
+                    table.style.display="table";
+
+                    // Remove the handlers of `mousemove` and `mouseup`
+                    document.removeEventListener('mousemove', mouseMoveHandler);
+                    document.removeEventListener('mouseup', mouseUpHandler);
+                    var idOrder = [];
+                    table.querySelectorAll('tr.entryRow').forEach(function (row) {
+                        idOrder.push(row.id);
+                    });
+                    idOrder =  JSON.stringify({idOrder});
+                    $.ajax({
+                        type : "POST",
+                        url: "{% url 'change_order' %}",
+                        data: {
+                         idOrder : idOrder,
+                         csrfmiddlewaretoken: '{{ csrf_token }}',
+                         dataType: "json",
+                        },
+                        success: function(data){
+
+                        },
+                        failure: function() {
+                        }
+                    });
+                    console.log(idOrder);
+
+                };
+                function getRows() {
+                    table.querySelectorAll('tr').forEach(function (row, index) {
+                        // Ignore the header
+                        // We don't want user to change the order of header
+
+                        if (index === 0) {
+
+                        }
+                        else if (row.firstElementChild.id === "addentry"){
+
+
+                        }
+                        else {
+
+                            const firstCell = row.firstElementChild;
+                            firstCell.classList.add('draggable');
+                            firstCell.addEventListener('mousedown', mouseDownHandler);
+                        }
+                    });
+                };
+            });
+        </script>
     <script type="text/javascript">
 
 // ---------------------------------------------------------------------------------------------------------------------
@@ -948,7 +1214,22 @@
         }
 // ---------------------------------------------------------------------------------------------------------------------
 // delete Entry
-
+//         function triggerMouseEvent (node, eventType) {
+//             var clickEvent = document.createEvent ('MouseEvents');
+//             clickEvent.initEvent (eventType, true, true);
+//             node.dispatchEvent (clickEvent);
+//         }
+        function editEntry(name, reps, weight, sets, comment, id){
+            event.stopPropagation();
+            var y = document.getElementById("edit-entry-modal");
+            $('#editExerciseField').val(name);
+            $('#editRepField').val(reps);
+            $('#editWeightField').val(weight);
+            $('#editSetField').val(sets);
+            $('#editCommentField').val(comment);
+            $('#idField').val(id);
+            y.style.display = "flex";
+        }
         function deleteEntry(id, e){
 
             // stops button press counting as edit entry press on row
@@ -1162,16 +1443,7 @@
           y.style.display = "none";
           clone.style.display = 'none';
         });
-        function editEntry(name, reps, weight, sets, comment, id){
-            var y = document.getElementById("edit-entry-modal");
-            $('#editExerciseField').val(name);
-            $('#editRepField').val(reps);
-            $('#editWeightField').val(weight);
-            $('#editSetField').val(sets);
-            $('#editCommentField').val(comment);
-            $('#idField').val(id);
-            y.style.display = "flex";
-        }
+
 // ---------------------------------------------------------------------------------------------------------------------
 // submit add entry
         $('#addEntryForm').on('submit', function(e){
diff --git a/trainerInterface/urls.py b/trainerInterface/urls.py
index 64d55ac..ae89d5a 100644
--- a/trainerInterface/urls.py
+++ b/trainerInterface/urls.py
@@ -24,5 +24,6 @@
     path('dashboard/editgroup/', editGroup, name='edit_group'),
     path('dashboard/toggleWeek/', toggleActiveWeek, name='toggle_active_week'),
     path('dashboard/cloneWeek/', cloneWeek, name='clone_week'),
+    path('dashboard/changeOrder/', changeOrder, name='change_order'),
 ]
 
diff --git a/trainerInterface/views.py b/trainerInterface/views.py
index 75710be..108db64 100644
--- a/trainerInterface/views.py
+++ b/trainerInterface/views.py
@@ -201,6 +201,21 @@ def addEntry(request):
             }
     return redirect('trainplan')
 
+def changeOrder(request):
+    if request.is_ajax():
+        idOrder = json.loads(request.POST.get('idOrder', None))['idOrder']
+        order = 1
+        for id in idOrder:
+            print(id)
+            exercise = TrainingEntry.objects.get(id=id)
+            exercise.order = order
+            exercise.save()
+            order += 1
+
+        print(idOrder)
+
+    return redirect('trainplan')
+
 def cloneWeek(request):
     user=User.objects.get(email=request.session['selected_client'])
     if request.is_ajax():