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..3b29653 100644
--- a/src/Components/Cart.jsx
+++ b/src/Components/Cart.jsx
@@ -1,140 +1,179 @@
+import { useEffect } from "react";
 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 }) {
-  return (
-    <Transition.Root show={open} as={Fragment}>
-      <Dialog
-        as="div"
-        className="fixed inset-0 overflow-hidden z-10"
-        onClose={() => {
-          setOpen;
-        }}
-      >
-        <div className="absolute inset-0 overflow-hidden">
-          <Transition.Child
-            as={Fragment}
-            enter="ease-in-out duration-500"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in-out duration-500"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <Dialog.Overlay className="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
-          </Transition.Child>
 
-          <div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">
-            <Transition.Child
-              as={Fragment}
-              enter="transform transition ease-in-out duration-500 sm:duration-700"
-              enterFrom="translate-x-full"
-              enterTo="translate-x-0"
-              leave="transform transition ease-in-out duration-500 sm:duration-700"
-              leaveFrom="translate-x-0"
-              leaveTo="translate-x-full"
-            >
-              <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 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">
-                        <button
-                          type="button"
-                          className="-m-2 p-2 text-gray-400 hover:text-gray-500"
-                          onClick={() => setOpen(false)}
-                        >
-                          <span className="sr-only">Close panel</span>
-                          <XIcon className="h-6 w-6" aria-hidden="true" />
-                        </button>
-                      </div>
-                    </div>
+  const calculate_cart_total = () => {
+    let sum = 0
+    cart.forEach((product) => {
+      // sum += product.price 
+      sum = sum + (product.price * product.quantity)
+    })
+    return sum
+  }
 
-                    <div className="mt-8">
-                      <div className="flow-root">
-                        <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">
-                                <img
-                                  src={product.imageSrc}
-                                  alt={product.imageAlt}
-                                  className="h-full w-full object-cover object-center"
-                                />
-                              </div>
+  useEffect(() => {
+    // localStorage can only store string values thats
+    // why we use JSON.stringify
+  localStorage.setItem(`cart-item`, JSON.stringify(cart));
+}, [cart]);
 
-                              <div className="ml-4 flex flex-1 flex-col">
-                                <div>
-                                  <div className="flex justify-between text-base font-medium text-gray-900">
-                                    <h3>{product.name}</h3>
-                                    <p className="ml-4">${product.price}</p>
-                                  </div>
-                                </div>
-                                <div className="flex flex-1 items-end justify-between text-sm">
-                                  <p className="text-gray-500">Qty {product.quantity}</p>
 
-                                  <div className="flex">
-                                    <button
-                                      onClick={() => {
-                                        let newCart = cart.filter((p) => {
-                                          if (p.id === product.id) {
-                                            p.quantity -= 1;
-                                          }
+	return (
+		<Transition.Root show={open} as={Fragment}>
+			<Dialog
+				as="div"
+				className="fixed inset-0 overflow-hidden z-10"
+				onClose={() => {
+					setOpen;
+				}}
+			>
+				<div className="absolute inset-0 overflow-hidden">
+					<Transition.Child
+						as={Fragment}
+						enter="ease-in-out duration-500"
+						enterFrom="opacity-0"
+						enterTo="opacity-100"
+						leave="ease-in-out duration-500"
+						leaveFrom="opacity-100"
+						leaveTo="opacity-0"
+					>
+						<Dialog.Overlay
+							onClick={() => setOpen(false)}
+							className="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
+						/>
+					</Transition.Child>
 
-                                          return p.quantity > 0;
-                                        });
-                                        updateCart(newCart);
-                                      }}
-                                      type="button"
-                                      className="font-medium text-gray-500 hover:text-black"
-                                    >
-                                      Remove
-                                    </button>
-                                  </div>
-                                </div>
-                              </div>
-                            </li>
-                          ))}
-                        </ul>
-                      </div>
-                    </div>
-                  </div>
+					<div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">
+						<Transition.Child
+							as={Fragment}
+							enter="transform transition ease-in-out duration-500 sm:duration-700"
+							enterFrom="translate-x-full"
+							enterTo="translate-x-0"
+							leave="transform transition ease-in-out duration-500 sm:duration-700"
+							leaveFrom="translate-x-0"
+							leaveTo="translate-x-full"
+						>
+							<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 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">
+												<button
+													type="button"
+													className="-m-2 p-2 text-gray-400 hover:text-gray-500"
+													onClick={() => setOpen(false)}
+												>
+													<span className="sr-only">Close panel</span>
+													<XIcon className="h-6 w-6" aria-hidden="true" />
+												</button>
+											</div>
+										</div>
+                    {/* if no items then show Empty Cart icon */}
+										{cart.length === 0 && 
+											<div className="h-full flex flex-col justify-center items-center">
+												<ShoppingCartIcon className="w-[3rem]" />
+												<p className="pt-2">Your Cart is Empty.</p>
+											</div>
+										}
 
-                  <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>
-                    </div>
-                    <p className="mt-0.5 text-sm text-gray-500">Shipping and taxes calculated at checkout.</p>
-                    <div className="mt-6">
-                      <a
-                        href="#"
-                        className="flex items-center justify-center rounded-md border border-transparent bg-gray-800 px-6 py-3 text-base font-medium text-white shadow-sm hover:bg-black"
-                      >
-                        Checkout
-                      </a>
-                    </div>
-                    <div className="mt-6 flex justify-center text-center text-sm text-gray-500">
-                      <p>
-                        or{" "}
-                        <button
-                          type="button"
-                          className="font-medium text-gray-700 hover:text-black"
-                          onClick={() => setOpen(false)}
-                        >
-                          Continue Shopping<span aria-hidden="true"> &rarr;</span>
-                        </button>
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
+										<div className="mt-8">
+											<div className="flow-root">
+												<ul
+													role="list"
+													className="-my-6 divide-y divide-gray-200"
+												>
+													{/* turnary showing empty cart if not items */}
+													{cart.map((product, index) => (
+														<li key={index} className="flex py-6">
+															<div className="h-24 w-24 flex-shrink-0 overflow-hidden rounded-md border border-gray-200">
+																<img
+																	src={product.imageSrc}
+																	alt={product.imageAlt}
+																	className="h-full w-full object-cover object-center"
+																/>
+															</div>
+
+															<div className="ml-4 flex flex-1 flex-col">
+																<div>
+																	<div className="flex justify-between text-base font-medium text-gray-900">
+																		<h3>{product.name}</h3>
+																		<p className="ml-4">${product.price}</p>
+																	</div>
+																</div>
+																<div className="flex flex-1 items-end justify-between text-sm">
+																	<p className="text-gray-500">
+																		Qty {product.quantity}
+																	</p>
+
+																	<div className="flex">
+																		<button
+																			onClick={() => {
+																				let newCart = cart.filter((p) => {
+																					if (p.id === product.id) {
+																						p.quantity -= 1;
+																					}
+
+																					return p.quantity > 0;
+																				});
+																				updateCart(newCart);
+																			}}
+																			type="button"
+																			className="font-medium text-gray-500 hover:text-black"
+																		>
+																			Remove
+																		</button>
+																	</div>
+																</div>
+															</div>
+														</li>
+													))}
+												</ul>
+											</div>
+										</div>
+									</div>
+
+									<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>${calculate_cart_total()}</p>
+										</div>
+										<p className="mt-0.5 text-sm text-gray-500">
+											Shipping and taxes calculated at checkout.
+										</p>
+										<div className="mt-6">
+											<a
+												href="#"
+												className="flex items-center justify-center rounded-md border border-transparent bg-gray-800 px-6 py-3 text-base font-medium text-white shadow-sm hover:bg-black"
+											>
+												Checkout
+											</a>
+										</div>
+										<div className="mt-6 flex justify-center text-center text-sm text-gray-500">
+											<p>
+												or{" "}
+												<button
+													type="button"
+													className="font-medium text-gray-700 hover:text-black"
+													onClick={() => setOpen(false)}
+												>
+													Continue Shopping
+													<span aria-hidden="true"> &rarr;</span>
+												</button>
+											</p>
+										</div>
+									</div>
+								</div>
+							</div>
+						</Transition.Child>
+					</div>
+				</div>
+			</Dialog>
+		</Transition.Root>
+	);
 }
diff --git a/src/Components/NavBar.jsx b/src/Components/NavBar.jsx
index b1d0db9..9e9fff5 100644
--- a/src/Components/NavBar.jsx
+++ b/src/Components/NavBar.jsx
@@ -1,7 +1,9 @@
 import { ShoppingBagIcon } from "@heroicons/react/outline";
 import React from "react";
 
-export default function NavBar({ setOpen }) {
+export default function NavBar({ cart, setOpen }) {
+  let cart_items = cart.length
+  
   return (
     <div className="bg-white">
       <header className="relative">
@@ -41,7 +43,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_items}</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..09a8721 100644
--- a/src/Components/ProductFilters.jsx
+++ b/src/Components/ProductFilters.jsx
@@ -7,6 +7,10 @@ function classNames(...classes) {
 }
 
 export default function ProductFilters({ filterOptions, setFilterOptions, sortOptions, setSortOptions }) {
+  const sort_list = () => {
+    setSortOptions(sortOptions === 'arc' ? 'desc' : 'asc')
+  }
+
   return (
     <Disclosure
       as="section"
@@ -109,7 +113,7 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
                       {({ active }) => (
                         <button
                           onClick={() => {
-                            // TODO
+                            // TODO:                    
                           }}
                           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..b2ea063 100644
--- a/src/Components/ProductTable.jsx
+++ b/src/Components/ProductTable.jsx
@@ -33,15 +33,19 @@ export default function ProductTable({ cart, updateCart }) {
   const [filterOptions, setFilterOptions] = useState(getDefaultFilterOptions());
   const [sortOptions, setSortOptions] = useState(getDefaultSortOptions());
 
+  //! fixed product infinite fetch loop
   useEffect(() => {
-    let fetchProducts = async () => {
-      console.info("Fetching Products...");
-      let res = await fetch("http://localhost:3001/products");
-      let body = await res.json();
-      setProducts(body);
-    };
-    fetchProducts();
-  });
+    fetch("http://localhost:3001/products")
+      .then(res => res.json())
+      .then(data => {
+        setProducts(data);
+        console.info("Fetching Products...");
+      })
+      .catch(err => {
+        console.alert(err);
+      })
+
+  },[])
 
   return (
     <div className="bg-white">
diff --git a/src/Pages/Home.jsx b/src/Pages/Home.jsx
index 1a5d5d9..90c4c7d 100644
--- a/src/Pages/Home.jsx
+++ b/src/Pages/Home.jsx
@@ -4,12 +4,14 @@ import NavBar from "../Components/NavBar";
 import ProductTable from "../Components/ProductTable";
 
 function Home() {
+  const initialCart = JSON.parse(localStorage.getItem('cart-item')) || [];
   const [open, setOpen] = useState(false);
-  const [cart, updateCart] = useState([]);
+  const [cart, updateCart] = useState(initialCart);
+
 
   return (
     <main>
-      <NavBar {...{ setOpen }} />
+      <NavBar {...{ cart, setOpen }} />
       <Cart {...{ open, setOpen, cart, updateCart }} />
       <ProductTable {...{ cart, updateCart }} />
     </main>