diff --git a/WebContent/html/webpages/orderForm.html b/WebContent/html/webpages/orderForm.html
new file mode 100644
index 0000000..c733759
--- /dev/null
+++ b/WebContent/html/webpages/orderForm.html
@@ -0,0 +1,21 @@
+<form name="orderForm" onsubmit="return submitOrderForm()">
+    <div class="form-group">
+    <input type="hidden" name="userID">
+    <input type="hidden" name="deviceIDs">
+    <input type="hidden" name="orderAll">
+        <label for="name">Your name</label><br/>
+        <input type="text" class="form-control" name="name" placeholder="Name" />
+    </div>
+    <div class="form-group">
+        <label for="phone">Phone Number</label><br/>
+        <input type="text" class="form-control" name="phone" placeholder="No need to format it nicely (maybe we will implement a nicer phone# field soon)">
+    </div>
+    <div class="form-group">
+        <label for="location">Place to ship to</label><br/>
+        <input type="text" class="form-control" name="location" placeholder="Address" />
+    </div>
+    <div class="form-group">
+        <label for="timeNeeded">How many weeks do you think you'll need it?</label><br/>
+        <input type="text" class="form-control" name="timeNeeded" placeholder="Just estimate the number of weeks" />
+        </div>    <button type="submit" class="btn btn-primary" name="Submit">Submit</button>
+</form>
\ No newline at end of file
diff --git a/WebContent/html/webpages/orderFormHandler.jsp b/WebContent/html/webpages/orderFormHandler.jsp
index ba3f08d..a21fdff 100644
--- a/WebContent/html/webpages/orderFormHandler.jsp
+++ b/WebContent/html/webpages/orderFormHandler.jsp
@@ -11,11 +11,11 @@ pageEncoding="ISO-8859-1"%>
 <%
 //First update employee
 String userName = request.getParameter("name");
-int phone = Integer.valueOf(request.getParameter("phone"));
+String phone = request.getParameter("phone");
 int location = Integer.valueOf(request.getParameter("location"));
 MySQLAccess access = new MySQLAccess();
 access.updateEmployee(1, userName, phone, location); //TODO get ID somehow
-
+%>alert("updated employee "+userName);<%
 // And now for the ticket
 // TODO
 %>
diff --git a/WebContent/html/webpages/shoppingCart.jsp b/WebContent/html/webpages/shoppingCart.jsp
index 0ad0db4..dc2838b 100644
--- a/WebContent/html/webpages/shoppingCart.jsp
+++ b/WebContent/html/webpages/shoppingCart.jsp
@@ -49,7 +49,7 @@ pageEncoding="ISO-8859-1"%>
 
 <body>
     <nav class="navbar navbar-inverse navbar-fixed-top" id = "navbaruniversal">
-    <%@ include file="navbar.html"%>
+        <%@ include file="navbar.html"%>
     </nav>
     <div id="orderInfoModal" class="modal">
         <div class="modal-content">
@@ -102,9 +102,9 @@ pageEncoding="ISO-8859-1"%>
 <script src = "../javascript/nhpup_1.1.js"></script>
 <script type="text/javascript">
 //adding event listeners to all the options, such as ordering and deleting
-document.getElementById('os').addEventListener('click',showPopup);
+document.getElementById('os').addEventListener('click',orderSelected_showPopup);
 document.getElementById('ds').addEventListener('click',deleteSelected);
-document.getElementById('oa').addEventListener('click',showPopup);
+document.getElementById('oa').addEventListener('click',orderAll_showPopup);
 document.getElementById('da').addEventListener('click',deleteAll);
 
 document.onkeydown = function(e) {
@@ -130,7 +130,9 @@ var employee = {
     name:"",
     phone:""
 }
+var checked = new Array();
 
+debug_add_item_to_cart();
 show();                                                                                 //on load, we want to show everything
 
 
@@ -143,11 +145,17 @@ function getCartItems(){
     return cart;                                    //return value is an array
 }
 
+// Sets cart in localstorage to stringified parameter
+function setCart(cartArray) {
+    localStorage.setItem('cart',JSON.stringify(cartArray));
+}
+
 /**
 This function displays a list of devices that a user has currently in their shopping cart.
 **/
 function show(){
     var cart = getCartItems();                                              //get all the cart items you want to show
+    alert("cart: "+JSON.stringify(cart));
     var html = '';                                                          //html string initially empty
     var part1 = "nhpup.popup('";
     var part2 = "');"
@@ -155,14 +163,9 @@ function show(){
         html += '<p>Tickets have been generated below based on your desired selections.</p><br>'
         for(var i = 0; i < cart.length; i++){                               //iterate cart
             var id = cart[i];                                               //this gets the id value from the cart
-            for(var j = 0; j < devices.length; j++){                        //iterate device list
-                if(devices[j].id === id){                                   //match the id's                                        "nhpup.popup(' ');"
-                    html += '<div> <input class = "deviceCheckbox" type = "checkbox" id = "' + id + '"> </input><a class = "divlink" href = "#" onmouseover = "'+ part1 + 'Hardware type: ' + devices[j].hardware + '<br><br>' + devices[j].description + part2 + '"><div id = "ticket' + id +'" class = "ticket"><p class = "tickettext">' + devices[j].name + '</p></div></a></div>'; //create listing of all the devices
-                    break;                                                  //break out of loop when we match
+                    html += '<div> <input class = "deviceCheckbox" type = "checkbox" id = "' + id + '"> </input><a class = "divlink" href = "#" onmouseover = "'+ part1 + 'Hardware type: ' + cart[i].hardware + '<br><br>' + cart[i].description + part2 + '"><div id = "ticket' + id +'" class = "ticket"><p class = "tickettext">' + cart[i].name + '</p></div></a></div>'; //create listing of all the devices
                 }
             }
-        }
-    }
     else{                                                                   //no point in doing all that computing if the list is empty
         html += 'Shopping cart is empty.';                                  //so give a nice error message.
     }
@@ -198,6 +201,7 @@ function clickTicket(){
         document.getElementById(id).checked = true;
         checked.push(id);
     }
+    alert("the 'checked' array looks like this: "+JSON.stringify(cart));    
 }
 
 /**
@@ -214,20 +218,33 @@ function changeStatus(){
                 checked.splice(i,1);                                        //remove from the array
         }
     }
+    alert("the 'checked' array looks like this: "+JSON.stringify(cart));
 }
 
-/**
-This function takes all the devices we selected and simulates an order on them.
-**/
-function showPopup(){
+// These functions just redirect button pressed to call the showPopup method with the appropriate parameter
+function orderSelected_showPopup() {
+    showPopup("false");
+}
+function orderAll_showPopup() {
+    showPopup("true");
+}
+// Opens order form and calls autofill method. Parameter is actually a string, not a boolean, because it will be put into a text field. 
+// It indicaties which button was used to call the method.
+// If true, submitting the form will order everything in the cart. If false it only orders selected devices.
+function showPopup(orderAllBool){
     orderForm.style.display = "block";
-    autoFillFields();
+    autoFillFields(orderAllBool);
 }
+
+// Exits order form without subitting anything. Should maintain values in each field until page reload
 function hidePopup(){
     orderForm.style.display = "none";
 }
 
-function autoFillFields() {
+// Populates orderform fields with database information
+// Boolean parameter is applied to the hidden 'orderAll' field on the
+// order form, which is read before submition to determine which devices to include
+function autoFillFields(orderAllBool) {
     <%
     MySQLAccess access = new MySQLAccess();
     User employee = access.getEmployeeByID(9);  //replace with real ID
@@ -241,6 +258,7 @@ function autoFillFields() {
     document.orderForm.name.value=employee.name;
     document.orderForm.location.value=employee.locationName;
     document.orderForm.phone.value=employee.phone;
+    document.orderForm.orderAll.value=orderAllBool;
 }
 
 function submitOrderForm() {
@@ -249,46 +267,24 @@ function submitOrderForm() {
     // First, employee id
     userID=getUserID();
     document.orderForm.append('<input type="hidden" name="userID" value="'+userID+'">');
-    // Now selected devices. I have no idea how to send anything other than strings,
-    // so I'm pulling the same trick Connor did here and representing the array of 
-    // selected devices as a string "[dev1]:[dev2]:[dev3]:..." where [devn] is a device ID
-    var deviceIDs=collectSelectedDevices();
-    for(var i = 0; i < checked.length; i++){                                //iterate all the checked off devices
-            deviceIDs[i] = checked[i];                                              //get the id of each device
-            var cart = getCartItems();                                          //get the cart
-            for(var j = 0; j < cart.length; j++){                               //iterate cart
-                if(cart[j] == id)                                               //match id's
-                    cart.splice(j,1);                                           //remove from the cart
-            }
-        }
-    var selectedDeviceString="";
-    for (var i = deviceIDs.length - 1; i >= 0; i--) {
-        selectedDeviceString+=deviceIDs[i];
-        if (i!=0) {selectedDeviceString+=":";}
-    }
-    alert(selectedDeviceString);
+    // Now selected devices.
+    if(document.orderForm.orderAll.value=="true")  //if the order form was opened using the order all button
+        {selectAllDevices();}
+    
+    var selectedDeviceString=JSON.stringify(checked);
     document.orderForm.append('<input type="hidden" name="deviceIDs" value="'+selectedDeviceString+'">');
 
-    return true;
-}
-function orderSelected(){
-    var response = confirm("Are you sure you'd like to order the selected items?");
-    if(response == true){                                                       //if they confirm
-        for(var i = 0; i < checked.length; i++){                                //iterate all the checked off devices
-            var id = checked[i];                                                //get the id of each device
-            var requested = getRequestedItems();                                //get the unavailable items
-            var cart = getCartItems();                                          //get the cart
-            requested.push(id);                                                 //add to unavailable list
+    // Finally remove selected items from the cart
+    var cart = getCartItems();
+    for(var i = 0; i < checked.length; i++){                                    //iterate all the checked off devices
             for(var j = 0; j < cart.length; j++){                               //iterate cart
                 if(cart[j] == id)                                               //match id's
                     cart.splice(j,1);                                           //remove from the cart
             }
-            localStorage.setItem('requested', JSON.stringify(requested));       //update local storage
-            localStorage.setItem('cart', JSON.stringify(cart));                 //update local storage
         }
-        checked = new Array;                                                    //reset the checked off array
-        show();                                                                 //reload the container
-    }
+    // And clear the checked array
+    checked=new Array();
+    return true;
 }
 
 /**
@@ -312,26 +308,27 @@ function deleteSelected(){
     }
 }
 
-/**
-This function takes all devices in the shopping cart and orders them.
-**/
-function orderAll(){
-    var response = confirm("Are you sure you'd like to order the selected items?");
-    if(response == true){                                                       //if they confirm
-        var cart = getCartItems();                                              //get the cart
-        for(var i = 0; i < cart.length; i++){                                   //iterate the cart
-            var id = cart[i];                                                   //get the id of each device
-            var requested = getRequestedItems();                                //get the unavailable items
-            requested.push(id);                                                 //add to unavailable list
-            localStorage.setItem('requested', JSON.stringify(requested));       //update local storage
+// Adds all ids to the checked array
+function selectAllDevices() {
+    var cart = getCartItems();
+    var duplicate = false;
+    for (var i = cart.length - 1; i >= 0; i--) {
+        duplicate = false;
+        for (var j = checked.length - 1; j >= 0; j--) {
+            if(checked[j]==cart[i].id)
+            {
+                duplicate=true;
+            }
         }
-        checked = new Array;                                                    //reset the checked off array
-        cart = new Array;                                                       //cart should now be empty, so reset also
-        localStorage.setItem('cart',JSON.stringify(cart));                      //update local storage
-        show();                                                                 //reload container
+        if(!duplicate) checked.push(cart[i].id)
     }
 }
 
+/**
+This function takes all devices in the shopping cart and orders them.
+**/
+function orderAll(){}
+
 /**
 This function takes all devices in the shopping cart and deletes them.
 **/
@@ -345,18 +342,14 @@ function deleteAll(){
     }                                                   
 }
 
-/**
-This function gets requested items from local storage.
-**/
-function getRequestedItems(){
-    var requested = new Array;                                  //make new array
-    var requested_str = localStorage.getItem('requested');      //get the string from local storage
-    if(requested_str !== '' && requested_str !== null){         //as long as its not null
-        requested = JSON.parse(requested_str);                  //make into array
-    }
-    return requested;                                           //return value is an array
+function debug_add_item_to_cart() {
+    employee.id=5;
+    employee.location="test";
+    employee.name="test";
+    employee.phone="test";    
+    var cart = [employee];
+    localStorage.setItem("cart",JSON.stringify(cart));
 }
-
 </script>
 </body>
 </html>
diff --git a/WebContent/index.jsp b/WebContent/index.jsp
index 0467f72..62f5aa4 100644
--- a/WebContent/index.jsp
+++ b/WebContent/index.jsp
@@ -4,26 +4,101 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
-<title>Insert title here</title>
+<meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <title>Synchrony Financial</title>
+
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+    <link rel = "stylesheet" type = "text/css" href = "html/css/stylesheet.css">
+    <link rel = "shortcut icon" href = "html/imgs/synchrony-financial-logo-dlpx_1.ico">
+    <style>
+    div.deviceContainer{
+      border: solid; 
+      border-width: thin; 
+      padding: 15px;
+      background-color: #E9EAEB;
+      display: inline-block;
+    }
+    div.imgContainer{
+      display: inline-block; 
+      text-align: center;
+    }
+    img.device{
+      display: block;
+    }
+    div.deviceDescp{
+      display: inline-block; 
+      width: 200px; 
+      text-align: center; 
+    }
+    button.approvebutton{
+      display: block; 
+      margin: auto;
+    }
+    div.approveConfirm{
+      display: none;
+      top: 50%;
+      left: 50%;
+      position: fixed;
+      width: 155px;
+      height: 85px;
+      line-height: 85px;
+      text-align: center;
+      background-color: #FBC600;
+      border: solid;
+      border-color: #3B3C43;
+      border-radius: 5px;
+    }
+    div.displayDevice{
+      left: 0px;
+    }
+    
+    div.menuOption{
+      display: inline-block; 
+      width: 250px; 
+      height: 150px; 
+      vertical-align: top; 
+      border: solid; 
+      padding: 10px; 
+      margin: 10px;
+      border-radius: 10px;
+      background-color: #E9EAEB;
+    }
+    div.menuBox{
+      text-align: center; 
+      position: absolute; 
+      top: 50%; 
+      left: 50%; 
+      margin-top: -160px; 
+      margin-left: -260px;
+    }
+    </style>
 </head>
 <body>
-<%
-MySQLAccess myaccess = new MySQLAccess();
-myaccess.connectDB();
-String name = myaccess.getResult()[0][0];
-String description = myaccess.getResult()[0][1];
-String hardware = myaccess.getResult()[0][2];
-out.println(name);
-out.println(description);
-out.println(hardware);
-%>
-<script type=text/javascript>
-(function(){
-	window.myname = "<%=name%>";
-	window.mydesc = "<%=description%>";
-	window.myhard = "<%=hardware%>"; 
-	})();
-</script>
+<nav class="navbar navbar-inverse navbar-fixed-top" id = "navbaruniversal">
+<div class="container-fluid"><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="index.jsp"><img src="html/imgs/synchrony-financial-logo-dlpx_1.png" style = "height: 100%;"></a></div><div id="navbar" class="navbar-collapse collapse" aria-expanded="false"><ul class="nav navbar-nav navbar-right"><li><a href="index.jsp">Synchrony Device Request System</a></li></ul></div></div>
+  </nav>
+<div class = "menuBox">
+<div>
+      <a class = "divlink" href = "html/webpages/index.html">
+       <div class = "menuOption">
+         <h2>User Login</h2>
+         <img src = "html/imgs/cat.png"> </img>
+       </div>
+     </a>
+      <a class = "divlink" href="html/webpages/admin.html">
+      <div class = "menuOption">
+        <h2>Admin Login</h2> 
+        <img src = "html/imgs/cat_admin.png"> </img>
+      </div> 
+    </a>
+</div>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/database/MySQLAccess.java b/src/database/MySQLAccess.java
index 1666661..b009049 100644
--- a/src/database/MySQLAccess.java
+++ b/src/database/MySQLAccess.java
@@ -46,6 +46,7 @@ public void initializeEmployee(int id) throws ClassNotFoundException, SQLExcepti
 
 	public void updateEmployee(int id, String name, String phone, int location) throws ClassNotFoundException, SQLException
 	{
+		System.out.print("Updating employee "+id+": "+name+".\nPhone: "+phone+", location: "+location);
 		Class.forName("com.mysql.jdbc.Driver");
 		Connection connect = DriverManager.getConnection(database,user,password);
 		Statement statement = connect.createStatement();
