diff --git a/src/Components/Cart.jsx b/src/Components/Cart.jsx
index 917b7a1..63b864d 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 }) {
@@ -37,7 +37,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 flex-col 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">
@@ -51,7 +51,11 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
                         </button>
                       </div>
                     </div>
-
+                    {cart.length == 0 && 
+                      <div className="flex flex-col justify-center items-center flex-1">
+                      <ShoppingCartIcon className="h-12 w-12" />
+                      <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">
@@ -105,7 +109,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>${cart.reduce(function (acc, obj) { return acc + (obj.price * obj.quantity)}, 0)}</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/ProductTable.jsx b/src/Components/ProductTable.jsx
index ea76621..4bcff02 100644
--- a/src/Components/ProductTable.jsx
+++ b/src/Components/ProductTable.jsx
@@ -41,7 +41,7 @@ export default function ProductTable({ cart, updateCart }) {
       setProducts(body);
     };
     fetchProducts();
-  });
+  }, []);
 
   return (
     <div className="bg-white">