diff --git a/src/components/ProductsLists/ProductsLists.tsx b/src/components/ProductsLists/ProductsLists.tsx
index 0ca5980..515a2d8 100644
--- a/src/components/ProductsLists/ProductsLists.tsx
+++ b/src/components/ProductsLists/ProductsLists.tsx
@@ -11,6 +11,12 @@ const ProductsLists = [
       stocks: 5,
       lastModified: '2022-02-23'
     },
+    {
+      id: 3,
+      name: 'Product 3',
+      stocks: 15,
+      lastModified: '2022-02-25'
+    },
     // add more products here
   ];
   
diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index cfbc502..c38c8bc 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -45,6 +45,14 @@ export default function Sidebar() {
             >
               <ProductsIcon size={4} color="white" />
             </SidebarButton>
+
+            <SidebarButton
+              onClick={() => navigate("/Products/AddProduct")}
+              name="Add Product"
+            >
+              <ProductsIcon size={4} color="white" />
+            </SidebarButton>
+
             <SidebarButton
               onClick={() => navigate("/Inventory")}
               name="Inventory"
diff --git a/src/routes/Products/AddProduct/AddProduct.tsx b/src/routes/Products/AddProduct/AddProduct.tsx
index 15b5297..525083b 100644
--- a/src/routes/Products/AddProduct/AddProduct.tsx
+++ b/src/routes/Products/AddProduct/AddProduct.tsx
@@ -1,14 +1,15 @@
 import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
 import ProductsLists from "../../../Components/ProductsLists/ProductsLists";
 import { ProductType } from "../../../Components/ProductType/ProductType";
 import styles from "../../../styles";
 import ProductsIcon from "../../../Components/Icons/ProductsIcon/ProductsIcon";
 import ProductInfo from "../../../Components/ProductInfo/ProductInfo";
 
-
 export default function AddProduct() {
   const [name, setName] = useState("");
   const [stocks, setStocks] = useState("");
+  const navigate = useNavigate();
 
   const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setName(event.target.value);
@@ -28,11 +29,11 @@ export default function AddProduct() {
       };
       ProductsLists.push(newProduct);
     }
-    //window.location.href = "/Products";
+    navigate("/Products");
   };
 
   const handleCancel = () => {
-    window.location.href = "/Products";
+    navigate("/Products");
   };
 
   return (
@@ -55,7 +56,6 @@ export default function AddProduct() {
       <br />
       <button onClick={handleAddProduct}>Add</button>
       <button onClick={handleCancel}>Cancel</button>
-      <ProductInfo products={ProductsLists} />
     </div>
   );
 }