diff --git a/src/app/recipes/recipe-detail/recipe-detail.component.html b/src/app/recipes/recipe-detail/recipe-detail.component.html
index c610e54..6ab91bb 100644
--- a/src/app/recipes/recipe-detail/recipe-detail.component.html
+++ b/src/app/recipes/recipe-detail/recipe-detail.component.html
@@ -17,7 +17,7 @@
         Manage Recipe <span class="caret"></span>
       </button>
       <ul class="dropdown-menu">
-        <li><a href="#">Add Ingredients</a></li>
+        <li><a (click)="onAddToShoppingList()" style="cursor: pointer;">Add Ingredients</a></li>
         <li><a href="#">Edit Recipe</a></li>
         <li><a href="#">Delete Recipe</a></li>
       </ul>
@@ -31,6 +31,12 @@
 </div>
 <div class="row">
   <div class="col-xs-12">
-    Ingredients
+    <ul class="list-group">
+      <li
+        class="list-group-item"
+        *ngFor="let ingredient of recipe.ingredients">
+        {{ ingredient.name }} - {{ ingredient.amount }}
+      </li>
+    </ul>
   </div>
 </div>
\ No newline at end of file
diff --git a/src/app/recipes/recipe.model.ts b/src/app/recipes/recipe.model.ts
index c42900d..d8807c4 100644
--- a/src/app/recipes/recipe.model.ts
+++ b/src/app/recipes/recipe.model.ts
@@ -1,11 +1,15 @@
+import { Ingredient } from "../shared/ingredient.model";
+
 export class Recipe {
     public name: string;
     public description: string;
     public imagePath: string;
+    public ingredients: Ingredient[];
 
-    constructor(name: string, description: string, imagePath: string) {
+    constructor(name: string, description: string, imagePath: string, ingredients: Ingredient[]) {
         this.name = name;
         this.description = description;
         this.imagePath = imagePath;
+        this.ingredients = ingredients;
     }
 }
\ No newline at end of file
diff --git a/src/app/recipes/recipe.service.ts b/src/app/recipes/recipe.service.ts
index ec6b49c..f779ab8 100644
--- a/src/app/recipes/recipe.service.ts
+++ b/src/app/recipes/recipe.service.ts
@@ -1,12 +1,29 @@
 import { Recipe } from "./recipe.model";
 import { EventEmitter } from "@angular/core";
+import { Ingredient } from "../shared/ingredient.model";
 
 export class RecipeService {
     recipeSelected = new EventEmitter<Recipe>();
 
     private recipes: Recipe[] = [
-        new Recipe('A Test Recipe', 'This is simlpy a test', 'http://maxpixel.freegreatpicture.com/static/photo/1x/Recipe-Soup-Noodle-Curried-Spicy-Chicken-Khaosoi-2344152.jpg'),
-        new Recipe('Another Test Recipe', 'This is simlpy a test', 'http://maxpixel.freegreatpicture.com/static/photo/1x/Recipe-Soup-Noodle-Curried-Spicy-Chicken-Khaosoi-2344152.jpg')
+        new Recipe(
+            'A Test Recipe', 
+            'This is simlpy a test', 
+            'http://maxpixel.freegreatpicture.com/static/photo/1x/Recipe-Soup-Noodle-Curried-Spicy-Chicken-Khaosoi-2344152.jpg', 
+            [
+                new Ingredient('Foo', 1),
+                new Ingredient('Bar', 2)
+            ]
+        ),
+        new Recipe(
+            'Another Test Recipe', 
+            'This is simlpy a test', 
+            'http://maxpixel.freegreatpicture.com/static/photo/1x/Recipe-Soup-Noodle-Curried-Spicy-Chicken-Khaosoi-2344152.jpg',
+            [
+                new Ingredient('Foo', 1),
+                new Ingredient('Bar', 2)
+            ]
+        )
     ];
 
     getRecipes() {