diff --git a/WebContent/html/imgs/potato.png b/WebContent/html/imgs/potato.png
new file mode 100644
index 0000000..cd69eda
Binary files /dev/null and b/WebContent/html/imgs/potato.png differ
diff --git a/WebContent/html/javascript/listing.js b/WebContent/html/javascript/listing.jsp
similarity index 79%
rename from WebContent/html/javascript/listing.js
rename to WebContent/html/javascript/listing.jsp
index f67c432..0d05c48 100644
--- a/WebContent/html/javascript/listing.js
+++ b/WebContent/html/javascript/listing.jsp
@@ -1,11 +1,40 @@
+<%@ page import = "database.MySQLAccess" %>
+<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
+    pageEncoding="ISO-8859-1"%>
+<!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>
+</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>
+//gets variables for database data
+(function(){
+	window.myname = "<%=name%>";
+	window.mydesc = "<%=description%>";
+	window.myhard = "<%=hardware%>"; 
+	})();
+	
 //get all the option buttons
 var options = document.getElementsByClassName('option');
 
-var dev0 = { 
+var dev7 = { 
 name: window.myname,
 description: window.mydesc,
 hardware: window.myhard,
-software:"potato"
+software:"intel"
 };
 
 var dev1 = {
@@ -50,7 +79,7 @@ var dev6 = {
 		software:"intel"
 };
 
-var devices = [dev0, dev1, dev2, dev3, dev4, dev5, dev6];
+var devices = [dev1, dev2, dev3, dev4, dev5, dev6, dev7];
 options[0].addEventListener('click', showAll);
 for(var a = 1; a < options.length; a++){
 	options[a].addEventListener('click', show);
@@ -136,4 +165,7 @@ function isUnavailable(id){
 		}
 	}
 	return 0;
-}
\ No newline at end of file
+}
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/WebContent/html/javascript/navbar.js b/WebContent/html/javascript/navbar.js
index 0cd657f..963f850 100644
--- a/WebContent/html/javascript/navbar.js
+++ b/WebContent/html/javascript/navbar.js
@@ -1 +1 @@
-document.getElementById('navbaruniversal').innerHTML = '<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="../webpages/admin.html"><img src="../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.html">Home</a></li><li><a href="requestPage.html">Request Device</a></li><li><a href="returnPage.html">Return Device</a></li><li><a href="listingPage.html">Device Listing</a></li><li><a href="shoppingCart.html">Shopping Cart</a></li></ul></div></div>'
\ No newline at end of file
+document.getElementById('navbaruniversal').innerHTML = '<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="../webpages/admin.html"><img src="../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.html">Home</a></li><li><a href="requestPage.html">Request Device</a></li><li><a href="returnPage.html">Return Device</a></li><li><a href="listingPage.jsp">Device Listing</a></li><li><a href="shoppingCart.html">Shopping Cart</a></li></ul></div></div>'
diff --git a/WebContent/html/webpages/index.html b/WebContent/html/webpages/index.html
index 1ff77d6..3993eb2 100644
--- a/WebContent/html/webpages/index.html
+++ b/WebContent/html/webpages/index.html
@@ -61,7 +61,7 @@ <h2>Return</h2>
     </a>
   </div>
   <div>
-    <a class = "divlink" href = "listingPage.html">
+    <a class = "divlink" href = "listingPage.jsp">
       <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>   
diff --git a/WebContent/html/webpages/listingPage.html b/WebContent/html/webpages/listingPage.jsp
similarity index 94%
rename from WebContent/html/webpages/listingPage.html
rename to WebContent/html/webpages/listingPage.jsp
index 4a86942..d2f6067 100644
--- a/WebContent/html/webpages/listingPage.html
+++ b/WebContent/html/webpages/listingPage.jsp
@@ -1,3 +1,4 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html lang="en">
   <head>
     <meta charset="utf-8">
@@ -72,7 +73,7 @@ <h2>Device Dictionary</h2>
 		  <div id = "devContainer"></div>   
 	  </div>
 	
-	  <script src="../javascript/listing.js"></script>
+	  <%@ include file="../javascript/listing.jsp" %>
     <script src = "../javascript/navbar.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/bin/.gitignore b/bin/.gitignore
new file mode 100644
index 0000000..dd4c872
--- /dev/null
+++ b/bin/.gitignore
@@ -0,0 +1 @@
+/features/
