diff --git a/index.html b/index.html
index 93dd101..fd32e17 100644
--- a/index.html
+++ b/index.html
@@ -3,23 +3,35 @@
   <head>
     <!--This style sheet is taken from  https://www.w3schools.com/howto/howto_js_tabs.asp -->
     <link href="styles/style.css" rel="stylesheet" type="text/css" />
+    <!-- Load an icon library -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   </head>
 
   <body>
+
+  
+    <div class="navbar">
+      
     <div class="company-name">
-      <h1>Sam's Mart</h1>
-      <img class="cart-img" src="images/logo.png" alt="mart-img" />
+      <h1 >Sam's Mart</h1>
     </div>
+      <a onclick="openInfo(event, 'Cart')" class ="icon"><i class="fa fa-shopping-cart"></i> Cart</a> 
+      <a onclick="openInfo(event, 'Products')" class ="icon"><i class="fa fa-list-ul icon"></i> Product</a> 
+      <a onclick="openInfo(event, 'Client')" class ="icon"><i class="fa fa-fw fa-user icon"></i> Client</a>
+    </div>
+
+
+
 
     <!-- Tab links, each one with an onclick event associated with it -->
     <div class="tab">
-      <button class="tablinks" onclick="openInfo(event, 'Client')">
+      <button class="tablinks" id="client" onclick="openInfo(event, 'Client')">
         Client
       </button>
-      <button class="tablinks" onclick="openInfo(event, 'Products')">
+      <button class="tablinks" id="products" onclick="openInfo(event, 'Products')">
         Products
       </button>
-      <button class="tablinks" onclick="openInfo(event, 'Cart')">Cart</button>
+      <button class="tablinks" id="cart" onclick="openInfo(event, 'Cart')">Cart</button>
     </div>
 
     <!-- Tab content -->
@@ -33,7 +45,6 @@
       <label for="category-foods1"> Vegetarian</label>
       <input type="checkbox" id ="Vegetarian" value="Vegetarian" onchange="populateListProductChoices(this.id, 'displayProduct')">
       <br>
-
       <label for="category-foods1"> Gluten-Free</label>
       <input type="checkbox" id="GlutenFree" value="GlutenFree" onchange="populateListProductChoices(this.id, 'displayProduct')">
       <br>
diff --git a/scripts/groceries.js b/scripts/groceries.js
index 50659f9..38ef60e 100644
--- a/scripts/groceries.js
+++ b/scripts/groceries.js
@@ -1,7 +1,7 @@
 	
 // Array of products, each product is an object with different fieldset
 // A set of ingredients should be added to products		 
-
+var filtered = [];
 var products = [
 	{
 		name: "broccoli",
@@ -89,7 +89,7 @@ var products = [
 	},
 	{
 		name: "cheese",
-		vegetarian: false,
+		vegetarian: true,
 		glutenFree: false,
 		organic: false, 
 		price: 5.14,
@@ -154,7 +154,6 @@ function getProductImg(productName) {
 	return prodVal.productImg;
 }
 
-
 // given restrictions provided, make a reduced list of products
 // prices should be included in this list, as well as a sort based on price
 
@@ -184,29 +183,36 @@ function restrictListProducts(prods, restriction) {
 }
 
 function filterProduct(prod, filter) {
+
 	let prod_filter = [];
 	for(let i=0; i < prod.length; i++) {
-		if ( filter === "Fruits" && prod[i].Fruits === true ) {
-			prod_filter.push(prod[i].name);
+
+		//filteredArray = prod.find();
+		var prodVal = products.find(prod1 => prod1.name === prod[i]);
+
+		console.log("test", prodVal);
+
+		if ( filter === "Fruits" && prodVal.Fruits === true ) {
+			prod_filter.push(prodVal.name);
 		}
-		else if ( filter === "Vegetables" && prod[i].Vegetables === true ) {
-			prod_filter.push(prod[i].name);
+		else if ( filter === "Vegetables" && prodVal.Vegetables === true ) {
+			prod_filter.push(prodVal.name);
 		}
-		else if ( filter === "Pantry" && prod[i].Pantry === true ) {
-			prod_filter.push(prod[i].name);
+		else if ( filter === "Pantry" && prodVal.Pantry === true ) {
+			prod_filter.push(prodVal.name);
 		}
-		else if ( filter === "Dairy" && prod[i].Dairy === true) {
-			prod_filter.push(prod[i].name);
+		else if ( filter === "Dairy" && prodVal.Dairy === true) {
+			prod_filter.push(prodVal.name);
 		}
-		else if ( filter === "Meat&Seafood" && prod[i].MeatandSeafood === true) {
-			prod_filter.push(prod[i].name);
+		else if ( filter === "Meat&Seafood" && prodVal.MeatandSeafood === true) {
+			prod_filter.push(prodVal.name);
 		}
-		else if ( filter === "Bakery" && prod[i].Bakery === true) {
-			prod_filter.push(prod[i].name);
+		else if ( filter === "Bakery" && prodVal.Bakery === true) {
+			prod_filter.push(prodVal.name);
+		}
+		 else if ( filter === "" ){
+		 	prod_filter.push(prodVal.name);
 		}
-		// else if ( filter === "None" ){
-		// 	prod_filter.push(prod[i].name);
-		// }
 	}
 	return prod_filter;
 }
diff --git a/scripts/main.js b/scripts/main.js
index bc06a48..daae6ff 100644
--- a/scripts/main.js
+++ b/scripts/main.js
@@ -23,9 +23,11 @@ function openInfo(evt, tabName) {
 // it makes each product name as the label for the checkbos
 
 function populateListProductChoices(slct1, slct2) {
+    
     var s1 = document.getElementById(slct1);
     var s2 = document.getElementById(slct2);
 	
+
 	// s2 represents the <div> in the Products tab, which shows the product list, so we first set it empty
     s2.innerHTML = "";
 	s2.appendChild(document.createElement("br"));
@@ -34,6 +36,10 @@ function populateListProductChoices(slct1, slct2) {
 	// obtain a reduced list of products based on restrictions
 	var optionArray = restrictListProducts(products, s1.value);
 
+  //add to the filtered array 
+  filtered = optionArray; 
+  console.log("hello", filtered);
+
 	// for each item in the array, create a checkbox element, each containing information such as:
 	// <input type="checkbox" name="product" value="Bread">
 	// <label for="Bread">Bread/label><br>
@@ -124,13 +130,23 @@ function filterProducts(sel1, sel2) {
   var s1 = document.getElementById(sel1)
   var s2 = document.getElementById(sel2)
 
+
+
   // s2 represents the <div> in the Products tab, which shows the product list, so we first set it empty
   s2.innerHTML = ''
   s2.appendChild(document.createElement('br'))
   s2.appendChild(document.createElement('br'))
 
+
+  //var restrictProd = restrictListProducts(filtered, );
+
   // obtain a reduced list of products based on restrictions
-  var optionArray = filterProduct(products, s1.value);
+
+  var optionArray = filterProduct(filtered, s1.value);
+  //var optionArray = filterProduct()
+ 
+  
+
 
   // for each item in the array, create a checkbox element, each containing information such as:
   // <input type="checkbox" name="product" value="Bread">
diff --git a/styles/style.css b/styles/style.css
index 8e2297f..745fde0 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -47,10 +47,10 @@
 h1{
   font-family: "Britannic Bold ", sans-serif;
   font-weight: bolder;
-  font-size: 50px;
-  color: #f7fcfc;
-  vertical-align: middle;
-  display: inline;
+  color: #ffffff;
+  display:inline;
+  font-size: 3rem;
+
   /* margin-right: 15px; */
 
 }
@@ -91,6 +91,10 @@ img{
 
 .company-name {
   text-align: left;
+  float: left;
+  display:inline;
+  padding-left: 10px;
+  
 }
 .cart-img {
   height: 5%; 
@@ -123,4 +127,51 @@ i {
 
 .sumo{
   font-size: 15px;
+}
+
+
+/*
+
+source: 
+https://www.w3schools.com/howto/howto_js_topnav_responsive.asp
+
+*/
+
+/* Style the navigation bar */
+.navbar {
+  width: 100%;
+  background-color: rgb(212, 100, 100);
+  overflow: auto;
+  
+}
+
+/* Navbar links */
+.navbar a {
+  float: right;
+  padding: 12px;
+  color: white;
+  text-decoration: none;
+  font-size: 17px;
+}
+
+/* Navbar links on mouse-over */
+.navbar a:hover {
+  background-color: rgb(53, 172, 166);
+}
+
+/* Current/active navbar link */
+.active {
+}
+
+a.icon{
+  font-size: 25px;
+
+}
+
+/* Add responsiveness - will automatically display the navbar vertically instead of horizontally on screens less than 500 pixels */
+@media screen and (max-width: 500px) {
+  .navbar a {
+    float: none;
+    display: block;
+  }
 }
\ No newline at end of file
