diff --git a/Public/css/main.css b/Public/css/main.css
index afc01f5..0ebaeba 100644
--- a/Public/css/main.css
+++ b/Public/css/main.css
@@ -87,6 +87,10 @@ td, th {
   padding: 5px 15px;
 }
 
+table th {
+  color: #00ffcc;
+}
+
 input[type=submit] {
   padding: 5px 20px;
 }
diff --git a/Resources/Views/purchaseOrders/table-row.leaf b/Resources/Views/purchaseOrders/table-row.leaf
new file mode 100644
index 0000000..50acb84
--- /dev/null
+++ b/Resources/Views/purchaseOrders/table-row.leaf
@@ -0,0 +1,13 @@
+<tr id="#(id)">
+  <td>#(id)</td>
+  <td>#(workOrder)</td>
+  <td>#(customer)</td>
+  <td>#capitalized(vendorBranch.vendor.name) - #capitalized(vendorBranch.name)</td>
+  <td>#(materials)</td>
+  <td>#capitalized(createdFor.firstName) #capitalized(createdFor.lastName)</td>
+  <td>#(createdBy.username)</td>
+  <td>#capitalized(truckStock)</td>
+  <td>
+    <!-- TODO: add buttons here -->
+  </td>
+</tr>
diff --git a/Resources/Views/purchaseOrders/table.leaf b/Resources/Views/purchaseOrders/table.leaf
index bcbd642..118206c 100644
--- a/Resources/Views/purchaseOrders/table.leaf
+++ b/Resources/Views/purchaseOrders/table.leaf
@@ -2,6 +2,7 @@
   <tr>
     <th>PO</th>
     <th>Work Order</th>
+    <th>Customer</th>
     <th>Vendor</th>
     <th>Materials</th>
     <th>Created For</th>
@@ -11,18 +12,7 @@
   </tr>
   <tbody id="po-table-body">
     #for(po in purchaseOrders):
-    <tr id="po_#(po.id)">
-      <td>#(po.id)</td>
-      <td>#(po.workOrder)</td>
-      <td>#capitalized(po.vendorBranch.vendor.name) - #capitalized(po.vendorBranch.name)</td>
-      <td>#(po.materials)</td>
-      <td>#capitalized(po.createdFor.firstName) #capitalized(po.createdFor.lastName)</td>
-      <td>#(po.createdBy.username)</td>
-      <td>#capitalized(po.truckStock)</td>
-      <td>
-        <!-- TODO: add buttons here -->
-      </td>
-    </tr>
+      #extend("purchaseOrders/table-row", po)
     #endfor
   </tbody>
 </table>
diff --git a/Sources/App/Controllers/ApiController.swift b/Sources/App/Controllers/ApiController.swift
index 9cef353..a14ce75 100644
--- a/Sources/App/Controllers/ApiController.swift
+++ b/Sources/App/Controllers/ApiController.swift
@@ -102,6 +102,8 @@ struct ApiController: RouteCollection {
 
   // MARK: - PurchaseOrders
 
+  // TODO: Add fetch by id.
+
   // TODO: Add pagination and filters.
   @Sendable
   func purchaseOrdersIndex(req: Request) async throws -> [PurchaseOrder.DTO] {
diff --git a/Sources/App/Controllers/PurchaseOrderViewController.swift b/Sources/App/Controllers/PurchaseOrderViewController.swift
index 6f222e5..f809988 100644
--- a/Sources/App/Controllers/PurchaseOrderViewController.swift
+++ b/Sources/App/Controllers/PurchaseOrderViewController.swift
@@ -42,9 +42,19 @@ struct PurchaseOrderViewController: RouteCollection {
 
     let purchaseOrder = create.toModel(createdByID: createdById)
     try await purchaseOrder.save(on: req.db)
+    let loaded = try await PurchaseOrder.query(on: req.db)
+      .filter(\.$id == purchaseOrder.requireID())
+      .with(\.$createdFor)
+      .with(\.$createdBy)
+      .with(\.$vendorBranch) {
+        $0.with(\.$vendor)
+      }
+      .first()
 
-    let purchaseOrders = try await api.purchaseOrdersIndex(req: req)
-    return try await req.view.render("purchaseOrders/table", ["purchaseOrders": purchaseOrders])
+    return try await req.view.render("purchaseOrders/table-row", loaded)
+
+    // let purchaseOrders = try await api.purchaseOrdersIndex(req: req)
+    // return try await req.view.render("purchaseOrders/table", ["purchaseOrders": purchaseOrders])
   }
 }
 
@@ -67,11 +77,11 @@ private struct PurchaseOrderFormCTX: Content {
       formClass: "po-form",
       formId: "po-form",
       htmxTargetUrl: .post("/purchase-orders"),
-      htmxTarget: "#po-table",
+      htmxTarget: "#po-table-body",
       htmxPushUrl: false,
       htmxResetAfterRequest: true,
       htmxSwapOob: nil,
-      htmxSwap: .outerHTML,
+      htmxSwap: .afterbegin,
       context: .init(branches: branches, employees: employees)
     ))
   }