diff --git a/TeamDBAwesome/TeamDBAwesome/js/userController.js b/TeamDBAwesome/TeamDBAwesome/js/userController.js
index 054cb09..f4caeba 100644
--- a/TeamDBAwesome/TeamDBAwesome/js/userController.js
+++ b/TeamDBAwesome/TeamDBAwesome/js/userController.js
@@ -85,7 +85,7 @@ angular.module('routerApp').controller('userController', function ($q, $window,
     ];
 
     $scope.orderColumns = [
-        { field: 'TrackId', displayName: ' ', width: "5%", cellTemplate: '<center><button data-ng-click="grid.appScope.addToCart({{row.entity.TrackId}})" class="btn btn-success btn-xs"> + </button></center></td>' },
+        { field: 'TrackId', displayName: ' ', width: "30%", cellTemplate: '<center><button data-ng-click="grid.appScope.addToCart({{row.entity.TrackId}})" class="btn btn-success btn-xs"> + </button></center></td>' },
         { field: 'TrackName', displayName: ' Track Name', width: "20%" },
         { field: 'artist', displayName: ' Artist Name', width: "20%" },
         { field: 'AlbumTitle', displayName: ' Album ', width: "15%" },
@@ -171,7 +171,7 @@ angular.module('routerApp').controller('userController', function ($q, $window,
     }
 
     $scope.addToCart = function (trackid) {
-        console.log(trackid);
+        console.log(trackid + "the track id");
         var promise = $http({
             method: "get",
             url: "http://localhost:50031/api/AddTrackOrder?trackId=" + trackid + "&orderId=" + $scope.currOrderID,
@@ -188,7 +188,42 @@ angular.module('routerApp').controller('userController', function ($q, $window,
                  console.log($scope.currOrder);
              })
         });
-        
+
+    }
+
+    // functions for adding playlists to cart
+    $scope.addPLToCart = function (plid) {
+        console.log("cats");
+        console.log(plid);
+        var promise = $http.get("http://localhost:50031/api/GetPlaylist?PlaylistID=" + plid)
+        .success(function (response) {
+            $scope.currplaylist = angular.copy(response);
+            console.log($scope.currplaylist);
+        });
+        promise.then(function () {
+            console.log($scope.currplaylist);
+            var end = $scope.currplaylist.length;
+            for (var i = 0; i < end; i++) {
+                $scope.addToCart($scope.currplaylist[i].TrackId);
+            }
+        });
+    }
+
+    $scope.addMPLToCart = function (plid) {
+        console.log("cats");
+        console.log(plid);
+        var promise = $http.get("http://localhost:50031/api/GetPlaylist?PlaylistID=" + plid)
+        .success(function (response) {
+            $scope.currplaylist = angular.copy(response);
+            console.log($scope.currplaylist);
+        });
+        promise.then(function () {
+            console.log($scope.currplaylist);
+            var end = $scope.currplaylist.length;
+            for (var i = 0; i < end; i++) {
+                $scope.addToCart($scope.currplaylist[i].TrackId);
+            }
+        });
     }
 
     // Order Functions
@@ -287,14 +322,33 @@ angular.module('routerApp').controller('userController', function ($q, $window,
                  $scope.currOrder = angular.copy(response);
                  console.log($scope.currOrder);
              })
-        }); 
+        });
     };
 
+    // get Payment info for the current user
+    $scope.getPayments = function () {
+        $http.get("http://localhost:50031/api/GetPayment?CustomerID=" + $cookies.get('userid'))
+        .success(function (response) {
+            $scope.currpayments = angular.copy(response);
+            console.log($scope.currpayments);
+        })
+
+    };
+
+    // From shopping cart to invoice
+    $scope.buy = function (payid) {
+        $http.get("http://localhost:50031/api/GenerateInvoice?custId=" + $cookies.get('userid') + "&payId=" + payid + "&orderId=" + $scope.currOrderID)
+        .success(function (response) {
+            $state.go('user-orders');
+            $scope.messages = "Your order has been submitted.";
+        })
+    }
     // Initialize Order Informations
     $scope.initOrders = function () {
         $scope.getPlaylists();
         $scope.getMyPlaylists();
         $scope.getMyOrder();
+        $scope.getPayments();
     }
 
 
diff --git a/TeamDBAwesome/TeamDBAwesome/pages/user-orders.html b/TeamDBAwesome/TeamDBAwesome/pages/user-orders.html
index ee32b7e..63293e6 100644
--- a/TeamDBAwesome/TeamDBAwesome/pages/user-orders.html
+++ b/TeamDBAwesome/TeamDBAwesome/pages/user-orders.html
@@ -11,15 +11,15 @@
                             <center>Click a playlist to see track listing</center>
                             <tr ng-repeat="x in myPlaylists">
                                 <td width="80%">
-                                    <text  ng-click="openCustom('sm'',x)">{{x.Name}}</text>
-                                 </td>
-                                <td width="20%">Add to Cart</td>
+                                    <text ng-click="open(x)">{{x.Name}}</text>
+                                </td>
+                                <td width="20%"><center><button data-ng-click="addMPLToCart({{x.PlaylistID}})" class="btn btn-success btn-xs"> Add to cart </button></center></td></td>
                             </tr>
                             <tr ng-repeat="x in playlists">
                                 <td width="80%">
                                     <text ng-click="open(x)">{{x.Name}}</text>
                                 </td>
-                                <td width="20%">Add to Cart</td>
+                                <td width="20%"><center><button data-ng-click="addPLToCart({{x.PlaylistID}})" class="btn btn-success btn-xs"> Add to cart </button></center></td> </td></td>
                             </tr>
                         </table>
                     </uib-tab>
@@ -49,11 +49,30 @@
                                 </td>
                             </table>
                         </form>
-                        <div id="grid1" ui-grid="orderOptions" class="gridStyle"></div>
+                        <div style="overflow-y: scroll; height:450px;">
+                            <table>
+                                <td width="5%"><center></center></td>
+                                <td width="25%"><center>Track Name</center></td>
+                                <td width="25%"><center>Album Name</center></td>
+                                <td width="16%"><center>Media Type</center></td>
+                                <td width="8%"><center>Genre</center></td>
+                                <td width="5%">CLIP</td>
+                                <td width="10%"><center>Price</center></td>
+                                <tr ng-repeat="x in orderOptions.data">
+                                    <td width="3%"> <center><button data-ng-click="addToCart({{x.TrackId}})" class="btn btn-success btn-xs"> + </button></center></td> </td>
+                                    <td width="30%">{{x.TrackName}}</td>
+                                    <td width="30%">{{x.AlbumTitle}}</td>
+                                    <td width="16%">{{x.MediaType}}</td>
+                                    <td width="8%">{{x.Genre}}</td>
+                                    <td width="5%">CLIP</td>
+                                    <td width="4%">{{x.UnitPrice}}</td>
+                                </tr>
+                            </table>
+                        </div>
                     </uib-tab>
                 </uib-tabset>
             </div>
-            <div class="col-sm-3 middle" style="overflow-y: scroll; height:450px;">
+            <div class="col-sm-3 middle" style="overflow-y: scroll; height:530px;">
                 <table>
                     <tr><th colspan="2"><center>Current Order</center></th></tr>
                     <td width="90%"><center>Track Name</center></td>
@@ -67,6 +86,20 @@
         </div>
     </div>
 
+    <form name="myForm">
+        <p>Choose your payment method</p>
+        <ul>
+            <li ng-repeat="x in currpayments">
+                <label>
+                    Payment Type: {{x.Type}}
+                    <input type="radio" ng-model="$parent.pay" name="pay" value="{{x.PayId}}" required />
+                </label>
+            </li>
+        </ul>
+
+    </form>
+    <div align="right"><button ng-disabled="myForm.$invalid" data-ng-click="buy(pay)" class="btn btn-primary btn-lg"> Purchase Cart </button></div>
+
 
 
     <br /><br /><br /><br /><br /><br /><br /><br />