From 3f8e91f44d5d7d510a8e8e240c38bf633b83f4b3 Mon Sep 17 00:00:00 2001
From: keannu125 <noehbernasol0@gmail.com>
Date: Thu, 2 Mar 2023 21:55:27 +0800
Subject: [PATCH] Cleaned up codebase. Fixed icons not aligning vertically and
 standardized inventory, products, and logs look and feel

---
 src/App.tsx                                   |  18 ---
 src/Components/Icons/AppLogo/AppLogo.tsx      |  40 +++--
 src/Components/Icons/HomeIcon/HomeIcon.tsx    |  36 +++--
 .../Icons/InventoryIcon/InventoryIcon.tsx     |  40 +++--
 .../Icons/LogoutIcon/LogoutIcon.tsx           |  34 ++---
 src/Components/Icons/LogsIcon/LogsIcon.tsx    |  42 +++---
 .../Icons/LowStockIcon/LowStockIcon.tsx       |  38 +++--
 .../Icons/NotFoundIcon/NotFoundIcon.tsx       |  40 +++--
 .../Icons/ProductsIcon/ProductsIcon.tsx       |  40 +++--
 .../RecentlyAddedIcon/RecentlyAddedIcon.tsx   |  38 +++--
 src/Components/Icons/StatsIcon/StatsIcon.tsx  |  38 +++--
 .../TotalProductsIcon/TotalProductsIcon.tsx   |  48 +++---
 src/Components/Login/Login.tsx                |   3 +-
 src/Components/SampleData/SampleData.tsx      |  62 +++++++-
 src/Routes/Logs/Logs.tsx                      |  20 +--
 src/Routes/Products/Products.tsx              |  79 +++++++---
 src/components/Icons/AddIcon/AddIcon.tsx      |  18 ++-
 .../Icons/CancelIcon/CancelIcon.tsx           |  30 ++--
 .../Icons/DeleteIcon/DeleteIcon.tsx           |  22 ++-
 src/components/Icons/EditIcon/EditIcon.tsx    |  26 ++--
 src/components/ProductInfo/ProductInfo.tsx    |  92 ------------
 src/routes/Inventory/Inventory.tsx            |  41 +++++-
 src/routes/Products/AddProduct/AddProduct.tsx | 128 ----------------
 .../Products/EditProduct/EditProduct.tsx      | 137 ------------------
 src/styles.tsx                                |  11 ++
 25 files changed, 436 insertions(+), 685 deletions(-)
 delete mode 100644 src/components/ProductInfo/ProductInfo.tsx
 delete mode 100644 src/routes/Products/AddProduct/AddProduct.tsx
 delete mode 100644 src/routes/Products/EditProduct/EditProduct.tsx

diff --git a/src/App.tsx b/src/App.tsx
index c9acc6b..1faf3a6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,8 +7,6 @@ import Container from "./Components/Container/Container";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import Store from "./Plugins/Redux/Store/Store";
 import { Provider } from "react-redux";
-import AddProduct from "./Routes/Products/AddProduct/AddProduct";
-import EditProduct from "./Routes/Products/EditProduct/EditProduct";
 import Inventory from "./Routes/Inventory/Inventory";
 
 const router = createBrowserRouter([
@@ -49,22 +47,6 @@ const router = createBrowserRouter([
       </Container>
     ),
   },
-  {
-    path: "/Products/AddProduct",
-    element: (
-      <Container>
-        <AddProduct />
-      </Container>
-    ),
-  },
-  {
-    path: "/Products/EditProduct/:id", // Updated route with dynamic id parameter
-    element: (
-      <Container>
-        <EditProduct />
-      </Container>
-    ),
-  },
 ]);
 
 export default function App() {
diff --git a/src/Components/Icons/AppLogo/AppLogo.tsx b/src/Components/Icons/AppLogo/AppLogo.tsx
index 4926766..ff57b7b 100644
--- a/src/Components/Icons/AppLogo/AppLogo.tsx
+++ b/src/Components/Icons/AppLogo/AppLogo.tsx
@@ -6,26 +6,24 @@ export interface props {
 }
 export default function AppLogo(props: props) {
   return (
-    <div>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        className="icon icon-tabler icon-tabler-plant-2"
-        width={props.size + "vh"}
-        height={props.size + "vh"}
-        viewBox="0 0 24 24"
-        stroke-width="2"
-        stroke={props.color}
-        fill="none"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-        <path d="M2 9a10 10 0 1 0 20 0"></path>
-        <path d="M12 19a10 10 0 0 1 10 -10"></path>
-        <path d="M2 9a10 10 0 0 1 10 10"></path>
-        <path d="M12 4a9.7 9.7 0 0 1 2.99 7.5"></path>
-        <path d="M9.01 11.5a9.7 9.7 0 0 1 2.99 -7.5"></path>
-      </svg>
-    </div>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className="icon icon-tabler icon-tabler-plant-2"
+      width={props.size + "vh"}
+      height={props.size + "vh"}
+      viewBox="0 0 24 24"
+      stroke-width="2"
+      stroke={props.color}
+      fill="none"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+      <path d="M2 9a10 10 0 1 0 20 0"></path>
+      <path d="M12 19a10 10 0 0 1 10 -10"></path>
+      <path d="M2 9a10 10 0 0 1 10 10"></path>
+      <path d="M12 4a9.7 9.7 0 0 1 2.99 7.5"></path>
+      <path d="M9.01 11.5a9.7 9.7 0 0 1 2.99 -7.5"></path>
+    </svg>
   );
 }
diff --git a/src/Components/Icons/HomeIcon/HomeIcon.tsx b/src/Components/Icons/HomeIcon/HomeIcon.tsx
index 2f9bf42..8c790b9 100644
--- a/src/Components/Icons/HomeIcon/HomeIcon.tsx
+++ b/src/Components/Icons/HomeIcon/HomeIcon.tsx
@@ -6,24 +6,22 @@ export interface props {
 }
 export default function HomeIcon(props: props) {
   return (
-    <div>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        className="icon icon-tabler icon-tabler-home-2"
-        width={props.size + "vh"}
-        height={props.size + "vh"}
-        viewBox="0 0 24 24"
-        stroke-width="2"
-        stroke={props.color}
-        fill="none"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-        <path d="M5 12l-2 0l9 -9l9 9l-2 0"></path>
-        <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"></path>
-        <path d="M10 12h4v4h-4z"></path>
-      </svg>
-    </div>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className="icon icon-tabler icon-tabler-home-2"
+      width={props.size + "vh"}
+      height={props.size + "vh"}
+      viewBox="0 0 24 24"
+      stroke-width="2"
+      stroke={props.color}
+      fill="none"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+      <path d="M5 12l-2 0l9 -9l9 9l-2 0"></path>
+      <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"></path>
+      <path d="M10 12h4v4h-4z"></path>
+    </svg>
   );
 }
diff --git a/src/Components/Icons/InventoryIcon/InventoryIcon.tsx b/src/Components/Icons/InventoryIcon/InventoryIcon.tsx
index 669ca09..d75b5ab 100644
--- a/src/Components/Icons/InventoryIcon/InventoryIcon.tsx
+++ b/src/Components/Icons/InventoryIcon/InventoryIcon.tsx
@@ -6,26 +6,24 @@ export interface props {
 }
 export default function InventoryIcon(props: props) {
   return (
-    <div>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        className="icon icon-tabler icon-tabler-box-seam"
-        width={props.size + "vh"}
-        height={props.size + "vh"}
-        viewBox="0 0 24 24"
-        stroke-width="1"
-        stroke={props.color}
-        fill="none"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-        <path d="M12 3l8 4.5v9l-8 4.5l-8 -4.5v-9l8 -4.5"></path>
-        <path d="M12 12l8 -4.5"></path>
-        <path d="M8.2 9.8l7.6 -4.6"></path>
-        <path d="M12 12v9"></path>
-        <path d="M12 12l-8 -4.5"></path>
-      </svg>
-    </div>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className="icon icon-tabler icon-tabler-box-seam"
+      width={props.size + "vh"}
+      height={props.size + "vh"}
+      viewBox="0 0 24 24"
+      stroke-width="1"
+      stroke={props.color}
+      fill="none"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+      <path d="M12 3l8 4.5v9l-8 4.5l-8 -4.5v-9l8 -4.5"></path>
+      <path d="M12 12l8 -4.5"></path>
+      <path d="M8.2 9.8l7.6 -4.6"></path>
+      <path d="M12 12v9"></path>
+      <path d="M12 12l-8 -4.5"></path>
+    </svg>
   );
 }
diff --git a/src/Components/Icons/LogoutIcon/LogoutIcon.tsx b/src/Components/Icons/LogoutIcon/LogoutIcon.tsx
index e986e10..e892add 100644
--- a/src/Components/Icons/LogoutIcon/LogoutIcon.tsx
+++ b/src/Components/Icons/LogoutIcon/LogoutIcon.tsx
@@ -6,23 +6,21 @@ export interface props {
 }
 export default function LogoutIcon(props: props) {
   return (
-    <div>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        className="icon icon-tabler icon-tabler-logout"
-        width={props.size + "vh"}
-        height={props.size + "vh"}
-        viewBox="0 0 24 24"
-        stroke-width="1"
-        stroke={props.color}
-        fill="none"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-        <path d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2"></path>
-        <path d="M7 12h14l-3 -3m0 6l3 -3"></path>
-      </svg>
-    </div>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className="icon icon-tabler icon-tabler-logout"
+      width={props.size + "vh"}
+      height={props.size + "vh"}
+      viewBox="0 0 24 24"
+      stroke-width="1"
+      stroke={props.color}
+      fill="none"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+      <path d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2"></path>
+      <path d="M7 12h14l-3 -3m0 6l3 -3"></path>
+    </svg>
   );
 }
diff --git a/src/Components/Icons/LogsIcon/LogsIcon.tsx b/src/Components/Icons/LogsIcon/LogsIcon.tsx
index d125858..0368e9f 100644
--- a/src/Components/Icons/LogsIcon/LogsIcon.tsx
+++ b/src/Components/Icons/LogsIcon/LogsIcon.tsx
@@ -6,27 +6,25 @@ export interface props {
 }
 export default function LogsIcon(props: props) {
   return (
-    <div>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        className="icon icon-tabler icon-tabler-clipboard-data"
-        width={props.size + "vh"}
-        height={props.size + "vh"}
-        viewBox="0 0 24 24"
-        stroke-width="1"
-        stroke={props.color}
-        fill="none"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-        <path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2"></path>
-        <path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></path>
-        <path d="M9 17v-4"></path>
-        <path d="M12 17v-1"></path>
-        <path d="M15 17v-2"></path>
-        <path d="M12 17v-1"></path>
-      </svg>
-    </div>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className="icon icon-tabler icon-tabler-clipboard-data"
+      width={props.size + "vh"}
+      height={props.size + "vh"}
+      viewBox="0 0 24 24"
+      stroke-width="1"
+      stroke={props.color}
+      fill="none"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+      <path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2"></path>
+      <path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></path>
+      <path d="M9 17v-4"></path>
+      <path d="M12 17v-1"></path>
+      <path d="M15 17v-2"></path>
+      <path d="M12 17v-1"></path>
+    </svg>
   );
 }
diff --git a/src/Components/Icons/LowStockIcon/LowStockIcon.tsx b/src/Components/Icons/LowStockIcon/LowStockIcon.tsx
index f60ff6f..79588c2 100644
--- a/src/Components/Icons/LowStockIcon/LowStockIcon.tsx
+++ b/src/Components/Icons/LowStockIcon/LowStockIcon.tsx
@@ -6,25 +6,23 @@ export interface props {
 }
 export default function LowStockIcon(props: props) {
   return (
-    <div>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        className="icon icon-tabler icon-tabler-zoom-exclamation"
-        width={props.size + "vh"}
-        height={props.size + "vh"}
-        viewBox="0 0 24 24"
-        stroke-width="2"
-        stroke={props.color}
-        fill="none"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-        <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
-        <path d="M21 21l-6 -6"></path>
-        <path d="M10 13v.01"></path>
-        <path d="M10 7v3"></path>
-      </svg>
-    </div>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className="icon icon-tabler icon-tabler-zoom-exclamation"
+      width={props.size + "vh"}
+      height={props.size + "vh"}
+      viewBox="0 0 24 24"
+      stroke-width="2"
+      stroke={props.color}
+      fill="none"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+      <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
+      <path d="M21 21l-6 -6"></path>
+      <path d="M10 13v.01"></path>
+      <path d="M10 7v3"></path>
+    </svg>
   );
 }
diff --git a/src/Components/Icons/NotFoundIcon/NotFoundIcon.tsx b/src/Components/Icons/NotFoundIcon/NotFoundIcon.tsx
index 6a395b6..7b987a8 100644
--- a/src/Components/Icons/NotFoundIcon/NotFoundIcon.tsx
+++ b/src/Components/Icons/NotFoundIcon/NotFoundIcon.tsx
@@ -6,26 +6,24 @@ export interface props {
 }
 export default function NotFoundIcon(props: props) {
   return (
-    <div>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        className="icon icon-tabler icon-tabler-error-404"
-        width={props.size + "vh"}
-        height={props.size + "vh"}
-        viewBox="0 0 24 24"
-        stroke-width="1"
-        stroke={props.color}
-        fill="none"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-        <path d="M3 7v4a1 1 0 0 0 1 1h3"></path>
-        <path d="M7 7v10"></path>
-        <path d="M10 8v8a1 1 0 0 0 1 1h2a1 1 0 0 0 1 -1v-8a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1z"></path>
-        <path d="M17 7v4a1 1 0 0 0 1 1h3"></path>
-        <path d="M21 7v10"></path>
-      </svg>
-    </div>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className="icon icon-tabler icon-tabler-error-404"
+      width={props.size + "vh"}
+      height={props.size + "vh"}
+      viewBox="0 0 24 24"
+      stroke-width="1"
+      stroke={props.color}
+      fill="none"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+      <path d="M3 7v4a1 1 0 0 0 1 1h3"></path>
+      <path d="M7 7v10"></path>
+      <path d="M10 8v8a1 1 0 0 0 1 1h2a1 1 0 0 0 1 -1v-8a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1z"></path>
+      <path d="M17 7v4a1 1 0 0 0 1 1h3"></path>
+      <path d="M21 7v10"></path>
+    </svg>
   );
 }
diff --git a/src/Components/Icons/ProductsIcon/ProductsIcon.tsx b/src/Components/Icons/ProductsIcon/ProductsIcon.tsx
index 74d8832..4aa43f6 100644
--- a/src/Components/Icons/ProductsIcon/ProductsIcon.tsx
+++ b/src/Components/Icons/ProductsIcon/ProductsIcon.tsx
@@ -6,26 +6,24 @@ export interface props {
 }
 export default function ProductsIcon(props: props) {
   return (
-    <div>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        className="icon icon-tabler icon-tabler-list-numbers"
-        width={props.size + "vh"}
-        height={props.size + "vh"}
-        viewBox="0 0 24 24"
-        stroke-width="1"
-        stroke={props.color}
-        fill="none"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-        <path d="M11 6h9"></path>
-        <path d="M11 12h9"></path>
-        <path d="M12 18h8"></path>
-        <path d="M4 16a2 2 0 1 1 4 0c0 .591 -.5 1 -1 1.5l-3 2.5h4"></path>
-        <path d="M6 10v-6l-2 2"></path>
-      </svg>
-    </div>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className="icon icon-tabler icon-tabler-list-numbers"
+      width={props.size + "vh"}
+      height={props.size + "vh"}
+      viewBox="0 0 24 24"
+      stroke-width="1"
+      stroke={props.color}
+      fill="none"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+      <path d="M11 6h9"></path>
+      <path d="M11 12h9"></path>
+      <path d="M12 18h8"></path>
+      <path d="M4 16a2 2 0 1 1 4 0c0 .591 -.5 1 -1 1.5l-3 2.5h4"></path>
+      <path d="M6 10v-6l-2 2"></path>
+    </svg>
   );
 }
diff --git a/src/Components/Icons/RecentlyAddedIcon/RecentlyAddedIcon.tsx b/src/Components/Icons/RecentlyAddedIcon/RecentlyAddedIcon.tsx
index a5f4493..fbf7593 100644
--- a/src/Components/Icons/RecentlyAddedIcon/RecentlyAddedIcon.tsx
+++ b/src/Components/Icons/RecentlyAddedIcon/RecentlyAddedIcon.tsx
@@ -6,25 +6,23 @@ export interface props {
 }
 export default function RecentlyAddedIcon(props: props) {
   return (
-    <div>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        className="icon icon-tabler icon-tabler-book-upload"
-        width={props.size + "vh"}
-        height={props.size + "vh"}
-        viewBox="0 0 24 24"
-        stroke-width="1"
-        stroke={props.color}
-        fill="none"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-        <path d="M14 20h-8a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12v5"></path>
-        <path d="M11 16h-5a2 2 0 0 0 -2 2"></path>
-        <path d="M15 16l3 -3l3 3"></path>
-        <path d="M18 13v9"></path>
-      </svg>
-    </div>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className="icon icon-tabler icon-tabler-book-upload"
+      width={props.size + "vh"}
+      height={props.size + "vh"}
+      viewBox="0 0 24 24"
+      stroke-width="1"
+      stroke={props.color}
+      fill="none"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+      <path d="M14 20h-8a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12v5"></path>
+      <path d="M11 16h-5a2 2 0 0 0 -2 2"></path>
+      <path d="M15 16l3 -3l3 3"></path>
+      <path d="M18 13v9"></path>
+    </svg>
   );
 }
diff --git a/src/Components/Icons/StatsIcon/StatsIcon.tsx b/src/Components/Icons/StatsIcon/StatsIcon.tsx
index 02f600d..e06050c 100644
--- a/src/Components/Icons/StatsIcon/StatsIcon.tsx
+++ b/src/Components/Icons/StatsIcon/StatsIcon.tsx
@@ -6,25 +6,23 @@ export interface props {
 }
 export default function StatsIcon(props: props) {
   return (
-    <div>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        className="icon icon-tabler icon-tabler-align-box-bottom-center"
-        width={props.size + "vh"}
-        height={props.size + "vh"}
-        viewBox="0 0 24 24"
-        stroke-width="1"
-        stroke={props.color}
-        fill="none"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-        <path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"></path>
-        <path d="M9 15v2"></path>
-        <path d="M12 11v6"></path>
-        <path d="M15 13v4"></path>
-      </svg>
-    </div>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className="icon icon-tabler icon-tabler-align-box-bottom-center"
+      width={props.size + "vh"}
+      height={props.size + "vh"}
+      viewBox="0 0 24 24"
+      stroke-width="1"
+      stroke={props.color}
+      fill="none"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+      <path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"></path>
+      <path d="M9 15v2"></path>
+      <path d="M12 11v6"></path>
+      <path d="M15 13v4"></path>
+    </svg>
   );
 }
diff --git a/src/Components/Icons/TotalProductsIcon/TotalProductsIcon.tsx b/src/Components/Icons/TotalProductsIcon/TotalProductsIcon.tsx
index f799772..1282199 100644
--- a/src/Components/Icons/TotalProductsIcon/TotalProductsIcon.tsx
+++ b/src/Components/Icons/TotalProductsIcon/TotalProductsIcon.tsx
@@ -6,30 +6,28 @@ export interface props {
 }
 export default function TotalProductsIcon(props: props) {
   return (
-    <div>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        className="icon icon-tabler icon-tabler-packages"
-        width={props.size + "vh"}
-        height={props.size + "vh"}
-        viewBox="0 0 24 24"
-        stroke-width="1"
-        stroke={props.color}
-        fill="none"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-        <path d="M7 16.5l-5 -3l5 -3l5 3v5.5l-5 3z"></path>
-        <path d="M2 13.5v5.5l5 3"></path>
-        <path d="M7 16.545l5 -3.03"></path>
-        <path d="M17 16.5l-5 -3l5 -3l5 3v5.5l-5 3z"></path>
-        <path d="M12 19l5 3"></path>
-        <path d="M17 16.5l5 -3"></path>
-        <path d="M12 13.5v-5.5l-5 -3l5 -3l5 3v5.5"></path>
-        <path d="M7 5.03v5.455"></path>
-        <path d="M12 8l5 -3"></path>
-      </svg>
-    </div>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className="icon icon-tabler icon-tabler-packages"
+      width={props.size + "vh"}
+      height={props.size + "vh"}
+      viewBox="0 0 24 24"
+      stroke-width="1"
+      stroke={props.color}
+      fill="none"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+      <path d="M7 16.5l-5 -3l5 -3l5 3v5.5l-5 3z"></path>
+      <path d="M2 13.5v5.5l5 3"></path>
+      <path d="M7 16.545l5 -3.03"></path>
+      <path d="M17 16.5l-5 -3l5 -3l5 3v5.5l-5 3z"></path>
+      <path d="M12 19l5 3"></path>
+      <path d="M17 16.5l5 -3"></path>
+      <path d="M12 13.5v-5.5l-5 -3l5 -3l5 3v5.5"></path>
+      <path d="M7 5.03v5.455"></path>
+      <path d="M12 8l5 -3"></path>
+    </svg>
   );
 }
diff --git a/src/Components/Login/Login.tsx b/src/Components/Login/Login.tsx
index e8d2344..5986d58 100644
--- a/src/Components/Login/Login.tsx
+++ b/src/Components/Login/Login.tsx
@@ -11,10 +11,9 @@ export interface state {
 export default function Login() {
   const logged_in = useSelector((state: state) => state.logged_in.value);
   const dispatch = useDispatch();
-
   async function login() {
     await dispatch(toggle());
-    await console.log("test " + logged_in);
+    await console.log("Login State Toggled " + logged_in);
   }
 
   if (logged_in) {
diff --git a/src/Components/SampleData/SampleData.tsx b/src/Components/SampleData/SampleData.tsx
index 0d7f5b2..4ceb9ef 100644
--- a/src/Components/SampleData/SampleData.tsx
+++ b/src/Components/SampleData/SampleData.tsx
@@ -1 +1,61 @@
-export const SampleData = {};
+export const SampleProducts = [
+  {
+    id: 1,
+    name: "Zidane's Water",
+    last_modified: "2/24/2023 10:05AM",
+  },
+  {
+    id: 2,
+    name: "Dan's Beefed Corn",
+    last_modified: "2/25/2023 4:05PM",
+  },
+];
+
+export const SampleLogData = [
+  {
+    id: 1,
+    p_id: 1,
+    p_name: "Zidane's Water",
+    amount_changed: -5,
+    timestamp: "2/24/2023 10:05AM",
+  },
+  {
+    id: 2,
+    p_id: 1,
+    p_name: "Zidane's Water",
+    amount_changed: +10,
+    timestamp: "2/24/2023 1:05PM",
+  },
+  {
+    id: 3,
+    p_id: 2,
+    p_name: "Dan's Beefed Corn",
+    amount_changed: +25,
+    timestamp: "2/25/2023 4:05PM",
+  },
+  {
+    id: 4,
+    p_id: 2,
+    p_name: "Dan's Beefed Corn",
+    amount_changed: -25,
+    timestamp: "2/26/2023 3:35PM",
+  },
+];
+
+export const SampleInventoryData = [
+  {
+    id: 1,
+    name: "Product 1",
+    in_stock: 10,
+  },
+  {
+    id: 2,
+    name: "Product 2",
+    in_stock: 5,
+  },
+  {
+    id: 3,
+    name: "Product 3",
+    in_stock: 15,
+  },
+];
diff --git a/src/Routes/Logs/Logs.tsx b/src/Routes/Logs/Logs.tsx
index 72df12a..559eb18 100644
--- a/src/Routes/Logs/Logs.tsx
+++ b/src/Routes/Logs/Logs.tsx
@@ -9,23 +9,7 @@ import {
   TableHead,
   TableRow,
 } from "@mui/material";
-
-function createData(
-  id: number,
-  p_id: number,
-  p_name: string,
-  amount_changed: number,
-  timestamp: string
-) {
-  return { id, p_id, p_name, amount_changed, timestamp };
-}
-
-const sample_data = [
-  createData(1, 1, "Zidanes Water", -5, "2/24/2023 10:05AM"),
-  createData(2, 1, "Zidanes Water", +10, "2/24/2023 1:05PM"),
-  createData(3, 2, "Dans Beefed Corn", +25, "2/25/2023 4:05PM"),
-  createData(4, 2, "Dans Beefed Corn", -15, "2/26/2023 3:35PM"),
-];
+import { SampleLogData } from "../../Components/SampleData/SampleData";
 
 export default function Logs() {
   function change_color(amount: number) {
@@ -58,7 +42,7 @@ export default function Logs() {
             </TableRow>
           </TableHead>
           <TableBody>
-            {sample_data.map((row) => (
+            {SampleLogData.map((row) => (
               <TableRow
                 key={row.id}
                 sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
diff --git a/src/Routes/Products/Products.tsx b/src/Routes/Products/Products.tsx
index 11558f3..b651bb7 100644
--- a/src/Routes/Products/Products.tsx
+++ b/src/Routes/Products/Products.tsx
@@ -3,35 +3,72 @@ import styles from "../../styles";
 import { useNavigate } from "react-router-dom";
 import ProductsIcon from "../../Components/Icons/ProductsIcon/ProductsIcon";
 import AddIcon from "../../Components/Icons/AddIcon/AddIcon";
-import ProductInfo from "../../Components/ProductInfo/ProductInfo";
-import ProductsLists from "../../Components/ProductsLists/ProductsLists";
+import {
+  Button,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+} from "@mui/material";
+import { SampleProducts } from "../../Components/SampleData/SampleData";
 
 export default function Products() {
   const navigate = useNavigate();
 
   return (
     <div style={{ margin: 32, height: "100%" }}>
-      <div style={{ ...styles.content_row, justifyContent: "space-between" }}>
-        <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
-          <ProductsIcon size={8} color="white" />
-          <h1 style={styles.text_large}>Products</h1>
+      <div style={styles.content_row}>
+        <div style={{ ...styles.content_row, ...{ flex: 1 } }}>
+          <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
+            <ProductsIcon size={8} color="white" />
+            <h1 style={styles.text_large}>Products</h1>
+          </div>
+          <div
+            style={{
+              ...styles.content_row,
+              ...{ flex: 1, justifyContent: "flex-end" },
+            }}
+          >
+            <Button
+              onClick={() => navigate("/Products/AddProduct")}
+              style={styles.button_add_product}
+            >
+              <AddIcon size={8} color="white" />
+              <p style={styles.text_medium}>Add Product</p>
+            </Button>
+          </div>
         </div>
-        <button
-          onClick={() => navigate("/Products/AddProduct")}
-          style={{
-            ...styles.button_primary,
-            display: "flex",
-            alignItems: "center",
-            gap: 8,
-            backgroundColor: "#1d3b33",
-            borderRadius: 50,
-          }}
-        >
-          <AddIcon size={7} color="white" />
-          <span style={styles.text_medium}>Add Product</span>
-        </button>
       </div>
-      <ProductInfo products={ProductsLists} />
+      <TableContainer
+        style={{
+          backgroundColor: "#1d3b33",
+          borderRadius: 8,
+        }}
+      >
+        <Table sx={{ minWidth: 650 }} aria-label="simple table">
+          <TableHead>
+            <TableRow>
+              <TableCell style={styles.text}>Product ID</TableCell>
+              <TableCell style={styles.text}>Product</TableCell>
+              <TableCell style={styles.text}>Last Modified</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {SampleProducts.map((row) => (
+              <TableRow
+                key={row.id}
+                sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
+              >
+                <TableCell style={styles.text}>{row.id}</TableCell>
+                <TableCell style={styles.text}>{row.name}</TableCell>
+                <TableCell style={styles.text}>{row.last_modified}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
     </div>
   );
 }
diff --git a/src/components/Icons/AddIcon/AddIcon.tsx b/src/components/Icons/AddIcon/AddIcon.tsx
index c0bf219..8054588 100644
--- a/src/components/Icons/AddIcon/AddIcon.tsx
+++ b/src/components/Icons/AddIcon/AddIcon.tsx
@@ -6,10 +6,18 @@ export interface props {
 }
 export default function AddIcon(props: props) {
   return (
-    <div>
-      <svg xmlns="http://www.w3.org/2000/svg" width={props.size + "vh"} height={props.size + "vh"} viewBox="0 0 24 24" fill="none" stroke={props.color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-        <path d="M12 5v14M5 12h14" />
-      </svg>
-    </div>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.size + "vh"}
+      height={props.size + "vh"}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke={props.color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M12 5v14M5 12h14" />
+    </svg>
   );
 }
diff --git a/src/components/Icons/CancelIcon/CancelIcon.tsx b/src/components/Icons/CancelIcon/CancelIcon.tsx
index cefe1a8..9d32509 100644
--- a/src/components/Icons/CancelIcon/CancelIcon.tsx
+++ b/src/components/Icons/CancelIcon/CancelIcon.tsx
@@ -7,21 +7,19 @@ export interface props {
 
 export default function CancelIcon(props: props) {
   return (
-    <div>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width={props.size + "vh"}
-        height={props.size + "vh"}
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke={props.color}
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
-        <circle cx="12" cy="12" r="10" />
-        <path d="M7.5 7.5l9 9M16.5 7.5l-9 9" />
-      </svg>
-    </div>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.size + "vh"}
+      height={props.size + "vh"}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke={props.color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <circle cx="12" cy="12" r="10" />
+      <path d="M7.5 7.5l9 9M16.5 7.5l-9 9" />
+    </svg>
   );
 }
diff --git a/src/components/Icons/DeleteIcon/DeleteIcon.tsx b/src/components/Icons/DeleteIcon/DeleteIcon.tsx
index c67f0d7..4386252 100644
--- a/src/components/Icons/DeleteIcon/DeleteIcon.tsx
+++ b/src/components/Icons/DeleteIcon/DeleteIcon.tsx
@@ -6,12 +6,20 @@ export interface props {
 }
 export default function DeleteIcon(props: props) {
   return (
-    <div>
-      <svg xmlns="http://www.w3.org/2000/svg" width={props.size + "vh"} height={props.size + "vh"} viewBox="0 0 24 24" fill="none" stroke={props.color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-        <path d="M4 7h16M5 10v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2V10" />
-        <path d="M10 10v-3a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v3" />
-        <path d="M9 7h6" />
-      </svg>
-    </div>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.size + "vh"}
+      height={props.size + "vh"}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke={props.color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M4 7h16M5 10v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2V10" />
+      <path d="M10 10v-3a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v3" />
+      <path d="M9 7h6" />
+    </svg>
   );
 }
diff --git a/src/components/Icons/EditIcon/EditIcon.tsx b/src/components/Icons/EditIcon/EditIcon.tsx
index 3c497de..e98d881 100644
--- a/src/components/Icons/EditIcon/EditIcon.tsx
+++ b/src/components/Icons/EditIcon/EditIcon.tsx
@@ -6,14 +6,22 @@ export interface props {
 }
 export default function EditIcon(props: props) {
   return (
-    <div>
-      <svg xmlns="http://www.w3.org/2000/svg" width={props.size + "vh"} height={props.size + "vh"} viewBox="0 0 24 24" fill="none" stroke={props.color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-        <path d="M3 17l-1.557 -4.386a2 2 0 0 1 1.923 -2.614h12.268a2 2 0 0 1 1.923 2.614l-1.558 4.386" />
-        <path d="M15 6h6v6" />
-        <path d="M10 21h5" />
-        <path d="M12 17v-5" />
-        <path d="M9 6h-6v15a2 2 0 0 0 2 2h15v-6" />
-      </svg>
-    </div>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.size + "vh"}
+      height={props.size + "vh"}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke={props.color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M3 17l-1.557 -4.386a2 2 0 0 1 1.923 -2.614h12.268a2 2 0 0 1 1.923 2.614l-1.558 4.386" />
+      <path d="M15 6h6v6" />
+      <path d="M10 21h5" />
+      <path d="M12 17v-5" />
+      <path d="M9 6h-6v15a2 2 0 0 0 2 2h15v-6" />
+    </svg>
   );
 }
diff --git a/src/components/ProductInfo/ProductInfo.tsx b/src/components/ProductInfo/ProductInfo.tsx
deleted file mode 100644
index 1e2aca1..0000000
--- a/src/components/ProductInfo/ProductInfo.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
-import { ProductType } from '../ProductType/ProductType';
-import { useNavigate } from 'react-router-dom';
-import styles from '../../styles';
-import EditIcon from "../../Components/Icons/EditIcon/EditIcon";
-import DeleteIcon from "../../Components/Icons/DeleteIcon/DeleteIcon";
-import ProductsLists from "../../Components/ProductsLists/ProductsLists";
-
-type ProductInfoProps = {
-  products: ProductType[];
-};
-
-export default function ProductInfo(props: ProductInfoProps) {
-  const { products } = props;
-  const navigate = useNavigate();
-
-  const handleEdit = (id: number) => {
-    navigate(`/Products/EditProduct/${id.toString().padStart(3, '0')}`);
-  };
-
-  const handleDelete = (id: number) => {
-    const newProductsList = products.filter(product => product.id !== id);
-    console.log(`Deleting product with ID ${id}`);
-    console.log(newProductsList); // optional, to check that the product was removed from the array
-    ProductsLists.splice(id-1, 1,);
-  };  
-
-  const getStocksColor = (stocks: number) => {
-    if (stocks >= 10) {
-      return 'green';
-    } else if (stocks >= 4) {
-      return 'orange';
-    } else {
-      return 'red';
-    }
-  };
-
-  return (
-    <TableContainer>
-      <Table>
-        <TableHead>
-          <TableRow>
-            <TableCell style={{ color: 'white' }}>Product ID</TableCell>
-            <TableCell style={{ color: 'white' }}>Product Name</TableCell>
-            <TableCell style={{ color: 'white' }}>Last Modified</TableCell>
-            <TableCell style={{ color: 'white' }}>Actions</TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {products.map((product) => (
-            <TableRow
-              key={product.id}
-              style={{
-                backgroundColor: getStocksColor(product.stocks),
-              }}
-            >
-              <TableCell style={{ color: 'white' }}>{product.id.toString().padStart(3, '0')}</TableCell>
-              <TableCell style={{ color: 'white' }}>{product.name}</TableCell>
-              <TableCell style={{ color: 'white' }}>{product.lastModified}</TableCell>
-              <TableCell style={{ color: 'white' }}>
-                <div style={{ display: "flex", gap: 8 }}>
-                  <button onClick={() => handleEdit(product.id)}
-                    style={{
-                    ...styles.button_primary,
-                    display: "flex",
-                    alignItems: "center",
-                    backgroundColor: "transparent",
-                    borderRadius: 50,
-                  }}>
-                  <EditIcon size={3} color="white" />
-                  <span style={styles.text_medium}>Edit</span>
-                  </button>
-                  <button onClick={() => handleDelete(product.id)}
-                    style={{
-                    ...styles.button_primary,
-                    display: "flex",
-                    alignItems: "center",
-                    backgroundColor: "transparent",
-                    borderRadius: 50,
-                  }}>
-                  <DeleteIcon size={3} color="white" />
-                  <span style={styles.text_medium}>Delete</span>
-                  </button>
-                </div>
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </TableContainer>
-  );
-}
diff --git a/src/routes/Inventory/Inventory.tsx b/src/routes/Inventory/Inventory.tsx
index a8c217a..961ee54 100644
--- a/src/routes/Inventory/Inventory.tsx
+++ b/src/routes/Inventory/Inventory.tsx
@@ -1,8 +1,16 @@
 import React from "react";
 import styles from "../../styles";
 import InventoryIcon from "../../Components/Icons/InventoryIcon/InventoryIcon";
-import InventoryInfo from "../../Components/InventoryInfo/InventoryInfo";
-import ProductsLists from "../../Components/ProductsLists/ProductsLists";
+import {
+  Button,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+} from "@mui/material";
+import { SampleInventoryData } from "../../Components/SampleData/SampleData";
 
 export default function Inventory() {
   return (
@@ -11,7 +19,34 @@ export default function Inventory() {
         <InventoryIcon size={8} color="white" />
         <h1 style={styles.text_large}>Inventory</h1>
       </div>
-      <InventoryInfo products={ProductsLists} />
+      <TableContainer
+        style={{
+          backgroundColor: "#1d3b33",
+          borderRadius: 8,
+        }}
+      >
+        <Table sx={{ minWidth: 650 }} aria-label="simple table">
+          <TableHead>
+            <TableRow>
+              <TableCell style={styles.text}>Product ID</TableCell>
+              <TableCell style={styles.text}>Product</TableCell>
+              <TableCell style={styles.text}>In Stock</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {SampleInventoryData.map((row) => (
+              <TableRow
+                key={row.id}
+                sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
+              >
+                <TableCell style={styles.text}>{row.id}</TableCell>
+                <TableCell style={styles.text}>{row.name}</TableCell>
+                <TableCell style={styles.text}>{row.in_stock}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
     </div>
   );
 }
diff --git a/src/routes/Products/AddProduct/AddProduct.tsx b/src/routes/Products/AddProduct/AddProduct.tsx
deleted file mode 100644
index 687d6f8..0000000
--- a/src/routes/Products/AddProduct/AddProduct.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import React, { useState } from "react";
-import { useNavigate } from "react-router-dom";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  TextField,
-} from "@mui/material";
-import { ProductType } from "../../../Components/ProductType/ProductType";
-import ProductsLists from "../../../Components/ProductsLists/ProductsLists";
-import ProductsIcon from "../../../Components/Icons/ProductsIcon/ProductsIcon";
-import AddIcon from "../../../Components/Icons/AddIcon/AddIcon";
-import CancelIcon from "../../../Components/Icons/CancelIcon/CancelIcon";
-import styles from "../../../styles";
-
-export default function AddProduct() {
-  const navigate = useNavigate();
-
-  const [name, setName] = useState("");
-  const [stocks, setStocks] = useState("");
-
-  const handleStocksChange = (
-    event: React.ChangeEvent<HTMLInputElement>
-  ) => {
-    const value = parseInt(event.target.value);
-    if (!isNaN(value) && value >= 0) {
-      setStocks(value.toString());
-    }
-  };
-
-  const handleAddProduct = () => {
-    const maxId = Math.max(...ProductsLists.map((product) => product.id));
-    const newProduct: ProductType = {
-      id: maxId + 1,
-      name: name,
-      stocks: parseInt(stocks),
-      lastModified: new Date().toLocaleString(),
-    };
-
-    ProductsLists.push(newProduct);
-
-    navigate("/Products");
-  };
-
-  const handleCancel = () => {
-    navigate("/Products");
-  };
-
-  return (
-    <div style={{ margin: 32, height: "100%" }}>
-      <div style={styles.content_row}>
-        <ProductsIcon size={8} color="white" />
-        <h1 style={styles.text_large}>Add Product</h1>
-      </div>
-      <TableContainer>
-        <Table style={{ color: "white" }}>
-          <TableHead>
-            <TableRow>
-              <TableCell style={{ color: "white"}}>Product Name</TableCell>
-              <TableCell style={{ color: "white"}}>Stocks</TableCell>
-              <TableCell style={{ color: 'white' }}>Actions</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            <TableRow>
-            <TableCell style={{ color: "white"}}>
-              <TextField
-                type="text"
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-                InputProps={{ style: { color: "white" } }}
-                style={{ border: "1px solid white" }}
-              />
-            </TableCell>
-              <TableCell style={{ color: "white" }}>
-                <TextField
-                  type="number"
-                  value={stocks}
-                  onChange={handleStocksChange}
-                  InputProps={{
-                    inputProps: { min: 0 },
-                    style: { color: "white" },
-                  }}
-                  style={{ color: "white", border: "1px solid white" }}
-                />
-              </TableCell>
-              <TableCell style={{ color: 'white' }}>
-                <div style={{ display: "flex", gap: 8 }}>
-                <button onClick={handleAddProduct}
-                  style={{
-                  ...styles.button_primary,
-                  display: "flex",
-                  alignItems: "center",
-                  gap: 8,
-                  backgroundColor: "#1d3b33",
-                  borderRadius: 50,
-                  }}>
-                  <AddIcon size={3} color="white" />
-                  <span style={styles.text_medium}>Add</span>
-                </button>
-                <button onClick={handleCancel}
-                  style={{
-                  ...styles.button_primary,
-                  display: "flex",
-                  alignItems: "center",
-                  gap: 8,
-                  backgroundColor: "#1d3b33",
-                  borderRadius: 50,
-                  }}>
-                  <CancelIcon size={3} color="white" />
-                  <span style={styles.text_medium}>Cancel</span>
-                </button>
-                </div>
-                </TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      </TableContainer>
-      <br />
-      <div style={{ display: 'flex', gap: 16,marginLeft: 395 }}>
-      
-      </div>
-    </div>
-  );
-}
diff --git a/src/routes/Products/EditProduct/EditProduct.tsx b/src/routes/Products/EditProduct/EditProduct.tsx
deleted file mode 100644
index 09993f6..0000000
--- a/src/routes/Products/EditProduct/EditProduct.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { useParams, useNavigate } from "react-router-dom";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  TextField,
-} from "@mui/material";
-import { ProductType } from "../../../Components/ProductType/ProductType";
-import ProductsLists from "../../../Components/ProductsLists/ProductsLists";
-import ProductsIcon from "../../../Components/Icons/ProductsIcon/ProductsIcon";
-import CancelIcon from "../../../Components/Icons/CancelIcon/CancelIcon";
-import EditIcon from "../../../Components/Icons/EditIcon/EditIcon";
-import styles from "../../../styles";
-
-
-type EditProductParams = {
-  id?: string;
-};
-
-export default function EditProduct() {
-  const { id } = useParams<EditProductParams>();
-  const navigate = useNavigate();
-
-  const [name, setName] = useState("");
-  const [stocks, setStocks] = useState("");
-
-  useEffect(() => {
-    const product = ProductsLists.find(
-      (product) => product.id.toString().padStart(3, "0") === id
-    );
-    if (product) {
-      setName(product.name);
-      setStocks(product.stocks.toString());
-    }
-  }, [id]);
-
-  const handleStocksChange = (
-    event: React.ChangeEvent<HTMLInputElement>
-  ) => {
-    const value = parseInt(event.target.value);
-    if (!isNaN(value) && value >= 0) {
-      setStocks(value.toString());
-    }
-  };
-
-  const handleUpdateProduct = () => {
-    const updatedProduct: ProductType = {
-      id: parseInt(id || "0"), // add a default value of "0" for id if it's undefined and pad with leading zeros
-      name: name,
-      stocks: parseInt(stocks),
-      lastModified: new Date().toLocaleString(),
-    };
-
-    const index = ProductsLists.findIndex(
-      (product) => product.id.toString().padStart(3, "0") === id
-    );
-    ProductsLists.splice(index, 1, updatedProduct);
-
-    navigate("/Products");
-  };
-
-  const handleCancel = () => {
-    navigate("/Products");
-  };
-
-  return (
-    <div style={{ margin: 32, height: "100%" }}>
-      <div style={styles.content_row}>
-        <ProductsIcon size={8} color="white" />
-        <h1 style={styles.text_large}>Edit Product</h1>
-      </div>
-      <TableContainer>
-        <Table style={{ color: "white", textAlign: "center" }}>
-          <TableHead>
-            <TableRow>
-              <TableCell style={{ color: "white" }}>Product ID</TableCell>
-              <TableCell style={{ color: "white" }}>Product Name</TableCell>
-              <TableCell style={{ color: "white" }}>Stocks</TableCell>
-              <TableCell style={{ color: 'white' }}>Actions</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody style={{ textAlign: "center" }}>
-            <TableRow>
-              <TableCell style={{ color: "white" }}>{id}</TableCell>
-              <TableCell style={{ color: "white" }}>{name}</TableCell>
-              <TableCell style={{ color: "white" }}>
-                <TextField
-                  type="number"
-                  value={stocks}
-                  onChange={handleStocksChange}
-                  InputProps={{
-                    inputProps: { min: 0 },
-                    style: { color: "white" },
-                  }}
-                  style={{ color: "white", border: "1px solid white" }}
-                />
-              </TableCell>
-              <TableCell style={{ color: 'white' }}>
-                <div style={{ display: "flex", gap: 8 }}>
-                <button onClick={handleUpdateProduct}
-                  style={{
-                  ...styles.button_primary,
-                  display: "flex",
-                  alignItems: "center",
-                  gap: 8,
-                  backgroundColor: "#1d3b33",
-                  borderRadius: 50,
-                  }}>
-                  <EditIcon size={3} color="white" />
-                  <span style={styles.text_medium}>Update</span>
-                </button>
-                <button onClick={handleCancel}
-                  style={{
-                  ...styles.button_primary,
-                  display: "flex",
-                  alignItems: "center",
-                  gap: 8,
-                  backgroundColor: "#1d3b33",
-                  borderRadius: 50,
-                  }}>
-                  <CancelIcon size={3} color="white" />
-                  <span style={styles.text_medium}>Cancel</span>
-                </button>
-                </div>
-              </TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      </TableContainer>
-      <br />
-    </div>
-  );
-}
diff --git a/src/styles.tsx b/src/styles.tsx
index 2702ab8..08d71e9 100644
--- a/src/styles.tsx
+++ b/src/styles.tsx
@@ -84,6 +84,17 @@ const styles: { [key: string]: React.CSSProperties } = {
     padding: 8,
     borderRadius: 16,
   },
+  button_add_product: {
+    backgroundColor: "#80b38b",
+    display: "flex",
+    flexDirection: "row",
+    width: "256px",
+    height: "48px",
+    border: "none",
+    padding: 8,
+    borderRadius: 16,
+    gap: 4,
+  },
   logout_button: {
     backgroundColor: "#0b2322",
     width: "30vh",