diff --git a/cookbook/migrations/0065_auto_20200626_1444.py b/cookbook/migrations/0065_auto_20200626_1444.py
new file mode 100644
index 00000000..3e2c2995
--- /dev/null
+++ b/cookbook/migrations/0065_auto_20200626_1444.py
@@ -0,0 +1,23 @@
+# Generated by Django 3.0.7 on 2020-06-26 12:44
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('cookbook', '0064_auto_20200625_2329'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='ingredient',
+            name='order',
+            field=models.IntegerField(default=0),
+        ),
+        migrations.AddField(
+            model_name='step',
+            name='order',
+            field=models.IntegerField(default=0),
+        ),
+    ]
diff --git a/cookbook/models.py b/cookbook/models.py
index fe2d5d2d..cf95d79d 100644
--- a/cookbook/models.py
+++ b/cookbook/models.py
@@ -150,10 +150,14 @@ class Ingredient(models.Model):
     unit = models.ForeignKey(Unit, on_delete=models.PROTECT)
     amount = models.DecimalField(default=0, decimal_places=16, max_digits=32)
     note = models.CharField(max_length=64, null=True, blank=True)
+    order = models.IntegerField(default=0)
 
     def __str__(self):
         return str(self.amount) + ' ' + str(self.unit) + ' ' + str(self.food)
 
+    class Meta:
+        ordering = ['order', 'pk']
+
 
 class Step(models.Model):
     TEXT = 'TEXT'
@@ -161,6 +165,10 @@ class Step(models.Model):
     kind = models.CharField(choices=((TEXT, _('Text')),), default=TEXT, max_length=16)
     instruction = models.TextField(blank=True)
     ingredients = models.ManyToManyField(Ingredient, blank=True)
+    order = models.IntegerField(default=0)
+
+    class Meta:
+        ordering = ['order', 'pk']
 
 
 class Recipe(models.Model):
diff --git a/cookbook/templates/forms/edit_internal_recipe.html b/cookbook/templates/forms/edit_internal_recipe.html
index 7f0397e9..7c1d6d10 100644
--- a/cookbook/templates/forms/edit_internal_recipe.html
+++ b/cookbook/templates/forms/edit_internal_recipe.html
@@ -13,6 +13,9 @@
     <script src="{% static 'js/vue-multiselect.min.js' %}"></script>
     <link rel="stylesheet" href="{% static 'css/vue-multiselect.min.css' %}">
 
+    <script src="{% static 'js/Sortable.min.js' %}"></script>
+    <script src="{% static 'js/vuedraggable.umd.min.js' %}"></script>
+
 {% endblock %}
 
 {% block content %}
@@ -20,7 +23,7 @@
     <h3>{% trans 'Edit Recipe' %}</h3>
 
     <div id="app">
-        <template v-if="recipe">
+        <div v-if="recipe">
 
             <div class="row">
                 <div class="col-md-12">
@@ -61,69 +64,71 @@
                 </div>
             </div>
 
-            <template v-for="step, index in recipe.steps">
+            <div v-for="step in recipe.steps">
                 <div class="row">
                     <div class="col-md-12">
-                        <h3>Step [[index + 1]]</h3>
+                        <h3>Step</h3>
                     </div>
                 </div>
                 <div class="row">
                     <div class="col-md-12">
-                        <template v-for="ingredient, index in step.ingredients">
-                            <div class="card">
+                        <draggable :list="step.ingredients" group="ingredients"
+                                   :empty-insert-threshold="10" handle=".handle" @sort="sortStep(step)">
+                            <div class="card" v-for="ingredient, index in step.ingredients" :key="ingredient.id">
                                 <div class="card-body" style="padding: 12px">
                                     <div class="row">
-                                        <div class="col-md-3">
+                                        <div class="col-md-1">
+                                            <i class="fas fa-arrows-alt-v handle"></i>
+                                        </div>
+                                        <div class="col-md-2">
                                             <input class="form-control" v-model="ingredient.amount">
                                         </div>
                                         <div class="col-md-3">
-                                            <multiselect v-tabindex
-                                                         ref="unit"
-                                                         v-model="ingredient.unit"
-                                                         :options="units"
-                                                         :close-on-select="true"
-                                                         :clear-on-select="true"
-                                                         :allow-empty="true"
-                                                         :preserve-search="true"
-                                                         placeholder="{% trans 'Select one' %}"
-                                                         tag-placeholder="{% trans 'Select' %}"
-                                                         label="name"
-                                                         :id="'unit_' + index"
-                                                         track-by="id"
-                                                         :multiple="false"
-                                                         :loading="units_loading"
-                                                         @search-change="searchUnits">
+                                            <multiselect
+                                                    v-tabindex
+                                                    ref="unit"
+                                                    v-model="ingredient.unit"
+                                                    :options="units"
+                                                    :close-on-select="true"
+                                                    :clear-on-select="true"
+                                                    :allow-empty="true"
+                                                    :preserve-search="true"
+                                                    placeholder="{% trans 'Select one' %}"
+                                                    tag-placeholder="{% trans 'Select' %}"
+                                                    label="name"
+                                                    track-by="id"
+                                                    :multiple="false"
+                                                    :loading="units_loading"
+                                                    @search-change="searchUnits">
                                             </multiselect>
 
                                         </div>
                                         <div class="col-md-3">
-                                            <multiselect v-tabindex
-                                                         ref="food"
-                                                         v-model="ingredient.food"
-                                                         :options="foods"
-                                                         :close-on-select="true"
-                                                         :clear-on-select="true"
-                                                         :allow-empty="true"
-                                                         :preserve-search="true"
-                                                         placeholder="{% trans 'Select one' %}"
-                                                         tag-placeholder="{% trans 'Select' %}"
-                                                         label="name"
-                                                         :id="'food_' + index"
-                                                         track-by="id"
-                                                         :multiple="false"
-                                                         :loading="foods_loading"
-                                                         @search-change="searchFoods">
+                                            <multiselect
+                                                    v-tabindex
+                                                    ref="food"
+                                                    v-model="ingredient.food"
+                                                    :options="foods"
+                                                    :close-on-select="true"
+                                                    :clear-on-select="true"
+                                                    :allow-empty="true"
+                                                    :preserve-search="true"
+                                                    placeholder="{% trans 'Select one' %}"
+                                                    tag-placeholder="{% trans 'Select' %}"
+                                                    label="name"
+                                                    track-by="id"
+                                                    :multiple="false"
+                                                    :loading="foods_loading"
+                                                    @search-change="searchFoods">
                                             </multiselect>
                                         </div>
                                         <div class="col-md-3">
                                             <input class="form-control" v-model="ingredient.note">
                                         </div>
                                     </div>
-
-
                                 </div>
                             </div>
-                        </template>
+                        </draggable>
                     </div>
                 </div>
                 <div class="row">
@@ -133,11 +138,11 @@
                     </div>
                 </div>
                 <br/>
-            </template>
+            </div>
 
             <button type="button" @click="updateRecipe()" class="btn">Save</button>
             <button type="button" @click="addStep()" class="btn">Add Step</button>
-        </template>
+        </div>
     </div>
 
     <script type="application/javascript">
@@ -197,6 +202,13 @@
                         {'instruction': '', ingredients: []}
                     )
                 },
+                sortStep: function (step) {
+                    console.log(step)
+
+                    step.ingredients.forEach(function (element, index) {
+                        element.order = index
+                    });
+                },
                 searchKeywords: function (query) {
                     this.keywords_loading = true
                     this.$http.get("{% url 'api:keyword-list' %}" + '?query=' + query + '&limit=10').then((response) => {