diff --git a/src/Components/Cart.jsx b/src/Components/Cart.jsx
index 8a28170..7a9de31 100644
--- a/src/Components/Cart.jsx
+++ b/src/Components/Cart.jsx
@@ -1,5 +1,5 @@
 import { Dialog, Transition } from "@headlessui/react";
-import { XIcon } from "@heroicons/react/outline";
+import { XIcon, ShoppingCartIcon } from "@heroicons/react/outline";
 import React, { Fragment } from "react";
 
 export default function Cart({ open, setOpen, cart, updateCart }) {
@@ -39,7 +39,7 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
             >
               <div className="pointer-events-auto w-screen max-w-md">
                 <div className="flex h-full flex-col overflow-y-scroll bg-white shadow-xl">
-                  <div className="flex-1 overflow-y-auto py-6 px-4 sm:px-6">
+                  <div className="flex-1 overflow-y-auto py-6 px-4 sm:px-6 flex flex-col">
                     <div className="flex items-start justify-between">
                       <Dialog.Title className="text-lg font-medium text-gray-900"> Shopping cart </Dialog.Title>
                       <div className="ml-3 flex h-7 items-center">
@@ -54,8 +54,15 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
                       </div>
                     </div>
 
-                    <div className="mt-8">
-                      <div className="flow-root">
+                    <div className="mt-8 flex-1">
+                      {
+                        cart.length == 0 ? 
+                        <div className="flex flex-col items-center justify-center h-full">
+                          <ShoppingCartIcon className="w-12"/>
+                          <span className="pt-2">Your Cart is Empty.</span>
+                        </div>
+                        :
+                        <div className="flow-root">
                         <ul role="list" className="-my-6 divide-y divide-gray-200">
                           {
                           cart.map((product) => (
@@ -105,9 +112,14 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
                                 </div>
                               </div>
                             </li>
-                          ))}
+                          ))
+
+                          
+                          }
                         </ul>
-                      </div>
+                        </div>
+                      }
+                      
                     </div>
                   </div>
 
diff --git a/src/Components/NavBar.jsx b/src/Components/NavBar.jsx
index b1d0db9..b7ce27c 100644
--- a/src/Components/NavBar.jsx
+++ b/src/Components/NavBar.jsx
@@ -1,7 +1,7 @@
 import { ShoppingBagIcon } from "@heroicons/react/outline";
 import React from "react";
 
-export default function NavBar({ setOpen }) {
+export default function NavBar({ setOpen, cart }) {
   return (
     <div className="bg-white">
       <header className="relative">
@@ -41,7 +41,7 @@ export default function NavBar({ setOpen }) {
                             className="flex-shrink-0 h-6 w-6 text-gray-400 group-hover:text-gray-500"
                             aria-hidden="true"
                           />
-                          <span className="ml-2 text-sm font-medium text-gray-700 group-hover:text-gray-800">0</span>
+                          <span className="ml-2 text-sm font-medium text-gray-700 group-hover:text-gray-800">{cart.length}</span>
                           <span className="sr-only">items in cart, view bag</span>
                         </button>
                       </div>
diff --git a/src/Components/ProductFilters.jsx b/src/Components/ProductFilters.jsx
index f57bcba..7950385 100644
--- a/src/Components/ProductFilters.jsx
+++ b/src/Components/ProductFilters.jsx
@@ -30,7 +30,6 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
   const customFilter = ()=>{
     const productsCopy = [...default_products];
 
-
     // filter price first
     let price_i=0
 
@@ -89,20 +88,39 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
         }
       }
     }
-
     setProducts(productsCopy);
   }
 
   const clearFilter=()=>{
-    setProducts(default_products)
+
+    
+
+    const all_checkboxes = document.querySelectorAll(`input[type="checkbox"]`);
+    all_checkboxes.forEach(
+      element=>{
+        element.checked=false;
+      }
+    );
+    
+    setProducts(default_products );
+
   }
 
   useEffect(
     ()=>{
+
       if(filter_num != 0)
-        customFilter();
+       customFilter();
       else 
-        clearFilter();
+       clearFilter();
+      
+
+      console.log("default_products");
+      console.log(default_products);
+      console.log("products");
+      console.log(products);
+      console.log("filterOptions");
+      console.log(filterOptions);
     }, [filter_num]
   )
 
@@ -130,13 +148,7 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
             <button type="button" className="text-gray-500"
               onClick={ ()=>{
                 set_filter_num(0);
-                const all_checkboxes = document.querySelectorAll(`input[type="checkbox"]`);
-                all_checkboxes.forEach(
-                  element=>{
-                    element.checked=false;
-                  }
-                );
-                
+
                 const new_price_filterOptions = [];
                 filterOptions["price"].forEach(element => {
                     
@@ -156,8 +168,8 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
                     checked: false });
                     
                 });
-                setFilterOptions({price:filterOptions["price"], color:filterOptions["color"]});
-
+                setFilterOptions({price:new_price_filterOptions, color:new_color_filterOptions});
+                
               } }
             >
               Clear all
@@ -174,13 +186,14 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
                 {filterOptions.price.map((option, optionIdx) => (
                   <div key={option.minValue} className="flex items-center text-base sm:text-sm">
                     <input
-                      
-                      onChange={(e) => {
+                      onChange={ (e)=>{
                         if(e.currentTarget.checked)
                           set_filter_num(filter_num+1);
                         else
                           set_filter_num(filter_num-1);
 
+                        
+                        
                         // 1 bold the current filter option
                         const new_price_filterOptions = [];
                         filterOptions["price"].forEach(element => {
@@ -196,8 +209,9 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
                             new_price_filterOptions.push(element);
                         });
                         setFilterOptions({price:new_price_filterOptions, color:filterOptions["color"]});
-
-                      }}
+                        }
+                      }
+                        
 
                       id={`price-${optionIdx}`}
                       name="price[]"
@@ -306,7 +320,6 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
                             // 2 sort accordingly
                             setProducts(customSort(option.name));
 
-
                           }}
                           className={classNames(
                             option.current ? "font-medium text-gray-900" : "text-gray-500",
diff --git a/src/Components/ProductTable.jsx b/src/Components/ProductTable.jsx
index d49609e..88e4267 100644
--- a/src/Components/ProductTable.jsx
+++ b/src/Components/ProductTable.jsx
@@ -45,7 +45,7 @@ export default function ProductTable({ cart, updateCart }) {
       set_default_products(body);
     };
     fetchProducts();
-  });
+  },[]);
 
   return (
     <div className="bg-white">
diff --git a/src/Pages/Home.jsx b/src/Pages/Home.jsx
index 4134f07..0ea0111 100644
--- a/src/Pages/Home.jsx
+++ b/src/Pages/Home.jsx
@@ -14,7 +14,7 @@ function Home() {
 
   return (
     <main>
-      <NavBar {...{ setOpen }} />
+      <NavBar {...{ setOpen, cart }} />
       <Cart {...{ open, setOpen, cart, updateCart }} />
       <ProductTable {...{ cart, updateCart }} />
     </main>