diff --git a/bun.lockb b/bun.lockb
index f284f1fb..3654d550 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/db.json b/db.json
index 59ac522d..d484978b 100644
--- a/db.json
+++ b/db.json
@@ -16,5 +16,66 @@
   "profile": {
     "name": "typicode"
   },
-  "products": []
+  "products": [
+    {
+      "name": "Ergonomic Soft Towels",
+      "quantity": 85,
+      "brand": "Hodkiewicz Inc",
+      "id": 1
+    },
+    {
+      "name": "Ergonomic Granite Bacon",
+      "quantity": 40,
+      "brand": "Durgan - Stamm",
+      "id": 2
+    },
+    {
+      "name": "Awesome Wooden Shirt",
+      "quantity": 80,
+      "brand": "Labadie LLC",
+      "id": 3
+    },
+    {
+      "name": "Licensed Steel Salad",
+      "quantity": 98,
+      "brand": "Rodriguez - Spencer",
+      "id": 4
+    },
+    {
+      "name": "Gorgeous Fresh Shoes",
+      "quantity": 77,
+      "brand": "Skiles and Sons",
+      "id": 5
+    },
+    {
+      "name": "Unbranded Granite Chicken",
+      "quantity": 31,
+      "brand": "Orn, Gerlach and Runolfsdottir",
+      "id": 6
+    },
+    {
+      "name": "Generic Wooden Ball",
+      "quantity": 85,
+      "brand": "Hintz - Boehm",
+      "id": 7
+    },
+    {
+      "name": "Licensed Metal Chips",
+      "quantity": 59,
+      "brand": "Mohr, Fritsch and Wisozk",
+      "id": 8
+    },
+    {
+      "name": "Sleek Plastic Chips",
+      "quantity": 11,
+      "brand": "Carroll Group",
+      "id": 9
+    },
+    {
+      "name": "Fantastic Soft Cheese",
+      "quantity": 17,
+      "brand": "Weber and Sons",
+      "id": 10
+    }
+  ]
 }
\ No newline at end of file
diff --git a/package.json b/package.json
index 6a5f6b22..6283e399 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "@tanstack/react-router": "beta",
     "@types/axios": "^0.14.0",
     "@types/lodash-es": "^4.17.11",
+    "@vitejs/plugin-react-swc": "latest",
     "axios": "^1.5.1",
     "lodash-es": "^4.17.21",
     "react": "^18.2.0",
@@ -41,6 +42,7 @@
     "react-hook-form": "^7.47.0",
     "tailwind-merge": "^1.14.0",
     "tailwindcss-patterns": "^0.1.2",
+    "vite-plugin-svgr": "^4.2.0",
     "zod": "^3.22.4"
   },
   "devDependencies": {
@@ -66,6 +68,6 @@
     "prettier-plugin-tailwindcss": "^0.5.7",
     "tailwindcss": "^3.3.5",
     "typescript": "^5.0.2",
-    "vite": "^4.4.5"
+    "vite": "latest"
   }
 }
diff --git a/src/features/products/components/Product.tsx b/src/features/products/components/Product.tsx
index 0196d153..36db1066 100644
--- a/src/features/products/components/Product.tsx
+++ b/src/features/products/components/Product.tsx
@@ -12,17 +12,17 @@ export function Product({ product, pending, actions }: Props) {
   return (
     <>
       <table
-        className={twJoin(' w-full border-collapse', pending && 'opacity-50')}
+        className={twJoin('  mx-4 w-full border-collapse', pending && 'opacity-50')}
       >
         <tbody>
-          <tr className="border-b ">
-            <td className="p-4  text-left text-gray-500">
+          <tr className="border-b w-50x">
+            <td className="p-4  text-left text-gray-500 w-16">
               x{product.quantity}
             </td>
-            <td className="truncate break-all p-4 text-left ">
+            <td className="truncate break-all p-4 text-left w-64 ">
               {product.name}
             </td>
-            <td className="truncate break-all p-4 text-left">
+            <td className="truncate break-all p-4 text-left w-64">
               {product.brand}
             </td>
             <td>{actions}</td>