diff --git a/ko-cart/index.html b/ko-cart/index.html
index fa0885c..9386d48 100644
--- a/ko-cart/index.html
+++ b/ko-cart/index.html
@@ -10,17 +10,9 @@
       <div class="row" id="catalogContainer">
         <div class="col-xs-12" data-bind="template:{name:'header'}"></div>
         <div class="col-xs-6" data-bind="template:{name:'catalog'}"></div>
-        <div
-          id="cartContainer"
-          class="col-xs-6 well hidden"
-          data-bind="template:{name:'cart'}"
-        ></div>
+        <div id="cartContainer" class="col-xs-6 well hidden" data-bind="template:{name:'cart'}"></div>
       </div>
-      <div
-        class="row hidden"
-        id="orderContainer"
-        data-bind="template:{name:'order'}"
-      ></div>
+      <div class="row hidden" id="orderContainer" data-bind="template:{name:'order'}"></div>
       <div data-bind="template: {name:'add-to-catalog-modal'}"></div>
       <div data-bind="template: {name:'finish-order-modal'}"></div>
     </div>
@@ -163,7 +155,44 @@
         Confirm Order
       </button>
     </script>
-    <script type="text/html" id="order"></script>
+    <script type="text/html" id="order">
+      <div class="col-xs-12">
+        <button class="btn btn-sm btn-primary" data-bind="click:showCatalog">
+          Back to catalog
+        </button>
+        <button class="btn btn-sm btn-primary" data-bind="click:finishOrder">
+          Buy & finish
+        </button>
+      </div>
+      <div class="col-xs-6">
+        <table class="table">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Price</th>
+              <th>Units</th>
+              <th>Subtotal</th>
+            </tr>
+          </thead>
+          <tbody data-bind="foreach:cart">
+            <tr>
+              <td data-bind="text:product.name"></td>
+              <td data-bind="text:product.price"></td>
+              <td data-bind="text:units"></td>
+              <td data-bind="text:subtotal"></td>
+            </tr>
+          </tbody>
+          <tfoot>
+            <tr>
+              <td colspan="3"></td>
+              <td>
+                Total: <span data-bind="text:grandTotal"></span>
+              </td>
+            </tr>
+          </tfoot>
+        </table>
+      </div>
+    </script>
     <script type="text/html" id="finish-order-modal"></script>
     <!-- vendor library -->
     <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
diff --git a/ko-cart/js/viewmodel.js b/ko-cart/js/viewmodel.js
index c09e1bf..128c856 100644
--- a/ko-cart/js/viewmodel.js
+++ b/ko-cart/js/viewmodel.js
@@ -101,6 +101,18 @@ var vm = (function () {
     $('#orderContainer').removeClass("hidden");
   }
 
+  // The order template
+  var showCatalog = function () {
+    $("#catalogContainer").removeClass("hidden");
+    $("$orderContainer").addClass("hidden");
+  };
+  var finishOrder = function() {
+    cart([]);
+    hideCartDetails();
+    showCatalog();
+    $("#finishOrderModal").modal('show');
+  }
+
   return {
     // first chapter
     searchTerm: searchTerm,
@@ -114,7 +126,9 @@ var vm = (function () {
     grandTotal: grandTotal,
     removeFromCart: removeFromCart,
     hideCartDetails: hideCartDetails,
-    showOrder: showOrder
+    showOrder: showOrder,
+    showCatalog: showCatalog,
+    finishOrder: finishOrder
   };
 })();
 ko.applyBindings(vm);