diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index c38c8bc..167dcec 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -46,13 +46,6 @@ 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/Products.tsx b/src/routes/Products/Products.tsx
index 8db92ee..a3c1d07 100644
--- a/src/routes/Products/Products.tsx
+++ b/src/routes/Products/Products.tsx
@@ -1,13 +1,12 @@
 import React from "react";
 import styles from "../../styles";
+import { useNavigate } from "react-router-dom";
 import ProductsIcon from "../../Components/Icons/ProductsIcon/ProductsIcon";
 import ProductInfo from "../../Components/ProductInfo/ProductInfo";
 import ProductsLists from "../../Components/ProductsLists/ProductsLists";
 
 export default function Products() {
-  const handleAddProduct = () => {
-    window.location.href = "/Products/AddProduct";
-  };
+  const navigate = useNavigate();
 
   return (
     <div style={{ margin: 32, height: "100%" }}>
@@ -16,7 +15,7 @@ export default function Products() {
         <h1 style={styles.text_large}>Products</h1>
       </div>
       <ProductInfo products={ProductsLists} />
-      <button onClick={handleAddProduct}>Add Product</button>
+      <button onClick={() => navigate("/Products/AddProduct")}>Add Product</button>
     </div>
   );
 }