diff --git a/app/components/recipe-list.hbs b/app/components/recipe-list.hbs
index b11064a..29d2391 100644
--- a/app/components/recipe-list.hbs
+++ b/app/components/recipe-list.hbs
@@ -1,7 +1,7 @@
 <div class="rounded-md shadow-md">
   <SortableGroup
-    @model={{this.items}}
-    @onChange={{action this.reorderItems}}
+    @model={{this.sortedItems}}
+    @onChange={{action this.reorderMeals}}
     as |group|>
     {{#each group.model as |meal|}}
       <group.item
diff --git a/app/components/recipe-list.js b/app/components/recipe-list.js
index faf2707..a0d59d2 100644
--- a/app/components/recipe-list.js
+++ b/app/components/recipe-list.js
@@ -13,13 +13,23 @@ export default class RecipeListComponent extends Component {
     this.assignExistingItems();
   }
 
+  get sortedItems() {
+    console.log('sorted items called');
+    return this.items.sortBy('listOrder');
+  }
+
   async assignExistingItems() {
     let items = await this.store.peekAll('meal');
     this.items = items;
   }
 
   @action
-  reorderItems(reorderedItems) {
-    this.items = reorderedItems;
+  async reorderMeals(reorderedMeals) {
+    let orderedIds = reorderedMeals.map(meal => meal.id);
+
+    for (let index = 0; index < orderedIds.length; index++) {
+      let meal = await this.store.peekRecord('meal', orderedIds[index]);
+      meal.listOrder = index;
+    }
   }
 }
diff --git a/app/models/meal.js b/app/models/meal.js
index 9474a35..46e406c 100644
--- a/app/models/meal.js
+++ b/app/models/meal.js
@@ -11,4 +11,5 @@ export default class MealModel extends Model {
   @attr tags;
   @attr youtube;
   @attr source;
+  @attr('number', { defaultValue: Infinity }) listOrder;
 }