diff --git a/index.html b/index.html
index 43b8678..e040f1d 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" href="./src/assets/favicon.ico" />
     <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Assignment-5</title>
diff --git a/src/App.jsx b/src/App.jsx
index 876cbe7..9471597 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -70,9 +70,15 @@ const App = () => {
         </div>
 
         <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 ">
-          {filteredProducts?.map((product) => (
-            <ProductCard key={product?.id} product={product} />
-          ))}
+          {filteredProducts && filteredProducts?.length > 0 ? (
+            filteredProducts?.map((product) => (
+              <ProductCard key={product?.id} product={product} />
+            ))
+          ) : (
+            <p className="flex justify-center items-baseline w-max">
+              No products available as per the requirement
+            </p>
+          )}
         </div>
       </div>
     </div>
diff --git a/src/assets/favicon.ico b/src/assets/favicon.ico
new file mode 100644
index 0000000..7d41634
Binary files /dev/null and b/src/assets/favicon.ico differ
diff --git a/src/assets/logo.png b/src/assets/logo.png
new file mode 100644
index 0000000..1158803
Binary files /dev/null and b/src/assets/logo.png differ
diff --git a/src/components/Navbar/index.jsx b/src/components/Navbar/index.jsx
index d136b1f..f8e8d56 100644
--- a/src/components/Navbar/index.jsx
+++ b/src/components/Navbar/index.jsx
@@ -1,8 +1,12 @@
 import { useContext, useState } from "react";
 import { CartContext } from "../cartContext";
 import Cart from "../cartProducts";
+import logo from "../../assets/logo.png";
 
 const Navbar = () => {
+  const reloadPage = () => {
+    window.location.reload(false);
+  };
   const { cartItems } = useContext(CartContext);
   const [showModal, setShowModal] = useState(false);
 
@@ -13,17 +17,26 @@ const Navbar = () => {
   return (
     <div>
       <nav className="flex justify-between items-center max-w-6xl mx-auto">
-        <h1 className="text-2xl font-bold tracking-widest cursor-pointer">
-          Assignment-5
-        </h1>
+        <div className="relative flex items-center h-12 w-48 left-8">
+        <img src={logo} alt="hello" />
+        </div>
         <ul className="flex space-x-6 text-lg">
-          <li className="hover:text-gray-300 transition duration-300 cursor-pointer">
+          <li
+            className="hover:text-gray-300 transition duration-300 cursor-pointer"
+            onClick={reloadPage}
+          >
             Home
           </li>
-          <li className="hover:text-gray-300 transition duration-300 cursor-pointer">
+          <li
+            className="hover:text-gray-300 transition duration-300 cursor-pointer"
+            onClick={reloadPage}
+          >
             Products
           </li>
-          <li className="hover:text-gray-300 transition duration-300 cursor-pointer">
+          <li
+            className="hover:text-gray-300 transition duration-300 cursor-pointer"
+            onClick={reloadPage}
+          >
             Checkout
           </li>
           <li>
diff --git a/src/components/ProductCards/index.jsx b/src/components/ProductCards/index.jsx
index d48add5..95adaf2 100644
--- a/src/components/ProductCards/index.jsx
+++ b/src/components/ProductCards/index.jsx
@@ -6,8 +6,11 @@ import { starIcon } from "../../assets/SvgIcons/svgIcons";
 const ProductCard = ({ product }) => {
   const { addToCart } = useContext(CartContext);
 
+  const textColorClass =
+    product?.rating?.count > 300 ? "text-green-500" : "text-red-500";
+
   return (
-    <div className="max-w-xs rounded-lg border border-gray-200 bg-white shadow-md transform transition duration-500 hover:scale-105">
+    <div className="max-w-xs rounded-lg border border-gray-200 bg-white shadow-md transform transition duration-700 hover:scale-105">
       <img
         src={product?.image}
         alt={product?.title}
@@ -32,6 +35,10 @@ const ProductCard = ({ product }) => {
             <p className="mt-0.5">{starIcon}</p>
           </span>{" "}
         </p>
+        <p className="mt-2 text-sm text-gray-900">
+          Only <b className={`${textColorClass}`}>{product?.rating?.count}</b>{" "}
+          pieces left
+        </p>
         <button
           onClick={() => addToCart(product)}
           className="flex px-4 py-2 items-center bg-gray-800 text-white text-xs font-bold uppercase rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700 mt-4"
diff --git a/src/components/cartProducts/index.jsx b/src/components/cartProducts/index.jsx
index ea3e8d8..e91a8e7 100644
--- a/src/components/cartProducts/index.jsx
+++ b/src/components/cartProducts/index.jsx
@@ -36,9 +36,6 @@ export default function Cart({ showModal, toggle }) {
           <div className="flex items-center justify-center w-full">
             {cartItems?.length > 0 ? (
               <div className="flex flex-col justify-between items-center">
-                {checkout && (
-                  <p className="mt-4 text-green-500 font-bold">{checkout}</p>
-                )}
               </div>
             ) : (
               <h1 className="text-lg font-bold">Your cart is empty</h1>
@@ -49,14 +46,14 @@ export default function Cart({ showModal, toggle }) {
           </h1>
 
           <div className="flex flex-col absolute right-5 top-0 gap-y-20">
-            <div className="ml-5 top-5">
+            <div className="ml-5">
               <button className="px-4 py-2 text-xl mt-4" onClick={toggle}>
                 {crossIcon}
               </button>
             </div>
             <div className="mr-6">
               <button
-                className="px-4 py-2 bg-gray-500 text-white text-xs font-bold rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-700 "
+                className="-mt-10 px-4 py-2 bg-gray-500 text-white text-xs font-bold rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-700 "
                 onClick={() => {
                   clearCart();
                 }}
@@ -65,6 +62,17 @@ export default function Cart({ showModal, toggle }) {
               </button>
             </div>
           </div>
+          <div className="flex items-center justify-center w-full">
+            {cartItems?.length > 0 ? (
+              <div className="flex flex-col justify-between items-center">
+                {checkout && (
+                  <p className="mt-4 text-green-500 font-bold">{checkout}</p>
+                )}
+              </div>
+            ) : (
+              <h1 className="text-lg font-bold">Your cart is empty</h1>
+            )}
+          </div>
           <div className="flex flex-col items-start gap-4 w-full mt-8">
             {cartItems?.map((item) => (
               <div
