diff --git a/src/app/Products/barrels/page.tsx b/src/app/Products/barrels/page.tsx
index 2d2228a..626d57d 100644
--- a/src/app/Products/barrels/page.tsx
+++ b/src/app/Products/barrels/page.tsx
@@ -3,6 +3,7 @@ import { psa } from '@db/schema/Psa';
 import partTypes from 'src/data/parts_cats.json';
 import styles from '../styles.module.css';
 import PageHero from "@src/components/PageHero";
+import ProductTable from "@src/components/ProductTable";
 
 export default async function BarrelsPage() {
   const psa = await getProductType('Barrels');
@@ -11,29 +12,7 @@ export default async function BarrelsPage() {
     <div>
       <PageHero title="Barrels" />
       <div className="container mx-auto">
-        <table className={"table-auto border-separate border-spacing-4 border border-slate-500"}>
-          <thead>
-            <tr className={styles.tr}>
-              <th className='bg-slate-700 pl-2 w-40'>Component</th>
-              <th className='bg-slate-700 w-40'>Manufacturer</th>
-              <th className='bg-slate-700 w-40'>Model #</th>
-              <th className='bg-slate-700 w-40'>Price</th>
-            </tr>
-          </thead>
-          <tbody>
-            {psa.map((psa) => (
-              <tr key={psa.upc}>
-                <td className='text-slate-800'>{psa.category}</td>
-                <td className='text-slate-800'>{psa.brandName}</td>
-                <td className='text-slate-800'>{psa.modelnumber}</td>
-                <td className="text-slate-800 flex items-center gap-2">
-                  ${Number(psa.salePrice).toFixed(2)}
-                  <button >Buy</button>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
+        <ProductTable data={psa}></ProductTable>
       </div>
     </div>
   );
diff --git a/src/app/Products/muzzle-devices/page.tsx b/src/app/Products/muzzle-devices/page.tsx
index 80f0943..7b1700d 100644
--- a/src/app/Products/muzzle-devices/page.tsx
+++ b/src/app/Products/muzzle-devices/page.tsx
@@ -3,6 +3,7 @@ import { psa } from '@db/schema/Psa';
 import partTypes from 'src/data/parts_cats.json';
 import styles from '../styles.module.css';
 import PageHero from "@src/components/PageHero";
+import ProductTable from "@src/components/ProductTable";
 
 export default async function MuzzleDevices() {
   const psa = await getMuzzleDevices();
@@ -11,29 +12,7 @@ export default async function MuzzleDevices() {
     <div>
       <PageHero title="Muzzle Devices" />
       <div className="container mx-auto">
-        <table className="table-auto border-separate border-spacing-4 border border-slate-500">
-          <thead>
-            <tr className={styles.tr}>
-              <th className='bg-slate-700 pl-2 w-40'>Component</th>
-              <th className='bg-slate-700 w-40'>Manufacturer</th>
-              <th className='bg-slate-700 w-40'>Model #</th>
-              <th className='bg-slate-700 w-20'>Price</th>
-            </tr>
-          </thead>
-          <tbody>
-            {psa.map((psa) => (
-              <tr key={psa.upc}>
-                <td className='text-slate-800'>{psa.category}</td>
-                <td className='text-slate-800'>{psa.brandName}</td>
-                <td className='text-slate-800'>{psa.modelnumber}</td>
-                <td className='text-slate-800 flex items-center gap-2'>
-                  ${Number(psa.salePrice).toFixed(2)}
-                  <button >Buy</button>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
+        <ProductTable data={psa}></ProductTable>
       </div>
     </div>
   );
diff --git a/src/components/ProductTable/index.tsx b/src/components/ProductTable/index.tsx
new file mode 100644
index 0000000..b9d8ece
--- /dev/null
+++ b/src/components/ProductTable/index.tsx
@@ -0,0 +1,29 @@
+
+export default async function ProductTable(props:any) {
+
+  return (
+        <table className={"table-auto border-separate border-spacing-4 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'>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 flex items-center gap-2">
+                  ${Number(item.salePrice).toFixed(2)}
+                  <button >Buy</button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+  );
+}
\ No newline at end of file