diff --git a/api/index.php b/api/index.php
index 2dc475c..7475b8e 100644
--- a/api/index.php
+++ b/api/index.php
@@ -1,5 +1,5 @@
 <?php
-
+header("Access-Control-Allow-Origin: *");
 $autoloader = require './vendor/autoload.php'; // Composer Autoload Libraries
 $autoloader->add('', __DIR__ . '/generated-classes/'); // Propel ORM Classes
 require './generated-conf/config.php'; // Propel Config
diff --git a/api/routes/category.php b/api/routes/category.php
index cb5856e..137363d 100644
--- a/api/routes/category.php
+++ b/api/routes/category.php
@@ -7,6 +7,7 @@
 $app->get('/category/all', function( $request, $response ) {
   $q = new CategoryQuery;
   $cats = $q::create()->find();
+
   $response_json = [
     "status" => [
       "code" => $response->getStatusCode(),
@@ -14,14 +15,34 @@
     ],
     "data" => []
   ];
+
   foreach( $cats as $cat ) {
+    $rules = [];
+    $q = new CategoryRankNutrientQuery;
+    $requestedCatRules = $q->filterByCategoryId($cat->getId())->orderByRankId()->find();
+    foreach($requestedCatRules as $rule) {
+      $rules[$rule->getNutrient()->getName()][] = [
+        "nutrientName" => $rule->getNutrient()->getName(),
+        "nutrientId" => $rule->getNutrient()->getId(),
+        "operator" => $rule->getOperator(),
+        "threshold" => $rule->getThreshold(),
+        "units" => $rule->getUnits(),
+        "rank" => $rule->getRankId()
+      ];
+    }
+
+
     $response_json["data"][] = [
       "id" => $cat->getId(),
-      "name" => $cat->getName()
+      "name" => $cat->getName(),
+      "rules" => $rules
     ];
+
   }
+
   $response = $response->withJSON($response_json);
   return $response;
+
 });
 
 /**
diff --git a/api/routes/decision.php b/api/routes/decision.php
index 90d0ca0..68bd951 100644
--- a/api/routes/decision.php
+++ b/api/routes/decision.php
@@ -124,86 +124,134 @@ function getProductInfo($upc) {
 
 
 $app->get('/getDecision/{upc}/{category}', function($request, $response) {
+/** Checking to see if the food is already in the DB, in which case we save lots of time **/
 
-// get the nutrients by UPC
-$prodInfo = getProductInfo($request->getAttribute('upc'));
-$nutrients = $prodInfo['response']['body']['product_list']['products'][0]['product_nutrient_list']['product_nutrients'];
+  $q = new FoodQuery();
+  $barcode = $request->getAttribute('upc');
+  $food = $q::create()
+    ->useRankQuery()
+    ->endUse()
+    ->useCategoryQuery()
+    ->endUse()
+    ->filterByBarcode($barcode)
+    ->findOne();
 
-// get the whittled down nutrtient info shittily
-$theNuts = array();
+if($food){
+
+  $rank = $food->getRank();
+  $category = $food->getCategory();
+
+  $res['rankId'] = $food->getRankId();
+  $res['rankName'] = $rank->getName();
+
+
+  $res['request']['message'] = "Did not hit Fooducate. Food already exists in DB.";
 
-foreach ($nutrients as $nutrient) {
-  $theNuts[$nutrient['nutrient']['@attributes']['name']] = $nutrient['@attributes']['value'];
 }
 
-// echo "<h2>The Product has...</h2>";
-// echo "<pre>";
-// print_r($theNuts);
-// echo "</pre>";
+if(!$food) {
+      // get the nutrients by UPC
+      $prodInfo = getProductInfo($request->getAttribute('upc'));
+      $nutrients = $prodInfo['response']['body']['product_list']['products'][0]['product_nutrient_list']['product_nutrients'];
 
-// get the rules by category
- $q = new CategoryRankNutrientQuery;
-$c = new CategoryQuery();
+      // get the whittled down nutrtient info shittily
+      $theNuts = array();
 
+      foreach ($nutrients as $nutrient) {
+        $theNuts[$nutrient['nutrient']['@attributes']['name']] = $nutrient['@attributes']['value'];
+      }
 
- $allRules = $q->filterByCategoryId($request->getAttribute('category'))->find();
- //$res["food"] = $prodInfo;
- $res["food"]['brand'] = $prodInfo['response']['body']['product_list']['products'][0]["@attributes"]['brand'];
- $res["food"]['name'] = $prodInfo['response']['body']['product_list']['products'][0]["@attributes"]['name'];
+      // echo "<h2>The Product has...</h2>";
+      // echo "<pre>";
+      // print_r($theNuts);
+      // echo "</pre>";
 
- $res["request"]["categoryRuleRun"] = $c->findPk($request->getAttribute("category"))->getName();
+      // get the rules by category
+       $q = new CategoryRankNutrientQuery;
+       $c = new CategoryQuery();
 
 
-//default
- $res["rankId"] = 0;
- $res["rankName"] = "Red";
+       $allRules = $q->filterByCategoryId($request->getAttribute('category'))->find();
+       //$res["food"] = $prodInfo;
+       $res["food"]['brand'] = $prodInfo['response']['body']['product_list']['products'][0]["@attributes"]['brand'];
+       $res["food"]['name'] = $prodInfo['response']['body']['product_list']['products'][0]["@attributes"]['name'];
 
-// for each rule, evaluate ingredients
- foreach($allRules as $rule) {
-  $nut = $rule->getNutrient()->getName(); 
-  $operator = $rule->getOperator();
-  $threshold = $rule->getThreshold();
-  $presentVal = $theNuts[$nut];
+       $res["request"]["categoryRuleRun"] = $c->findPk($request->getAttribute("category"))->getName();
 
 
-  $pass = 0;
-    switch($operator) {
-      case "lte":
-        $pass = ($presentVal <= $threshold);
-      break;
+      //default
+       $res["rankId"] = 3;
+       $res["rankName"] = "Red";
 
-      case "lt":
-        $pass = ($presentVal < $threshold);
-      break;
+      // for each rule, evaluate ingredients
+       foreach($allRules as $rule) {
+        $nut = $rule->getNutrient()->getName(); 
+        $operator = $rule->getOperator();
+        $threshold = $rule->getThreshold();
+        $presentVal = $theNuts[$nut];
 
-      case "gt":
-        $pass = ($presentVal > $threshold);
-      break;
 
-      case "gte":
-        $pass = ($presentVal >= $threshold);
-      break;
+        $pass = 0;
+          switch($operator) {
+            case "lte":
+              $pass = ($presentVal <= $threshold);
+            break;
 
-      case "is":
-        $pass = ($presentVal == $threshold);
-      break;
-    }
+            case "lt":
+              $pass = ($presentVal < $threshold);
+            break;
 
+            case "gt":
+              $pass = ($presentVal > $threshold);
+            break;
 
-      $rules[$rule->getRank()->getName()][$rule->getNutrient()->getName()] = [
-        "operator" => $operator,
-        "threshold" => $threshold,
-        "passed" => $pass?"true" : "false"
-      ];
+            case "gte":
+              $pass = ($presentVal >= $threshold);
+            break;
 
-      $rules[$rule->getRank()->getName()]['passedRank'] = $pass?"true" : "false";
+            case "is":
+              $pass = ($presentVal == $threshold);
+            break;
+          }
 
-      if($pass) {
-        $res["rankId"] = $rule->getRank()->getId();
-        $res["rankName"] = $rule->getRank()->getName();
-      }
 
- }
+          $rules[$rule->getRank()->getName()][$rule->getNutrient()->getName()] = [
+            "operator" => $operator,
+            "threshold" => $threshold,
+            "passed" => $pass?"true" : "false"
+          ];
+
+          $rules[$rule->getRank()->getName()]['passedRank'] = $pass?"true" : "false";
+
+          if($pass) {
+            $res["rankId"] = $rule->getRank()->getId();
+            $res["rankName"] = $rule->getRank()->getName();
+          }
+        }
+
+
+        /** Now create this Food with the associated rank and category **/
+
+        $newFood = new Food;
+        
+        $newFoodCat = $request->getAttribute('category');
+
+        $newFoodRank = $res['rankId'];
+
+        $newFood->setRankId($newFoodRank);
+        $newFood->setCategoryId($newFoodCat);
+        $newFood->setBarcode($barcode);
+        
+
+          if($newFood->save()){
+            $msg = "New Food also added to DB.";
+          } else {
+            $msg = "There was an error saving this new Food to the DB";
+          }
+
+        $res['request']['message'] = $msg;
+
+}
 
 // echo "<h1>The rules expected...</h1>";
 // echo "<pre>";
diff --git a/api/routes/rules.php b/api/routes/rules.php
index f18979a..0b81736 100644
--- a/api/routes/rules.php
+++ b/api/routes/rules.php
@@ -48,7 +48,59 @@
   $newRule->setRankId($rank);
   $newRule->setNutrientId($nutrient);
 
-  $newRule->save();
+  if($newRule->save()){
+    $msg = "New Rule Saved";
+  } else {
+    $msg = "There was an error saving this rule";
+  }
+
+
+
+  $response_json = [
+    "status" => [
+      "code" => $response->getStatusCode(),
+      "message" => [$msg]
+    ]
+    ];
+
+  $response = $response->withJSON($response_json);
+  return $response;
+
+
+});
+
+$app->post('/rules/updateRuleById/{ruleId}', function($request, $response) {
+
+  $rule = CategoryRankNutrientQuery::create()->findPk($request->getAttribute("ruleId"));
+  
+  $cat = $request->getParam('catId');
 
 
+  $nutrient = $request->getParam('nutrientId');
+
+  $rank = $request->getParam('rankId');
+
+
+  $rule->setThreshold($request->getParam('threshold'));
+  $rule->setUnits($request->getParam('units'));
+  $rule->setOperator($request->getParam('operator'));
+  $rule->setCategoryId($cat);
+  $rule->setRankId($rank);
+  $rule->setNutrientId($nutrient);
+
+  if($rule->save()){
+    $msg = "Rule updated.";
+  } else {
+    $msg = "There was an error saving this rule";
+  }
+
+
+  $response_json = [
+    "status" => [
+      "code" => $response->getStatusCode(),
+      "message" => [$msg]
+    ]
+  ];
+  $response = $response->withJSON($response_json);
+  return $response;
 });
\ No newline at end of file
diff --git a/app/app.js b/app/app.js
index 8ae4155..dfe3e57 100644
--- a/app/app.js
+++ b/app/app.js
@@ -1,36 +1,40 @@
-var app = angular.module('app', ['ngRoute', 'ngResource']);
+var app = angular.module('app', ['ngRoute', 'ngResource', 'ngCookies']);
 
 // Root controllers in /root/ folder
 // Page controllers in /pages/[your-page] folder
 
 // Factories
 
-// TODO: 'Foods' factory TEMPORARY
 app.factory('Foods', function($resource) {
   return $resource('assets/json/foods.json');
 });
 
-// Just does a PUT request when u call Food.update
-app.factory('Food', function ($resource) {
-  // {food: '@id'} means replace :food with $scope.foodCRUD.id
-  var data = $resource('http://foodbank.develop.digitalmediauconn.org/api/food/:food', {food: '@id'}, {
-    update:{ method:'PUT' }
-  });
-  return data;
+app.factory('FoodDetail', function($resource) {
+  // http://foodbank.develop.digitalmediauconn.org/api/getProductInfo/049000031249
+  // return $resource('https://example.com/api/food/:barcode', {barcode: '@barcode'});
+  return $resource('assets/json/foodDetail.json');
 });
 
 app.factory('Categories', function($resource) {
   return $resource('http://foodbank.develop.digitalmediauconn.org/api/index.php/category/all');
 });
 
-// TODO: 'Nutrients' factory TEMPORARY
 app.factory('Nutrients', function($resource) {
   return $resource('assets/json/nutrients.json');
 });
 
-app.factory('Nutrient', function ($resource) {
-  var data = $resource('http://foodbank.develop.digitalmediauconn.org/api/nutrients/:nutrient', {nutrient: '@id'}, {
-    update:{ method:'PUT' }
-  });
-  return data;
-});
+// Just does a PUT request when u call Food.update
+// app.factory('Food', function ($resource) {
+//   // {food: '@id'} means replace :food with $scope.foodCRUD.id
+//   var data = $resource('http://foodbank.develop.digitalmediauconn.org/api/food/:food', {food: '@id'}, {
+//     update:{ method:'PUT' }
+//   });
+//   return data;
+// });
+
+// app.factory('Nutrient', function ($resource) {
+//   var data = $resource('http://foodbank.develop.digitalmediauconn.org/api/nutrients/:nutrient', {nutrient: '@id'}, {
+//     update:{ method:'PUT' }
+//   });
+//   return data;
+// });
diff --git a/app/pages/food/ctrl.js b/app/pages/food/ctrl.js
index e683268..ee72c58 100644
--- a/app/pages/food/ctrl.js
+++ b/app/pages/food/ctrl.js
@@ -1,27 +1,28 @@
-app.controller('FoodCtrl', ['$scope', '$http', 'Foods', 'Food', 'Categories', function ($scope, $http, Foods, Food, Categories) {
+app.controller('FoodCtrl', ['$scope', '$http', 'Foods', 'FoodDetail', 'Categories', '$cookies', function ($scope, $http, Foods, FoodDetail, Categories, $cookies) {
   $scope.page.title = 'Food';
   $scope.page.id = 'food';
 
+  // Cookie for Table/Card view prefence
+  $scope.tableView = $cookies.get('showTable') === 'true';
+  $scope.$watch('tableView', function () {
+    $cookies.put('showTable', $scope.tableView ? 'true' : 'false');
+  });
+
   // Initialize Filters
   $scope.foods = [];
   $scope.categories = [];
   $scope.rankSelection = {
-    "green": true,
-    "yellow": true,
-    "red": true,
-    "gray": true
+    "1": true,
+    "2": true,
+    "3": true,
+    "4": true
   };
   $scope.categorySelection = { "all": true };
   $scope.searchTerm = "";
 
-
-
-  // Initialize CRUD modes
-  $scope.editMode = false;
-  $scope.createMode = false;
-
   // Initialize CRUD form
   $scope.foodCRUD = {};
+  $scope.nutrientDetail = [];
 
   // GET foods
   Foods.get({}, function (data) {
@@ -42,7 +43,6 @@ app.controller('FoodCtrl', ['$scope', '$http', 'Foods', 'Food', 'Categories', fu
   });
 
 
-
   // Set category filters to false
   $scope.resetCategorySelection = function () {
     $scope.categories.forEach(function(c){
@@ -51,43 +51,66 @@ app.controller('FoodCtrl', ['$scope', '$http', 'Foods', 'Food', 'Categories', fu
   }
   // Category filter function
   $scope.categoryFilter = function (food) {
-    return ( $scope.categorySelection[food.category_id] | $scope.categorySelection["all"] );
+    return ( $scope.categorySelection[food.category.id] | $scope.categorySelection["all"] );
   }
   // Rank filter function
   $scope.rankFilter = function (food) {
-    return ( $scope.rankSelection[food.rank_id] );
+    return ( $scope.rankSelection[food.rank.id] );
   }
 
 
-
-  // CRUD: edit food
-  $scope.edit = function (foodToEdit) {
-    $scope.editMode = true;
-    $scope.foodCRUD = foodToEdit;
-    $scope.foodCRUD.action = "update";
-    // console.log($scope.foodCRUD);
-  };
-
-  // CRUD: create food
-  $scope.create = function () {
-    $scope.createMode = true;
-    $scope.foodCRUD = {};
-    $scope.foodCRUD.rank_mode = "auto";
-    $scope.foodCRUD.action = "create";
-    // console.log($scope.foodCRUD);
+  // Modal : View Food
+  $scope.view = function (foodToView) {
+    $scope.showModal = true;
+    $scope.foodCRUD = foodToView;
+    FoodDetail.get({barcode: foodToView.barcode}, function (data) {
+      $scope.nutrientDetail = data.data.nutrients;
+    });
   };
 
-  // CRUD: cancel
+  // Modal : Cancel
   $scope.cancel = function () {
-    $scope.editMode = false;
-    $scope.createMode = false;
+    $scope.showModal = false;
   };
 
-  // CRUD: POST
-  $scope.submit = function () {
-    $scope.cancel(); // hide modal
-    Food.update($scope.foodCRUD);
-  };
+  // NOTE: End of code for now
+
+
+
+
+
+  // Initialize CRUD modes
+  // $scope.editMode = false;
+  // $scope.createMode = false;
+
+  // CRUD: edit food
+  // $scope.edit = function (foodToEdit) {
+  //   $scope.editMode = true;
+  //   $scope.foodCRUD = foodToEdit;
+  //   $scope.foodCRUD.action = "update";
+  //   console.log($scope.foodCRUD);
+  // };
+  //
+  // // CRUD: create food
+  // $scope.create = function () {
+  //   $scope.createMode = true;
+  //   $scope.foodCRUD = {};
+  //   $scope.foodCRUD.rank_mode = "auto";
+  //   $scope.foodCRUD.action = "create";
+  //   // console.log($scope.foodCRUD);
+  // };
+  //
+  // // CRUD: cancel
+  // $scope.cancel = function () {
+  //   $scope.editMode = false;
+  //   $scope.createMode = false;
+  // };
+  //
+  // // CRUD: POST
+  // $scope.submit = function () {
+  //   $scope.cancel(); // hide modal
+  //   Food.update($scope.foodCRUD);
+  // };
 
 
 }]);
diff --git a/app/pages/food/style.styl b/app/pages/food/style.styl
index ea3dde1..1b07d95 100644
--- a/app/pages/food/style.styl
+++ b/app/pages/food/style.styl
@@ -67,10 +67,6 @@
 
 
 
-// Table view
-
-
-
 
 .foods
   display: flex
@@ -113,13 +109,13 @@
     background-color: purple
     i
       color: white
-  .rank-green
+  .rank-1
     background-color: green
-  .rank-yellow
+  .rank-2
     background-color: yellow
-  .rank-red
+  .rank-3
     background-color: red
-  .rank-gray
+  .rank-4
     background-color: gray
 
 
@@ -157,6 +153,7 @@
     font-size: 1.1em
     padding: 1em
     border: 1px solid lightgray
+    min-width 300px
     my-box-shadow()
     background: white
     [type="radio"]:not(:checked)+label, [type="radio"]:checked+label
@@ -171,6 +168,9 @@
       font-weight: 500
       color: #BBB
       margin-bottom: 5px
+      span
+        color initial
+        font-weight normal
     a.btn
       width: 48%
     .orange
@@ -183,3 +183,48 @@
       td:first-child
         font-weight: 500
         width: 50%
+
+
+
+// Table view
+.foodTable
+  display flex
+  flex-flow: row wrap;
+  align-content: stretch;
+  width 100%
+
+.foodTableItem
+  display inline-flex
+  flex 1 430px
+  margin-bottom 12px
+  font-size 1.2em
+  align-items center
+  margin-right 1em
+  padding-right 1em
+  background #f5f5f5
+  +above(760px)
+    max-width calc(50% - 1em)
+  transition: all .2s
+  cursor: pointer
+  my-box-shadow()
+  &:hover
+    transform: scale(.95)
+  span
+    flex-basis 100px
+    margin-right 1em
+  .name
+    flex-basis 140px
+  .barcode
+    color #888
+    font-size 1rem
+    text-align right
+    margin-right 0
+  .health
+    height 35px
+    width @height
+    min-height @height
+    min-width @height
+    max-height @height
+    max-width @height
+    i
+      font-size 21px
diff --git a/app/pages/food/view.html b/app/pages/food/view.html
index 2b46dc1..0384f0f 100644
--- a/app/pages/food/view.html
+++ b/app/pages/food/view.html
@@ -32,16 +32,16 @@ <h5>By Category</h5>
   <div class="grade">
     <h5>By Grade</h5>
     <nav>
-      <input type="checkbox" class="filled-in green" id="green" ng-model="rankSelection.green">
+      <input type="checkbox" class="filled-in green" id="green" ng-model="rankSelection[1]">
       <label for="green"></label>
 
-      <input type="checkbox" class="filled-in yellow" id="yellow" ng-model="rankSelection.yellow">
+      <input type="checkbox" class="filled-in yellow" id="yellow" ng-model="rankSelection[2]">
       <label for="yellow"></label>
 
-      <input type="checkbox" class="filled-in red" id="red" ng-model="rankSelection.red">
+      <input type="checkbox" class="filled-in red" id="red" ng-model="rankSelection[3]">
       <label for="red"></label>
 
-      <input type="checkbox" class="filled-in gray" id="gray" ng-model="rankSelection.gray">
+      <input type="checkbox" class="filled-in gray" id="gray" ng-model="rankSelection[4]">
       <label for="gray"></label>
     </nav>
   </div>
@@ -65,69 +65,63 @@ <h5>Table</h5>
 
 <!-- Foods List -->
 <div class="foods">
-
-  <div ng-show="!tableView" ng-click="create()" class="card-panel add">
-    <div class="health"><i class="material-icons">add</i></div>
-    <h5>Add new food</h5>
-  </div>
-
-  <div ng-show="!tableView" class="card-panel" ng-repeat="food in foods | filter : categoryFilter | filter : rankFilter | filter : searchTerm | orderBy : 'name'" ng-click="edit(food)">
-    <div class="health rank-{{food.rank_id}}"><i class="material-icons">favorite</i></div>
+  <div ng-show="!tableView" ng-click="view(food)" class="card-panel" ng-repeat="food in foods | orderBy : 'name' | filter : searchTerm | filter : categoryFilter | filter : rankFilter">
+    <div class="health rank-{{food.rank.id}}"><i class="material-icons">favorite</i></div>
     <h5>{{food.name}}</h5>
   </div>
 
-
-
-  <table ng-show="tableView" class="striped">
-      <tr>
-        <th>Rank</th>
-        <th>Food</th>
-        <th>Category</th>
-      </tr>
-
-
-      <tr ng-click="create()" class="add">
-        <td></td>
-        <td>Add new food</td>
-        <td></td>
-      </tr>
-
-
-      <tr ng-repeat="food in foods | filter : categoryFilter | filter : rankFilter | filter : searchTerm | orderBy : 'name'" ng-click="edit(food)">
-        <td class="table-rank rank-{{food.rank_id}}"></td>
-        <td>{{food.name}}</td>
-        <td>{{categories[food.category_id].name}}</td>
-      </tr>
+  <div ng-show="tableView" class="foodTable">
+      <div class="foodTableItem" ng-click="view(food)" ng-repeat="food in foods | filter : categoryFilter | filter : rankFilter | filter : searchTerm | orderBy : 'name'">
+        <span class="health rank-{{food.rank.id}}"><i class="material-icons">favorite</i></span>
+        <span class="name">{{food.name}}</span>
+        <span>{{food.category.name}}</span>
+        <span class="barcode">{{food.barcode}}</span>
+      </div>
   </table>
-
 </div>
 <!-- End of Foods List -->
 
 
 
 <!-- Modal -->
-<div ng-show="editMode || createMode" class="foodModal">
-<div class="CRUD">
+<div ng-show="showModal" class="foodModal" ng-click="cancel()">
+<div class="CRUD" ng-click="$event.stopPropagation();">
 <h4>{{foodCRUD.name || "Add New Food"}}</h4>
+<p>Barcode: <span>{{foodCRUD.barcode}}</span></p>
+<p>Grade: <span>{{foodCRUD.rank.name}}</span></p>
+<p>Category: <span>{{foodCRUD.category.name}}</span></p>
+<p>Nutrition Facts:</p>
+<div ng-repeat="nutrient in nutrientDetail">
+  {{nutrient.nutrientName}}
+  {{nutrient.nutrientId}}
+  {{nutrient.units}}
+  {{nutrient.rank}}
+</div>
+
+<!-- NOTE: End of page content -->
+
+
+
+
 
-  <form ng-submit="submit()">
+  <!-- <form ng-submit="submit()"> -->
 
-    <div class="input-field">
+    <!-- <div class="input-field">
       <input type="text" placeholder="Name" ng-model="foodCRUD.name" required>
-    </div>
+    </div> -->
 
-    <div class="input-field barcode" ng-show="createMode">
+    <!-- <div class="input-field barcode" ng-show="editMode">
       <input type="text" pattern="[0-9]+" placeholder="Barcode" ng-model="foodCRUD.barcode" required>
-    </div>
+    </div> -->
 
-    <select ng-model="foodCRUD.category_id" class="no-materialize" required>
+    <!-- <select ng-model="foodCRUD.category_id" class="no-materialize" required>
       <option ng-show="createMode" value="" disabled selected>Select a Category</option>
       <option value="1">Fruit</option>
       <option value="2">Veggie</option>
       <option value="3">Fattie</option>
-    </select>
+    </select> -->
 
-    <p>Grade</p>
+    <!-- <p>Grade</p>
     <div class="grade">
       <input name="grade" type="radio" value="auto" id="a" ng-model="foodCRUD.rank_mode">
       <label for="a">Auto</label>
@@ -140,11 +134,10 @@ <h4>{{foodCRUD.name || "Add New Food"}}</h4>
 
       <input name="grade" type="radio" value="red" id="d" ng-model="foodCRUD.rank_mode">
       <label for="d">Red</label>
-    </div>
+    </div> -->
 
     <!-- TODO: HIDE this until it's implemented into API. THEN ng-bind the nutrition facts-->
-    <!-- <span ng-show="editMode"> -->
-    <span ng-show="false">
+    <!-- <span ng-show="editMode">
       <p>Nutrition Facts (WIP)</p>
       <table class="nutrition">
         <tbody>
@@ -162,11 +155,11 @@ <h4>{{foodCRUD.name || "Add New Food"}}</h4>
           </tr>
         </tbody>
       </table>
-    </span>
+    </span> -->
 
-    <button type="submit" class="btn green" ng-show="createMode">Create</button>
+    <!-- <button type="submit" class="btn green" ng-show="createMode">Create</button>
     <button type="submit" class="btn blue" ng-show="editMode">Update</button>
-    <button type="button" class="btn orange" ng-click="cancel()">Cancel</button>
+    <button type="button" class="btn orange" ng-click="cancel()">Cancel</button> -->
 
   </form>
 
diff --git a/app/pages/nutrients/ctrl.js b/app/pages/nutrients/ctrl.js
index 8c8b196..0616215 100644
--- a/app/pages/nutrients/ctrl.js
+++ b/app/pages/nutrients/ctrl.js
@@ -1,4 +1,4 @@
-app.controller('NutrientsCtrl', ['$scope', 'Nutrients', 'Nutrient', function ($scope, Nutrients, Nutrient) {
+app.controller('NutrientsCtrl', ['$scope', 'Nutrients', function ($scope, Nutrients) {
   $scope.page.title = 'Nutrients';
   $scope.page.id = 'nutrients';
 
diff --git a/app/pages/nutrients/view.html b/app/pages/nutrients/view.html
index 439a3c7..accb775 100644
--- a/app/pages/nutrients/view.html
+++ b/app/pages/nutrients/view.html
@@ -16,7 +16,7 @@ <h1 class="nutrientsTitle">Nutrient Manager</h1>
 </div>
 
 <!-- Modal -->
-<div ng-show="editMode || createMode" class="foodModal">
+<!-- <div ng-show="editMode || createMode" class="foodModal">
 <div class="CRUD">
 <h4>{{editMode && "Edit nutrient" || "Create a nutrient"}}</h4>
 
@@ -33,5 +33,5 @@ <h4>{{editMode && "Edit nutrient" || "Create a nutrient"}}</h4>
   </form>
 
 </div>
-</div>
+</div> -->
 <!-- End of Modal -->
diff --git a/app/root/_header.kit b/app/root/_header.kit
index be12df1..976d631 100644
--- a/app/root/_header.kit
+++ b/app/root/_header.kit
@@ -13,7 +13,8 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-resource.js"></script>
-  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.min.js"></script>
+  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
+  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-cookies.js"></script>
   <!-- Materialize
   https://cdn.rawgit.com/Dogfalo/materialize/master/dist/js/materialize.min.js
   https://cdnjs.cloudflare.com/ajax/libs/angular-materialize/0.2.1/angular-materialize.min.js -->
diff --git a/assets/css/main.css b/assets/css/main.css
index abb8547..8219112 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -171,16 +171,16 @@ select {
 .foods .health i {
   color: #fff;
 }
-.foods .rank-green {
+.foods .rank-1 {
   background-color: #7ae076;
 }
-.foods .rank-yellow {
+.foods .rank-2 {
   background-color: #fddf7b;
 }
-.foods .rank-red {
+.foods .rank-3 {
   background-color: #fd7b7b;
 }
-.foods .rank-gray {
+.foods .rank-4 {
   background-color: #808080;
 }
 .foods .table-rank {
@@ -219,6 +219,7 @@ select {
   font-size: 1.1em;
   padding: 1em;
   border: 1px solid #f0f0f0;
+  min-width: 300px;
   box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
   background: #fff;
 }
@@ -239,6 +240,10 @@ select {
   color: #bbb;
   margin-bottom: 5px;
 }
+.foodModal .CRUD p span {
+  color: initial;
+  font-weight: normal;
+}
 .foodModal .CRUD a.btn {
   width: 48%;
 }
@@ -255,6 +260,57 @@ select {
   font-weight: 500;
   width: 50%;
 }
+.foodTable {
+  display: flex;
+  flex-flow: row wrap;
+  align-content: stretch;
+  width: 100%;
+}
+.foodTableItem {
+  display: inline-flex;
+  flex: 1 430px;
+  margin-bottom: 12px;
+  font-size: 1.2em;
+  align-items: center;
+  margin-right: 1em;
+  padding-right: 1em;
+  background: #f5f5f5;
+  transition: all 0.2s;
+  cursor: pointer;
+  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
+}
+@media all and (min-width: 760px) {
+  .foodTableItem {
+    max-width: calc(50% - 1em);
+  }
+}
+.foodTableItem:hover {
+  transform: scale(0.95);
+}
+.foodTableItem span {
+  flex-basis: 100px;
+  margin-right: 1em;
+}
+.foodTableItem .name {
+  flex-basis: 140px;
+}
+.foodTableItem .barcode {
+  color: #888;
+  font-size: 1rem;
+  text-align: right;
+  margin-right: 0;
+}
+.foodTableItem .health {
+  height: 35px;
+  width: 35px;
+  min-height: 35px;
+  min-width: 35px;
+  max-height: 35px;
+  max-width: 35px;
+}
+.foodTableItem .health i {
+  font-size: 21px;
+}
 .floatBlock,
 .addNutrientBtn,
 .nutrientBlock {
diff --git a/assets/js/bundle.js b/assets/js/bundle.js
index ca556cb..8c0fe1a 100644
--- a/assets/js/bundle.js
+++ b/assets/js/bundle.js
@@ -1,39 +1,43 @@
-var app = angular.module('app', ['ngRoute', 'ngResource']);
+var app = angular.module('app', ['ngRoute', 'ngResource', 'ngCookies']);
 
 // Root controllers in /root/ folder
 // Page controllers in /pages/[your-page] folder
 
 // Factories
 
-// TODO: 'Foods' factory TEMPORARY
 app.factory('Foods', function($resource) {
   return $resource('assets/json/foods.json');
 });
 
-// Just does a PUT request when u call Food.update
-app.factory('Food', function ($resource) {
-  // {food: '@id'} means replace :food with $scope.foodCRUD.id
-  var data = $resource('http://foodbank.develop.digitalmediauconn.org/api/food/:food', {food: '@id'}, {
-    update:{ method:'PUT' }
-  });
-  return data;
+app.factory('FoodDetail', function($resource) {
+  // http://foodbank.develop.digitalmediauconn.org/api/getProductInfo/049000031249
+  // return $resource('https://example.com/api/food/:barcode', {barcode: '@barcode'});
+  return $resource('assets/json/foodDetail.json');
 });
 
 app.factory('Categories', function($resource) {
   return $resource('http://foodbank.develop.digitalmediauconn.org/api/index.php/category/all');
 });
 
-// TODO: 'Nutrients' factory TEMPORARY
 app.factory('Nutrients', function($resource) {
   return $resource('assets/json/nutrients.json');
 });
 
-app.factory('Nutrient', function ($resource) {
-  var data = $resource('http://foodbank.develop.digitalmediauconn.org/api/nutrients/:nutrient', {nutrient: '@id'}, {
-    update:{ method:'PUT' }
-  });
-  return data;
-});
+// Just does a PUT request when u call Food.update
+// app.factory('Food', function ($resource) {
+//   // {food: '@id'} means replace :food with $scope.foodCRUD.id
+//   var data = $resource('http://foodbank.develop.digitalmediauconn.org/api/food/:food', {food: '@id'}, {
+//     update:{ method:'PUT' }
+//   });
+//   return data;
+// });
+
+// app.factory('Nutrient', function ($resource) {
+//   var data = $resource('http://foodbank.develop.digitalmediauconn.org/api/nutrients/:nutrient', {nutrient: '@id'}, {
+//     update:{ method:'PUT' }
+//   });
+//   return data;
+// });
 
 app.config( function ($routeProvider, $locationProvider) {
   $routeProvider
@@ -77,25 +81,6 @@ app.config( function ($routeProvider, $locationProvider) {
     // $locationProvider.html5Mode(true);
 });
 
-app.controller('root', ['$scope', '$location', function ($scope, $location) {
-
-  $scope.$watch('page', function () {
-    $scope.title = $scope.page.title + ' | F2E';
-  }, true);
-
-  $scope.page = {
-    'title' : 'Root',
-    'id' : 'root',
-    'blackNav' : false
-  };
-
-  $scope.loop = ['Apple Pie','Bananas','Peas','Newman\'s Own Oil and Vinegar Dressing','Cucumber Salad','Kraft Macaroni and Cheese','Some food','Some more food','Some junk food','Some healthy food'];
-
-  $scope.go = function ( path ) {
-    $location.path( path );
-  };
-}]);
-
 app.controller('RestCtrl', ['$scope', 'Foods', function ($scope, Foods) {
   $scope.page.title = 'REST';
   $scope.page.id = 'rest';
@@ -141,6 +126,25 @@ app.controller('EmailController', ['$scope', function ($scope) {
   $scope.email = "rogangabe@gmail.com";
 }]);
 
+app.controller('root', ['$scope', '$location', function ($scope, $location) {
+
+  $scope.$watch('page', function () {
+    $scope.title = $scope.page.title + ' | F2E';
+  }, true);
+
+  $scope.page = {
+    'title' : 'Root',
+    'id' : 'root',
+    'blackNav' : false
+  };
+
+  $scope.loop = ['Apple Pie','Bananas','Peas','Newman\'s Own Oil and Vinegar Dressing','Cucumber Salad','Kraft Macaroni and Cheese','Some food','Some more food','Some junk food','Some healthy food'];
+
+  $scope.go = function ( path ) {
+    $location.path( path );
+  };
+}]);
+
 app.controller('404Ctrl', ['$scope', function ($scope) {
   $scope.page.title = '404';
   $scope.page.id = '404';
@@ -149,30 +153,113 @@ app.controller('404Ctrl', ['$scope', function ($scope) {
   $scope.var2 = "localStuff";
 }]);
 
-app.controller('FoodCtrl', ['$scope', '$http', 'Foods', 'Food', 'Categories', function ($scope, $http, Foods, Food, Categories) {
+
+
+function GetRanks() {
+	return ['green', 'yellow'];
+}
+
+function GetNutrients() {
+	return ['sodium', 'sugar', 'satfat'];
+}
+
+function GetOperations() {
+	return [{name: 'lt', symbol: 'Less Than'},
+					{name: 'lte', symbol: 'Less Than or Equal'},
+					{name: 'gt', symbol: 'Greater Than'},
+					{name: 'gte', symbol: 'Greater Than or Equal'},
+					{name: 'e', symbol: 'Equal To'}];
+}
+
+function SaveData(categories) {
+	console.log('save');
+}
+
+app.controller('CategoryCtrl', ['$scope', 'Categories', function ($scope, Categories) {
+  $scope.page.title = 'Categories';
+  $scope.page.id = 'cat';
+  $scope.page.yourVar = "globalStuff";
+
+
+	// GET list of categories
+  Categories.get({}, function (data) {
+    $scope.categories = data.data;
+  });
+
+	$scope.ranks = GetRanks();
+	$scope.nutrients = GetNutrients();
+	$scope.operations = GetOperations();
+
+	$scope.getCategoryIndexFromName = function(categoryName) {
+		for(var i = 0; i < $scope.categories.length; i++) {
+			if($scope.categories[i].name == categoryName) {
+				return i;
+			}
+		}
+		return -1;
+	};
+
+	$scope.addRule = function(categoryName) {
+		/*var categoryIndex = $scope.getCategoryIndexFromName(categoryName);
+		if(categoryIndex != -1) {
+			$scope.categories[categoryIndex].rules.push({ nutrient: 'sugar',
+				rule_id: '0',
+				ranks:  [ { name: 'green', operation: 'lt', value: 5 },
+									{ name: 'yellow', operation: 'gt', value: 2 } ] });
+		}*/
+
+	};
+
+	$scope.removeRule = function(category, rule) {
+		/*for(var i = 0; i < category.rules.length; i++) {
+			if(category.rules[i] == rule) {
+				category.rules.splice(i, 1);
+			}
+		}*/
+	};
+
+	$scope.addCategory = function() {
+		$scope.categories.push({name: 'New Category', rules: []})
+	};
+
+	$scope.removeCategory = function(category) {
+		for(var i = 0; i < $scope.categories.length; i++) {
+			if($scope.categories[i] == category) {
+				$scope.categories.splice(i, 1);
+			}
+		}
+	};
+
+	$scope.saveData = function() {
+		SaveData($scope.categories);
+	};
+}]);
+
+app.controller('FoodCtrl', ['$scope', '$http', 'Foods', 'FoodDetail', 'Categories', '$cookies', function ($scope, $http, Foods, FoodDetail, Categories, $cookies) {
   $scope.page.title = 'Food';
   $scope.page.id = 'food';
 
+  // Cookie for Table/Card view prefence
+  $scope.tableView = $cookies.get('showTable') === 'true';
+  $scope.$watch('tableView', function () {
+    $cookies.put('showTable', $scope.tableView ? 'true' : 'false');
+  });
+
   // Initialize Filters
   $scope.foods = [];
   $scope.categories = [];
   $scope.rankSelection = {
-    "green": true,
-    "yellow": true,
-    "red": true,
-    "gray": true
+    "1": true,
+    "2": true,
+    "3": true,
+    "4": true
   };
   $scope.categorySelection = { "all": true };
   $scope.searchTerm = "";
 
-
-
-  // Initialize CRUD modes
-  $scope.editMode = false;
-  $scope.createMode = false;
-
   // Initialize CRUD form
   $scope.foodCRUD = {};
+  $scope.nutrientDetail = [];
 
   // GET foods
   Foods.get({}, function (data) {
@@ -193,7 +280,6 @@ app.controller('FoodCtrl', ['$scope', '$http', 'Foods', 'Food', 'Categories', fu
   });
 
 
-
   // Set category filters to false
   $scope.resetCategorySelection = function () {
     $scope.categories.forEach(function(c){
@@ -202,43 +288,66 @@ app.controller('FoodCtrl', ['$scope', '$http', 'Foods', 'Food', 'Categories', fu
   }
   // Category filter function
   $scope.categoryFilter = function (food) {
-    return ( $scope.categorySelection[food.category_id] | $scope.categorySelection["all"] );
+    return ( $scope.categorySelection[food.category.id] | $scope.categorySelection["all"] );
   }
   // Rank filter function
   $scope.rankFilter = function (food) {
-    return ( $scope.rankSelection[food.rank_id] );
+    return ( $scope.rankSelection[food.rank.id] );
   }
 
 
-
-  // CRUD: edit food
-  $scope.edit = function (foodToEdit) {
-    $scope.editMode = true;
-    $scope.foodCRUD = foodToEdit;
-    $scope.foodCRUD.action = "update";
-    // console.log($scope.foodCRUD);
-  };
-
-  // CRUD: create food
-  $scope.create = function () {
-    $scope.createMode = true;
-    $scope.foodCRUD = {};
-    $scope.foodCRUD.rank_mode = "auto";
-    $scope.foodCRUD.action = "create";
-    // console.log($scope.foodCRUD);
+  // Modal : View Food
+  $scope.view = function (foodToView) {
+    $scope.showModal = true;
+    $scope.foodCRUD = foodToView;
+    FoodDetail.get({barcode: foodToView.barcode}, function (data) {
+      $scope.nutrientDetail = data.data.nutrients;
+    });
   };
 
-  // CRUD: cancel
+  // Modal : Cancel
   $scope.cancel = function () {
-    $scope.editMode = false;
-    $scope.createMode = false;
+    $scope.showModal = false;
   };
 
-  // CRUD: POST
-  $scope.submit = function () {
-    $scope.cancel(); // hide modal
-    Food.update($scope.foodCRUD);
-  };
+  // NOTE: End of code for now
+
+
+
+
+
+  // Initialize CRUD modes
+  // $scope.editMode = false;
+  // $scope.createMode = false;
+
+  // CRUD: edit food
+  // $scope.edit = function (foodToEdit) {
+  //   $scope.editMode = true;
+  //   $scope.foodCRUD = foodToEdit;
+  //   $scope.foodCRUD.action = "update";
+  //   console.log($scope.foodCRUD);
+  // };
+  //
+  // // CRUD: create food
+  // $scope.create = function () {
+  //   $scope.createMode = true;
+  //   $scope.foodCRUD = {};
+  //   $scope.foodCRUD.rank_mode = "auto";
+  //   $scope.foodCRUD.action = "create";
+  //   // console.log($scope.foodCRUD);
+  // };
+  //
+  // // CRUD: cancel
+  // $scope.cancel = function () {
+  //   $scope.editMode = false;
+  //   $scope.createMode = false;
+  // };
+  //
+  // // CRUD: POST
+  // $scope.submit = function () {
+  //   $scope.cancel(); // hide modal
+  //   Food.update($scope.foodCRUD);
+  // };
 
 
 }]);
@@ -296,89 +405,7 @@ app.factory('loginService', ['$http', function($http) {
     }
   };
 }]);
-
-
-function GetRanks() {
-	return ['green', 'yellow'];
-}
-
-function GetNutrients() {
-	return ['sodium', 'sugar', 'satfat'];
-}
-
-function GetOperations() {
-	return [{name: 'lt', symbol: 'Less Than'},
-					{name: 'lte', symbol: 'Less Than or Equal'},
-					{name: 'gt', symbol: 'Greater Than'},
-					{name: 'gte', symbol: 'Greater Than or Equal'},
-					{name: 'e', symbol: 'Equal To'}];
-}
-
-function SaveData(categories) {
-	console.log('save');
-}
-
-app.controller('CategoryCtrl', ['$scope', 'Categories', function ($scope, Categories) {
-  $scope.page.title = 'Categories';
-  $scope.page.id = 'cat';
-  $scope.page.yourVar = "globalStuff";
-
-
-	// GET list of categories
-  Categories.get({}, function (data) {
-    $scope.categories = data.data;
-  });
-
-	$scope.ranks = GetRanks();
-	$scope.nutrients = GetNutrients();
-	$scope.operations = GetOperations();
-
-	$scope.getCategoryIndexFromName = function(categoryName) {
-		for(var i = 0; i < $scope.categories.length; i++) {
-			if($scope.categories[i].name == categoryName) {
-				return i;
-			}
-		}
-		return -1;
-	};
-
-	$scope.addRule = function(categoryName) {
-		/*var categoryIndex = $scope.getCategoryIndexFromName(categoryName);
-		if(categoryIndex != -1) {
-			$scope.categories[categoryIndex].rules.push({ nutrient: 'sugar',
-				rule_id: '0',
-				ranks:  [ { name: 'green', operation: 'lt', value: 5 },
-									{ name: 'yellow', operation: 'gt', value: 2 } ] });
-		}*/
-
-	};
-
-	$scope.removeRule = function(category, rule) {
-		/*for(var i = 0; i < category.rules.length; i++) {
-			if(category.rules[i] == rule) {
-				category.rules.splice(i, 1);
-			}
-		}*/
-	};
-
-	$scope.addCategory = function() {
-		$scope.categories.push({name: 'New Category', rules: []})
-	};
-
-	$scope.removeCategory = function(category) {
-		for(var i = 0; i < $scope.categories.length; i++) {
-			if($scope.categories[i] == category) {
-				$scope.categories.splice(i, 1);
-			}
-		}
-	};
-
-	$scope.saveData = function() {
-		SaveData($scope.categories);
-	};
-}]);
-
-app.controller('NutrientsCtrl', ['$scope', 'Nutrients', 'Nutrient', function ($scope, Nutrients, Nutrient) {
+app.controller('NutrientsCtrl', ['$scope', 'Nutrients', function ($scope, Nutrients) {
   $scope.page.title = 'Nutrients';
   $scope.page.id = 'nutrients';
 
diff --git a/assets/json/categories.json b/assets/json/categories.json
index 78ae49f..49f24f7 100644
--- a/assets/json/categories.json
+++ b/assets/json/categories.json
@@ -3,7 +3,7 @@
   "code": "200",
   "data": [
     {
-      "id": "1",
+      "id": 1,
       "name": "Fruit",
       "rules": [
         {
@@ -57,7 +57,7 @@
       ]
     },
     {
-      "id": "2",
+      "id": 2,
       "name": "Veggie",
       "rules": [
         {
@@ -111,7 +111,7 @@
       ]
     },
     {
-      "id": "4",
+      "id": 4,
       "name": "Health",
       "rules": [
         {
@@ -165,7 +165,7 @@
       ]
     },
     {
-      "id": "3",
+      "id": 3,
       "name": "Fattie",
       "rules": [
         {
diff --git a/assets/json/foodDetail.json b/assets/json/foodDetail.json
new file mode 100644
index 0000000..3f989d9
--- /dev/null
+++ b/assets/json/foodDetail.json
@@ -0,0 +1,31 @@
+{
+	"status": "ok",
+	"code": "200",
+	"data": {
+		"id": "1",
+		"name": "Banana",
+		"barcode": "2342342342",
+		"rank": {
+			"id": 1,
+			"name": "Green"
+		},
+		"category": {
+			"id": 3,
+			"name": "Fruit"
+		},
+		"nutrients": [
+			{
+				"nutrientName": "saturated_fat",
+				"nutrientId": 2,
+				"units": "g",
+				"rank": 1
+			},
+			{
+				"nutrientName": "sodium",
+				"nutrientId": 1,
+				"units": "g",
+				"rank": 2
+			}
+		]
+	}
+}
diff --git a/assets/json/foods.json b/assets/json/foods.json
index 6d2aec5..ef973f8 100644
--- a/assets/json/foods.json
+++ b/assets/json/foods.json
@@ -4,44 +4,68 @@
 	"data": [
 		{
 			"id": "1",
-			"name": "banana",
+			"name": "Banana",
 			"barcode": "2342342342",
-			"rank_id": "green",
-			"rank_mode": "auto",
-			"category_id": "3",
-			"nutrients": [
-				{
-					"id": "1",
-					"name": "Sugar",
-					"value": "5",
-					"unit": "g",
-					"note": "should we include this?"
-				}
-			]
+			"rank": {
+				"id": 1,
+				"name": "Green"
+			},
+			"category": {
+				"id": 3,
+				"name": "Fruit"
+			}
+		},
+		{
+			"id": "10",
+			"name": "Diet Coke",
+			"barcode": "49000004632",
+			"rank": {
+				"id": 3,
+				"name": "Red"
+			},
+			"category": {
+				"id": 3,
+				"name": "Fatty"
+			}
 		},
 		{
 			"id": "2",
-			"name": "pop tarts",
+			"name": "Pop Tarts",
 			"barcode": "2342342342",
-			"rank_id": "red",
-			"rank_mode": "auto",
-			"category_id": "2"
+			"rank": {
+				"id": 3,
+				"name": "Red"
+			},
+			"category": {
+				"id": 2,
+				"name": "Sugar"
+			}
 		},
 		{
 			"id": "3",
-			"name": "cinnamon",
+			"name": "Cinnamon",
 			"barcode": "2342342342",
-			"rank_id": "yellow",
-			"rank_mode": "auto",
-			"category_id": "1"
+			"rank": {
+				"id": 2,
+				"name": "Yellow"
+			},
+			"category": {
+				"id": 4,
+				"name": "Sugar"
+			}
 		},
 		{
 			"id": "4",
-			"name": "froot loops",
+			"name": "Froot Loops",
 			"barcode": "2342342342",
-			"rank_id": "gray",
-			"rank_mode": "auto",
-			"category_id": "2"
+			"rank": {
+				"id": 4,
+				"name": "Gray"
+			},
+			"category": {
+				"id": 2,
+				"name": "Sugar"
+			}
 		}
 	]
 }
diff --git a/index.html b/index.html
index 646cb9c..80e6cfa 100644
--- a/index.html
+++ b/index.html
@@ -15,7 +15,8 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-resource.js"></script>
-  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.min.js"></script>
+  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
+  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-cookies.js"></script>
   <!-- Materialize
   https://cdn.rawgit.com/Dogfalo/materialize/master/dist/js/materialize.min.js
   https://cdnjs.cloudflare.com/ajax/libs/angular-materialize/0.2.1/angular-materialize.min.js -->