diff --git a/src/app/(protected)/vendors/_components/vendors-table.tsx b/src/app/(protected)/vendors/_components/vendors-table.tsx
index de239409..3e851435 100644
--- a/src/app/(protected)/vendors/_components/vendors-table.tsx
+++ b/src/app/(protected)/vendors/_components/vendors-table.tsx
@@ -135,11 +135,54 @@ interface VendorTableRowProps {
   onOpenEdit: (row: VendorListItem) => void;
 }
 
+function VendorTradeCell({
+  primaryTrade,
+  omittedTrades,
+}: {
+  primaryTrade: string;
+  omittedTrades: string[];
+}) {
+  const extraTrades = omittedTrades.length;
+  return (
+    <TableCell sx={{ color: "var(--color-muted-foreground)" }}>
+      {primaryTrade === "—" ? (
+        "—"
+      ) : (
+        <Stack direction="row" spacing={0.5} sx={{ alignItems: "center" }}>
+          <span>{primaryTrade}</span>
+          {extraTrades > 0 && (
+            <Tooltip title={omittedTrades.join(", ")} placement="top" arrow>
+              <Box
+                component="span"
+                tabIndex={0}
+                aria-label={`+${extraTrades} more ${extraTrades === 1 ? "trade" : "trades"}: ${omittedTrades.join(", ")}`}
+                data-testid="vendor-trade-badge"
+                className="focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--color-primary)]"
+                onClick={stopPropagation}
+                onKeyDown={stopTradeBadgeKeyDown}
+                sx={{
+                  borderRadius: "9999px",
+                  backgroundColor: "var(--color-bg-muted)",
+                  px: 0.75,
+                  py: 0.25,
+                  fontSize: 10.5,
+                  lineHeight: 1.2,
+                }}
+              >
+                +{extraTrades}
+              </Box>
+            </Tooltip>
+          )}
+        </Stack>
+      )}
+    </TableCell>
+  );
+}
+
 function VendorTableRow({ row, onOpenDetail, onOpenEdit }: VendorTableRowProps) {
   const trades = splitTrades(row.tradeSpecialties);
   const primaryTrade = trades[0] ?? "—";
   const omittedTrades = trades.slice(1);
-  const extraTrades = omittedTrades.length;
   const { locationText, phoneText } = getVendorDisplayValues(row);
   const rowKey = String(row.id ?? `company-${row.companyId ?? ""}`);
 
@@ -204,38 +247,7 @@ function VendorTableRow({ row, onOpenDetail, onOpenEdit }: VendorTableRowProps)
           color="var(--color-muted-foreground)"
         />
       </TableCell>
-      <TableCell sx={{ color: "var(--color-muted-foreground)" }}>
-        {primaryTrade === "—" ? (
-          "—"
-        ) : (
-          <Stack direction="row" spacing={0.5} sx={{ alignItems: "center" }}>
-            <span>{primaryTrade}</span>
-            {extraTrades > 0 && (
-              <Tooltip title={omittedTrades.join(", ")} placement="top" arrow>
-                <Box
-                  component="span"
-                  tabIndex={0}
-                  aria-label={`+${extraTrades} more ${extraTrades === 1 ? "trade" : "trades"}: ${omittedTrades.join(", ")}`}
-                  data-testid="vendor-trade-badge"
-                  className="focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--color-primary)]"
-                  onClick={stopPropagation}
-                  onKeyDown={stopTradeBadgeKeyDown}
-                  sx={{
-                    borderRadius: "9999px",
-                    backgroundColor: "var(--color-bg-muted)",
-                    px: 0.75,
-                    py: 0.25,
-                    fontSize: 10.5,
-                    lineHeight: 1.2,
-                  }}
-                >
-                  +{extraTrades}
-                </Box>
-              </Tooltip>
-            )}
-          </Stack>
-        )}
-      </TableCell>
+      <VendorTradeCell primaryTrade={primaryTrade} omittedTrades={omittedTrades} />
       <TableCell sx={{ color: "var(--color-muted-foreground)", overflow: "hidden" }}>
         <TruncatedText
           value={phoneText || "—"}