diff --git a/package-lock.json b/package-lock.json
index d01ddfa..bbd664e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "react-ecommerce",
       "version": "0.0.1",
       "dependencies": {
         "@headlessui/react": "^1.6.0",
diff --git a/src/Components/Cart.jsx b/src/Components/Cart.jsx
index 917b7a1..bfe3809 100644
--- a/src/Components/Cart.jsx
+++ b/src/Components/Cart.jsx
@@ -1,8 +1,16 @@
 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 }) {
+    var subtotal = 0;
+    cart.forEach(product => {
+    subtotal += product.price
+    })
+
+  
+    
+    
   return (
     <Transition.Root show={open} as={Fragment}>
       <Dialog
@@ -13,7 +21,9 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
         }}
       >
         <div className="absolute inset-0 overflow-hidden">
-          <Transition.Child
+          <Transition.Child  onClick={(event) => {
+          setOpen(false)
+        }}
             as={Fragment}
             enter="ease-in-out duration-500"
             enterFrom="opacity-0"
@@ -55,7 +65,14 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
                     <div className="mt-8">
                       <div className="flow-root">
                         <ul role="list" className="-my-6 divide-y divide-gray-200">
-                          {cart.map((product) => (
+                          { cart.length == 0 ? 
+
+                          <div className="flex flex-row justify-center items-center" >
+                            <ShoppingCartIcon className="h-6 w-6" aria-hidden="true"/>
+                            <p>Your Cart is Empty</p>
+                          </div>
+                          :
+                          (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">
                                 <img
@@ -96,7 +113,7 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
                                 </div>
                               </div>
                             </li>
-                          ))}
+                          )))}
                         </ul>
                       </div>
                     </div>
@@ -105,7 +122,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>{subtotal}</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..b23a38a 100644
--- a/src/Components/NavBar.jsx
+++ b/src/Components/NavBar.jsx
@@ -1,7 +1,17 @@
 import { ShoppingBagIcon } from "@heroicons/react/outline";
 import React from "react";
 
-export default function NavBar({ setOpen }) {
+export default function NavBar({ setOpen, cart }) {
+  let total = 0;
+
+  function gettotal(){
+    cart.forEach(element => {
+      total += element.quantity
+    })
+    return total
+  }
+
+  
   return (
     <div className="bg-white">
       <header className="relative">
@@ -41,7 +51,10 @@ 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">{
+                            gettotal()
+                         }
+                          </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..0efe601 100644
--- a/src/Components/ProductFilters.jsx
+++ b/src/Components/ProductFilters.jsx
@@ -6,7 +6,7 @@ function classNames(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 
-export default function ProductFilters({ filterOptions, setFilterOptions, sortOptions, setSortOptions }) {
+export default function ProductFilters({ filterOptions, setFilterOptions, sortOptions, setSortOptions, setProducts, products }) {
   return (
     <Disclosure
       as="section"
@@ -109,7 +109,20 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
                       {({ active }) => (
                         <button
                           onClick={() => {
-                            // TODO
+                            if(option.name == "Price"){
+                             setSortOptions(  
+                              [
+                                { name: "Price", current: true },
+                                { name: "Newest", current: false },
+                              ])
+                            }
+                            else{
+                              setSortOptions(  
+                                [
+                                  { name: "Price", current: false },
+                                  { name: "Newest", current: true },
+                                ])
+                            }
                           }}
                           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..dcb5a03 100644
--- a/src/Components/ProductTable.jsx
+++ b/src/Components/ProductTable.jsx
@@ -28,7 +28,7 @@ const getDefaultSortOptions = () => {
 };
 
 export default function ProductTable({ cart, updateCart }) {
-  let [products, setProducts] = useState([]);
+  var [products, setProducts] = useState([]);
 
   const [filterOptions, setFilterOptions] = useState(getDefaultFilterOptions());
   const [sortOptions, setSortOptions] = useState(getDefaultSortOptions());
@@ -39,15 +39,34 @@ export default function ProductTable({ cart, updateCart }) {
       let res = await fetch("http://localhost:3001/products");
       let body = await res.json();
       setProducts(body);
+
+      for(let i = 0; i < sortOptions.length; i++){
+
+        if(sortOptions[i].name == "Price" && sortOptions[i].current == true){
+         (setProducts(products.sort((a, b) => a.price < b.price ? 1 : -1))) 
+         break;
+        }
+        else if(sortOptions[i].name == "Newest" && sortOptions[i].current == true){
+          (setProducts(products.sort((a, b) => a.releaseDate < b.releaseDate ? 1 : -1))) 
+          break;
+         }
+        }
+     
+
+     
     };
     fetchProducts();
-  });
 
+     
+    
+  }, [sortOptions]);
+
+  
   return (
     <div className="bg-white">
       <div className="max-w-2xl mx-auto px-4 sm:px-6 lg:max-w-7xl lg:px-8">
         <h2 className="sr-only">Products</h2>
-        <ProductFilters {...{ filterOptions, setFilterOptions, sortOptions, setSortOptions }} />
+        <ProductFilters {...{ filterOptions, setFilterOptions, sortOptions, setSortOptions, setProducts, products }} />
 
         <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) => (
diff --git a/src/Pages/Home.jsx b/src/Pages/Home.jsx
index 1a5d5d9..a3f7cc6 100644
--- a/src/Pages/Home.jsx
+++ b/src/Pages/Home.jsx
@@ -9,7 +9,7 @@ function Home() {
 
   return (
     <main>
-      <NavBar {...{ setOpen }} />
+      <NavBar {...{ setOpen, cart }} />
       <Cart {...{ open, setOpen, cart, updateCart }} />
       <ProductTable {...{ cart, updateCart }} />
     </main>