diff --git a/WebContent/html/javascript/lib/fuzzy.js b/WebContent/html/javascript/lib/fuzzy.js
new file mode 100644
index 0000000..d2131cb
--- /dev/null
+++ b/WebContent/html/javascript/lib/fuzzy.js
@@ -0,0 +1,143 @@
+/*
+ * Fuzzy
+ * https://github.com/myork/fuzzy
+ *
+ * Copyright (c) 2012 Matt York
+ * Licensed under the MIT license.
+ */
+
+(function() {
+
+var root = this;
+
+var fuzzy = {};
+
+// Use in node or in browser
+if (typeof exports !== 'undefined') {
+  module.exports = fuzzy;
+} else {
+  root.fuzzy = fuzzy;
+}
+
+// Return all elements of `array` that have a fuzzy
+// match against `pattern`.
+fuzzy.simpleFilter = function(pattern, array) {
+  return array.filter(function(str) {
+    return fuzzy.test(pattern, str);
+  });
+};
+
+// Does `pattern` fuzzy match `str`?
+fuzzy.test = function(pattern, str) {
+  return fuzzy.match(pattern, str) !== null;
+};
+
+// If `pattern` matches `str`, wrap each matching character
+// in `opts.pre` and `opts.post`. If no match, return null
+fuzzy.match = function(pattern, str, opts) {
+  opts = opts || {};
+  var patternIdx = 0
+    , result = []
+    , len = str.length
+    , totalScore = 0
+    , currScore = 0
+    // prefix
+    , pre = opts.pre || ''
+    // suffix
+    , post = opts.post || ''
+    // String to compare against. This might be a lowercase version of the
+    // raw string
+    , compareString =  opts.caseSensitive && str || str.toLowerCase()
+    , ch;
+
+  pattern = opts.caseSensitive && pattern || pattern.toLowerCase();
+
+  // For each character in the string, either add it to the result
+  // or wrap in template if it's the next string in the pattern
+  for(var idx = 0; idx < len; idx++) {
+    ch = str[idx];
+    if(compareString[idx] === pattern[patternIdx]) {
+      ch = pre + ch + post;
+      patternIdx += 1;
+
+      // consecutive characters should increase the score more than linearly
+      currScore += 1 + currScore;
+    } else {
+      currScore = 0;
+    }
+    totalScore += currScore;
+    result[result.length] = ch;
+  }
+
+  // return rendered string if we have a match for every char
+  if(patternIdx === pattern.length) {
+    // if the string is an exact match with pattern, totalScore should be maxed
+    totalScore = (compareString === pattern) ? Infinity : totalScore;
+    return {rendered: result.join(''), score: totalScore};
+  }
+
+  return null;
+};
+
+// The normal entry point. Filters `arr` for matches against `pattern`.
+// It returns an array with matching values of the type:
+//
+//     [{
+//         string:   '<b>lah' // The rendered string
+//       , index:    2        // The index of the element in `arr`
+//       , original: 'blah'   // The original element in `arr`
+//     }]
+//
+// `opts` is an optional argument bag. Details:
+//
+//    opts = {
+//        // string to put before a matching character
+//        pre:     '<b>'
+//
+//        // string to put after matching character
+//      , post:    '</b>'
+//
+//        // Optional function. Input is an entry in the given arr`,
+//        // output should be the string to test `pattern` against.
+//        // In this example, if `arr = [{crying: 'koala'}]` we would return
+//        // 'koala'.
+//      , extract: function(arg) { return arg.crying; }
+//    }
+fuzzy.filter = function(pattern, arr, opts) {
+  if(!arr || arr.length === 0) {
+    return [];
+  }
+  if (typeof pattern !== 'string') {
+    return arr;
+  }
+  opts = opts || {};
+  return arr
+    .reduce(function(prev, element, idx, arr) {
+      var str = element;
+      if(opts.extract) {
+        str = opts.extract(element);
+      }
+      var rendered = fuzzy.match(pattern, str, opts);
+      if(rendered != null) {
+        prev[prev.length] = {
+            string: rendered.rendered
+          , score: rendered.score
+          , index: idx
+          , original: element
+        };
+      }
+      return prev;
+    }, [])
+
+    // Sort by score. Browsers are inconsistent wrt stable/unstable
+    // sorting, so force stable by using the index in the case of tie.
+    // See http://ofb.net/~sethml/is-sort-stable.html
+    .sort(function(a,b) {
+      var compare = b.score - a.score;
+      if(compare) return compare;
+      return a.index - b.index;
+    });
+};
+
+
+}());
\ No newline at end of file
diff --git a/WebContent/html/javascript/listing.jsp b/WebContent/html/javascript/listing.jsp
index b8bd152..6b6c437 100644
--- a/WebContent/html/javascript/listing.jsp
+++ b/WebContent/html/javascript/listing.jsp
@@ -1,38 +1,37 @@
-<%@ page import = "database.MySQLAccess,entities.Device,database.DeviceQueries" %>
+<%@ page import = "database.*,entities.ListedDevice" %>
 <%@ 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>
+	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
+	<title>Insert title here</title>
 </head>
 <body>
-<%
-Device[] mydevices = DeviceQueries.getAllDevices();
-
+	<%
+	ListedDevice[] mydevices = DeviceQueries.getAllDevices();
 //string representation of array.
-String deviceString = Device.arrayToString(mydevices);
+	String deviceString = ListedDevice.arrayToString(mydevices);
 //out.println(description);
 //out.println(hardware);
+	%>
 
-%>
-
-<script type=text/javascript>
+	<script type=text/javascript>
 //gets variables for database data
 var devices = makeDeviceArray();
-	
 //get all the option buttons
 //var options = document.getElementsByClassName('checkboxes');
 var hardwareOptions = document.getElementsByClassName('hw-data-type');
 var softwareOptions = document.getElementsByClassName('sw-data-type');
-
 //options[0].addEventListener('click', showAll);
 for(var a = 0; a < hardwareOptions.length; a++){
-	hardwareOptions[a].addEventListener('click', show);
+	hardwareOptions[a].addEventListener('click', refresh);
 }
 for(var a = 0; a < softwareOptions.length; a++){
-	softwareOptions[a].addEventListener('click', show);
+	softwareOptions[a].addEventListener('click', refresh);
 }
+// searchbar listener
+var searchbar = document.getElementsByName('searchBar');
+searchbar[0].onkeyup = refresh;
 showAll();
 function showAll(){
 	var html = '';
@@ -56,9 +55,35 @@ function showAll(){
 		}
 	}
 }
-function show(){
-	var type = this.getAttribute('data-type');
+function refresh() {
+	var filteredDevices = fuzzyFilter(applyFilter());
+	show(filteredDevices);
+}
+function show(deviceArray){
 	var html = '';
+	for (var i = 0; i < deviceArray.length; i++) 
+	{
+		html += '<div class = "deviceContainer"><div class = "imgContainer"><img src="../imgs/my-icons-collection-devices/png/' + deviceArray[i].hardware + '.png" class = "device">' + deviceArray[i].name + '</div><div class = "deviceDescp"><p>' + deviceArray[i].description + '</p><div class = "availableAnchor" id = "' + (deviceArray[i].id) + '"></div></div></div><br><br>'
+	}
+	document.getElementById('devContainer').innerHTML = html;
+	var anchors = document.getElementsByClassName('availableAnchor');
+	for(var i = 0; i < anchors.length; i++){
+		var anchor = anchors[i];
+		var id = anchor.getAttribute('id');
+		if(devices[id-1].status != "Available"){
+			document.getElementById(id).innerHTML = 'Unavailable';
+			id = '#' + id;
+			$(id).css({'background-color':'#ff3535'});
+		}
+		else{
+			document.getElementById(id).innerHTML = 'Available';
+			id = '#' + id;
+			$(id).css({'background-color':'#1fe07f'});
+		}
+	}
+}
+function applyFilter() {
+	var filteredDevices = new Array();
 	var activeHOptions = [];
 	var activeSOptions = [];
 	for(var i = 0; i < hardwareOptions.length; i++) {
@@ -74,54 +99,85 @@ function show(){
 	for(var i = 0; i < devices.length; i++){
 		var hardwareMatch = false;
 		var softwareMatch = false;
-
 		for(var j = 0; j < activeHOptions.length; j++) {
 			if (activeHOptions[j] == devices[i].hardware){
 				hardwareMatch = true;
 			}
+			// now we must handle the 'other' case
+			// there is no 'other' catagory, so if that is the option selected we must make sure
+			// that the device in question is not one of the categories we DO have options for
+			if(activeHOptions[j] === 'Other')
+			{
+				var othermatch = true;
+				for (var k = 0; k < hardwareOptions.length; k++) {
+					if(devices[i].hardware == hardwareOptions[k].getAttribute('data-type'))
+						othermatch = false;
+				}
+				if(othermatch) hardwareMatch = true;
+			}
 		}
-		
 		if (activeHOptions.length == 0) {
 			hardwareMatch = true;
 		}
-		
 		for(var j = 0; j < activeSOptions.length; j++) {
 			if (activeSOptions[j] == devices[i].manufacturer){
 				softwareMatch = true;
 			}
+			// now we must handle the 'other' case
+			// there is no 'other' catagory, so if that is the option selected we must make sure
+			// that the device in question is not one of the categories we DO have options for
+			if(activeSOptions[j] === 'Other')
+			{
+				var othermatch = true;
+				for (var k = 0; k < softwareOptions.length; k++) {
+					if(devices[i].manufacturer == softwareOptions[k].getAttribute('data-type'))
+						othermatch = false;
+				}
+				if(othermatch) softwareMatch = true;
+			}
 		}
-		
 		if (activeSOptions.length == 0) {
 			softwareMatch = true;
 		}
-		
-			
-		if(hardwareMatch == true && softwareMatch == true){
-			html += '<div class = "deviceContainer"><div class = "imgContainer"><img src="../imgs/my-icons-collection-devices/png/' + devices[i].hardware + '.png" class = "device">' + devices[i].name + '</div><div class = "deviceDescp"><p>' + devices[i].description + '</p><div class = "availableAnchor" id = "' + (i) + '"></div></div></div><br><br>'
-		}
-	}
-	document.getElementById('devContainer').innerHTML = html;
-	var anchors = document.getElementsByClassName('availableAnchor');
-	for(var i = 0; i < anchors.length; i++){
-		var anchor = anchors[i];
-		var id = anchor.getAttribute('id');
-		if(devices[id].status != "Available"){
-			document.getElementById(id).innerHTML = 'Unavailable';
-			id = '#' + id;
-			$(id).css({'background-color':'#ff3535'});
-		}
-		else{
-			document.getElementById(id).innerHTML = 'Available';
-			id = '#' + id;
-			$(id).css({'background-color':'#1fe07f'});
+		if(hardwareMatch && softwareMatch)
+		{
+			filteredDevices.push(devices[i]);
 		}
 	}
+	return filteredDevices;
 }
-	
-	function makeDeviceArray(){
-		window.json = '<%=deviceString%>';
-		return JSON.parse(window.json);
+function fuzzyFilter(deviceList) {
+	var searchText = document.getElementsByName('searchBar')[0].value;
+	var options = {
+		pre: '<b>',
+		post: '</b>',
+		extract: function(arg) {return arg.name;}
+	}
+	var fuzzyResults = fuzzy.filter(searchText, deviceList, options);
+	// this returns a filtered array of objects with attributes 'index', 'original', 'score', and 'string'
+	// I am interested in the 'original' attribute, which is the relevant object exactly as it was submitted,
+	// and the 'string' attribute, which is the attribute that was compared against with matching characters conveniantly bolded
+	var results = new Array(fuzzyResults.length);
+	// so I'm going to rebuild a filtered device array in the same format as we've been using,
+	// substituting the 'name' attribute with the 'string' attribute returned by fuzzy
+	for (var i = 0; i < fuzzyResults.length; i++) {
+		results[i] = {
+			name:fuzzyResults[i].string, //This one is being replaced
+			id:fuzzyResults[i].original.id,
+			description:fuzzyResults[i].original.description,
+			hardware:fuzzyResults[i].original.hardware,
+			status:fuzzyResults[i].original.status,
+			model:fuzzyResults[i].original.model,
+			manufacturer:fuzzyResults[i].original.manufacturer,
+		};
 	}
+	return results;
+}
+function makeDeviceArray(){
+	window.json = '<%=deviceString%>';
+	return JSON.parse(window.json);
+}
 </script>
+<script src="../javascript/lib/fuzzy.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/WebContent/html/javascript/request.jsp b/WebContent/html/javascript/request.jsp
index 7e7ba73..4536a6e 100644
--- a/WebContent/html/javascript/request.jsp
+++ b/WebContent/html/javascript/request.jsp
@@ -1,4 +1,4 @@
-<%@ page import = "database.*,entities.Device" %>
+<%@ page import = "database.*,entities.ListedDevice" %>
 <%@ 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>
@@ -8,40 +8,83 @@
 </head>
 <body>
 <%
-Device[] mydevices = DeviceQueries.getAllDevices();
-
+ListedDevice[] mydevices = DeviceQueries.getAllDevices();
 //string representation of array.
-String deviceString = Device.arrayToString(mydevices);
+String deviceString = ListedDevice.arrayToString(mydevices);
 //out.println(description);
 //out.println(hardware);
-
 %>
 
 <script type=text/javascript>
 //gets variables for database data
 var devices = makeDeviceArray();
-
 //get all the option buttons
-
 var hardwareOptions = document.getElementsByClassName('hw-data-type');
 var softwareOptions = document.getElementsByClassName('sw-data-type');
-
+function ajaxFunction(){
+	var request;
+	try {
+	request = new XMLHttpRequest();
+	}
+	catch(e){
+	try {
+	request = new ActiveXObject("Msxml2.XMLHTTP");
+	}
+	catch(e){
+		try {
+		request = new ActiveXObject(Microsoft.XMLHTTP);
+		} catch(e) {
+				alert("Something is wrong with your browser");
+				return false;
+		}
+	
+			}
+		}
+	
+	
+	request.onreadystatechange = function(){
+		if(request.readyState == 4){
+			var display = document.getElementById('ajaxDiv');
+			display.innerHTML = request.responseText;
+		}
+	}
+	
+}
 //add event listeners to the options in the left sidebar
 for(var a = 0; a < hardwareOptions.length; a++){
-	hardwareOptions[a].addEventListener('click', show);
+	hardwareOptions[a].addEventListener('click', refresh);
 }
 for(var a = 0; a < softwareOptions.length; a++){
-	softwareOptions[a].addEventListener('click', show);
+	softwareOptions[a].addEventListener('click', refresh);
+}
+// searchbar listener
+var searchbar = document.getElementsByName('searchBar');
+searchbar[0].onkeyup = refresh;
+function refresh() {
+	show(fuzzyFilter(filter(devices)));
 }
-
 //when an option is selected, show a new list of devices based on what the user asked for
-function show(){
-
-	//currentFilter = readFilter();
-	//selectedDevices = getDevices(currentFilter); //when connor is done with the database library getDevices should be redirected there
-
-	var type = this.getAttribute('data-type');
+function show(deviceArray){
+	// var type = this.getAttribute('data-type');
 	var html = '';
+	for (var i = 0; i < deviceArray.length; i++) {
+		html += '<div class = "deviceContainer"><div class = "imgContainer"><img src="../imgs/my-icons-collection-devices/png/' + deviceArray[i].hardware + '.png" class = "device">' + deviceArray[i].name + '</div><div class = "deviceDescp"><p>' + deviceArray[i].description + '</p><button class = "requestbutton" id = "button' + (i+1) + '" type="button">Order device</button></div></div><br><br>'
+	}
+	
+	if(html.localeCompare("")==0)
+		html += "<p>There are no devices with the search criteria: " + this.textContent + "</p>";
+	
+	//add to HTML page
+	document.getElementById('devContainer').innerHTML = html;
+	
+	//now we need to add event listeners to all the request buttons
+	var requestbuttons = document.getElementsByClassName('requestbutton');
+	for(var i = 0; i < requestbuttons.length; i++) {
+		requestbuttons[i].addEventListener('click',addToCart);
+	}
+}
+function filter(deviceArray) {
+	var filteredArray = new Array();
 	var activeHOptions = [];
 	var activeSOptions = [];
 	for(var i = 0; i < hardwareOptions.length; i++) {
@@ -54,61 +97,82 @@ function show(){
 			activeSOptions.push(softwareOptions[i].getAttribute("data-type"));
 		}
 	}
-	if(activeHOptions.length == 0 && activeSOptions.length == 0){
-		document.getElementById('devContainer').innerHTML = "<p>Choose an option to the left to begin requesting!</p>";
-	}
-	else{
-		//iterate through the hardcoded device DB and select all the ones that match the selected option
-		for(var i = 0; i < devices.length; i++){
-			var hardwareMatch = false;
-			var softwareMatch = false;
-	
-			for(var j = 0; j < activeHOptions.length; j++) {
-				if (activeHOptions[j] == devices[i].hardware){
-					hardwareMatch = true;
-				}
-			}
-			
-			if (activeHOptions.length == 0) {
+	//iterate through the hardcoded device DB and select all the ones that match the selected option
+	for(var i = 0; i < deviceArray.length; i++){
+		var hardwareMatch = false;
+		var softwareMatch = false;
+		for(var j = 0; j < activeHOptions.length; j++) {
+			if (activeHOptions[j] == deviceArray[i].hardware){
 				hardwareMatch = true;
 			}
-			
-			for(var j = 0; j < activeSOptions.length; j++) {
-				if (activeSOptions[j] == devices[i].manufacturer){
-					softwareMatch = true;
+			// now we must handle the 'other' case
+			// there is no 'other' catagory, so if that is the option selected we must make sure
+			// that the device in question is not one of the categories we DO have options for
+			if(activeHOptions[j] === 'Other')
+			{
+				var othermatch = true;
+				for (var k = 0; k < hardwareOptions.length; k++) {
+					if(devices[i].hardware == hardwareOptions[k].getAttribute('data-type'))
+						othermatch = false;
 				}
+				if(othermatch) hardwareMatch = true;
 			}
-			
-			if (activeSOptions.length == 0) {
-				softwareMatch = true;
+		}
+		if (activeHOptions.length == 0) {
+			hardwareMatch = true;
+		}
+		// now we must handle the 'other' case
+		// there is no 'other' catagory, so if that is the option selected we must make sure
+		// that the device in question is not one of the categories we DO have options for
+		if(activeSOptions[j] === 'Other')
+		{
+			var othermatch = true;
+			for (var k = 0; k < softwareOptions.length; k++) {
+				if(devices[i].manufacturer == softwareOptions[k].getAttribute('data-type'))
+					othermatch = false;
 			}
-			
-				
-			if(hardwareMatch == true && softwareMatch == true && devices[i].status.localeCompare("Available") == 0){
-				html += '<div class = "deviceContainer"><div class = "imgContainer"><img src="../imgs/my-icons-collection-devices/png/' + devices[i].hardware + '.png" class = "device">' + devices[i].name + '</div><div class = "deviceDescp"><p>' + devices[i].description + '</p><button class = "requestbutton" id = "button' + (i+1) + '" type="button">Order device</button></div></div><br><br>'
+			if(othermatch) softwareMatch = true;
+		}
+		for(var j = 0; j < activeSOptions.length; j++) {
+			if (activeSOptions[j] == deviceArray[i].manufacturer){
+				softwareMatch = true;
 			}
 		}
-		
-		if(html.localeCompare("")==0)
-			html += "<p>There are no devices with the search criteria: " + this.textContent + "</p>";
-	
-		//add to HTML page
-		document.getElementById('devContainer').innerHTML = html;
-		
-		//now we need to add event listeners to all the request buttons
-		var requestbuttons = document.getElementsByClassName('requestbutton');
-		for(var i = 0; i < requestbuttons.length; i++){
-			requestbuttons[i].addEventListener('click',addToCart);
+		if (activeSOptions.length == 0) {
+			softwareMatch = true;
 		}
+		if(hardwareMatch == true && softwareMatch == true)
+			filteredArray.push(deviceArray[i]);
 	}
+	return filteredArray;
 }
-
-function readFilter() {
-	//Constrcts a filter object for use in the database library that corresponds to the checked optionsin the sidebar
-	var hw_type;
-	var sw_type;
+function fuzzyFilter(deviceArray) {
+	var searchText = document.getElementsByName('searchBar')[0].value;
+	var options = {
+		pre: '<b>',
+		post: '</b>',
+		extract: function(arg) {return arg.name;}
+	}
+	var fuzzyResults = fuzzy.filter(searchText, deviceArray, options);
+	// this returns a filtered array of objects with attributes 'index', 'original', 'score', and 'string'
+	// I am interested in the 'original' attribute, which is the relevant object exactly as it was submitted,
+	// and the 'string' attribute, which is the attribute that was compared against with matching characters conveniantly bolded
+	var results = new Array(fuzzyResults.length);
+	// so I'm going to rebuild a filtered device array in the same format as we've been using,
+	// substituting the 'name' attribute with the 'string' attribute returned by fuzzy
+	for (var i = 0; i < fuzzyResults.length; i++) {
+		results[i] = {
+			name:fuzzyResults[i].string, //This one is being replaced
+			id:fuzzyResults[i].original.id,
+			description:fuzzyResults[i].original.description,
+			hardware:fuzzyResults[i].original.hardware,
+			status:fuzzyResults[i].original.status,
+			model:fuzzyResults[i].original.model,
+			manufacturer:fuzzyResults[i].original.manufacturer,
+		};
+	}
+	return results;
 }
-
 function addToCart(){
 	var id = this.getAttribute('id');
 	id = parseInt(id.replace(/[^0-9\.]/g,''),10);	//this gets just the numerical value from the id!
@@ -126,7 +190,6 @@ function addToCart(){
     	$('#already').fadeOut(1000);
 	}
 }
-
 function inCart(id){
 	var cart = getCartItems();
 	if(cart.length == 0)	//if nothing's in the cart 
@@ -139,7 +202,6 @@ function inCart(id){
 	}
 	return 0;	
 }
-
 function getCartItems(){
 	//initiate array for them
     var cart = new Array;
@@ -151,12 +213,12 @@ function getCartItems(){
     }
     return cart;
 }
-
 function makeDeviceArray(){
 	window.json = '<%=deviceString%>';
 	return JSON.parse(window.json);
 }
 //this code allows a message to appear that indicates that the item was successfully placed in the shopping cart.
 </script>
+<script src="../javascript/lib/fuzzy.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/WebContent/html/webpages/listingPage.jsp b/WebContent/html/webpages/listingPage.jsp
index 4415d9c..fa01508 100644
--- a/WebContent/html/webpages/listingPage.jsp
+++ b/WebContent/html/webpages/listingPage.jsp
@@ -1,86 +1,92 @@
 <!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">
-    <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/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">
-    <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/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">
+  <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; 
-        vertical-align: center;
-      }
+    div.deviceDescp{
+      display: inline-block; 
+      width: 200px; 
+      text-align: center; 
+      vertical-align: center;
+    }
 
-      div.availableAnchor{
-        width: 50%;
-        margin: auto;
-        border: solid;
-        border-width: thin;
-      }
-    </style>
-  </head>
+    div.availableAnchor{
+      width: 50%;
+      margin: auto;
+      border: solid;
+      border-width: thin;
+    }
+  </style>
+</head>
 
-  <body>
-    <nav class="navbar navbar-inverse navbar-fixed-top" id = "navbaruniversal">
-      <%@ include file="navbar.html"%>
-    </nav>
-    <div class="col-sm-3 col-md-2 sidebar">
-	<ul class="nav nav-sidebar">
-      <h4>Device Type</h4>
-      <li><label><input type="checkbox" class="hw-data-type" data-type = "Computer">  Computers</label></li>
-      <li><label><input type="checkbox" class="hw-data-type" data-type = "Camera">  Cameras</label></li>
-      <li><label><input type="checkbox" class="hw-data-type" data-type = "Smartphone">  Smartphone</label></li>
-      <li><label><input type="checkbox" class="hw-data-type" data-type = "Storage">  Storage Devices</label></li>
-      <li><label><input type="checkbox" class="hw-data-type" data-type = "Tablet">  Tablet</label></li>
-      <li><label><input type="checkbox" class="hw-data-type" data-type = "Other">  Other</label></li>
-    </ul>
-    </ul>
-    <br>
-    <ul class="nav nav-sidebar">
-      <h4>Manufacturer</h4>
-      <li><label><input type="checkbox" class="sw-data-type" data-type = "Amazon">  Amazon</label></li>
-      <li><label><input type="checkbox" class="sw-data-type" data-type = "Apple">  Apple</label></li>
-      <li><label><input type="checkbox" class="sw-data-type" data-type = "Intel">  Intel</label></li>
-      <li><label><input type="checkbox" class="sw-data-type" data-type = "Samsung">  Samsung</label></li>
-      <li><label><input type="checkbox" class="sw-data-type" data-type = "Microsoft">  Microsoft</label></li>
-      <li><label><input type="checkbox" class="sw-data-type" data-type = "Other">  Other</label></li>
-    </ul>
-  </div>
+<body>
+  <nav class="navbar navbar-inverse navbar-fixed-top" id = "navbaruniversal">
+    <%@ include file="navbar.html"%>
+  </nav>
+  <div class="col-sm-3 col-md-2 sidebar">
+   <ul class="nav nav-sidebar">
+    <h4>Device Type</h4>
+    <li><label><input type="checkbox" class="hw-data-type" data-type = "Computer">  Computers</label></li>
+    <li><label><input type="checkbox" class="hw-data-type" data-type = "Camera">  Cameras</label></li>
+    <li><label><input type="checkbox" class="hw-data-type" data-type = "Smartphone">  Smartphone</label></li>
+    <li><label><input type="checkbox" class="hw-data-type" data-type = "Storage Device">  Storage Devices</label></li>
+    <li><label><input type="checkbox" class="hw-data-type" data-type = "Tablet">  Tablet</label></li>
+    <li><label><input type="checkbox" class="hw-data-type" data-type = "Other">  Other</label></li>
+  </ul>
+</ul>
+<br>
+<ul class="nav nav-sidebar">
+  <h4>Manufacturer</h4>
+  <li><label><input type="checkbox" class="sw-data-type" data-type = "Amazon">  Amazon</label></li>
+  <li><label><input type="checkbox" class="sw-data-type" data-type = "Apple">  Apple</label></li>
+  <li><label><input type="checkbox" class="sw-data-type" data-type = "Intel">  Intel</label></li>
+  <li><label><input type="checkbox" class="sw-data-type" data-type = "Samsung">  Samsung</label></li>
+  <li><label><input type="checkbox" class="sw-data-type" data-type = "Microsoft">  Microsoft</label></li>
+  <li><label><input type="checkbox" class="sw-data-type" data-type = "Other">  Other</label></li>
+</ul>
+</div>
 
-    <div class = "displayDevice">
-          <h2>Device Dictionary</h2>
-		  <div id = "devContainer"></div>   
-	  </div>
-	
-	  <%@ include file="../javascript/listing.jsp" %>
-  </body>
+
+<div class = "displayDevice">
+  <h2>Device Dictionary
+  <!-- I'm only using a form to leverage bootstrap's styling. The onsubmit function just returns false because the form is never meant to be submitted anywhere. -->
+    <form onsubmit="return false;">
+    <input type="search" class="form-control" name="searchBar" placeholder=" search for devices by name" autocomplete="off" style="width: 50%; text-align: left; margin: 1%;"  />
+    </form>
+  </h2>
+  <div id = "devContainer"></div>   
+</div>
+
+<%@ include file="../javascript/listing.jsp" %>
+</body>
 </html>
\ No newline at end of file
diff --git a/WebContent/html/webpages/requestPage.jsp b/WebContent/html/webpages/requestPage.jsp
index e6d30e3..ebf9e87 100644
--- a/WebContent/html/webpages/requestPage.jsp
+++ b/WebContent/html/webpages/requestPage.jsp
@@ -87,8 +87,13 @@
   </div>
 
   <div class = "displayDevice">
-    <h2>Available Devices</h2>
-    <div id = "devContainer"><p>Choose an option to the left to begin requesting!</p></div>   
+    <h2>Available Devices
+      <!-- I'm only using a form to leverage bootstrap's styling. The onsubmit function just returns false because the form is never meant to be submitted anywhere. -->
+    <form onsubmit="return false;">
+    <input type="search" class="form-control" name="searchBar" placeholder=" search for devices by name" autocomplete="off" style="width: 50%; text-align: left; margin: 1%;"  />
+    </form>
+    </h2>
+    <div id = "devContainer"><p>Or choose an option to the left to begin requesting!</p></div>   
   </div>
 
   <div class = "cartConfirm" id = "added">