diff --git a/src/components/EditMealPage.vue b/src/components/EditMealPage.vue
index 92cf07f..8a4715e 100644
--- a/src/components/EditMealPage.vue
+++ b/src/components/EditMealPage.vue
@@ -22,8 +22,8 @@
         </div>
         <div class="ingredients">
             <h2>Additional Ingredients</h2>
-            <ul v-if="meal.ingredients && meal.ingredients.length">
-                <li v-for="ingredient in meal.ingredients" :key="ingredient" class="saved-ingredient">
+            <ul v-if="meal.extra_ingredients && meal.extra_ingredients.length">
+                <li v-for="ingredient in meal.extra_ingredients" :key="ingredient" class="saved-ingredient">
                     <p>
                         <compact-parsed-ingredient :ingredient="ingredient" />
                     </p>
@@ -35,6 +35,7 @@
             </div>
             <ingredient-add-box @add-ingredient="addIngredient" />
         </div>
+        <button @click="saveMeal">Save</button>
     </div>
 </template>
 
@@ -52,17 +53,18 @@ export default {
     data() {
         return {
             meal: {
+                id: 0,
                 date: new Date(),
                 recipes: [],
-                ingredients: [],
-                chefs: [{ name: 'Ryan' }],
-                consumers: [{ name: 'Ryan' }, { name: 'Jacob' }],
+                extra_ingredients: [],
+                chefs: [],
+                consumers: [],
             }
         };
     },
-    beforeMount() {
+    async beforeMount() {
         if (this.id) {
-            this.meal = data.getMeal(this.id);
+            this.meal = await data.getMeal(this.id);
         }
     },
     methods: {
@@ -70,18 +72,26 @@ export default {
             this.meal.recipes.push(recipe);
         },
         selectDate(date) {
-            console.log("selectDate", date);
             this.meal.date = date;
         },
         removeRecipe(recipe) {
             this.meal.recipes = this.meal.recipes.filter(r => r.id !== recipe.id);
         },
         addIngredient(ingredient) {
-            this.meal.ingredients.push(ingredient);
+            this.meal.extra_ingredients.push(ingredient);
         },
         deleteIngredient(ingredient) {
-            this.meal.ingredients = this.meal.ingredients.filter(i => i != ingredient);
+            this.meal.extra_ingredients = this.meal.extra_ingredients.filter(i => i != ingredient);
         },
+        async saveMeal() {
+            const meal = await data.saveMeal(this.meal);
+            if (meal?.id) {
+                this.$router.push(`/meals/${meal.id}`);
+                return;
+            }
+
+            alert('Failed to save meal');
+        }
     }
 }
 </script>
diff --git a/src/components/MealCard.vue b/src/components/MealCard.vue
index 04185f2..587c446 100644
--- a/src/components/MealCard.vue
+++ b/src/components/MealCard.vue
@@ -1,9 +1,44 @@
 <template>
     <div class="meal-card">
         <h3>{{ dayOfWeek }} <small>{{ date }}</small></h3>
-        <h4>{{ meal.recipe.name }}</h4>
-        <p> Cooked by {{ chef_names }}</p>
-        <p> For {{ consumers_names }}</p>
+        
+        <p v-if="meal.recipes.length && meal.extra_ingredients.length">
+            <span v-for="recipe in meal.recipes" :key="recipe.id">
+                {{ recipe.name }}
+            </span>
+            with
+            <span v-for="ingredient in meal.extra_ingredients" :key="ingredient.id">
+                {{ ingredient.name }}
+            </span>
+        </p>
+        <p v-else-if="meal.recipes.length">
+            <span v-for="recipe in meal.recipes" :key="recipe.id">
+                {{ recipe.name }}
+            </span>
+        </p>
+        <p v-else-if="meal.extra_ingredients.length">
+            <span v-for="ingredient in meal.extra_ingredients" :key="ingredient.id">
+                {{ ingredient.name }}
+            </span>
+        </p>
+        <p v-else>
+            Nothing planned
+        </p>
+
+        <p>
+            Cooked by 
+            <span v-for="chef in meal.chefs" :key="chef.id">
+                {{ chef.name }}
+            </span>
+            <span v-if="!meal.chefs.length">somebody?</span>
+        </p>
+        <p> 
+            For 
+            <span v-for="consumer in meal.consumers" :key="consumer.id">
+                {{ consumer.name }}
+            </span>
+            <span v-if="!meal.consumers.length">somebody?</span>
+        </p>
         <a @click="$emit('edit-meal', meal)">Edit</a>
     </div>
 </template>
@@ -22,12 +57,6 @@ export default {
     name: 'MealCard',
     props: ['meal'],
     computed: {
-        chef_names() {
-            return this.meal.chefs.map(chef => chef.name).join(', ')
-        },
-        consumers_names() {
-            return this.meal.consumers.map(consumer => consumer.name).join(', ')
-        },
         date() {
             return this.meal.date.toLocaleDateString('en-au', { month: 'numeric', day: 'numeric' })
         },
diff --git a/src/components/MealPlanPage.vue b/src/components/MealPlanPage.vue
index 6abd31e..dad89bb 100644
--- a/src/components/MealPlanPage.vue
+++ b/src/components/MealPlanPage.vue
@@ -10,8 +10,8 @@
         </ul>
 
         <ul class="actions" v-if="selectedMeal">
-            <li><router-link class="nav-link" to="/meals/{{meal.id}}" active-class="active">Edit Meal</router-link></li>
-            <li><router-link class="nav-link" to="/meals/{{meal.id}}/swap" active-class="active">Swap Day</router-link></li>
+            <li><router-link class="nav-link" :to="`/meals/${selectedMeal.id}`" active-class="active">Edit Meal</router-link></li>
+            <li><router-link class="nav-link" :to="`/meals/${selectedMeal.id}/swap`" active-class="active">Swap Day</router-link></li>
             <li><a @click="deleteSelectedMeal" class="button">Remove</a></li>
             <li><a @click="selectedMeal = null">Cancel</a></li>
         </ul>
@@ -59,18 +59,12 @@ export default {
     },
     data() {
         const from = new Date();
-        const to = new Date(from.getDate() + 7)
+        const to = new Date();
+        to.setDate(to.getDate() + 7);
 
         return {
             from, to,
-            meals: [{
-                'date': new Date(),
-                'recipe': {'name': 'Sar Tay'},
-                'chefs': [{
-                    'name': 'Ryan'
-                }],
-                'consumers': [{'name': 'Ryan'}, {'name': 'Jacob'}],
-            }],
+            meals: [],
             selectedMeal: null
         }
     },
diff --git a/src/data.js b/src/data.js
index 470904b..57a33ee 100644
--- a/src/data.js
+++ b/src/data.js
@@ -2,24 +2,29 @@ const BASE_URL = "http://192.168.68.177:8000"
 
 export default {
     async getMeals(from, to) {
-        const response = fetch(BASE_URL + "/meals?from=" + from.toISOString() + "&to=" + to.toISOString());
-        return response.json();
+        const response = await fetch(BASE_URL + "/meals?from=" + from.toISOString() + "&to=" + to.toISOString());
+        const meals = await response.json();
+        for (const meal of meals) {
+            meal.date = new Date(meal.date);
+        }
+
+        return meals;
     },
     async getMeal(id) {
         var response = await fetch(BASE_URL + `/meals/${encodeURIComponent(id)}`);
-        return response.json();
+        return await response.json();
     },
     async searchRecipes(query) {
         const response = await fetch(BASE_URL + "/recipes?q=" + encodeURIComponent(query));
-        return response.json();
+        return await response.json();
     },
     async parseRecipe(url) {
         const response = await fetch(BASE_URL + `/recipes/parse?url=${encodeURIComponent(url)}`);
-        return response.json();
+        return await response.json();
     },
     async getRecipe(id) {
         const response = await fetch(BASE_URL + `/recipes/${encodeURIComponent(id)}`);
-        return response.json();
+        return await response.json();
     },
     async parseProduct(ingredient, url) {
         const body = {
@@ -34,12 +39,12 @@ export default {
             body: JSON.stringify(body),
         });
 
-        return response.json();
+        return await response.json();
     },
     async parseIngredients(lines) {
         const params = lines.map(line => "ingredients=" + encodeURIComponent(line)).join("&");
         const response = await fetch(BASE_URL + "/recipes/ingredients/parse?" + params);
-        return response.json();
+        return await response.json();
     },
     async saveRecipe(recipe) {
         const response = await fetch(BASE_URL + "/recipes", {
@@ -50,7 +55,7 @@ export default {
             body: JSON.stringify(recipe),
         });
 
-        return response.json();
+        return await response.json();
     },
     async saveMeal(meal) {
         const response = await fetch(BASE_URL + "/meals", {
@@ -61,6 +66,6 @@ export default {
             body: JSON.stringify(meal),
         });
         
-        return response.json();
+        return await response.json();
     },
 }
\ No newline at end of file