diff --git a/src/components/table/Body.tsx b/src/components/table/Body.tsx
deleted file mode 100644
index 569e94f..0000000
--- a/src/components/table/Body.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Children, type FC, type ReactNode } from "react"
-
-import Row from "./Row"
-
-export interface BodyProps {
-  children: ReactNode
-}
-
-const Body: FC<BodyProps> = ({ children }) => (
-  <Row>
-    {Children.map(children, child => (
-      <>{child}</>
-    ))}
-  </Row>
-)
-
-export default Body
diff --git a/src/components/table/Cell.tsx b/src/components/table/Cell.tsx
deleted file mode 100644
index b84c572..0000000
--- a/src/components/table/Cell.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import {
-  Stack,
-  type StackProps,
-  TableCell,
-  type TableCellProps,
-  tableCellClasses,
-} from "@mui/material"
-import { type FC } from "react"
-
-export interface CellProps extends TableCellProps {
-  alignItems?: StackProps["alignItems"]
-  justifyContent?: StackProps["justifyContent"]
-  direction?: StackProps["direction"]
-}
-
-const Cell: FC<CellProps> = ({
-  children,
-  sx,
-  alignItems = "center",
-  justifyContent = "flex-start",
-  direction = "row",
-  ...otherTableCellProps
-}) => {
-  return (
-    <TableCell
-      // @ts-expect-error has sx prop
-      sx={theme => ({
-        outline: `1px solid ${theme.palette.common.white}`,
-        [`&.${tableCellClasses.head}`]: {
-          color: theme.palette.common.white,
-        },
-        ...(typeof sx === "function" ? sx(theme) : sx),
-      })}
-      {...otherTableCellProps}
-    >
-      <Stack
-        alignItems={alignItems}
-        justifyContent={justifyContent}
-        direction={direction}
-        columnGap={3}
-      >
-        {children}
-      </Stack>
-    </TableCell>
-  )
-}
-
-export default Cell
diff --git a/src/components/table/Row.tsx b/src/components/table/Row.tsx
deleted file mode 100644
index 4e6a46e..0000000
--- a/src/components/table/Row.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { TableRow, type TableRowProps } from "@mui/material"
-import { type FC } from "react"
-
-export interface RowProps extends TableRowProps {}
-
-const Row: FC<RowProps> = ({ sx, ...otherTableRowProps }) => (
-  <TableRow
-    // @ts-expect-error has sx prop
-    sx={theme => ({
-      // hide last border
-      "&:last-child td, &:last-child th": {
-        border: 0,
-      },
-      ...(typeof sx === "function" ? sx(theme) : sx),
-    })}
-    {...otherTableRowProps}
-  />
-)
-
-export default Row
diff --git a/src/components/table/Table.tsx b/src/components/table/Table.tsx
deleted file mode 100644
index 5882ca3..0000000
--- a/src/components/table/Table.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import {
-  Table as MuiTable,
-  TableBody,
-  TableContainer,
-  type TableContainerProps,
-  TableHead,
-} from "@mui/material"
-import { type FC } from "react"
-
-import Cell from "./Cell"
-import Row from "./Row"
-
-export interface TableProps {
-  titles: string[]
-  children: React.ReactNode
-  className?: string
-  containerProps?: TableContainerProps
-}
-
-const Table: FC<TableProps> = ({
-  titles,
-  children,
-  className,
-  containerProps,
-}) => {
-  return (
-    <TableContainer {...containerProps}>
-      <MuiTable className={className} style={{ display: "table" }}>
-        <TableHead>
-          <Row>
-            {titles.map((title, index) => (
-              <Cell key={`table-title-${index}`}>{title}</Cell>
-            ))}
-          </Row>
-        </TableHead>
-        <TableBody>{children}</TableBody>
-      </MuiTable>
-    </TableContainer>
-  )
-}
-
-export default Table
diff --git a/src/components/table/index.tsx b/src/components/table/index.tsx
deleted file mode 100644
index d0c08cd..0000000
--- a/src/components/table/index.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import Body, { type BodyProps } from "./Body"
-import Cell, { type CellProps } from "./Cell"
-import Row, { type RowProps } from "./Row"
-import Table, { type TableProps } from "./Table"
-
-export {
-  Table,
-  Body,
-  Cell,
-  Row,
-  type RowProps,
-  type TableProps,
-  type CellProps,
-  type BodyProps,
-}
diff --git a/src/pages/teacherDashboard/classes/ClassTable.tsx b/src/pages/teacherDashboard/classes/ClassTable.tsx
index 3e1c659..b5dda35 100644
--- a/src/pages/teacherDashboard/classes/ClassTable.tsx
+++ b/src/pages/teacherDashboard/classes/ClassTable.tsx
@@ -1,3 +1,4 @@
+import * as tables from "codeforlife/components/table"
 import { CopyIconButton, TablePagination } from "codeforlife/components"
 import { Create as CreateIcon } from "@mui/icons-material"
 import { type FC } from "react"
@@ -6,7 +7,6 @@ import { type SchoolTeacherUser } from "codeforlife/api"
 import { Typography } from "@mui/material"
 import { generatePath } from "react-router"
 
-import * as tables from "../../../components/table"
 import { type RetrieveUserResult } from "../../../api/user"
 import { paths } from "../../../routes"
 import { useLazyListClassesQuery } from "../../../api/klass"
@@ -31,19 +31,23 @@ const ClassTable: FC<ClassTableProps> = ({ authUser }) => (
     >
       {classes => (
         <tables.Table
-          titles={
+          headers={
             authUser.teacher.is_admin
               ? ["Class name", "Access code", "Teacher", "Action"]
               : ["Class name", "Access code", "Action"]
           }
         >
           {classes.map(klass => (
-            <tables.Body key={`klass-${klass.id}`}>
+            <tables.BodyRow key={`klass-${klass.id}`}>
               <tables.Cell>{klass.name}</tables.Cell>
-              <tables.Cell justifyContent="space-between" alignItems="center">
+              <tables.CellStack
+                direction="row"
+                justifyContent="space-between"
+                alignItems="center"
+              >
                 {klass.id}
                 <CopyIconButton content={klass.id} />
-              </tables.Cell>
+              </tables.CellStack>
               {authUser.teacher.is_admin && (
                 <tables.Cell>
                   {klass.teacher.id === authUser.teacher.id
@@ -51,7 +55,7 @@ const ClassTable: FC<ClassTableProps> = ({ authUser }) => (
                     : `${klass.teacher.user.first_name} ${klass.teacher.user.last_name}`}
                 </tables.Cell>
               )}
-              <tables.Cell justifyContent="center">
+              <tables.CellStack alignItems="center">
                 <LinkButton
                   to={generatePath(
                     paths.teacher.dashboard.tab.classes.class._,
@@ -63,8 +67,8 @@ const ClassTable: FC<ClassTableProps> = ({ authUser }) => (
                 >
                   Edit details
                 </LinkButton>
-              </tables.Cell>
-            </tables.Body>
+              </tables.CellStack>
+            </tables.BodyRow>
           ))}
         </tables.Table>
       )}
diff --git a/src/pages/teacherDashboard/classes/JoinClassRequestTable.tsx b/src/pages/teacherDashboard/classes/JoinClassRequestTable.tsx
index f6b3c3d..68d4607 100644
--- a/src/pages/teacherDashboard/classes/JoinClassRequestTable.tsx
+++ b/src/pages/teacherDashboard/classes/JoinClassRequestTable.tsx
@@ -1,3 +1,4 @@
+import * as tables from "codeforlife/components/table"
 import {
   Add as AddIcon,
   DoNotDisturb as DoNotDisturbIcon,
@@ -10,7 +11,6 @@ import { TablePagination } from "codeforlife/components"
 import { generatePath } from "react-router"
 import { useNavigate } from "codeforlife/hooks"
 
-import * as tables from "../../../components/table"
 import {
   useHandleJoinClassRequestMutation,
   useLazyListUsersQuery,
@@ -47,10 +47,10 @@ const JoinClassRequestTable: FC<JoinClassRequestTableProps> = ({
           users.length ? (
             <tables.Table
               className="body"
-              titles={["Name", "Email address", "Class", "Actions"]}
+              headers={["Name", "Email address", "Class", "Actions"]}
             >
               {users.map(user => (
-                <tables.Body key={`user-${user.id}`}>
+                <tables.BodyRow key={`user-${user.id}`}>
                   <tables.Cell>
                     <Typography>
                       {user.first_name} {user.last_name}
@@ -66,7 +66,7 @@ const JoinClassRequestTable: FC<JoinClassRequestTableProps> = ({
                       ? ""
                       : ` (${user.requesting_to_join_class!.teacher.user.first_name} ${user.requesting_to_join_class!.teacher.user.last_name})`}
                   </tables.Cell>
-                  <tables.Cell justifyContent="center">
+                  <tables.CellStack alignItems="center">
                     <LinkButton
                       to={generatePath(
                         paths.teacher.dashboard.tab.classes.class.joinRequest._,
@@ -106,8 +106,8 @@ const JoinClassRequestTable: FC<JoinClassRequestTableProps> = ({
                     >
                       Reject
                     </Button>
-                  </tables.Cell>
-                </tables.Body>
+                  </tables.CellStack>
+                </tables.BodyRow>
               ))}
             </tables.Table>
           ) : (
diff --git a/src/pages/teacherDashboard/classes/transferStudents/StudentTable.tsx b/src/pages/teacherDashboard/classes/transferStudents/StudentTable.tsx
index c33f326..511ceca 100644
--- a/src/pages/teacherDashboard/classes/transferStudents/StudentTable.tsx
+++ b/src/pages/teacherDashboard/classes/transferStudents/StudentTable.tsx
@@ -1,8 +1,8 @@
+import * as tables from "codeforlife/components/table"
 import { type FC } from "react"
 import { TablePagination } from "codeforlife/components"
 import { Typography } from "@mui/material"
 
-import * as tables from "../../../../components/table"
 import { type RetrieveClassResult } from "../../../../api/klass"
 import { useLazyListUsersQuery } from "../../../../api/user"
 
@@ -27,7 +27,7 @@ const StudentTable: FC<StudentTableProps> = ({ klass, newClass }) => (
     >
       {users => (
         <tables.Table
-          titles={["Student name"]}
+          headers={["Student name"]}
           containerProps={{
             sx: {
               margin: "auto",
@@ -37,14 +37,14 @@ const StudentTable: FC<StudentTableProps> = ({ klass, newClass }) => (
         >
           {users.length ? (
             users.map(user => (
-              <tables.Body key={`user-${user.id}`}>
+              <tables.BodyRow key={`user-${user.id}`}>
                 <tables.Cell>{user.first_name}</tables.Cell>
-              </tables.Body>
+              </tables.BodyRow>
             ))
           ) : (
-            <tables.Body>
+            <tables.BodyRow>
               <tables.Cell>(no students)</tables.Cell>
-            </tables.Body>
+            </tables.BodyRow>
           )}
         </tables.Table>
       )}
diff --git a/src/pages/teacherDashboard/classes/transferStudents/TransferStudentsForm.tsx b/src/pages/teacherDashboard/classes/transferStudents/TransferStudentsForm.tsx
index d6fa3e5..4d8df80 100644
--- a/src/pages/teacherDashboard/classes/transferStudents/TransferStudentsForm.tsx
+++ b/src/pages/teacherDashboard/classes/transferStudents/TransferStudentsForm.tsx
@@ -1,4 +1,5 @@
 import * as forms from "codeforlife/components/form"
+import * as tables from "codeforlife/components/table"
 import { Stack, Typography } from "@mui/material"
 import { type FC } from "react"
 import { LinkButton } from "codeforlife/components/router"
@@ -6,7 +7,6 @@ import { type StudentUser } from "codeforlife/api"
 import { submitForm } from "codeforlife/utils/form"
 import { useNavigate } from "codeforlife/hooks"
 
-import * as tables from "../../../../components/table"
 import {
   type TransferStudentsArg,
   useTransferStudentsMutation,
@@ -81,9 +81,9 @@ const TransferStudentsForm: FC<TransferStudentsFormProps> = ({
           },
         })}
       >
-        <tables.Table titles={["Existing name", "New student name"]}>
+        <tables.Table headers={["Existing name", "New student name"]}>
           {studentUsers.map(studentUser => (
-            <tables.Body key={`user-${studentUser.id}`}>
+            <tables.BodyRow key={`user-${studentUser.id}`}>
               <tables.Cell>{studentUser.first_name}</tables.Cell>
               <tables.Cell>
                 <forms.FirstNameField
@@ -93,7 +93,7 @@ const TransferStudentsForm: FC<TransferStudentsFormProps> = ({
                   placeholder={`Enter a name for ${studentUser.first_name}`}
                 />
               </tables.Cell>
-            </tables.Body>
+            </tables.BodyRow>
           ))}
         </tables.Table>
         <Stack className="form-buttons" justifyContent="end">
diff --git a/src/pages/teacherDashboard/school/Leave.tsx b/src/pages/teacherDashboard/school/Leave.tsx
index e7d57e9..1fa9960 100644
--- a/src/pages/teacherDashboard/school/Leave.tsx
+++ b/src/pages/teacherDashboard/school/Leave.tsx
@@ -1,5 +1,6 @@
 import * as form from "codeforlife/components/form"
 import * as page from "codeforlife/components/page"
+import * as tables from "codeforlife/components/table"
 import * as yup from "yup"
 import { CircularProgress, Stack, Typography } from "@mui/material"
 import { type FC, useEffect } from "react"
@@ -9,7 +10,6 @@ import { TablePagination } from "codeforlife/components"
 import { type User } from "codeforlife/api"
 import { submitForm } from "codeforlife/utils/form"
 
-import * as table from "../../../components/table"
 import {
   useLazyListClassesQuery,
   useUpdateClassesMutation,
@@ -125,27 +125,27 @@ const Leave: FC<LeaveProps> = ({ authUserId }) => {
                 )}
                 onSubmit={submitForm(updateClasses)}
               >
-                <table.Table
+                <tables.Table
                   className="body"
-                  titles={["Class name", "New teacher"]}
+                  headers={["Class name", "New teacher"]}
                 >
                   {classes.map(klass => (
-                    <table.Body key={klass.id}>
-                      <table.Cell>
+                    <tables.BodyRow key={klass.id}>
+                      <tables.Cell>
                         <Typography variant="subtitle1">
                           {klass.name}
                         </Typography>
-                      </table.Cell>
-                      <table.Cell direction="column" alignItems="flex-start">
+                      </tables.Cell>
+                      <tables.CellStack alignItems="flex-start">
                         <TeacherAutocompleteField
                           required
                           name={`${klass.id}.teacher`}
                           _id={user.id}
                         />
-                      </table.Cell>
-                    </table.Body>
+                      </tables.CellStack>
+                    </tables.BodyRow>
                   ))}
-                </table.Table>
+                </tables.Table>
                 <Stack direction="row" spacing={2}>
                   <LinkButton
                     variant="outlined"
diff --git a/src/pages/teacherDashboard/school/TeacherInvitationTable.tsx b/src/pages/teacherDashboard/school/TeacherInvitationTable.tsx
index e46c535..7612e40 100644
--- a/src/pages/teacherDashboard/school/TeacherInvitationTable.tsx
+++ b/src/pages/teacherDashboard/school/TeacherInvitationTable.tsx
@@ -1,3 +1,4 @@
+import * as tables from "codeforlife/components/table"
 import {
   Add as AddIcon,
   DeleteOutline as DeleteOutlineIcon,
@@ -14,7 +15,6 @@ import { type SchoolTeacherUser } from "codeforlife/api"
 import { TablePagination } from "codeforlife/components"
 import { useNavigate } from "codeforlife/hooks"
 
-import * as table from "../../../components/table"
 import {
   useDestroySchoolTeacherInvitationMutation,
   useLazyListSchoolTeacherInvitationsQuery,
@@ -67,9 +67,9 @@ const TeacherInvitationTable: FC<TeacherInvitationTableProps> = ({
       preferCacheValue
     >
       {schoolTeacherInvitations => (
-        <table.Table
+        <tables.Table
           className="body"
-          titles={
+          headers={
             authUser.teacher.is_admin
               ? ["Name", "Administrator status", "Actions"]
               : ["Name", "Administrator status"]
@@ -84,17 +84,16 @@ const TeacherInvitationTable: FC<TeacherInvitationTableProps> = ({
               invited_teacher_email,
               expires_at,
             }) => (
-              <table.Body key={`school-teacher-invitation-${id}`}>
-                <table.Cell>
+              <tables.BodyRow key={`school-teacher-invitation-${id}`}>
+                <tables.Cell>
                   <Typography variant="subtitle1">
                     {invited_teacher_first_name} {invited_teacher_last_name}{" "}
                     <strong>
                       ({expires_at < new Date() ? "expired" : "pending"})
                     </strong>
                   </Typography>
-                </table.Cell>
-                <table.Cell
-                  direction="column"
+                </tables.Cell>
+                <tables.CellStack
                   alignItems="flex-start"
                   justifyContent="flex-start"
                 >
@@ -106,9 +105,9 @@ const TeacherInvitationTable: FC<TeacherInvitationTableProps> = ({
                   <Typography variant="subtitle1">
                     ({invited_teacher_email})
                   </Typography>
-                </table.Cell>
+                </tables.CellStack>
                 {authUser.teacher.is_admin && (
-                  <table.Cell justifyContent="center">
+                  <tables.CellStack alignItems="center">
                     {invited_teacher_is_admin ? (
                       <Button
                         className="alert"
@@ -152,12 +151,12 @@ const TeacherInvitationTable: FC<TeacherInvitationTableProps> = ({
                     >
                       Delete
                     </Button>
-                  </table.Cell>
+                  </tables.CellStack>
                 )}
-              </table.Body>
+              </tables.BodyRow>
             ),
           )}
-        </table.Table>
+        </tables.Table>
       )}
     </TablePagination>
   )
diff --git a/src/pages/teacherDashboard/school/TeacherTable.tsx b/src/pages/teacherDashboard/school/TeacherTable.tsx
index 6b2891c..9a8c34e 100644
--- a/src/pages/teacherDashboard/school/TeacherTable.tsx
+++ b/src/pages/teacherDashboard/school/TeacherTable.tsx
@@ -1,3 +1,4 @@
+import * as tables from "codeforlife/components/table"
 import {
   Add as AddIcon,
   Create as CreateIcon,
@@ -12,7 +13,6 @@ import { TablePagination } from "codeforlife/components"
 import { generatePath } from "react-router"
 import { useNavigate } from "codeforlife/hooks"
 
-import * as table from "../../../components/table"
 import {
   type RetrieveUserResult,
   useLazyListUsersQuery,
@@ -61,24 +61,23 @@ const TeacherTable: FC<TeacherTableProps> = ({ authUser }) => {
       preferCacheValue
     >
       {users => (
-        <table.Table
+        <tables.Table
           className="body"
-          titles={
+          headers={
             authUser.teacher.is_admin
               ? ["Name", "Administrator status", "Actions"]
               : ["Name", "Administrator status"]
           }
         >
           {users.map(user => (
-            <table.Body key={`user-${user.id}`}>
-              <table.Cell>
+            <tables.BodyRow key={`user-${user.id}`}>
+              <tables.Cell>
                 <Typography variant="subtitle1">
                   {user.first_name} {user.last_name}
                   {user.id === authUser.id ? <strong> (you)</strong> : ""}
                 </Typography>
-              </table.Cell>
-              <table.Cell
-                direction="column"
+              </tables.Cell>
+              <tables.CellStack
                 alignItems="flex-start"
                 justifyContent="flex-start"
               >
@@ -88,9 +87,9 @@ const TeacherTable: FC<TeacherTableProps> = ({ authUser }) => {
                     : "Standard Teacher"}
                 </Typography>
                 <Typography variant="subtitle1">({user.email})</Typography>
-              </table.Cell>
+              </tables.CellStack>
               {authUser.teacher.is_admin && (
-                <table.Cell justifyContent="center">
+                <tables.CellStack alignItems="center">
                   {authUser.id === user.id && (
                     <Button
                       endIcon={<CreateIcon />}
@@ -144,11 +143,11 @@ const TeacherTable: FC<TeacherTableProps> = ({ authUser }) => {
                       Disable 2FA
                     </Button>
                   )}
-                </table.Cell>
+                </tables.CellStack>
               )}
-            </table.Body>
+            </tables.BodyRow>
           ))}
-        </table.Table>
+        </tables.Table>
       )}
     </TablePagination>
   )
diff --git a/src/pages/teacherDashboard/school/TransferClasses.tsx b/src/pages/teacherDashboard/school/TransferClasses.tsx
index 488ec00..2cc7f54 100644
--- a/src/pages/teacherDashboard/school/TransferClasses.tsx
+++ b/src/pages/teacherDashboard/school/TransferClasses.tsx
@@ -1,5 +1,6 @@
 import * as form from "codeforlife/components/form"
 import * as page from "codeforlife/components/page"
+import * as tables from "codeforlife/components/table"
 import { Link, LinkButton } from "codeforlife/components/router"
 import { type SchoolTeacher, type User } from "codeforlife/api"
 import { Stack, Typography } from "@mui/material"
@@ -8,7 +9,6 @@ import { TablePagination } from "codeforlife/components"
 import { submitForm } from "codeforlife/utils/form"
 import { useNavigate } from "codeforlife/hooks"
 
-import * as table from "../../../components/table"
 import {
   useLazyListClassesQuery,
   useUpdateClassesMutation,
@@ -98,27 +98,27 @@ const TransferClasses: FC<TransferClassesProps> = ({ authUserId, user }) => {
                 )}
                 onSubmit={submitForm(updateClasses)}
               >
-                <table.Table
+                <tables.Table
                   className="body"
-                  titles={["Class name", "New teacher"]}
+                  headers={["Class name", "New teacher"]}
                 >
                   {classes.map(klass => (
-                    <table.Body key={klass.id}>
-                      <table.Cell>
+                    <tables.BodyRow key={klass.id}>
+                      <tables.Cell>
                         <Typography variant="subtitle1">
                           {klass.name}
                         </Typography>
-                      </table.Cell>
-                      <table.Cell direction="column" alignItems="flex-start">
+                      </tables.Cell>
+                      <tables.CellStack alignItems="flex-start">
                         <TeacherAutocompleteField
                           required
                           name={`${klass.id}.teacher`}
                           _id={user.id}
                         />
-                      </table.Cell>
-                    </table.Body>
+                      </tables.CellStack>
+                    </tables.BodyRow>
                   ))}
-                </table.Table>
+                </tables.Table>
                 <Stack direction="row" spacing={2}>
                   <LinkButton
                     variant="outlined"
diff --git a/yarn.lock b/yarn.lock
index a8f0767..bc2f007 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2711,7 +2711,7 @@ clsx@^2.1.0, clsx@^2.1.1:
 
 "codeforlife@github:ocadotechnology/codeforlife-package-javascript#portal-frontend-52":
   version "2.3.5"
-  resolved "https://codeload.github.com/ocadotechnology/codeforlife-package-javascript/tar.gz/1879a14448c1e38a5c47f616c075e24785e1a241"
+  resolved "https://codeload.github.com/ocadotechnology/codeforlife-package-javascript/tar.gz/899a7ecd78b29aa41dc70d816b7df57e74277053"
   dependencies:
     "@emotion/react" "^11.10.6"
     "@emotion/styled" "^11.10.6"