diff --git a/src/app/recipes/recipe-list/recipe-item/recipe-item.component.html b/src/app/recipes/recipe-list/recipe-item/recipe-item.component.html
index fb955c4..f08e518 100644
--- a/src/app/recipes/recipe-list/recipe-item/recipe-item.component.html
+++ b/src/app/recipes/recipe-list/recipe-item/recipe-item.component.html
@@ -1,4 +1,9 @@
-<p>
-    recipe-item works!
-</p>
-      
\ No newline at end of file
+<a href="#" class="list-group-item clearfix">
+    <div class="pull-left">
+        <h4 class="list-group-item-heading">{{ recipe.name }}</h4>
+        <p class="list-group-item-text">{{ recipe.description }}</p>
+    </div>
+    <span class="pull-right">
+        <img [src]="recipe.imagePath" alt="{{ recipe.name }}" class="img-responsive" style="max-height: 50px;">
+    </span>
+</a>
\ No newline at end of file
diff --git a/src/app/recipes/recipe-list/recipe-item/recipe-item.component.ts b/src/app/recipes/recipe-list/recipe-item/recipe-item.component.ts
index 6da52d7..9a1bd63 100644
--- a/src/app/recipes/recipe-list/recipe-item/recipe-item.component.ts
+++ b/src/app/recipes/recipe-list/recipe-item/recipe-item.component.ts
@@ -1,4 +1,5 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
+import { Recipe } from '../../recipe.model';
 
 @Component({
   selector: 'app-recipe-item',
@@ -6,6 +7,7 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./recipe-item.component.css']
 })
 export class RecipeItemComponent implements OnInit {
+  @Input() recipe: Recipe;
 
   constructor() { }
 
diff --git a/src/app/recipes/recipe-list/recipe-list.component.html b/src/app/recipes/recipe-list/recipe-list.component.html
index 6ceb61e..1f9b53f 100644
--- a/src/app/recipes/recipe-list/recipe-list.component.html
+++ b/src/app/recipes/recipe-list/recipe-list.component.html
@@ -6,15 +6,8 @@
 <hr>
 <div class="row">
   <div class="col-xs-12">
-    <a href="#" class="list-group-item clearfix" *ngFor="let recipe of recipes">
-      <div class="pull-left">
-        <h4 class="list-group-item-heading">{{ recipe.name }}</h4>
-        <p class="list-group-item-text">{{ recipe.description }}</p>
-      </div>
-      <span class="pull-right">
-        <img [src]="recipe.imagePath" alt="{{ recipe.name }}" class="img-responsive" style="max-height: 50px;">
-      </span>
-    </a>
-    <app-recipe-item></app-recipe-item>
+    <app-recipe-item
+      *ngFor="let recipeElement of recipes"
+      [recipe]="recipeElement"></app-recipe-item>
   </div>
 </div>