diff --git a/src/Components/ProductsPage/ViewManager.tsx b/src/Components/ProductsPage/ViewManager.tsx
index 0ef4659..da535a6 100644
--- a/src/Components/ProductsPage/ViewManager.tsx
+++ b/src/Components/ProductsPage/ViewManager.tsx
@@ -4,11 +4,21 @@ import { Switch } from "@mui/material";
 import TableView from "../../Components/ProductsPage/TableView/TableView";
 import BlobView from "../../Components/ProductsPage/BlobView/BlobView";
 import { ProductList } from "../../Interfaces/Interfaces";
+import styles from "../../styles";
 
 export interface props {}
 
 export default function ViewManager(props: ProductList) {
-  const [tableView, toggleTableView] = useState(false);
+  const [tableView, toggleTableView] = useState(true);
+  if (props.Products.length === 0) {
+    return (
+      <div style={{ ...styles.content_column, ...{ alignItems: "center" } }}>
+        <p style={{ ...styles.text_white, ...styles.text_L }}>
+          No products yet. Add one!
+        </p>
+      </div>
+    );
+  }
   if (tableView) {
     return (
       <div>
diff --git a/src/Routes/Dashboard/Dashboard.tsx b/src/Routes/Dashboard/Dashboard.tsx
index c52dfac..8be0dce 100644
--- a/src/Routes/Dashboard/Dashboard.tsx
+++ b/src/Routes/Dashboard/Dashboard.tsx
@@ -16,7 +16,7 @@ export default function Dashboard() {
       <LoginChecker />
       <div style={styles.flex_row}>
         <HomeIcon size={64} color="white" />
-        <h1 style={{ ...styles.text_white, ...styles.text_XL }}>Dashboard</h1>
+        <p style={{ ...styles.text_white, ...styles.text_XL }}>Dashboard</p>
       </div>
       <div
         style={{
@@ -34,16 +34,16 @@ export default function Dashboard() {
             >
               <div style={styles.content_row}>
                 <TotalProductsIcon size={64} color="white" />
-                <h1 style={{ ...styles.text_white, ...styles.text_XL }}>
+                <p style={{ ...styles.text_white, ...styles.text_XL }}>
                   Total Products
-                </h1>
+                </p>
               </div>
-              <h1 style={{ ...styles.text_white, ...styles.text_L }}>
+              <p style={{ ...styles.text_white, ...styles.text_L }}>
                 2546 Unique Items
-              </h1>
-              <h1 style={{ ...styles.text_white, ...styles.text_L }}>
+              </p>
+              <p style={{ ...styles.text_white, ...styles.text_L }}>
                 In inventory
-              </h1>
+              </p>
             </div>
             <div style={styles.flex_row}>
               <div
@@ -54,24 +54,24 @@ export default function Dashboard() {
               >
                 <div style={styles.content_row}>
                   <StatsIcon size={64} color="white" />
-                  <h1 style={{ ...styles.text_white, ...styles.text_XL }}>
+                  <p style={{ ...styles.text_white, ...styles.text_XL }}>
                     Current Session
-                  </h1>
+                  </p>
                 </div>
                 <div style={styles.content_row}>
                   <ColoredCube size={32} color="#a48e41" />
-                  <h1 style={{ ...styles.text_white, ...styles.text_L }}>
+                  <p style={{ ...styles.text_white, ...styles.text_L }}>
                     Added
-                  </h1>
+                  </p>
                 </div>
-                <h1 style={{ ...styles.text_white, ...styles.text_L }}>254</h1>
+                <p style={{ ...styles.text_white, ...styles.text_L }}>254</p>
                 <div style={styles.content_row}>
                   <ColoredCube size={32} color="#a44141" />
-                  <h1 style={{ ...styles.text_white, ...styles.text_L }}>
+                  <p style={{ ...styles.text_white, ...styles.text_L }}>
                     Removed
-                  </h1>
+                  </p>
                 </div>
-                <h1 style={{ ...styles.text_white, ...styles.text_XL }}>118</h1>
+                <p style={{ ...styles.text_white, ...styles.text_XL }}>118</p>
               </div>
               <div
                 style={{
@@ -89,16 +89,16 @@ export default function Dashboard() {
                 >
                   <div style={styles.content_row}>
                     <LowStockIcon size={64} color="white" />
-                    <h1 style={{ ...styles.text_white, ...styles.text_L }}>
+                    <p style={{ ...styles.text_white, ...styles.text_L }}>
                       Low Stock
-                    </h1>
+                    </p>
                   </div>
-                  <h1 style={{ ...styles.text_white, ...styles.text_S }}>
+                  <p style={{ ...styles.text_white, ...styles.text_S }}>
                     Canned Pagmamahal
-                  </h1>
-                  <h1 style={{ ...styles.text_white, ...styles.text_S }}>
+                  </p>
+                  <p style={{ ...styles.text_white, ...styles.text_S }}>
                     In Stock: 3
-                  </h1>
+                  </p>
                 </div>
                 <div
                   style={{
@@ -108,21 +108,21 @@ export default function Dashboard() {
                 >
                   <div style={styles.content_row}>
                     <RecentlyAddedIcon size={64} color="white" />
-                    <h1
+                    <p
                       style={{
                         ...styles.text_white,
                         ...styles.text_L,
                       }}
                     >
                       Recently Added
-                    </h1>
+                    </p>
                   </div>
-                  <h1 style={{ ...styles.text_white, ...styles.text_M }}>
+                  <p style={{ ...styles.text_white, ...styles.text_M }}>
                     Zidane's Water
-                  </h1>
-                  <h1 style={{ ...styles.text_white, ...styles.text_S }}>
+                  </p>
+                  <p style={{ ...styles.text_white, ...styles.text_S }}>
                     Added 02/17/2023
-                  </h1>
+                  </p>
                 </div>
               </div>
             </div>
@@ -133,66 +133,58 @@ export default function Dashboard() {
             <div style={styles.content_row}>
               <LogsIcon size={64} color="white" />
               <div style={styles.wrapper_column}>
-                <h1 style={{ ...styles.text_white, ...styles.text_L }}>
-                  Recent
-                </h1>
-                <h1 style={{ ...styles.text_white, ...styles.text_L }}>
+                <p style={{ ...styles.text_white, ...styles.text_L }}>Recent</p>
+                <p style={{ ...styles.text_white, ...styles.text_L }}>
                   Transactions
-                </h1>
+                </p>
               </div>
             </div>
             <div style={{ marginBottom: "8px" }} />
-            <h1 style={{ ...styles.text_white, ...styles.text_M }}>
+            <p style={{ ...styles.text_white, ...styles.text_M }}>
               Kopiko Blanca
-            </h1>
-            <h1 style={{ ...styles.text_white, ...styles.text_S }}>
-              Added: 96
-            </h1>
-            <h1 style={{ ...styles.text_white, ...styles.text_S }}>
+            </p>
+            <p style={{ ...styles.text_white, ...styles.text_S }}>Added: 96</p>
+            <p style={{ ...styles.text_white, ...styles.text_S }}>
               Removed: 105
-            </h1>
-            <h1 style={{ ...styles.text_white, ...styles.text_XS }}>
+            </p>
+            <p style={{ ...styles.text_white, ...styles.text_XS }}>
               02/17/2023
-            </h1>
+            </p>
             <div style={{ marginBottom: "8px" }} />
-            <h1 style={{ ...styles.text_white, ...styles.text_M }}>
+            <p style={{ ...styles.text_white, ...styles.text_M }}>
               Zidane's Water
-            </h1>
-            <h1 style={{ ...styles.text_white, ...styles.text_S }}>
-              Added: 49
-            </h1>
-            <h1 style={{ ...styles.text_white, ...styles.text_S }}>
+            </p>
+            <p style={{ ...styles.text_white, ...styles.text_S }}>Added: 49</p>
+            <p style={{ ...styles.text_white, ...styles.text_S }}>
               Removed: 24
-            </h1>
-            <h1 style={{ ...styles.text_white, ...styles.text_XS }}>
+            </p>
+            <p style={{ ...styles.text_white, ...styles.text_XS }}>
               02/17/2023
-            </h1>
+            </p>
             <div style={{ marginBottom: "8px" }} />
-            <h1 style={{ ...styles.text_white, ...styles.text_M }}>
+            <p style={{ ...styles.text_white, ...styles.text_M }}>
               Dan's Beefed Corn
-            </h1>
-            <h1 style={{ ...styles.text_white, ...styles.text_S }}>
-              Added: 32
-            </h1>
-            <h1 style={{ ...styles.text_white, ...styles.text_S }}>
+            </p>
+            <p style={{ ...styles.text_white, ...styles.text_S }}>Added: 32</p>
+            <p style={{ ...styles.text_white, ...styles.text_S }}>
               Removed: 64
-            </h1>
-            <h1 style={{ ...styles.text_white, ...styles.text_XS }}>
+            </p>
+            <p style={{ ...styles.text_white, ...styles.text_XS }}>
               02/17/2023
-            </h1>
+            </p>
             <div style={{ marginBottom: "8px" }} />
             <div style={styles.content_column}>
-              <h1 style={{ ...styles.text_white, ...styles.text_M }}>
+              <p style={{ ...styles.text_white, ...styles.text_M }}>
                 Canned Pagmamahal
-              </h1>
+              </p>
             </div>
-            <h1 style={{ ...styles.text_white, ...styles.text_S }}>Added: 0</h1>
-            <h1 style={{ ...styles.text_white, ...styles.text_S }}>
+            <p style={{ ...styles.text_white, ...styles.text_S }}>Added: 0</p>
+            <p style={{ ...styles.text_white, ...styles.text_S }}>
               Removed: 60
-            </h1>
-            <h1 style={{ ...styles.text_white, ...styles.text_XS }}>
+            </p>
+            <p style={{ ...styles.text_white, ...styles.text_XS }}>
               02/17/2023
-            </h1>
+            </p>
           </div>
         </div>
       </div>
diff --git a/src/Routes/Login/Login.tsx b/src/Routes/Login/Login.tsx
index bd62753..e2ace97 100644
--- a/src/Routes/Login/Login.tsx
+++ b/src/Routes/Login/Login.tsx
@@ -36,9 +36,9 @@ export default function Login() {
       >
         <div style={styles.flex_row}>
           <LoginIcon size={64} color="white" />
-          <h1 style={{ ...styles.text_white, ...styles.text_XL }}>
+          <p style={{ ...styles.text_white, ...styles.text_XL }}>
             Login to Ivy
-          </h1>
+          </p>
         </div>
         <div style={styles.flex_row}>
           <p style={{ ...styles.text_white, ...styles.text_M }}>Username</p>
diff --git a/src/Routes/Logs/Logs.tsx b/src/Routes/Logs/Logs.tsx
index 4bd49fe..5ef42a2 100644
--- a/src/Routes/Logs/Logs.tsx
+++ b/src/Routes/Logs/Logs.tsx
@@ -18,7 +18,7 @@ export default function Logs() {
       <LoginChecker />
       <div style={styles.flex_row}>
         <LogsIcon size={64} color="white" />
-        <h1 style={{ ...styles.text_white, ...styles.text_XL }}>Logs</h1>
+        <p style={{ ...styles.text_white, ...styles.text_XL }}>Logs</p>
       </div>
       <TableContainer
         style={{
diff --git a/src/Routes/NewProduct/NewProduct.tsx b/src/Routes/NewProduct/NewProduct.tsx
index 6523f36..c1fc989 100644
--- a/src/Routes/NewProduct/NewProduct.tsx
+++ b/src/Routes/NewProduct/NewProduct.tsx
@@ -25,9 +25,7 @@ export default function NewProduct() {
       <div style={{ ...styles.content_row, ...{ flex: 1 } }}>
         <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
           <AddIcon size={64} color="white" />
-          <h1 style={{ ...styles.text_white, ...styles.text_XL }}>
-            Add Product
-          </h1>
+          <p style={{ ...styles.text_white, ...styles.text_XL }}>Add Product</p>
         </div>
       </div>
       <div style={styles.content_center}>
diff --git a/src/Routes/Product/Product.tsx b/src/Routes/Product/Product.tsx
index 6ea3d2c..5497a35 100644
--- a/src/Routes/Product/Product.tsx
+++ b/src/Routes/Product/Product.tsx
@@ -1,12 +1,14 @@
 import * as React from "react";
 import styles from "../../styles";
 import { Button } from "@mui/material";
-import { useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import LoginChecker from "../../Components/LoginChecker/LoginChecker";
-import { GetProduct } from "../../Components/Api/Api";
-import { useQuery } from "react-query";
+import { DeleteProduct, GetProduct } from "../../Components/Api/Api";
+import { useMutation, useQuery, useQueryClient } from "react-query";
+import ProductIcon from "../../Components/Icons/ProductIcon/ProductIcon";
 
 export default function Product() {
+  const navigate = useNavigate();
   let { id } = useParams();
   const {
     data: product,
@@ -16,17 +18,38 @@ export default function Product() {
     queryKey: ["product", Number(id)],
     queryFn: () => GetProduct(Number(id)),
   });
+  const queryClient = useQueryClient();
+  const mutation = useMutation({
+    mutationFn: DeleteProduct,
+    onSuccess: () => {
+      queryClient.invalidateQueries("products");
+    },
+  });
   if (isLoading) {
     return (
       <div>
         <LoginChecker />
-        <h1 style={{ ...styles.text_white, ...styles.text_XL }}>
+        <p style={{ ...styles.text_white, ...styles.text_XL }}>
           Individual Product View for id {id}
-        </h1>
+        </p>
         <div style={styles.content_center}>
-          <h1 style={{ ...styles.text_white, ...styles.text_L }}>
+          <p style={{ ...styles.text_white, ...styles.text_L }}>
             Loading product...
-          </h1>
+          </p>
+        </div>
+      </div>
+    );
+  } else if (error) {
+    return (
+      <div>
+        <LoginChecker />
+        <p style={{ ...styles.text_white, ...styles.text_XL }}>
+          Individual Product View for id {id}
+        </p>
+        <div style={styles.content_center}>
+          <p style={{ ...styles.text_red, ...styles.text_L }}>
+            Error loading product
+          </p>
         </div>
       </div>
     );
@@ -34,24 +57,32 @@ export default function Product() {
   return (
     <div>
       <LoginChecker />
-      <h1 style={{ ...styles.text_white, ...styles.text_XL }}>
-        Individual Product View for id {id}
-      </h1>
+      <div style={styles.content_row}>
+        <ProductIcon size={64} color="white" />
+        <p style={{ ...styles.text_white, ...styles.text_XL }}>Product View</p>
+      </div>
+
       <div style={styles.content_center}>
-        <h1 style={{ ...styles.text_white, ...styles.text_L }}>
-          Product Name: {product.name}
-        </h1>
-        <h1 style={{ ...styles.text_white, ...styles.text_L }}>
-          Date Added: {product.date_added}
-        </h1>
+        <div style={{ ...styles.content_column, ...styles.content_column }}>
+          <p style={{ ...styles.text_white, ...styles.text_L }}>
+            Product Name: {product.name}
+          </p>
+          <p style={{ ...styles.text_white, ...styles.text_L }}>
+            Date Added: {product.date_added}
+          </p>
+        </div>
         <Button
           style={{
             ...styles.button_baseline,
-            ...{ backgroundColor: "#80b38b", justifySelf: "center" },
+            ...{ backgroundColor: "#a44141" },
+          }}
+          onClick={() => {
+            mutation.mutate(product.id);
+            navigate("/Products");
           }}
           variant="contained"
         >
-          Login
+          Delete Product
         </Button>
       </div>
     </div>
diff --git a/src/Routes/Products/Products.tsx b/src/Routes/Products/Products.tsx
index bd81804..95e6a37 100644
--- a/src/Routes/Products/Products.tsx
+++ b/src/Routes/Products/Products.tsx
@@ -25,16 +25,16 @@ export default function Products() {
           <div style={{ ...styles.content_row, ...{ flex: 1 } }}>
             <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
               <ProductsIcon size={64} color="white" />
-              <h1 style={{ ...styles.text_white, ...styles.text_XL }}>
+              <p style={{ ...styles.text_white, ...styles.text_XL }}>
                 Products
-              </h1>
+              </p>
             </div>
           </div>
         </div>
         <div style={{ ...styles.content_column, ...{ alignItems: "center" } }}>
-          <h1 style={{ ...styles.text_white, ...styles.text_L }}>
+          <p style={{ ...styles.text_white, ...styles.text_L }}>
             Loading products...
-          </h1>
+          </p>
         </div>
       </div>
     );
@@ -45,16 +45,16 @@ export default function Products() {
           <div style={{ ...styles.content_row, ...{ flex: 1 } }}>
             <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
               <ProductsIcon size={64} color="white" />
-              <h1 style={{ ...styles.text_white, ...styles.text_XL }}>
+              <p style={{ ...styles.text_white, ...styles.text_XL }}>
                 Products
-              </h1>
+              </p>
             </div>
           </div>
         </div>
         <div style={{ ...styles.content_column, ...{ alignItems: "center" } }}>
-          <h1 style={{ ...styles.text_red, ...styles.text_L }}>
+          <p style={{ ...styles.text_red, ...styles.text_L }}>
             Error loading products
-          </h1>
+          </p>
         </div>
       </div>
     );
@@ -65,9 +65,7 @@ export default function Products() {
         <div style={{ ...styles.content_row, ...{ flex: 1 } }}>
           <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
             <ProductsIcon size={64} color="white" />
-            <h1 style={{ ...styles.text_white, ...styles.text_XL }}>
-              Products
-            </h1>
+            <p style={{ ...styles.text_white, ...styles.text_XL }}>Products</p>
           </div>
           <div
             style={{
diff --git a/src/routes/Inventory/Inventory.tsx b/src/routes/Inventory/Inventory.tsx
index ad04eb8..c9f5004 100644
--- a/src/routes/Inventory/Inventory.tsx
+++ b/src/routes/Inventory/Inventory.tsx
@@ -19,7 +19,7 @@ export default function Inventory() {
       <LoginChecker />
       <div style={styles.content_row}>
         <InventoryIcon size={64} color="white" />
-        <h1 style={{ ...styles.text_white, ...styles.text_XL }}>Inventory</h1>
+        <p style={{ ...styles.text_white, ...styles.text_XL }}>Inventory</p>
       </div>
       <TableContainer
         style={{
diff --git a/src/styles.tsx b/src/styles.tsx
index 1031cfd..24f7464 100644
--- a/src/styles.tsx
+++ b/src/styles.tsx
@@ -95,7 +95,7 @@ const styles: { [key: string]: React.CSSProperties } = {
     gap: 4,
   },
   button_baseline: {
-    width: "8rem",
+    width: "12rem",
     height: 32,
     border: "none",
     padding: 8,
@@ -155,6 +155,7 @@ const styles: { [key: string]: React.CSSProperties } = {
     flexDirection: "column",
     justifyContent: "center",
     textAlign: "center",
+    alignItems: "center",
   },
   flex_row: {
     display: "flex",