diff --git a/html/ListingBootstrap.html b/html/ListingBootstrap.html
deleted file mode 100644
index 128d092..0000000
--- a/html/ListingBootstrap.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<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/1.12.4/jquery.min.js"></script>
-      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
-      <style>body { padding-top: 80px; }</style>
-      <style>
-    table {
-      border-collapse: collapse;
-    }
-    tr:nth-child(even) {background-color: #f2f2f2}
-    th, td {
-      text-align: center;
-      width: 100px;
-    }
-  </style>
-      </head>
-
-  <body>
-
-    <nav class="navbar navbar-inverse navbar-fixed-top" style = "height: 80px;">
-      <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" style="line-height: 48px;">
-            <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="#"><img src="imgs/synchrony-financial-logo-dlpx.png"></a>
-        </div>
-        <div id="navbar" class="navbar-collapse collapse" aria-expanded="false" style="height: 0.8px;">
-          <ul class="nav navbar-nav navbar-right">
-            <li><a href="#" style="line-height: 48px;">Home</a></li>
-            <li><a href="#" style="line-height: 48px;">Request Device</a></li>
-            <li><a href="#" style="line-height: 48px;">Return Device</a></li>
-            <li><a href="#" style="line-height: 48px;">Device Listing</a></li>
-            <li><a href="#" style="line-height: 48px;">User Information</a></li>
-          </ul>
-        </div>
-      </div>
-    </nav>
-    <div class="col-sm-3 col-md-2 sidebar" style = "display: inline-block; border-right-style: solid; height: 100%; width: 200px;">
-          <ul class="nav nav-sidebar" style = "padding: 0px;">
-            <h4>Device Options</h4>
-            <li class = "option" data-type = "iphone"><a href="#">iPhones</a></li>
-            <li class = "option" data-type = "ipad"><a href="#">iPad</a></li>
-            <li class = "option" data-type = "computerStick"><a href="#">Computer Sticks</a></li>
-          </ul>
-          <br>
-          <ul class="nav nav-sidebar" style = "padding: 0px;">
-            <h4>Operating Systems</h4>
-            <li class = "option" data-type = "intel"><a href="#">Intel</a></li>
-            <li class = "option" data-type = "apple"><a href="#">Apple</a></li>
-          </ul>
-    </div>
-
-    <div style = "display: inline-block; position: absolute; padding-left: 30px;">
-        <h2>Available Devices</h2>
-		<div id = "devContainer"></div>   
-	</div>
-	
-	<script src="ListingBootstrap.js"></script>
-</body>
-</html>
\ No newline at end of file
diff --git a/html/css/stylesheet.css b/html/css/stylesheet.css
new file mode 100644
index 0000000..c02399c
--- /dev/null
+++ b/html/css/stylesheet.css
@@ -0,0 +1,9 @@
+body{
+	background-color: #94969A;
+	padding-top: 50px;
+}
+
+a.divlink{
+	color: black;
+}
+
diff --git a/html/ListingBootstrap.js b/html/javascript/listing.js
similarity index 76%
rename from html/ListingBootstrap.js
rename to html/javascript/listing.js
index d2c27ff..b27d54e 100644
--- a/html/ListingBootstrap.js
+++ b/html/javascript/listing.js
@@ -56,7 +56,7 @@ function show(){
 	
 	for(var i = 0; i < devices.length; i++){
 		if(type.localeCompare(devices[i].hardware) == 0 || type.localeCompare(devices[i].software) == 0){
-			html += '<div style="border: solid; border-width: thin; padding: 15px;"><div style = "display: inline-block; text-align: center;"><img src="imgs/' + devices[i].hardware + '.png" style="display: block;">' + devices[i].name + '</div><div style="display: inline-block; width: 200px; text-align: center; vertical-align: center;"><p>' + devices[i].description + '</p><button type="button" style="display: block; margin: auto;">Order device</button></div></div><br>'
+			html += '<div class = "deviceContainer"><div class = "imgContainer"><img src="../imgs/' + devices[i].hardware + '.png" class = "device">' + devices[i].name + '</div><div class = "deviceDescp"><p>' + devices[i].description + '</p><button class = "request" type="button">Order device</button></div></div><br>'
 		}
 	}
 	
diff --git a/html/webpages/homePage.html b/html/webpages/homePage.html
new file mode 100644
index 0000000..8de362e
--- /dev/null
+++ b/html/webpages/homePage.html
@@ -0,0 +1,92 @@
+<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/1.12.4/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">
+    <style>
+      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>
+
+    <nav class="navbar navbar-inverse navbar-fixed-top">
+      <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="#"><img src="../imgs/synchrony-financial-logo-dlpx.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="homePage.html">Home</a></li>
+            <li><a href="requestPage.html">Request Device</a></li>
+            <li><a href="#">Return Device</a></li>
+            <li><a href="#">Device Listing</a></li>
+            <li><a href="#">User Information</a></li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+
+    <div class = "menuBox">
+      <div>
+		<a class = "divlink" href = "requestPage.html">
+        <div class = "menuOption">
+          <h2>Request</h2>
+          <p>Check out our selection of devices that YOU have the chance to check out!</p>  
+        </div>
+		</a>
+        <div class = "menuOption">
+          <h2>Return</h2>
+          <p>All set with a device? No problem! You can return it here!</p>   
+        </div>  
+      </div>
+      <div>
+          <div class = "menuOption">
+            <h2>All Items</h2>
+            <p>Just curious to see what devices we have to offer? You've come to the right place.</p>   
+          </div>
+        <div class = "menuOption">
+          <h2>Data</h2>
+          <p>Interested in statistics related to this service? Check out this link!</p>
+        </div>
+      </div>
+    </div>
+
+  </body>
+</html>
\ No newline at end of file
diff --git a/html/webpages/requestPage.html b/html/webpages/requestPage.html
new file mode 100644
index 0000000..70c6367
--- /dev/null
+++ b/html/webpages/requestPage.html
@@ -0,0 +1,110 @@
+<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/1.12.4/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">
+    <style>
+    div.displayDevice{
+        display: inline-block; 
+        position: absolute; 
+        padding-left: 30px;
+    }
+
+    div.deviceContainer{
+      border: solid; 
+      border-width: thin; 
+      padding: 15px;
+      background-color: #E9EAEB;
+    }
+
+    div.imgContainer{
+      display: inline-block; 
+      text-align: center;
+    }
+
+    img.device{
+      display: block;
+    }
+
+    div.deviceDescp{
+      display: inline-block; 
+      width: 200px; 
+      text-align: center; 
+      vertical-align: center;
+    }
+
+    button.request{
+      display: block; 
+      margin: auto;
+    }
+
+    div.sidebar{
+      display: inline-block; 
+      border-right-style: solid; 
+      height: 100%; 
+      width: 200px;
+      background-color: #E9EAEB;
+    }
+
+    ul.nav{
+      padding: 0px;
+    }
+    </style>
+  </head>
+
+  <body>
+    <nav class="navbar navbar-inverse navbar-fixed-top">
+      <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="#"><img src="../imgs/synchrony-financial-logo-dlpx.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="homePage.html">Home</a></li>
+            <li><a href="requestPage.html">Request Device</a></li>
+            <li><a href="#">Return Device</a></li>
+            <li><a href="#">Device Listing</a></li>
+            <li><a href="#">User Information</a></li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+    <div class="col-sm-3 col-md-2 sidebar">
+          <ul class="nav nav-sidebar">
+            <h4>Device Options</h4>
+            <li class = "option" data-type = "iphone"><a href="#">iPhones</a></li>
+            <li class = "option" data-type = "ipad"><a href="#">iPad</a></li>
+            <li class = "option" data-type = "computerStick"><a href="#">Computer Sticks</a></li>
+          </ul>
+          <br>
+          <ul class="nav nav-sidebar">
+            <h4>Operating Systems</h4>
+            <li class = "option" data-type = "intel"><a href="#">Intel</a></li>
+            <li class = "option" data-type = "apple"><a href="#">Apple</a></li>
+          </ul>
+    </div>
+
+    <div class = "displayDevice">
+          <h2>Available Devices</h2>
+		  <div id = "devContainer"></div>   
+	  </div>
+	
+	  <script src="../javascript/listing.js"></script>
+  </body>
+</html>
\ No newline at end of file
