diff --git a/src/components/ProductTable/index.tsx b/src/components/ProductTable/index.tsx
index 17b9f73..b71c469 100644
--- a/src/components/ProductTable/index.tsx
+++ b/src/components/ProductTable/index.tsx
@@ -2,24 +2,25 @@
 export default async function ProductTable(props:any) {
 
   return (
-        <table className={"table-auto border-separate border-spacing-4 border border-slate-500"}>
+        <table className={"table-auto border-separate bg-slate-500 border-spacing-2 shadow-inner border border-slate-500"}>
           <thead>
-            <tr>
-              <th className='bg-slate-700 text-white pl-2 w-40'>Component</th>
-              <th className='bg-slate-700 text-white w-40'>Manufacturer</th>
-              <th className='bg-slate-700 text-white w-40'>Model #</th>
-              <th className='bg-slate-700 text-white w-40'>Retail Price</th>
-              <th className='bg-slate-700 text-white w-20'>Sale Price</th>
+            <tr className='border border-slate-700'>
+              <th className='bg-slate-700 text-white pl-1 w-40 text-left'>Component</th>
+              <th className='bg-slate-700 text-white w-40 pl-1 text-left'>Manufacturer</th>
+              <th className='bg-slate-700 text-white w-40 pl-1 text-left'>Model #</th>
+              <th className='bg-slate-700 text-white w-40 pl-1 text-left'>Retail Price</th>
+              <th className='bg-slate-700 text-white w-20 pl-1 text-left'>Sale Price</th>
             </tr>
           </thead>
+          
           <tbody>
             {props.data.map((item:any) => (
-              <tr key={item.upc}>
-                <td className='text-slate-800'>{item.category}</td>
-                <td className='text-slate-800'>{item.brandName}</td>
-                <td className='text-slate-800'>{item.modelnumber}</td>
-                <td className='text-slate-800'>{item.retailPrice}</td>
-                <td className="text-slate-800 flex items-center gap-2">
+              <tr key={item.uuid} >
+                <td className='text-white'>{item.category}</td>
+                <td className='text-white'>{item.brandName}</td>
+                <td className='text-white'>{item.modelnumber}</td>
+                <td className='text-white'>{item.retailPrice}</td>
+                <td className="text-white flex items-center gap-2">
                   ${Number(item.salePrice).toFixed(2)}
                   <button >Buy</button>
                 </td>