diff --git a/app/app.js b/app/app.js
index b5998c6..809ba8b 100644
--- a/app/app.js
+++ b/app/app.js
@@ -1,36 +1,38 @@
-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) {
+//   return $resource('assets/json/foodDetail.json');
+// });
 
 app.factory('Categories', function($resource) {
   return $resource('assets/json/categories.json');
 });
 
-// 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..a0b201b 100644
--- a/app/pages/food/ctrl.js
+++ b/app/pages/food/ctrl.js
@@ -1,25 +1,25 @@
-app.controller('FoodCtrl', ['$scope', '$http', 'Foods', 'Food', 'Categories', function ($scope, $http, Foods, Food, Categories) {
+app.controller('FoodCtrl', ['$scope', '$http', 'Foods', 'Categories', '$cookies', function ($scope, $http, Foods, 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 = {};
 
@@ -42,7 +42,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 +50,63 @@ 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;
   };
 
-  // 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..a9e8d36 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,56 @@ <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>
+
+<!-- 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 +127,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 +148,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/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 dc5bcbb..cbd2ac1 100644
--- a/assets/js/bundle.js
+++ b/assets/js/bundle.js
@@ -1,39 +1,41 @@
-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) {
+//   return $resource('assets/json/foodDetail.json');
+// });
 
 app.factory('Categories', function($resource) {
   return $resource('assets/json/categories.json');
 });
 
-// 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
@@ -235,28 +237,28 @@ app.controller('CategoryCtrl', ['$scope', 'Categories', function ($scope, Catego
 	};
 }]);
 
-app.controller('FoodCtrl', ['$scope', '$http', 'Foods', 'Food', 'Categories', function ($scope, $http, Foods, Food, Categories) {
+app.controller('FoodCtrl', ['$scope', '$http', 'Foods', 'Categories', '$cookies', function ($scope, $http, Foods, 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 = {};
 
@@ -279,7 +281,6 @@ app.controller('FoodCtrl', ['$scope', '$http', 'Foods', 'Food', 'Categories', fu
   });
 
 
-
   // Set category filters to false
   $scope.resetCategorySelection = function () {
     $scope.categories.forEach(function(c){
@@ -288,43 +289,63 @@ 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;
   };
 
-  // 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/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..88ce343
--- /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 -->