work

src/app/Brands/layout.tsx

@@ -1,6 +1,6 @@
 export const metadata = {
-  title: 'Next.js',
-  description: 'Generated by Next.js',
+  title: 'Ballistic Bu8ilder',
+  description: 'Generated by Forward Group, LLC',
 }
 
 export default function RootLayout({

src/app/Builder/layout.tsx

@@ -1,6 +1,6 @@
 export const metadata = {
-  title: 'Next.js',
-  description: 'Generated by Next.js',
+  title: 'Ballistic Builder',
+  description: 'Generated by Forward Group, LLC',
 }
 
 export default function RootLayout({

src/app/Products/lowers/page.tsx

@@ -1,17 +1,18 @@
 import { Button } from "@components/ui/button";
 import { getPSA } from "@/db/queries/PSA";
-
+import { psa } from '@/db/schema/Psa';
+import  styles  from '../styles.module.css'
 export default async function LowerReceiverPage() {
   const psa = await getPSA();
 
   return (
     <div className="container mx-auto">
-      <table className="table-auto border-separate border-spacing-2 border border-slate-500">
+      <table className={"table-auto border-separate border-spacing-4 border border-slate-500"}>
         <thead>
-          <tr>
+          <tr className={styles.tr}>
             <th>Component</th>
             <th>Manufacturer</th>
-            <th>Color</th>
+            <th>Model #</th>
             <th>Price</th>
           </tr>
         </thead>
@@ -21,8 +22,8 @@ export default async function LowerReceiverPage() {
               <td>
                 {psa.category}
               </td>
-              <td>manufacturer</td>
-              <td>color</td>
+              <td>{psa.brandName}</td>
+              <td>{psa.modelnumber}</td>
               <td className="flex items-center gap-2">
                 ${Number(psa.salePrice).toFixed(2)}
                 <Button variant="outline">Buy</Button>

src/app/Products/styles.module.css

@@ -0,0 +1,9 @@
+.table {
+  border-collapse: collapse;
+}
+
+.tr {
+    text-align: left;
+    font-weight: bold;
+    background-color: cadetblue;
+  }