diff --git a/src/app/shared/ingredient.model.ts b/src/app/shared/ingredient.model.ts
new file mode 100644
index 0000000..96ceee8
--- /dev/null
+++ b/src/app/shared/ingredient.model.ts
@@ -0,0 +1,3 @@
+export class Ingredient {
+    constructor(public name: string, public amount: number) {}
+}
\ No newline at end of file
diff --git a/src/app/shopping-list/shopping-list.component.html b/src/app/shopping-list/shopping-list.component.html
index f7d17ac..78ab2f9 100644
--- a/src/app/shopping-list/shopping-list.component.html
+++ b/src/app/shopping-list/shopping-list.component.html
@@ -2,6 +2,14 @@
   <div class="col-xs-10">
     <app-shopping-edit></app-shopping-edit>
     <hr>
-    <p>The list</p>
+    <ul class="list-group">
+      <a 
+        class="list-group-item" 
+        style="cursor: pointer;"
+        *ngFor="let ingredient of ingredients"
+      >
+        {{ ingredient.name }} ({{ ingredient.amount }})
+      </a>
+    </ul>
   </div>
 </div>
\ No newline at end of file
diff --git a/src/app/shopping-list/shopping-list.component.ts b/src/app/shopping-list/shopping-list.component.ts
index 706445b..531b6f9 100644
--- a/src/app/shopping-list/shopping-list.component.ts
+++ b/src/app/shopping-list/shopping-list.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Ingredient } from '../shared/ingredient.model';
 
 @Component({
   selector: 'app-shopping-list',
@@ -6,6 +7,10 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./shopping-list.component.css']
 })
 export class ShoppingListComponent implements OnInit {
+  ingredients: Ingredient[] = [
+    new Ingredient('Apples', 5),
+    new Ingredient('Tomatos', 10)
+  ];
 
   constructor() { }