diff --git a/WebContent/html/webpages/admin.html b/WebContent/html/webpages/admin.html
index 094bfa8..cc969b6 100644
--- a/WebContent/html/webpages/admin.html
+++ b/WebContent/html/webpages/admin.html
@@ -1,83 +1,90 @@
 <html lang="en">
-  <head>
-    <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="">
+<head>
+<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>
+<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 = "../css/stylesheet.css">
-    <link rel = "shortcut icon" href = "../imgs/synchrony-financial-logo-dlpx_1.ico">
-    <style>
-    div.deviceContainer{
-      border: solid; 
-      border-width: thin; 
-      padding: 15px;
-      background-color: #E9EAEB;
-      display: inline-block;
-    }
+<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="../css/stylesheet.css">
+<link rel="shortcut icon"
+	href="../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;
-    }
+div.imgContainer {
+	display: inline-block;
+	text-align: center;
+}
 
-    img.device{
-      display: block;
-    }
+img.device {
+	display: block;
+}
 
-    div.deviceDescp{
-      display: inline-block; 
-      width: 200px; 
-      text-align: center; 
-    }
+div.deviceDescp {
+	display: inline-block;
+	width: 200px;
+	text-align: center;
+}
 
-    button.approvebutton{
-      display: block; 
-      margin: auto;
-    }
+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.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;
-    }
-    </style>
-  </head>
+</style>
+</head>
 
-  <body>
-    <nav class="navbar navbar-inverse navbar-fixed-top" id = "navbaruniversal">
+<body>
+	<nav class="navbar navbar-inverse navbar-fixed-top" id = "navbaruniversal">
     </nav>
 
-    <div class = "displayDevice">
-      <h2>Admin View Approvals</h2>
-		  <div id = "devContainer"></div>   
-	  </div>
+	<div class="col-sm-3 col-md-2 sidebar">
+		<ul class="nav nav-sidebar">
+			<h4>Admin Options</h4>
+			<li class="option"><a href="../webpages/adminApprove.html">Approve Devices</a></li>
+			<li class="option"><a href="#">Manage Admins</a></li>
+			<li class="option"><a href="#">Manage Devices</a></li>
+		</ul>
+	</div>
+	<div class="displayDevice">
+		<h2>Welcome to the admin page</h2>
+		<div id="admin"></div>
+	</div>
 
-    <div class = "approveConfirm" id = "approved">
-    <p>Approved!</p>
-    </div>
-	
-	  <script src="../javascript/admin.js"></script>
-    <script src = "../javascript/navbar.js"></script>
-  </body>
+
+	 <script src="../javascript/admin.js"></script>
+	<script src="../javascript/navbar.js"></script>
+	<script src="../javascript/nhpup_1.1.js"></script>
+</body>
 </html>
\ No newline at end of file
diff --git a/WebContent/html/webpages/adminApprove.html b/WebContent/html/webpages/adminApprove.html
new file mode 100644
index 0000000..f73865e
--- /dev/null
+++ b/WebContent/html/webpages/adminApprove.html
@@ -0,0 +1,83 @@
+<html lang="en">
+  <head>
+    <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 = "../css/stylesheet.css">
+    <link rel = "shortcut icon" href = "../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;
+    }
+    </style>
+  </head>
+
+  <body>
+    <nav class="navbar navbar-inverse navbar-fixed-top" id = "navbaruniversal">
+    </nav>
+
+    <div class = "displayDevice">
+      <h2>Admin View Approvals</h2>
+		  <div id = "devContainer"></div>   
+	  </div>
+
+    <div class = "approveConfirm" id = "approved">
+    <p>Approved!</p>
+    </div>
+	
+	  <script src="../javascript/admin.js"></script>
+    <script src = "../javascript/navbar.js"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/WebContent/index.jsp b/WebContent/index.jsp
index 9a6dcac..91eca06 100644
--- a/WebContent/index.jsp
+++ b/WebContent/index.jsp
@@ -4,10 +4,106 @@
 <!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>
-Welcome to Senior Design Request System!
+<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>  
+       </div>
+     </a>
+      <a class = "divlink" href="html/webpages/admin.html">
+      <div class = "menuOption">
+        <h2>Admin Login</h2> 
+      </div> 
+    </a>
+</div>
 </body>
 </html>
\ No newline at end of file
