diff --git a/src/Components/Cart.jsx b/src/Components/Cart.jsx
index 917b7a1..d38a98c 100644
--- a/src/Components/Cart.jsx
+++ b/src/Components/Cart.jsx
@@ -1,8 +1,12 @@
 import { Dialog, Transition } from "@headlessui/react";
-import { XIcon } from "@heroicons/react/outline";
-import React, { Fragment } from "react";
+import { XIcon, ShoppingCartIcon } from "@heroicons/react/outline";
+import React, { Fragment, useState } from "react";
 
 export default function Cart({ open, setOpen, cart, updateCart }) {
+  
+    const total = cart.reduce((acc, current) => {
+      return acc + current.price
+    },0)
   return (
     <Transition.Root show={open} as={Fragment}>
       <Dialog
@@ -11,7 +15,7 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
         onClose={() => {
           setOpen;
         }}
-      >
+        >
         <div className="absolute inset-0 overflow-hidden">
           <Transition.Child
             as={Fragment}
@@ -22,7 +26,7 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <Dialog.Overlay className="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+            <Dialog.Overlay className="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity"  onClick={() => setOpen(false)}/>
           </Transition.Child>
 
           <div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">
@@ -52,9 +56,10 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
                       </div>
                     </div>
 
+                    {cart.length === 0 && <div className="flex h-full flex-col items-center justify-center"><ShoppingCartIcon className="h-16 w-16"/><span className="pt-2">Your Cart is Empty.</span></div>}
                     <div className="mt-8">
                       <div className="flow-root">
-                        <ul role="list" className="-my-6 divide-y divide-gray-200">
+                        <ul role="list" className="-my-6 divide-y divide-gray-200">                          
                           {cart.map((product) => (
                             <li key={product.id} className="flex py-6">
                               <div className="h-24 w-24 flex-shrink-0 overflow-hidden rounded-md border border-gray-200">
@@ -105,7 +110,7 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
                   <div className="border-t border-gray-200 py-6 px-4 sm:px-6">
                     <div className="flex justify-between text-base font-medium text-gray-900">
                       <p>Subtotal</p>
-                      <p>$262.00</p>
+                      <p>${total}</p>
                     </div>
                     <p className="mt-0.5 text-sm text-gray-500">Shipping and taxes calculated at checkout.</p>
                     <div className="mt-6">
diff --git a/src/Components/NavBar.jsx b/src/Components/NavBar.jsx
index b1d0db9..1f83db3 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, itemsInCart = 0 }) {
   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">{itemsInCart}</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 0f3262a..dd72ab5 100644
--- a/src/Components/ProductFilters.jsx
+++ b/src/Components/ProductFilters.jsx
@@ -1,12 +1,14 @@
 import { Disclosure, Menu, Transition } from "@headlessui/react";
 import { ChevronDownIcon, FilterIcon } from "@heroicons/react/solid";
-import React, { Fragment } from "react";
+import React, { Fragment, useRef } from "react";
+import { useState } from "react";
 
 function classNames(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 
 export default function ProductFilters({ filterOptions, setFilterOptions, sortOptions, setSortOptions }) {
+
   return (
     <Disclosure
       as="section"
@@ -24,11 +26,21 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
                 className="flex-none w-5 h-5 mr-2 text-gray-400 group-hover:text-gray-500"
                 aria-hidden="true"
               />
-              0 Filters
+              {filterOptions.price.filter((option) => option.checked).length + filterOptions.color.filter(option => option.checked).length} Filters
             </Disclosure.Button>
           </div>
           <div className="pl-6">
-            <button type="button" className="text-gray-500">
+            <button type="button" className="text-gray-500" onClick= {() => {
+              const updatePrices = [...filterOptions.price];
+              updatePrices.forEach((filter) => filter.checked = false);
+              const updateColors = [...filterOptions.color];
+              updateColors.forEach((filter) => filter.checked = false);
+              debugger;
+              setFilterOptions({
+                price: updatePrices,
+                color: updateColors
+              });
+            }}>
               Clear all
             </button>
           </div>
@@ -47,8 +59,17 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
                       name="price[]"
                       defaultValue={option.minValue}
                       type="checkbox"
-                      className="flex-shrink-0 h-4 w-4 border-gray-300 rounded text-black focus:ring-black"
-                      defaultChecked={option.checked}
+                      className="flex-shrink-0 h-4 w-4 border-gray-300 rounded text-black focus:ring-black"                    
+                      checked={option.checked}
+                      onChange={() => {
+                        const updatePrice = [...filterOptions.price];
+                        updatePrice[optionIdx].checked = !updatePrice[optionIdx].checked; 
+                        const updateFilters = {
+                          color: [...filterOptions.color],
+                          price: updatePrice
+                        };                        
+                        setFilterOptions(updateFilters);
+                      }}
                     />
                     <label htmlFor={`price-${optionIdx}`} className="ml-3 min-w-0 flex-1 text-gray-600">
                       {option.label}
@@ -68,7 +89,16 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
                       defaultValue={option.value}
                       type="checkbox"
                       className="flex-shrink-0 h-4 w-4 border-gray-300 rounded text-black focus:ring-black"
-                      defaultChecked={option.checked}
+                      checked={option.checked}
+                      onChange={() => {
+                        const updatedColor = [...filterOptions.color];
+                        updatedColor[optionIdx].checked = !updatedColor[optionIdx].checked; 
+                        const updateFilters = {
+                          price: [...filterOptions.price],
+                          color: updatedColor
+                        };                        
+                        setFilterOptions(updateFilters);
+                      }}
                     />
                     <label htmlFor={`color-${optionIdx}`} className="ml-3 min-w-0 flex-1 text-gray-600">
                       {option.label}
@@ -109,7 +139,16 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
                       {({ active }) => (
                         <button
                           onClick={() => {
-                            // TODO
+                            const newSortOptions = [...sortOptions].map((opt) => {
+                              if(opt.name === option.name) {
+                                opt.current = true;
+                              } else {
+                                opt.current = false;
+                              }
+                              return opt;
+                            })                            
+                            debugger;
+                            setSortOptions(newSortOptions)
                           }}
                           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 ea76621..cd876e0 100644
--- a/src/Components/ProductTable.jsx
+++ b/src/Components/ProductTable.jsx
@@ -27,6 +27,39 @@ const getDefaultSortOptions = () => {
   ];
 };
 
+const sortProductsBy = (products, sortBy) => {
+  products.sort((productA, productB) => {
+    if(sortBy === 'Price') {
+      return productB.price - productA.price
+    } else if(sortBy === 'Newest') {
+      return productB.releaseDate - productA.releaseDate
+    }
+  })
+  return products;
+}
+const filterProductsBy = (products, filterOptions) => {
+  const selectedPriceFilters = filterOptions.price.filter((option) => option.checked);
+  const selectedColorFilters = filterOptions.color.filter((option) => option.checked);
+  const filteredProducts= products.filter(product => {
+    let isWithinSelectedPrice = false;
+    let isWithinSelectedColor = false;
+    if(selectedPriceFilters.length) {
+      isWithinSelectedPrice = selectedPriceFilters.some((fil) => product.price >= fil.minValue && product.price <= fil.maxValue)
+    } else {
+      isWithinSelectedPrice = true;
+    }
+    if(selectedColorFilters.length) {
+      isWithinSelectedColor = selectedColorFilters.some((fil) => product.color === fil.value)      
+    } else {
+      isWithinSelectedColor = true;
+    }
+
+    return isWithinSelectedColor && isWithinSelectedPrice
+  })
+
+  return filteredProducts
+}
+
 export default function ProductTable({ cart, updateCart }) {
   let [products, setProducts] = useState([]);
 
@@ -41,8 +74,9 @@ export default function ProductTable({ cart, updateCart }) {
       setProducts(body);
     };
     fetchProducts();
-  });
+  },[]);
 
+  const currentSortOption = sortOptions.find((option) => option.current)?.name
   return (
     <div className="bg-white">
       <div className="max-w-2xl mx-auto px-4 sm:px-6 lg:max-w-7xl lg:px-8">
@@ -50,7 +84,7 @@ export default function ProductTable({ cart, updateCart }) {
         <ProductFilters {...{ filterOptions, setFilterOptions, sortOptions, setSortOptions }} />
 
         <div className="grid grid-cols-1 gap-y-10 sm:grid-cols-2 gap-x-6 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
-          {products.map((product) => (
+          {filterProductsBy(sortProductsBy(products, currentSortOption), filterOptions).map((product) => (
             <a key={product.id} className="group">
               <div className="w-full aspect-w-1 aspect-h-1 bg-gray-200 rounded-lg overflow-hidden xl:aspect-w-7 xl:aspect-h-8">
                 <img
diff --git a/src/Pages/Home.jsx b/src/Pages/Home.jsx
index 1a5d5d9..25ee599 100644
--- a/src/Pages/Home.jsx
+++ b/src/Pages/Home.jsx
@@ -1,15 +1,18 @@
-import React, { useState } from "react";
+import React, { useState, useRef } from "react";
 import Cart from "../Components/Cart";
 import NavBar from "../Components/NavBar";
 import ProductTable from "../Components/ProductTable";
+import { useEffect } from "react";
 
 function Home() {
   const [open, setOpen] = useState(false);
-  const [cart, updateCart] = useState([]);
-
+  const [cart, updateCart] = useState(() => JSON.parse(window.localStorage.getItem('cart')) || []);
+  useEffect(() => {
+    window.localStorage.setItem('cart', JSON.stringify(cart));
+  },[cart])
   return (
     <main>
-      <NavBar {...{ setOpen }} />
+      <NavBar {...{ itemsInCart: cart.length, setOpen }} />
       <Cart {...{ open, setOpen, cart, updateCart }} />
       <ProductTable {...{ cart, updateCart }} />
     </main>