diff --git a/.changeset/olive-otters-tap.md b/.changeset/olive-otters-tap.md
new file mode 100644
index 0000000000..73f30751e5
--- /dev/null
+++ b/.changeset/olive-otters-tap.md
@@ -0,0 +1,10 @@
+---
+'@accounter/client': patch
+---
+
+Replace Mantine's `Table`, `Paper`, `Popover`, `Grid`, `List` and `Text` in the business trip
+report's tables with `ui/table`, `ui/card`, `Tooltip` and Tailwind. The subtree no longer imports
+Mantine at all.
+
+`common/tooltip.tsx` now accepts a `ReactNode` for `content` as its type always claimed — React's
+RDFa `content?: string` attribute was narrowing it to strings.
diff --git a/eslint.config.mjs b/eslint.config.mjs
index b5fc0e5191..94e6e31dfb 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -306,7 +306,7 @@ export default [
       'packages/client/src/components/charge-matching/**/*.{,c,m}{j,t}s{,x}',
       'packages/client/src/components/charge-matches/**/*.{,c,m}{j,t}s{,x}',
       'packages/client/src/components/clients/**/*.{,c,m}{j,t}s{,x}',
-      'packages/client/src/components/common/business-trip-report/buttons/**/*.{,c,m}{j,t}s{,x}',
+      'packages/client/src/components/common/business-trip-report/**/*.{,c,m}{j,t}s{,x}',
       'packages/client/src/components/contracts/**/*.{,c,m}{j,t}s{,x}',
       'packages/client/src/components/financial-accounts/**/*.{,c,m}{j,t}s{,x}',
       'packages/client/src/components/landing/**/*.{,c,m}{j,t}s{,x}',
diff --git a/packages/client/src/components/common/business-trip-report/parts/accommodations-row.tsx b/packages/client/src/components/common/business-trip-report/parts/accommodations-row.tsx
index e72cf8e737..2a4406c312 100644
--- a/packages/client/src/components/common/business-trip-report/parts/accommodations-row.tsx
+++ b/packages/client/src/components/common/business-trip-report/parts/accommodations-row.tsx
@@ -11,6 +11,7 @@ import { useUpdateBusinessTripAccommodationsExpense } from '../../../../hooks/us
 import { Button } from '../../../ui/button.js';
 import { Form, FormControl, FormField, FormItem, FormMessage } from '../../../ui/form.js';
 import { Input } from '../../../ui/input.js';
+import { TableCell, TableRow } from '../../../ui/table.js';
 import { NumberInput, Tooltip } from '../../index.js';
 import { CategorizeIntoExistingExpense } from '../buttons/categorize-into-existing-expense.js';
 import { DeleteBusinessTripExpense } from '../buttons/delete-business-trip-expense.js';
@@ -75,7 +76,7 @@ export const AccommodationsRow = ({ data, businessTripId, onChange }: Props): Re
   };
 
   return (
-    <tr key={accommodationExpense.id}>
+    <TableRow key={accommodationExpense.id}>
       <CoreExpenseRow
         data={accommodationExpense}
         isEditMode={isEditMode}
@@ -83,7 +84,7 @@ export const AccommodationsRow = ({ data, businessTripId, onChange }: Props): Re
         businessTripId={businessTripId}
       />
 
-      <td>
+      <TableCell>
         <Form {...formManager}>
           <form id={`form ${accommodationExpense.id}`} onSubmit={handleSubmit(onSubmit)}>
             {isEditMode ? (
@@ -112,8 +113,8 @@ export const AccommodationsRow = ({ data, businessTripId, onChange }: Props): Re
             )}
           </form>
         </Form>
-      </td>
-      <td>
+      </TableCell>
+      <TableCell>
         <div className="flex flex-col gap-2 justify-center">
           {isEditMode ? (
             <Form {...formManager}>
@@ -144,8 +145,8 @@ export const AccommodationsRow = ({ data, businessTripId, onChange }: Props): Re
             </div>
           )}
         </div>
-      </td>
-      <td>
+      </TableCell>
+      <TableCell>
         {isEditMode ? (
           <Form {...formManager}>
             <AttendeesStayInput
@@ -167,8 +168,8 @@ export const AccommodationsRow = ({ data, businessTripId, onChange }: Props): Re
             )}
           </ul>
         )}
-      </td>
-      <td>
+      </TableCell>
+      <TableCell>
         {onChange && (
           <>
             <Tooltip content="Edit">
@@ -211,7 +212,7 @@ export const AccommodationsRow = ({ data, businessTripId, onChange }: Props): Re
             />
           </>
         )}
-      </td>
-    </tr>
+      </TableCell>
+    </TableRow>
   );
 };
diff --git a/packages/client/src/components/common/business-trip-report/parts/accommodations-table.tsx b/packages/client/src/components/common/business-trip-report/parts/accommodations-table.tsx
index 50190149ad..c9595c396b 100644
--- a/packages/client/src/components/common/business-trip-report/parts/accommodations-table.tsx
+++ b/packages/client/src/components/common/business-trip-report/parts/accommodations-table.tsx
@@ -1,7 +1,14 @@
 import type { ReactElement } from 'react';
-import { Table } from '@mantine/core';
 import { BusinessTripReportAccommodationsTableFieldsFragmentDoc } from '../../../../gql/graphql.js';
 import { getFragmentData, type FragmentType } from '../../../../gql/index.js';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '../../../ui/table.js';
 import { AddAccommodationExpense } from '../buttons/add-accommodation-expense.js';
 import { AccommodationsRow } from './accommodations-row.js';
 import { CoreExpenseHeader } from './core-expense-row.js';
@@ -41,17 +48,17 @@ export const AccommodationsTable = ({
 
   return (
     <div className="flex flex-col gap-2 mt-5">
-      <Table highlightOnHover withBorder>
-        <thead>
-          <tr>
+      <Table className="border">
+        <TableHeader>
+          <TableRow>
             <CoreExpenseHeader />
-            <th>Location</th>
-            <th>Nights</th>
-            <th>Attendees Stay</th>
-            <th />
-          </tr>
-        </thead>
-        <tbody>
+            <TableHead>Location</TableHead>
+            <TableHead>Nights</TableHead>
+            <TableHead>Attendees Stay</TableHead>
+            <TableHead />
+          </TableRow>
+        </TableHeader>
+        <TableBody>
           {accommodationExpenses
             .sort((a, b) => {
               // sort by start date (if available, newest top) and then by name
@@ -71,13 +78,13 @@ export const AccommodationsTable = ({
               />
             ))}
           {onChange && (
-            <tr>
-              <td colSpan={6}>
+            <TableRow>
+              <TableCell colSpan={6}>
                 <AddAccommodationExpense businessTripId={businessTripId} onAdd={onChange} />
-              </td>
-            </tr>
+              </TableCell>
+            </TableRow>
           )}
-        </tbody>
+        </TableBody>
       </Table>
     </div>
   );
diff --git a/packages/client/src/components/common/business-trip-report/parts/attendee-row.tsx b/packages/client/src/components/common/business-trip-report/parts/attendee-row.tsx
index b5956a74ba..fabef8f06a 100644
--- a/packages/client/src/components/common/business-trip-report/parts/attendee-row.tsx
+++ b/packages/client/src/components/common/business-trip-report/parts/attendee-row.tsx
@@ -18,6 +18,7 @@ import {
   FormLabel,
   FormMessage,
 } from '../../../ui/form.js';
+import { TableCell, TableRow } from '../../../ui/table.js';
 import { ToggleExpansionButton, Tooltip } from '../../index.js';
 import { DatePickerInput } from '../../inputs/date-picker-input.js';
 import { DeleteAttendee } from '../buttons/delete-attendee.js';
@@ -75,9 +76,9 @@ export const AttendeeRow = ({ data, businessTripId, onChange }: Props): ReactEle
 
   return (
     <Form {...form}>
-      <tr key={attendee.id}>
-        <td>{attendee.name}</td>
-        <td>
+      <TableRow key={attendee.id}>
+        <TableCell>{attendee.name}</TableCell>
+        <TableCell>
           {isEditMode ? (
             <form id={`form ${attendee.id}`} onSubmit={handleSubmit(onSubmit)}>
               <FormField
@@ -114,8 +115,8 @@ export const AttendeeRow = ({ data, businessTripId, onChange }: Props): ReactEle
           ) : (
             attendee.arrivalDate
           )}
-        </td>
-        <td>
+        </TableCell>
+        <TableCell>
           {isEditMode ? (
             <FormField
               name="departureDate"
@@ -149,8 +150,8 @@ export const AttendeeRow = ({ data, businessTripId, onChange }: Props): ReactEle
           ) : (
             attendee.departureDate
           )}
-        </td>
-        <td className="flex items-center gap-2">
+        </TableCell>
+        <TableCell className="flex items-center gap-2">
           <Tooltip content="Edit">
             <Button
               disabled={updatingInProcess}
@@ -186,11 +187,11 @@ export const AttendeeRow = ({ data, businessTripId, onChange }: Props): ReactEle
           />
 
           <ToggleExpansionButton toggleExpansion={setIsExtended} isExpanded={isExtended} />
-        </td>
-      </tr>
+        </TableCell>
+      </TableRow>
       {isExtended && (
-        <tr key={`${attendee.id}-expension`}>
-          <td colSpan={4}>
+        <TableRow key={`${attendee.id}-expension`}>
+          <TableCell colSpan={4}>
             {/* Mantine's `Card shadow="sm" withBorder` carried its own 16px padding; shadcn's has
                 none. The radius and shadow are the house Card's now, so this panel matches the
                 app's other cards rather than Mantine's 4px corners. */}
@@ -217,8 +218,8 @@ export const AttendeeRow = ({ data, businessTripId, onChange }: Props): ReactEle
                 )}
               </div>
             </Card>
-          </td>
-        </tr>
+          </TableCell>
+        </TableRow>
       )}
     </Form>
   );
diff --git a/packages/client/src/components/common/business-trip-report/parts/attendees.tsx b/packages/client/src/components/common/business-trip-report/parts/attendees.tsx
index ff046280d4..8b591c8484 100644
--- a/packages/client/src/components/common/business-trip-report/parts/attendees.tsx
+++ b/packages/client/src/components/common/business-trip-report/parts/attendees.tsx
@@ -1,7 +1,14 @@
 import type { ReactElement } from 'react';
-import { Table } from '@mantine/core';
 import { BusinessTripReportAttendeesFieldsFragmentDoc } from '../../../../gql/graphql.js';
 import { getFragmentData, type FragmentType } from '../../../../gql/index.js';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '../../../ui/table.js';
 import { AddAttendee } from '../buttons/add-attendee.js';
 import { AttendeeRow } from './attendee-row.js';
 
@@ -31,16 +38,16 @@ export const Attendees = ({ data, onChange }: Props): ReactElement => {
 
   return (
     <div className="flex flex-col gap-2 mt-5">
-      <Table highlightOnHover withBorder>
-        <thead>
-          <tr>
-            <th>Name</th>
-            <th>Arrival Date</th>
-            <th>Departure Date</th>
-            <th />
-          </tr>
-        </thead>
-        <tbody>
+      <Table className="border">
+        <TableHeader>
+          <TableRow>
+            <TableHead>Name</TableHead>
+            <TableHead>Arrival Date</TableHead>
+            <TableHead>Departure Date</TableHead>
+            <TableHead />
+          </TableRow>
+        </TableHeader>
+        <TableBody>
           {attendees
             .sort((a, b) => (a.name.toLocaleLowerCase() > b.name.toLocaleLowerCase() ? 1 : -1))
             .map(attendee => (
@@ -51,12 +58,12 @@ export const Attendees = ({ data, onChange }: Props): ReactElement => {
                 key={attendee.id}
               />
             ))}
-          <tr>
-            <td colSpan={4}>
+          <TableRow>
+            <TableCell colSpan={4}>
               <AddAttendee businessTripId={id} onAdd={onChange} />
-            </td>
-          </tr>
-        </tbody>
+            </TableCell>
+          </TableRow>
+        </TableBody>
       </Table>
     </div>
   );
diff --git a/packages/client/src/components/common/business-trip-report/parts/car-rental-row.tsx b/packages/client/src/components/common/business-trip-report/parts/car-rental-row.tsx
index 6a17277003..21e13d222f 100644
--- a/packages/client/src/components/common/business-trip-report/parts/car-rental-row.tsx
+++ b/packages/client/src/components/common/business-trip-report/parts/car-rental-row.tsx
@@ -10,6 +10,7 @@ import { useUpdateBusinessTripCarRentalExpense } from '../../../../hooks/use-upd
 import { Button } from '../../../ui/button.js';
 import { Form, FormControl, FormField, FormItem, FormLabel } from '../../../ui/form.js';
 import { Switch } from '../../../ui/switch.js';
+import { TableCell, TableRow } from '../../../ui/table.js';
 import { Tooltip } from '../../index.js';
 import { NumberInput } from '../../inputs/number-input.js';
 import { CategorizeIntoExistingExpense } from '../buttons/categorize-into-existing-expense.js';
@@ -56,7 +57,7 @@ export const CarRentalRow = ({ data, businessTripId, onChange }: Props): ReactEl
   };
 
   return (
-    <tr key={carRentalExpense.id}>
+    <TableRow key={carRentalExpense.id}>
       <CoreExpenseRow
         data={carRentalExpense}
         isEditMode={isEditMode}
@@ -64,7 +65,7 @@ export const CarRentalRow = ({ data, businessTripId, onChange }: Props): ReactEl
         businessTripId={businessTripId}
       />
 
-      <td>
+      <TableCell>
         <Form {...form}>
           <form id={`form ${carRentalExpense.id}`} onSubmit={handleSubmit(onSubmit)}>
             <div className="flex flex-col gap-2 justify-center">
@@ -94,8 +95,8 @@ export const CarRentalRow = ({ data, businessTripId, onChange }: Props): ReactEl
             </div>
           </form>
         </Form>
-      </td>
-      <td>
+      </TableCell>
+      <TableCell>
         {isEditMode ? (
           <Form {...form}>
             <FormField
@@ -123,8 +124,8 @@ export const CarRentalRow = ({ data, businessTripId, onChange }: Props): ReactEl
         ) : (
           <Car />
         )}
-      </td>
-      <td>
+      </TableCell>
+      <TableCell>
         <Tooltip content="Edit">
           <Button
             disabled={updatingInProcess}
@@ -163,7 +164,7 @@ export const CarRentalRow = ({ data, businessTripId, onChange }: Props): ReactEl
           businessTripExpenseId={carRentalExpense.id}
           onDelete={onChange}
         />
-      </td>
-    </tr>
+      </TableCell>
+    </TableRow>
   );
 };
diff --git a/packages/client/src/components/common/business-trip-report/parts/car-rental.tsx b/packages/client/src/components/common/business-trip-report/parts/car-rental.tsx
index d95dff9ea1..19ecfc46d6 100644
--- a/packages/client/src/components/common/business-trip-report/parts/car-rental.tsx
+++ b/packages/client/src/components/common/business-trip-report/parts/car-rental.tsx
@@ -1,7 +1,14 @@
 import type { ReactElement } from 'react';
-import { Table } from '@mantine/core';
 import { BusinessTripReportCarRentalFieldsFragmentDoc } from '../../../../gql/graphql.js';
 import { getFragmentData, type FragmentType } from '../../../../gql/index.js';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '../../../ui/table.js';
 import { AddCarRentalExpense } from '../buttons/add-car-rental-expense.js';
 import { CarRentalRow } from './car-rental-row.js';
 import { CoreExpenseHeader } from './core-expense-row.js';
@@ -35,16 +42,16 @@ export const CarRental = ({ data, onChange }: Props): ReactElement => {
 
   return (
     <div className="flex flex-col gap-2 mt-5">
-      <Table highlightOnHover withBorder>
-        <thead>
-          <tr>
+      <Table className="border">
+        <TableHeader>
+          <TableRow>
             <CoreExpenseHeader />
-            <th>Days</th>
-            <th>Type</th>
-            <th />
-          </tr>
-        </thead>
-        <tbody>
+            <TableHead>Days</TableHead>
+            <TableHead>Type</TableHead>
+            <TableHead />
+          </TableRow>
+        </TableHeader>
+        <TableBody>
           {carRentalExpenses
             .sort((a, b) => {
               // sort by start date (if available, newest top) and then by name
@@ -63,12 +70,12 @@ export const CarRental = ({ data, onChange }: Props): ReactElement => {
                 key={carRentalExpenses.id}
               />
             ))}
-          <tr>
-            <td colSpan={6}>
+          <TableRow>
+            <TableCell colSpan={6}>
               <AddCarRentalExpense businessTripId={id} onAdd={onChange} />
-            </td>
-          </tr>
-        </tbody>
+            </TableCell>
+          </TableRow>
+        </TableBody>
       </Table>
     </div>
   );
diff --git a/packages/client/src/components/common/business-trip-report/parts/core-expense-row.tsx b/packages/client/src/components/common/business-trip-report/parts/core-expense-row.tsx
index 4c841e8ef9..bb890101d5 100644
--- a/packages/client/src/components/common/business-trip-report/parts/core-expense-row.tsx
+++ b/packages/client/src/components/common/business-trip-report/parts/core-expense-row.tsx
@@ -14,6 +14,7 @@ import {
 import { getFragmentData, type FragmentType } from '../../../../gql/index.js';
 import { TIMELESS_DATE_REGEX } from '../../../../helpers/consts.js';
 import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '../../../ui/form.js';
+import { TableCell, TableHead } from '../../../ui/table.js';
 import { ComboBox, CurrencyInput, DatePickerInput } from '../../index.js';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
@@ -94,7 +95,7 @@ export const CoreExpenseRow = ({
 
   return (
     <>
-      <td>
+      <TableCell>
         <div className="flex flex-col gap-2 justify-center">
           {isEditMode && businessTripExpense.payedByEmployee ? (
             <>
@@ -167,8 +168,8 @@ export const CoreExpenseRow = ({
             </>
           )}
         </div>
-      </td>
-      <td>
+      </TableCell>
+      <TableCell>
         {isEditMode && businessTripExpense.payedByEmployee ? (
           <FormField
             name="amount"
@@ -202,8 +203,8 @@ export const CoreExpenseRow = ({
         ) : (
           <div>{businessTripExpense.amount?.formatted}</div>
         )}
-      </td>
-      <td>
+      </TableCell>
+      <TableCell>
         <div className="flex flex-col gap-2 justify-center">
           {isEditMode && businessTripExpense.payedByEmployee ? (
             <FormField
@@ -233,8 +234,8 @@ export const CoreExpenseRow = ({
             </div>
           )}
         </div>
-      </td>
-      <td>
+      </TableCell>
+      <TableCell>
         <div className="flex flex-col gap-2">
           {linkedChargeIds.map(id => (
             <Link
@@ -249,7 +250,7 @@ export const CoreExpenseRow = ({
             </Link>
           ))}
         </div>
-      </td>
+      </TableCell>
     </>
   );
 };
@@ -257,10 +258,10 @@ export const CoreExpenseRow = ({
 export const CoreExpenseHeader = (): ReactElement => {
   return (
     <>
-      <th>Date</th>
-      <th>Amount</th>
-      <th>Payed By Attendee</th>
-      <th>Charges</th>
+      <TableHead>Date</TableHead>
+      <TableHead>Amount</TableHead>
+      <TableHead>Payed By Attendee</TableHead>
+      <TableHead>Charges</TableHead>
     </>
   );
 };
diff --git a/packages/client/src/components/common/business-trip-report/parts/flights-row.tsx b/packages/client/src/components/common/business-trip-report/parts/flights-row.tsx
index 3b2d5e68b6..c86b513bf8 100644
--- a/packages/client/src/components/common/business-trip-report/parts/flights-row.tsx
+++ b/packages/client/src/components/common/business-trip-report/parts/flights-row.tsx
@@ -12,6 +12,7 @@ import { cn } from '../../../../lib/utils.js';
 import { Button } from '../../../ui/button.js';
 import { Form } from '../../../ui/form.js';
 import { Label } from '../../../ui/label.js';
+import { TableCell, TableRow } from '../../../ui/table.js';
 import { ComboBox, NegatableMultiSelect, Tooltip } from '../../index.js';
 import { CategorizeIntoExistingExpense } from '../buttons/categorize-into-existing-expense.js';
 import { DeleteBusinessTripExpense } from '../buttons/delete-business-trip-expense.js';
@@ -75,7 +76,7 @@ export const FlightsRow = ({ data, businessTripId, onChange, attendees }: Props)
   }));
 
   return (
-    <tr key={flightExpense.id}>
+    <TableRow key={flightExpense.id}>
       <CoreExpenseRow
         data={flightExpense}
         isEditMode={isEditMode}
@@ -83,7 +84,7 @@ export const FlightsRow = ({ data, businessTripId, onChange, attendees }: Props)
         businessTripId={businessTripId}
       />
 
-      <td>
+      <TableCell>
         <Form {...formManager}>
           <form id={`form ${flightExpense.id}`} onSubmit={handleSubmit(onSubmit)}>
             <div className="flex flex-col gap-2 justify-center">
@@ -138,8 +139,8 @@ export const FlightsRow = ({ data, businessTripId, onChange, attendees }: Props)
             </div>
           </form>
         </Form>
-      </td>
-      <td>
+      </TableCell>
+      <TableCell>
         {isEditMode ? (
           <Controller
             name="attendeeIds"
@@ -181,8 +182,8 @@ export const FlightsRow = ({ data, businessTripId, onChange, attendees }: Props)
             )}
           </ul>
         )}
-      </td>
-      <td>
+      </TableCell>
+      <TableCell>
         {onChange && (
           <>
             <Tooltip content="Edit">
@@ -225,7 +226,7 @@ export const FlightsRow = ({ data, businessTripId, onChange, attendees }: Props)
             />
           </>
         )}
-      </td>
-    </tr>
+      </TableCell>
+    </TableRow>
   );
 };
diff --git a/packages/client/src/components/common/business-trip-report/parts/flights-table.tsx b/packages/client/src/components/common/business-trip-report/parts/flights-table.tsx
index aa894e2df0..aceb4e04e9 100644
--- a/packages/client/src/components/common/business-trip-report/parts/flights-table.tsx
+++ b/packages/client/src/components/common/business-trip-report/parts/flights-table.tsx
@@ -1,7 +1,14 @@
 import { type ReactElement } from 'react';
-import { Table } from '@mantine/core';
 import { BusinessTripReportFlightsTableFieldsFragmentDoc } from '../../../../gql/graphql.js';
 import { getFragmentData, type FragmentType } from '../../../../gql/index.js';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '../../../ui/table.js';
 import { AddFlightExpense } from '../buttons/add-flight-expense.js';
 import { CoreExpenseHeader } from './core-expense-row.js';
 import { FlightsRow } from './flights-row.js';
@@ -39,16 +46,16 @@ export const FlightsTable = ({
 
   return (
     <div className="flex flex-col gap-2 mt-5">
-      <Table highlightOnHover withBorder>
-        <thead>
-          <tr>
+      <Table className="border">
+        <TableHeader>
+          <TableRow>
             <CoreExpenseHeader />
-            <th>Flight</th>
-            <th>Attendees</th>
-            <th />
-          </tr>
-        </thead>
-        <tbody>
+            <TableHead>Flight</TableHead>
+            <TableHead>Attendees</TableHead>
+            <TableHead />
+          </TableRow>
+        </TableHeader>
+        <TableBody>
           {flightExpenses
             .sort((a, b) => {
               // sort by start date (if available, newest top) and then by name
@@ -69,13 +76,13 @@ export const FlightsTable = ({
               />
             ))}
           {onChange && (
-            <tr>
-              <td colSpan={5}>
+            <TableRow>
+              <TableCell colSpan={5}>
                 <AddFlightExpense businessTripId={businessTripId} onAdd={onChange} />
-              </td>
-            </tr>
+              </TableCell>
+            </TableRow>
           )}
-        </tbody>
+        </TableBody>
       </Table>
     </div>
   );
diff --git a/packages/client/src/components/common/business-trip-report/parts/other-row.tsx b/packages/client/src/components/common/business-trip-report/parts/other-row.tsx
index 296b785cb2..d423d473f6 100644
--- a/packages/client/src/components/common/business-trip-report/parts/other-row.tsx
+++ b/packages/client/src/components/common/business-trip-report/parts/other-row.tsx
@@ -11,6 +11,7 @@ import { Button } from '../../../ui/button.js';
 import { Form, FormControl, FormField, FormItem, FormMessage } from '../../../ui/form.js';
 import { Input } from '../../../ui/input.js';
 import { Switch } from '../../../ui/switch.js';
+import { TableCell, TableRow } from '../../../ui/table.js';
 import { Tooltip } from '../../index.js';
 import { CategorizeIntoExistingExpense } from '../buttons/categorize-into-existing-expense.js';
 import { DeleteBusinessTripExpense } from '../buttons/delete-business-trip-expense.js';
@@ -56,7 +57,7 @@ export const OtherRow = ({ data, businessTripId, onChange }: Props): ReactElemen
   };
 
   return (
-    <tr key={otherExpense.id}>
+    <TableRow key={otherExpense.id}>
       <CoreExpenseRow
         data={otherExpense}
         isEditMode={isEditMode}
@@ -64,7 +65,7 @@ export const OtherRow = ({ data, businessTripId, onChange }: Props): ReactElemen
         businessTripId={businessTripId}
       />
 
-      <td>
+      <TableCell>
         <Form {...form}>
           <form id={`form ${otherExpense.id}`} onSubmit={handleSubmit(onSubmit)}>
             {isEditMode ? (
@@ -92,8 +93,8 @@ export const OtherRow = ({ data, businessTripId, onChange }: Props): ReactElemen
             )}
           </form>
         </Form>
-      </td>
-      <td>
+      </TableCell>
+      <TableCell>
         <div className="flex flex-col gap-2 justify-center">
           {isEditMode ? (
             <Form {...form}>
@@ -124,8 +125,8 @@ export const OtherRow = ({ data, businessTripId, onChange }: Props): ReactElemen
             </div>
           )}
         </div>
-      </td>
-      <td>
+      </TableCell>
+      <TableCell>
         <Tooltip content="Edit">
           <Button
             disabled={updatingInProcess}
@@ -161,7 +162,7 @@ export const OtherRow = ({ data, businessTripId, onChange }: Props): ReactElemen
         />
 
         <DeleteBusinessTripExpense businessTripExpenseId={otherExpense.id} onDelete={onChange} />
-      </td>
-    </tr>
+      </TableCell>
+    </TableRow>
   );
 };
diff --git a/packages/client/src/components/common/business-trip-report/parts/other.tsx b/packages/client/src/components/common/business-trip-report/parts/other.tsx
index 1933d8724d..b325bcaa56 100644
--- a/packages/client/src/components/common/business-trip-report/parts/other.tsx
+++ b/packages/client/src/components/common/business-trip-report/parts/other.tsx
@@ -1,7 +1,14 @@
 import type { ReactElement } from 'react';
-import { Table } from '@mantine/core';
 import { BusinessTripReportOtherFieldsFragmentDoc } from '../../../../gql/graphql.js';
 import { getFragmentData, type FragmentType } from '../../../../gql/index.js';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '../../../ui/table.js';
 import { AddOtherExpense } from '../buttons/add-other-expense.js';
 import { CoreExpenseHeader } from './core-expense-row.js';
 import { OtherRow } from './other-row.js';
@@ -32,16 +39,16 @@ export const Other = ({ data, onChange }: Props): ReactElement => {
 
   return (
     <div className="flex flex-col gap-2 mt-5">
-      <Table highlightOnHover withBorder>
-        <thead>
-          <tr>
+      <Table className="border">
+        <TableHeader>
+          <TableRow>
             <CoreExpenseHeader />
-            <th>Description</th>
-            <th>Deductible Expense</th>
-            <th />
-          </tr>
-        </thead>
-        <tbody>
+            <TableHead>Description</TableHead>
+            <TableHead>Deductible Expense</TableHead>
+            <TableHead />
+          </TableRow>
+        </TableHeader>
+        <TableBody>
           {otherExpenses
             .sort((a, b) => {
               // sort by start date (if available, newest top) and then by name
@@ -60,12 +67,12 @@ export const Other = ({ data, onChange }: Props): ReactElement => {
                 key={otherExpense.id}
               />
             ))}
-          <tr>
-            <td colSpan={6}>
+          <TableRow>
+            <TableCell colSpan={6}>
               <AddOtherExpense businessTripId={id} onAdd={onChange} />
-            </td>
-          </tr>
-        </tbody>
+            </TableCell>
+          </TableRow>
+        </TableBody>
       </Table>
     </div>
   );
diff --git a/packages/client/src/components/common/business-trip-report/parts/summary.stories.tsx b/packages/client/src/components/common/business-trip-report/parts/summary.stories.tsx
new file mode 100644
index 0000000000..d5de282362
--- /dev/null
+++ b/packages/client/src/components/common/business-trip-report/parts/summary.stories.tsx
@@ -0,0 +1,98 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { BusinessTripReportSummaryFieldsFragmentDoc } from '../../../../gql/graphql.js';
+import type { FragmentType } from '../../../../gql/index.js';
+import { Summary } from './summary.js';
+
+const money = (formatted: string) => ({ formatted });
+
+const ROWS = [
+  {
+    type: 'FLIGHT',
+    totalForeignCurrency: money('$2,400.00'),
+    totalLocalCurrency: money('₪8,880.00'),
+    taxableForeignCurrency: money('$2,400.00'),
+    taxableLocalCurrency: money('₪8,880.00'),
+    maxTaxableForeignCurrency: money('$3,000.00'),
+    maxTaxableLocalCurrency: money('₪11,100.00'),
+    excessExpenditure: money('$0.00'),
+  },
+  {
+    type: 'ACCOMMODATION',
+    totalForeignCurrency: money('$1,800.00'),
+    totalLocalCurrency: money('₪6,660.00'),
+    taxableForeignCurrency: money('$1,400.00'),
+    taxableLocalCurrency: money('₪5,180.00'),
+    maxTaxableForeignCurrency: money('$1,400.00'),
+    maxTaxableLocalCurrency: money('₪5,180.00'),
+    excessExpenditure: money('$400.00'),
+  },
+  {
+    type: 'TRAVEL_AND_SUBSISTENCE',
+    totalForeignCurrency: money('$960.00'),
+    totalLocalCurrency: money('₪3,552.00'),
+    taxableForeignCurrency: money('$120.00'),
+    taxableLocalCurrency: money('₪444.00'),
+    maxTaxableForeignCurrency: money('$120.00'),
+    maxTaxableLocalCurrency: money('₪444.00'),
+    excessExpenditure: money('$840.00'),
+  },
+];
+
+/** `getFragmentData` is identity at runtime, so a plain object stands in for the fragment. */
+function trip({
+  errors,
+  loading,
+}: {
+  errors?: string[];
+  loading?: boolean;
+}): FragmentType<typeof BusinessTripReportSummaryFieldsFragmentDoc> {
+  return {
+    id: 'trip-1',
+    summary: loading
+      ? null
+      : {
+          excessExpenditure: money('$1,240.00'),
+          excessTax: 30,
+          errors: errors ?? null,
+          rows: ROWS,
+        },
+  } as unknown as FragmentType<typeof BusinessTripReportSummaryFieldsFragmentDoc>;
+}
+
+/**
+ * The summary table, moved off Mantine's `Table` onto `ui/table`. Also covers the `Paper`
+ * error panel and the `Grid` footer, which were the only ones of their kind in this directory.
+ *
+ * Wrapped in a harness because `Summary`'s own `Props` type is not exported, so a
+ * `Meta<typeof Summary>` cannot name it.
+ */
+function Harness({ errors, loading = false }: { errors?: string[]; loading?: boolean }) {
+  return (
+    <div className="p-4">
+      <Summary data={trip({ errors, loading })} />
+    </div>
+  );
+}
+
+const meta = {
+  title: 'BusinessTripReport/Summary',
+  component: Harness,
+} satisfies Meta<typeof Harness>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { args: {} };
+
+/** The `Paper` panel, now a `Card`, listing whatever the server could not reconcile. */
+export const WithErrors: Story = {
+  args: {
+    errors: [
+      'Flight expense 8f2c has no attendees',
+      'Accommodation expense 1a90 is missing a country',
+    ],
+  },
+};
+
+/** The deferred fragment has not resolved yet. */
+export const Loading: Story = { args: { loading: true } };
diff --git a/packages/client/src/components/common/business-trip-report/parts/summary.tsx b/packages/client/src/components/common/business-trip-report/parts/summary.tsx
index 435d72863d..8f618545db 100644
--- a/packages/client/src/components/common/business-trip-report/parts/summary.tsx
+++ b/packages/client/src/components/common/business-trip-report/parts/summary.tsx
@@ -1,8 +1,16 @@
 import type { ReactElement } from 'react';
-import { Grid, List, Paper, Table, Text } from '@mantine/core';
 import { BusinessTripReportSummaryFieldsFragmentDoc, Currency } from '../../../../gql/graphql.js';
 import { getFragmentData, type FragmentType } from '../../../../gql/index.js';
 import { currencyCodeToSymbol } from '../../../../helpers/currency.js';
+import { Card } from '../../../ui/card.js';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '../../../ui/table.js';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
 /* GraphQL */ `
@@ -60,59 +68,67 @@ export const Summary = ({ data }: Props): ReactElement => {
   const { summary } = getFragmentData(BusinessTripReportSummaryFieldsFragmentDoc, data);
 
   if (!summary) {
-    return <Text>Loading...</Text>;
+    return <div>Loading...</div>;
   }
 
   return (
     <div className="flex flex-col gap-2 mt-5">
+      {/* Mantine's `Paper shadow="xs" p="md"` carried its own 16px padding; shadcn's Card
+          carries none. `List withPadding` indented by theme.spacing.xl (32px). */}
       {summary.errors?.length && (
-        <Paper shadow="xs" p="md">
-          <Text c="red">Errors:</Text>
-          <List size="sm" withPadding>
+        <Card className="p-4 shadow-xs">
+          <div className="text-red-500">Errors:</div>
+          <ul className="list-disc list-inside pl-8 text-sm">
             {summary.errors.map((error, i) => (
-              <List.Item key={i}>
-                <Text c="red">{error}</Text>
-              </List.Item>
+              <li key={i} className="text-red-500">
+                {error}
+              </li>
             ))}
-          </List>
-        </Paper>
+          </ul>
+        </Card>
       )}
-      <Table highlightOnHover withBorder>
-        <thead>
-          <tr>
-            <th>Expense Type</th>
-            <th>Total {currencyCodeToSymbol(Currency.Usd)}</th>
-            <th>Total {currencyCodeToSymbol(Currency.Ils)}</th>
+      <Table className="border">
+        <TableHeader>
+          <TableRow>
+            <TableHead>Expense Type</TableHead>
+            <TableHead>Total {currencyCodeToSymbol(Currency.Usd)}</TableHead>
+            <TableHead>Total {currencyCodeToSymbol(Currency.Ils)}</TableHead>
 
-            <th>Max Taxable {currencyCodeToSymbol(Currency.Usd)}</th>
-            <th>Taxable {currencyCodeToSymbol(Currency.Usd)}</th>
-            <th>Taxable {currencyCodeToSymbol(Currency.Ils)}</th>
-            <th>Excess Expenditure</th>
-          </tr>
-        </thead>
-        <tbody>
+            <TableHead>Max Taxable {currencyCodeToSymbol(Currency.Usd)}</TableHead>
+            <TableHead>Taxable {currencyCodeToSymbol(Currency.Usd)}</TableHead>
+            <TableHead>Taxable {currencyCodeToSymbol(Currency.Ils)}</TableHead>
+            <TableHead>Excess Expenditure</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
           {summary.rows.map(row => (
-            <tr key={row.type}>
-              <td>{normalizeSnakeCase(row.type)}</td>
-              <td>{row.totalForeignCurrency?.formatted}</td>
-              <td>{row.totalLocalCurrency?.formatted}</td>
-              <td>{row.maxTaxableForeignCurrency?.formatted}</td>
-              <td>{row.taxableForeignCurrency?.formatted}</td>
-              <td>{row.taxableLocalCurrency?.formatted}</td>
-              <td>{row.excessExpenditure?.formatted}</td>
-            </tr>
+            <TableRow key={row.type}>
+              <TableCell>{normalizeSnakeCase(row.type)}</TableCell>
+              <TableCell>{row.totalForeignCurrency?.formatted}</TableCell>
+              <TableCell>{row.totalLocalCurrency?.formatted}</TableCell>
+              <TableCell>{row.maxTaxableForeignCurrency?.formatted}</TableCell>
+              <TableCell>{row.taxableForeignCurrency?.formatted}</TableCell>
+              <TableCell>{row.taxableLocalCurrency?.formatted}</TableCell>
+              <TableCell>{row.excessExpenditure?.formatted}</TableCell>
+            </TableRow>
           ))}
-        </tbody>
+        </TableBody>
       </Table>
-      <Grid justify="flex-end">
-        <Grid.Col lg={2} md={4}>
+      {/* Mantine's `Grid`, on its own breakpoints (md 992, lg 1200) rather than Tailwind's,
+          so the columns keep the widths they had. Its `justify="flex-end"` does not survive
+          as `justify-end`: Mantine's Grid is flexbox, but `grid-cols-12` makes twelve `1fr`
+          tracks that consume the full width, leaving `justify-content` no free space to
+          distribute — the cells just auto-placed from column 1. Right alignment is explicit
+          `col-start` positions instead: 6+10 of 12 at md (spans 4 and 3), 9+11 at lg (2 and 2). */}
+      <div className="grid grid-cols-12 gap-4">
+        <div className="col-span-12 col-start-1 min-[992px]:col-span-4 min-[992px]:col-start-6 min-[1200px]:col-span-2 min-[1200px]:col-start-9">
           Excess Expenditure Tax:
-          <Text fz="lg">{summary.excessTax ?? '0'}%</Text>
-        </Grid.Col>
-        <Grid.Col lg={2} md={3} className="flex flex-col justify-end">
-          <Text fz="lg">{summary.excessExpenditure?.formatted ?? '0.00'}</Text>
-        </Grid.Col>
-      </Grid>
+          <div className="text-lg">{summary.excessTax ?? '0'}%</div>
+        </div>
+        <div className="col-span-12 col-start-1 flex flex-col justify-end min-[992px]:col-span-3 min-[992px]:col-start-10 min-[1200px]:col-span-2 min-[1200px]:col-start-11">
+          <div className="text-lg">{summary.excessExpenditure?.formatted ?? '0.00'}</div>
+        </div>
+      </div>
     </div>
   );
 };
diff --git a/packages/client/src/components/common/business-trip-report/parts/travel-and-subsistence-row.tsx b/packages/client/src/components/common/business-trip-report/parts/travel-and-subsistence-row.tsx
index 2bd4e79bd5..6cf5dc74d5 100644
--- a/packages/client/src/components/common/business-trip-report/parts/travel-and-subsistence-row.tsx
+++ b/packages/client/src/components/common/business-trip-report/parts/travel-and-subsistence-row.tsx
@@ -10,6 +10,7 @@ import { useUpdateBusinessTripTravelAndSubsistenceExpense } from '../../../../ho
 import { Button } from '../../../ui/button.js';
 import { Form, FormControl, FormField, FormItem, FormMessage } from '../../../ui/form.js';
 import { Input } from '../../../ui/input.js';
+import { TableCell, TableRow } from '../../../ui/table.js';
 import { Tooltip } from '../../index.js';
 import { CategorizeIntoExistingExpense } from '../buttons/categorize-into-existing-expense.js';
 import { DeleteBusinessTripExpense } from '../buttons/delete-business-trip-expense.js';
@@ -61,7 +62,7 @@ export const TravelAndSubsistenceRow = ({
   };
 
   return (
-    <tr key={travelAndSubsistenceExpense.id}>
+    <TableRow key={travelAndSubsistenceExpense.id}>
       <CoreExpenseRow
         data={travelAndSubsistenceExpense}
         isEditMode={isEditMode}
@@ -69,7 +70,7 @@ export const TravelAndSubsistenceRow = ({
         businessTripId={businessTripId}
       />
 
-      <td>
+      <TableCell>
         <Form {...form}>
           <form id={`form ${travelAndSubsistenceExpense.id}`} onSubmit={handleSubmit(onSubmit)}>
             {isEditMode ? (
@@ -97,8 +98,8 @@ export const TravelAndSubsistenceRow = ({
             )}
           </form>
         </Form>
-      </td>
-      <td>
+      </TableCell>
+      <TableCell>
         <Tooltip content="Edit">
           <Button
             disabled={updatingInProcess}
@@ -137,7 +138,7 @@ export const TravelAndSubsistenceRow = ({
           businessTripExpenseId={travelAndSubsistenceExpense.id}
           onDelete={onChange}
         />
-      </td>
-    </tr>
+      </TableCell>
+    </TableRow>
   );
 };
diff --git a/packages/client/src/components/common/business-trip-report/parts/travel-and-subsistence.tsx b/packages/client/src/components/common/business-trip-report/parts/travel-and-subsistence.tsx
index b83aaf87b4..a6c76fef6f 100644
--- a/packages/client/src/components/common/business-trip-report/parts/travel-and-subsistence.tsx
+++ b/packages/client/src/components/common/business-trip-report/parts/travel-and-subsistence.tsx
@@ -1,7 +1,14 @@
 import type { ReactElement } from 'react';
-import { Table } from '@mantine/core';
 import { BusinessTripReportTravelAndSubsistenceFieldsFragmentDoc } from '../../../../gql/graphql.js';
 import { getFragmentData, type FragmentType } from '../../../../gql/index.js';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '../../../ui/table.js';
 import { AddTravelAndSubsistenceExpense } from '../buttons/add-travel-and-subsistence-expense.js';
 import { CoreExpenseHeader } from './core-expense-row.js';
 import { TravelAndSubsistenceRow } from './travel-and-subsistence-row.js';
@@ -35,15 +42,15 @@ export const TravelAndSubsistence = ({ data, onChange }: Props): ReactElement =>
 
   return (
     <div className="flex flex-col gap-2 mt-5">
-      <Table highlightOnHover withBorder>
-        <thead>
-          <tr>
+      <Table className="border">
+        <TableHeader>
+          <TableRow>
             <CoreExpenseHeader />
-            <th>Expense Type</th>
-            <th />
-          </tr>
-        </thead>
-        <tbody>
+            <TableHead>Expense Type</TableHead>
+            <TableHead />
+          </TableRow>
+        </TableHeader>
+        <TableBody>
           {travelAndSubsistenceExpenses
             .sort((a, b) => {
               // sort by start date (if available, newest top) and then by name
@@ -62,12 +69,12 @@ export const TravelAndSubsistence = ({ data, onChange }: Props): ReactElement =>
                 key={travelAndSubsistenceExpense.id}
               />
             ))}
-          <tr>
-            <td colSpan={6}>
+          <TableRow>
+            <TableCell colSpan={6}>
               <AddTravelAndSubsistenceExpense businessTripId={id} onAdd={onChange} />
-            </td>
-          </tr>
-        </tbody>
+            </TableCell>
+          </TableRow>
+        </TableBody>
       </Table>
     </div>
   );
diff --git a/packages/client/src/components/common/business-trip-report/parts/uncategorized-transactions.stories.tsx b/packages/client/src/components/common/business-trip-report/parts/uncategorized-transactions.stories.tsx
new file mode 100644
index 0000000000..dc4ee73399
--- /dev/null
+++ b/packages/client/src/components/common/business-trip-report/parts/uncategorized-transactions.stories.tsx
@@ -0,0 +1,88 @@
+import type { ReactElement } from 'react';
+import { Client, Provider, type Exchange, type OperationResult } from 'urql';
+import { map, pipe } from 'wonka';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { BusinessTripUncategorizedTransactionsFieldsFragmentDoc } from '../../../../gql/graphql.js';
+import type { FragmentType } from '../../../../gql/index.js';
+import { UncategorizedTransactions } from './uncategorized-transactions.js';
+
+/** Nothing here fetches on mount; the categorize dialog only queries once opened. */
+const nullExchange: Exchange = () => operations$ =>
+  pipe(
+    operations$,
+    map((operation): OperationResult => ({
+      operation,
+      data: null,
+      error: undefined,
+      extensions: undefined,
+      hasNext: false,
+      stale: false,
+    })),
+  );
+
+function transaction(index: number, errors: string[] = []) {
+  return {
+    transaction: {
+      id: `txn-${index}`,
+      chargeId: `charge-${index}`,
+      eventDate: `2026-09-0${index}`,
+      effectiveDate: `2026-09-1${index}`,
+      sourceEffectiveDate: `2026-09-1${index}`,
+      amount: {
+        raw: index % 2 ? 1240.5 : -820.25,
+        formatted: index % 2 ? '$1,240.50' : '-$820.25',
+      },
+      account: { id: `acct-${index}`, name: `Isracard ••482${index}`, type: 'CREDIT_CARD' },
+      sourceDescription: `AIRLINE TICKET ${index} / SFO`,
+      referenceKey: `REF-00${index}`,
+      counterparty: { id: `cp-${index}`, name: 'United Airlines' },
+      missingInfoSuggestions: null,
+    },
+    categorizedAmount: { raw: 0, formatted: '$0.00' },
+    errors,
+  };
+}
+
+/**
+ * `getFragmentData` is identity at runtime, so plain objects stand in for the fragments.
+ */
+function trip(): FragmentType<typeof BusinessTripUncategorizedTransactionsFieldsFragmentDoc> {
+  return {
+    id: 'trip-1',
+    uncategorizedTransactions: [
+      transaction(1),
+      transaction(2, [
+        'No matching attendee for this transaction',
+        'Amount exceeds the per-day cap',
+      ]),
+      transaction(3),
+    ],
+  } as unknown as FragmentType<typeof BusinessTripUncategorizedTransactionsFieldsFragmentDoc>;
+}
+
+/**
+ * Covers the two things this table does that the other seven do not: it fills six of its nine
+ * columns from the shared `transactions-table/cells-legacy` components, and it renders the
+ * errors tooltip that replaced a Mantine hover `Popover`.
+ */
+function Harness(): ReactElement {
+  // No MemoryRouter here: `.storybook/preview.tsx` already provides one globally, and
+  // react-router throws on a nested <Router>.
+  return (
+    <Provider value={new Client({ url: '/graphql', exchanges: [nullExchange] })}>
+      <div className="p-4">
+        <UncategorizedTransactions data={trip()} onChange={() => void 0} />
+      </div>
+    </Provider>
+  );
+}
+
+const meta = {
+  title: 'BusinessTripReport/UncategorizedTransactions',
+  component: Harness,
+} satisfies Meta<typeof Harness>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
diff --git a/packages/client/src/components/common/business-trip-report/parts/uncategorized-transactions.tsx b/packages/client/src/components/common/business-trip-report/parts/uncategorized-transactions.tsx
index b6476f2e3f..30f24fceae 100644
--- a/packages/client/src/components/common/business-trip-report/parts/uncategorized-transactions.tsx
+++ b/packages/client/src/components/common/business-trip-report/parts/uncategorized-transactions.tsx
@@ -1,7 +1,6 @@
-import { useState, type ReactElement } from 'react';
+import type { ReactElement } from 'react';
 import { AlertCircle } from 'lucide-react';
 import { Link } from 'react-router-dom';
-import { Popover, Table, Text } from '@mantine/core';
 import { ROUTES } from '@/router/routes.js';
 import {
   BusinessTripUncategorizedTransactionsFieldsFragmentDoc,
@@ -18,6 +17,15 @@ import {
   EventDate,
   SourceID,
 } from '../../../transactions-table/cells-legacy/index.js';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '../../../ui/table.js';
+import { Tooltip } from '../../tooltip.js';
 import { CategorizeExpense } from '../buttons/categorize-expense.js';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
@@ -62,21 +70,21 @@ export const UncategorizedTransactions = ({ data, onChange }: Props): ReactEleme
 
   return (
     <div className="flex flex-col gap-2 mt-5">
-      <Table highlightOnHover withBorder>
-        <thead>
-          <tr>
-            <th>Event Date</th>
-            <th>Debit Date</th>
-            <th>Amount</th>
-            <th />
-            <th>Account</th>
-            <th>Description</th>
-            <th>Reference#</th>
-            <th>Counterparty</th>
-            <th />
-          </tr>
-        </thead>
-        <tbody>
+      <Table className="border">
+        <TableHeader>
+          <TableRow>
+            <TableHead>Event Date</TableHead>
+            <TableHead>Debit Date</TableHead>
+            <TableHead>Amount</TableHead>
+            <TableHead />
+            <TableHead>Account</TableHead>
+            <TableHead>Description</TableHead>
+            <TableHead>Reference#</TableHead>
+            <TableHead>Counterparty</TableHead>
+            <TableHead />
+          </TableRow>
+        </TableHeader>
+        <TableBody>
           {(
             uncategorizedTransactions as Array<
               Exclude<
@@ -87,11 +95,11 @@ export const UncategorizedTransactions = ({ data, onChange }: Props): ReactEleme
           )
             .sort((a, b) => a.transaction.eventDate.localeCompare(b.transaction.eventDate))
             .map(uncategorizedTransaction => (
-              <tr key={uncategorizedTransaction.transaction.id}>
+              <TableRow key={uncategorizedTransaction.transaction.id}>
                 <EventDate data={uncategorizedTransaction.transaction} />
                 <DebitDate data={uncategorizedTransaction.transaction} />
                 <Amount data={uncategorizedTransaction} />
-                <td>
+                <TableCell>
                   <Link
                     to={ROUTES.CHARGES.DETAIL(uncategorizedTransaction.transaction.chargeId)}
                     target="_blank"
@@ -101,22 +109,22 @@ export const UncategorizedTransactions = ({ data, onChange }: Props): ReactEleme
                   >
                     To Charge
                   </Link>
-                </td>
+                </TableCell>
                 <Account data={uncategorizedTransaction.transaction} />
                 <Description data={uncategorizedTransaction.transaction} />
                 <SourceID data={uncategorizedTransaction.transaction} />
                 <Counterparty data={uncategorizedTransaction.transaction} />
-                <td>
+                <TableCell>
                   <CategorizeExpense
                     businessTripId={id}
                     transactionId={uncategorizedTransaction.transaction.id}
                     onChange={onChange}
                     defaultAmount={uncategorizedTransaction.transaction.amount.raw}
                   />
-                </td>
-              </tr>
+                </TableCell>
+              </TableRow>
             ))}
-        </tbody>
+        </TableBody>
       </Table>
     </div>
   );
@@ -158,7 +166,7 @@ export const Amount = ({ data }: AmountProps): ReactElement => {
     amount?.raw !== categorizedAmount.raw && categorizedAmount.raw !== 0;
 
   return (
-    <td>
+    <TableCell>
       <div
         className="flex flex-col whitespace-nowrap"
         style={{
@@ -182,24 +190,35 @@ export const Amount = ({ data }: AmountProps): ReactElement => {
           </div>
         )}
       </div>
-    </td>
+    </TableCell>
   );
 };
 
-export const ErrorsPopover = ({ errors }: { errors: string[] }): ReactElement => {
-  const [opened, setOpened] = useState(false);
-  return (
-    <Popover width={200} position="bottom" shadow="md" opened={opened}>
-      <Popover.Target>
-        <AlertCircle onMouseEnter={() => setOpened(true)} onMouseLeave={() => setOpened(false)} />
-      </Popover.Target>
-      <Popover.Dropdown sx={{ pointerEvents: 'none' }} className="whitespace-normal text-red-500">
+export const ErrorsPopover = ({ errors }: { errors: string[] }): ReactElement => (
+  // Was a Mantine `Popover` held open by mouseenter/mouseleave with `pointerEvents: 'none'` on
+  // the dropdown — a tooltip in all but name. It is one now, so the hand-rolled open state and
+  // the two handlers go away and it picks up the keyboard and touch behaviour Radix provides.
+  <Tooltip
+    side="bottom"
+    className="max-w-50 whitespace-normal text-red-500"
+    content={
+      <ul>
         {errors.map((error, i) => (
-          <Text key={i} size="sm">
+          <li key={i} className="text-sm">
             {error}
-          </Text>
+          </li>
         ))}
-      </Popover.Dropdown>
-    </Popover>
-  );
-};
+      </ul>
+    }
+    asChild
+  >
+    {/*
+      `asChild` with an explicit button: without it TooltipTrigger renders a bare <button>
+      around the icon, and an SVG on its own gives that button no accessible name. The
+      Mantine popover it replaced was not focusable at all, so the keyboard path is new.
+    */}
+    <button type="button" aria-label="Show transaction errors">
+      <AlertCircle />
+    </button>
+  </Tooltip>
+);
diff --git a/packages/client/src/components/common/tooltip.tsx b/packages/client/src/components/common/tooltip.tsx
index 3dc005d944..8b233b9728 100644
--- a/packages/client/src/components/common/tooltip.tsx
+++ b/packages/client/src/components/common/tooltip.tsx
@@ -12,8 +12,13 @@ export function Tooltip({
   disabled,
   asChild = false,
   ...props
-}: React.ComponentProps<typeof TooltipContent> & {
+}: Omit<React.ComponentProps<typeof TooltipContent>, 'content'> & {
   children: ReactNode;
+  /**
+   * `content` is omitted from the base props before being redeclared: React's
+   * `HTMLAttributes` carries an RDFa `content?: string`, so intersecting the two narrowed
+   * this to `string & ReactNode` and rejected any JSX tooltip body.
+   */
   content: ReactNode;
   disabled?: boolean;
   asChild?: boolean;
diff --git a/packages/client/src/components/transactions-table/cells-legacy/account.tsx b/packages/client/src/components/transactions-table/cells-legacy/account.tsx
index e47a1d573b..f66140c20b 100644
--- a/packages/client/src/components/transactions-table/cells-legacy/account.tsx
+++ b/packages/client/src/components/transactions-table/cells-legacy/account.tsx
@@ -2,6 +2,7 @@ import type { ReactElement } from 'react';
 import { TransactionsTableAccountFieldsFragmentDoc } from '../../../gql/graphql.js';
 import { getFragmentData, type FragmentType } from '../../../gql/index.js';
 import { getAccountTypeLabel } from '../../financial-accounts/utils.js';
+import { TableCell } from '../../ui/table.js';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
 /* GraphQL */ `
@@ -27,11 +28,11 @@ export const Account = ({ data }: Props): ReactElement => {
   const accountName = account.name;
 
   return (
-    <td>
+    <TableCell>
       <div className="flex flex-col gap-2 items-center">
         <p>{accountType}</p>
         <p>{accountName}</p>
       </div>
-    </td>
+    </TableCell>
   );
 };
diff --git a/packages/client/src/components/transactions-table/cells-legacy/counterparty.tsx b/packages/client/src/components/transactions-table/cells-legacy/counterparty.tsx
index 9ca368b516..3e59526c4b 100644
--- a/packages/client/src/components/transactions-table/cells-legacy/counterparty.tsx
+++ b/packages/client/src/components/transactions-table/cells-legacy/counterparty.tsx
@@ -10,6 +10,7 @@ import { SelectWithSearch, Tooltip } from '../../common/index.js';
 import { InsertBusiness } from '../../common/modals/insert-business.js';
 import { SimilarTransactionsModal } from '../../common/modals/similar-transactions-modal.js';
 import { Button } from '../../ui/button.js';
+import { TableCell } from '../../ui/table.js';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
 /* GraphQL */ `
@@ -75,7 +76,7 @@ export function Counterparty({ data, onChange, enableEdit }: Props): ReactElemen
   const [search, setSearch] = useState<string | null>(sourceDescription);
 
   return (
-    <td>
+    <TableCell>
       <div className="flex flex-wrap gap-1 items-center justify-center">
         {counterparty?.id ? (
           <Link
@@ -119,6 +120,6 @@ export function Counterparty({ data, onChange, enableEdit }: Props): ReactElemen
         onOpenChange={setSimilarTransactionsOpen}
         onClose={onChange}
       />
-    </td>
+    </TableCell>
   );
 }
diff --git a/packages/client/src/components/transactions-table/cells-legacy/debit-date.tsx b/packages/client/src/components/transactions-table/cells-legacy/debit-date.tsx
index fe4119d355..1f380bfddf 100644
--- a/packages/client/src/components/transactions-table/cells-legacy/debit-date.tsx
+++ b/packages/client/src/components/transactions-table/cells-legacy/debit-date.tsx
@@ -2,6 +2,7 @@ import { type ReactElement } from 'react';
 import { format } from 'date-fns';
 import { TransactionsTableDebitDateFieldsFragmentDoc } from '../../../gql/graphql.js';
 import { getFragmentData, type FragmentType } from '../../../gql/index.js';
+import { TableCell } from '../../ui/table.js';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
 /* GraphQL */ `
@@ -21,7 +22,7 @@ export const DebitDate = ({ data }: Props): ReactElement => {
   const effectiveDate = 'effectiveDate' in transaction ? transaction.effectiveDate : undefined;
 
   return (
-    <td>
+    <TableCell>
       <div className="flex flex-col justify-center">
         <div>{effectiveDate && format(new Date(effectiveDate), 'dd/MM/yy')}</div>
         {transaction.sourceEffectiveDate && (
@@ -30,6 +31,6 @@ export const DebitDate = ({ data }: Props): ReactElement => {
           </div>
         )}
       </div>
-    </td>
+    </TableCell>
   );
 };
diff --git a/packages/client/src/components/transactions-table/cells-legacy/description.tsx b/packages/client/src/components/transactions-table/cells-legacy/description.tsx
index b2dfdaa5c2..41db7ff87c 100644
--- a/packages/client/src/components/transactions-table/cells-legacy/description.tsx
+++ b/packages/client/src/components/transactions-table/cells-legacy/description.tsx
@@ -1,6 +1,7 @@
 import { type ReactElement } from 'react';
 import { TransactionsTableDescriptionFieldsFragmentDoc } from '../../../gql/graphql.js';
 import { getFragmentData, type FragmentType } from '../../../gql/index.js';
+import { TableCell } from '../../ui/table.js';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
 /* GraphQL */ `
@@ -19,10 +20,10 @@ export const Description = ({ data }: Props): ReactElement => {
   const cellText = 'sourceDescription' in transaction ? transaction.sourceDescription : 'Missing';
 
   return (
-    <td>
+    <TableCell>
       <div className="flex flex-wrap">
         <div className="flex flex-col justify-center">{cellText}</div>
       </div>
-    </td>
+    </TableCell>
   );
 };
diff --git a/packages/client/src/components/transactions-table/cells-legacy/event-date.tsx b/packages/client/src/components/transactions-table/cells-legacy/event-date.tsx
index 395359c99c..950dfec725 100644
--- a/packages/client/src/components/transactions-table/cells-legacy/event-date.tsx
+++ b/packages/client/src/components/transactions-table/cells-legacy/event-date.tsx
@@ -2,6 +2,7 @@ import { type ReactElement } from 'react';
 import { format } from 'date-fns';
 import { TransactionsTableEventDateFieldsFragmentDoc } from '../../../gql/graphql.js';
 import { getFragmentData, type FragmentType } from '../../../gql/index.js';
+import { TableCell } from '../../ui/table.js';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
 /* GraphQL */ `
@@ -20,10 +21,10 @@ export const EventDate = ({ data }: Props): ReactElement => {
   const eventDate = 'eventDate' in transaction ? transaction.eventDate : undefined;
 
   return (
-    <td>
+    <TableCell>
       <div className="flex flex-col justify-center">
         {eventDate && format(new Date(eventDate), 'dd/MM/yy')}
       </div>
-    </td>
+    </TableCell>
   );
 };
diff --git a/packages/client/src/components/transactions-table/cells-legacy/source-id.tsx b/packages/client/src/components/transactions-table/cells-legacy/source-id.tsx
index 67f971e902..3973c3800f 100644
--- a/packages/client/src/components/transactions-table/cells-legacy/source-id.tsx
+++ b/packages/client/src/components/transactions-table/cells-legacy/source-id.tsx
@@ -1,6 +1,7 @@
 import { type ReactElement } from 'react';
 import { TransactionsTableSourceIdFieldsFragmentDoc } from '../../../gql/graphql.js';
 import { getFragmentData, type FragmentType } from '../../../gql/index.js';
+import { TableCell } from '../../ui/table.js';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
 /* GraphQL */ `
@@ -18,10 +19,10 @@ export const SourceID = ({ data }: Props): ReactElement => {
   const transaction = getFragmentData(TransactionsTableSourceIdFieldsFragmentDoc, data);
 
   return (
-    <td>
+    <TableCell>
       <div className="flex flex-wrap">
         <div className="flex flex-col justify-center">{transaction.referenceKey}</div>
       </div>
-    </td>
+    </TableCell>
   );
 };