diff --git a/src/pages/teacherDashboard/TeacherDashboard.tsx b/src/pages/teacherDashboard/TeacherDashboard.tsx
index eb2472d..d430b39 100644
--- a/src/pages/teacherDashboard/TeacherDashboard.tsx
+++ b/src/pages/teacherDashboard/TeacherDashboard.tsx
@@ -1,5 +1,6 @@
 import * as page from "codeforlife/components/page"
 import { type FC, useEffect } from "react"
+import { CircularProgress } from "@mui/material"
 import { type Parameters } from "codeforlife/utils/router"
 import { type SchoolTeacherUser } from "codeforlife/api"
 import { useNavigate } from "codeforlife/hooks"
@@ -17,10 +18,10 @@ import { paths } from "../../router"
 export interface TeacherDashboardProps {}
 
 const TeacherDashboard: FC<TeacherDashboardProps> = () => {
-  const [retrieveUser, { data: user, isError }] = useLazyRetrieveUserQuery()
+  let [retrieveUser, { data: authUser, isError }] = useLazyRetrieveUserQuery()
   const navigate = useNavigate()
 
-  const isNonSchoolTeacher = user && !user.teacher?.school
+  const isNonSchoolTeacher = authUser && !authUser.teacher?.school
 
   useEffect(() => {
     if (isNonSchoolTeacher) navigate(paths.teacher.onboarding._)
@@ -34,21 +35,22 @@ const TeacherDashboard: FC<TeacherDashboardProps> = () => {
   return (
     <page.Page session={{ userType: "teacher" }}>
       {({ user_id }) => {
-        if (!user) {
+        if (!authUser) {
           retrieveUser(user_id)
-          return <>Loading...</>
+          return <CircularProgress />
         }
 
-        const schoolTeacherUser = user as SchoolTeacherUser<RetrieveUserResult>
+        const authSchoolTeacherUser =
+          authUser as SchoolTeacherUser<RetrieveUserResult>
 
         return (
           <page.TabBar
-            header={`Welcome back, ${user.first_name} ${user.last_name}`}
+            header={`Welcome back, ${authUser.first_name} ${authUser.last_name}`}
             originalPath={paths.teacher.dashboard.tab._}
             tabs={[
               {
                 label: "Your school",
-                children: <School user={schoolTeacherUser} />,
+                children: <School authUser={authSchoolTeacherUser} />,
                 path: (paths.teacher.dashboard.tab.school.__ as Parameters).tab,
               },
               // {
diff --git a/src/pages/teacherDashboard/school/School.tsx b/src/pages/teacherDashboard/school/School.tsx
index 1b19193..b4ab62e 100644
--- a/src/pages/teacherDashboard/school/School.tsx
+++ b/src/pages/teacherDashboard/school/School.tsx
@@ -1,52 +1,50 @@
 import * as page from "codeforlife/components/page"
-import { Button, Stack, Typography } from "@mui/material"
+import {
+  Button,
+  CircularProgress,
+  Unstable_Grid2 as Grid,
+  Stack,
+  Typography,
+} from "@mui/material"
 import { useLocation, useNavigate } from "codeforlife/hooks"
 import { type FC } from "react"
 import { type SchoolTeacherUser } from "codeforlife/api"
 
+import TransferClasses, { type TransferClassesProps } from "./TransferClasses"
 import InviteTeacherForm from "./InviteTeacherForm"
 import { type RetrieveUserResult } from "../../../api/user"
-import TransferClasses from "./TransferClasses"
-import { paths } from "../../../router"
-import { useRemoveTeacherFromSchoolMutation } from "../../../api/teacher"
+import TeacherInvitationTable from "./TeacherInvitationTable"
+import TeacherTable from "./TeacherTable"
+import UpdateSchoolForm from "./UpdateSchoolForm"
 import { useRetrieveSchoolQuery } from "../../../api/school"
 
 export interface SchoolProps {
-  user: SchoolTeacherUser<RetrieveUserResult>
+  authUser: SchoolTeacherUser<RetrieveUserResult>
 }
 
-const School: FC<SchoolProps> = ({ user }) => {
-  const { data: school } = useRetrieveSchoolQuery(user.teacher.school)
-  const { state } = useLocation<{ transferClasses: boolean }>()
-  const [removeTeacherFromSchool] = useRemoveTeacherFromSchoolMutation()
-  const navigate = useNavigate()
-
-  const { transferClasses } = state || {}
+const School: FC<SchoolProps> = ({ authUser }) => {
+  const { data: school, isError } = useRetrieveSchoolQuery(
+    authUser.teacher.school,
+  )
+  const { state } = useLocation<{
+    transferClasses: TransferClassesProps["user"]
+  }>()
+  const navigate = useNavigate<{
+    transferClasses?: TransferClassesProps["user"]
+  }>()
 
-  const onLeaveOrganisation = (): void => {
-    removeTeacherFromSchool(user.id)
-      .unwrap()
-      .then(() => {
-        // if (moveClassData?.classes) {
-        //   navigate(paths.teacher.dashboard.school.leave._, {
-        //     state: moveClassData,
-        //   })
-        // } else {
-        //   navigate(paths.teacher.onboarding._, {
-        //     state: { leftOrganisation: true },
-        //   })
-        // }
-      })
-      .catch(error => {
-        console.error(error)
-      })
+  if (state?.transferClasses) {
+    return (
+      <TransferClasses authUserId={authUser.id} user={state.transferClasses} />
+    )
   }
 
-  if (!school) return <>TODO</>
+  // TODO: handle this better
+  if (isError) return <>There was an error!</>
+
+  if (!school) return <CircularProgress />
 
-  return true ? (
-    <TransferClasses loggedInTeacherId={user.teacher.id} teacherUser={user} />
-  ) : (
+  return (
     <>
       <page.Section>
         <Typography align="center" variant="h4" marginBottom={0}>
@@ -54,7 +52,7 @@ const School: FC<SchoolProps> = ({ user }) => {
         </Typography>
       </page.Section>
       <page.Section sx={{ paddingTop: 0 }}>
-        {user.teacher.is_admin ? (
+        {authUser.teacher.is_admin ? (
           <>
             <Typography mb={0}>
               As an administrator of your school or club, you can select other
@@ -77,15 +75,7 @@ const School: FC<SchoolProps> = ({ user }) => {
             </Typography>
             <Button
               onClick={() => {
-                removeTeacherFromSchool(user.teacher.id)
-                  .unwrap()
-                  .then(() => {
-                    navigate(paths.teacher.onboarding._)
-                  })
-                  .catch(() => {
-                    // TODO: error handling strategy.
-                    alert("Failed to leave school")
-                  })
+                navigate(".", { state: { transferClasses: authUser } })
               }}
             >
               Leave school or club
@@ -93,26 +83,21 @@ const School: FC<SchoolProps> = ({ user }) => {
           </Stack>
         )}
       </page.Section>
-      {/* <page.Section>
+      <page.Section>
         <Typography variant="h5">
           These teachers are already part of your school or club
         </Typography>
-        <TeachersTable
-          teacherData={data.teacher}
-          coworkersData={data.coworkers}
-          sentInvites={data.sentInvites}
-          setDialog={setDialog}
-        />
-        {isAdmin && (
+        <TeacherTable authUser={authUser} />
+        {authUser.teacher.is_admin && (
           <Grid container columnSpacing={5}>
-            <Grid item sm={6}>
+            <Grid sm={6}>
               <Typography mb={0}>
                 Select &apos;Delete&apos; to delete a teacher from your school
                 or club. You will be able to move any existing classes assigned
                 to that teacher to other teachers in your school or club.
               </Typography>
             </Grid>
-            <Grid item sm={6}>
+            <Grid sm={6}>
               <Typography fontWeight="bold" color="error" mb={0}>
                 We strongly recommend that administrators who are using 2FA
                 ensure there is another administrator who will be able to
@@ -122,12 +107,18 @@ const School: FC<SchoolProps> = ({ user }) => {
             </Grid>
           </Grid>
         )}
-      </page.Section> */}
-      {/* {isAdmin && (
-        <page.Section gridProps={{ bgcolor: theme.palette.info.main }}>
-          <UpdateSchoolDetailsForm schoolData={data.school} />
+      </page.Section>
+      <page.Section>
+        <Typography variant="h5">
+          These teachers are invited to your school but have not joined yet
+        </Typography>
+        <TeacherInvitationTable authUser={authUser} />
+      </page.Section>
+      {authUser.teacher.is_admin && (
+        <page.Section boxProps={{ bgcolor: "info.main" }}>
+          <UpdateSchoolForm school={school} />
         </page.Section>
-      )} */}
+      )}
     </>
   )
 }
diff --git a/src/pages/teacherDashboard/school/TeacherInvitationTable.tsx b/src/pages/teacherDashboard/school/TeacherInvitationTable.tsx
new file mode 100644
index 0000000..d9d5c57
--- /dev/null
+++ b/src/pages/teacherDashboard/school/TeacherInvitationTable.tsx
@@ -0,0 +1,142 @@
+import {
+  Add as AddIcon,
+  DeleteOutline as DeleteOutlineIcon,
+  DoNotDisturb as DoNotDisturbIcon,
+  EmailOutlined as EmailOutlinedIcon,
+} from "@mui/icons-material"
+import { Button, Typography } from "@mui/material"
+import { type FC } from "react"
+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,
+} from "../../../api/schoolTeacherInvitation"
+import { type RetrieveUserResult } from "../../../api/user"
+
+export interface TeacherInvitationTableProps {
+  authUser: SchoolTeacherUser<RetrieveUserResult>
+}
+
+const TeacherInvitationTable: FC<TeacherInvitationTableProps> = ({
+  authUser,
+}) => {
+  const navigate = useNavigate()
+  const [destroySchoolTeacherInvitation] =
+    useDestroySchoolTeacherInvitationMutation()
+
+  function showNotification(children: string, error: boolean = false) {
+    navigate(".", {
+      state: { notifications: [{ props: { children, error } }] },
+    })
+  }
+
+  return (
+    <TablePagination
+      useLazyListQuery={useLazyListSchoolTeacherInvitationsQuery}
+    >
+      {schoolTeacherInvitations => (
+        <table.Table
+          className="body"
+          titles={
+            authUser.teacher!.is_admin
+              ? ["Name", "Administrator status", "Actions"]
+              : ["Name", "Administrator status"]
+          }
+        >
+          {schoolTeacherInvitations.map(
+            ({
+              id,
+              invited_teacher_first_name,
+              invited_teacher_last_name,
+              invited_teacher_is_admin,
+              invited_teacher_email,
+              expires_at,
+            }) => (
+              <table.Body key={`school-teacher-invitation-${id}`}>
+                <table.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"
+                  alignItems="flex-start"
+                  justifyContent="flex-start"
+                >
+                  <Typography variant="subtitle1">
+                    {invited_teacher_is_admin
+                      ? "Teacher Administrator"
+                      : "Standard Teacher"}
+                  </Typography>
+                  <Typography variant="subtitle1">
+                    ({invited_teacher_email})
+                  </Typography>
+                </table.Cell>
+                {authUser.teacher.is_admin && (
+                  <table.Cell justifyContent="center">
+                    {invited_teacher_is_admin ? (
+                      <Button
+                        className="alert"
+                        endIcon={<DoNotDisturbIcon />}
+                        onClick={() => {
+                          alert("TODO: create action of backend for this")
+                        }}
+                      >
+                        Revoke admin
+                      </Button>
+                    ) : (
+                      <Button
+                        endIcon={<AddIcon />}
+                        onClick={() => {
+                          alert("TODO: create action of backend for this")
+                        }}
+                      >
+                        Make admin
+                      </Button>
+                    )}
+                    <Button
+                      endIcon={<EmailOutlinedIcon />}
+                      onClick={() => {
+                        alert("TODO: create action of backend for this")
+                      }}
+                    >
+                      Resend invite
+                    </Button>
+                    <Button
+                      className="alert"
+                      endIcon={<DeleteOutlineIcon />}
+                      onClick={() => {
+                        destroySchoolTeacherInvitation(id)
+                          .unwrap()
+                          .then(() => {
+                            showNotification("Invitation successfully deleted.")
+                          })
+                          .catch(() => {
+                            showNotification(
+                              "Failed to delete invitation.",
+                              true,
+                            )
+                          })
+                      }}
+                    >
+                      Delete
+                    </Button>
+                  </table.Cell>
+                )}
+              </table.Body>
+            ),
+          )}
+        </table.Table>
+      )}
+    </TablePagination>
+  )
+}
+
+export default TeacherInvitationTable
diff --git a/src/pages/teacherDashboard/school/TeacherTable.tsx b/src/pages/teacherDashboard/school/TeacherTable.tsx
index bf44a36..6c8297a 100644
--- a/src/pages/teacherDashboard/school/TeacherTable.tsx
+++ b/src/pages/teacherDashboard/school/TeacherTable.tsx
@@ -1,382 +1,154 @@
-import { type FC } from "react"
 import {
-  Button,
-  Dialog,
-  Grid,
-  InputAdornment,
-  Stack,
-  Typography,
-  useTheme,
-} from "@mui/material"
-
-const TeachersTableActions: React.FC<{
-  isInvite: boolean
-  teacherEmail: string
-  userEmail: string
-  isTeacherAdmin: boolean
-  id: string
-  token?: string
-  twoFactorAuthentication?: boolean
-  setDialog: SetDialogType
-}> = ({
-  isInvite,
-  teacherEmail,
-  userEmail,
-  isTeacherAdmin,
-  id,
-  token,
-  twoFactorAuthentication,
-  setDialog,
-}) => {
-  const navigate = useNavigate()
-  const [toggleAdmin] = useToggleAdminMutation()
-  const [organisationKick] = useOrganisationKickMutation()
-  const [inviteToggleAdmin] = useInviteToggleAdminMutation()
-  const [resendInvite] = useResendInviteMutation()
-  const [deleteInvite] = useDeleteInviteMutation()
+  Add as AddIcon,
+  Create as CreateIcon,
+  DeleteOutline as DeleteOutlineIcon,
+  DoDisturbOnOutlined as DoDisturbOnOutlinedIcon,
+  DoNotDisturb as DoNotDisturbIcon,
+} from "@mui/icons-material"
+import { Button, Typography } from "@mui/material"
+import { type FC } from "react"
+import { type SchoolTeacherUser } from "codeforlife/api"
+import { TablePagination } from "codeforlife/components"
+import { useNavigate } from "codeforlife/hooks"
 
-  const onToggleAdmin = (id: string): void => {
-    toggleAdmin({ id })
-      .unwrap()
-      .then(res => {
-        navigate(".", {
-          state: {
-            message: res.isAdminNow
-              ? "Administrator status has been given successfully."
-              : "Administrator status has been revoked successfully.",
-          },
-        })
-      })
-      .catch(err => {
-        console.error("ToggleAdmin error: ", err)
-      })
-  }
+import * as table from "../../../components/table"
+import {
+  type ListUsersResult,
+  type RetrieveUserResult,
+  useLazyListUsersQuery,
+} from "../../../api/user"
+import { type TransferClassesProps } from "./TransferClasses"
+import { paths } from "../../../router"
+import { useSetTeacherAdminAccessMutation } from "../../../api/teacher"
 
-  const onOrganisationKick = (id: string): void => {
-    organisationKick({ id })
-      .unwrap()
-      .then(moveClassData => {
-        if (moveClassData?.classes) {
-          navigate(paths.teacher.dashboard.school.leave._, {
-            state: moveClassData,
-          })
-        } else {
-          navigate(".", {
-            state: {
-              message:
-                "The teacher has been successfully removed from your school or club.",
-            },
-          })
-        }
-      })
-      .catch(err => {
-        console.error("OrganisationKick error: ", err)
-      })
-  }
+export interface TeacherTableProps {
+  authUser: SchoolTeacherUser<RetrieveUserResult>
+}
 
-  const onInviteToggleAdmin = (id: string): void => {
-    inviteToggleAdmin({ id })
-      .unwrap()
-      .then(res => {
-        navigate(".", {
-          state: {
-            message: res.isAdminNow
-              ? "Administrator invite status has been given successfully."
-              : "Administrator invite status has been revoked successfully.",
-          },
-        })
-      })
-      .catch(err => {
-        console.error("InviteToggleAdmin error: ", err)
-      })
-  }
+const TeacherTable: FC<TeacherTableProps> = ({ authUser }) => {
+  const navigate = useNavigate<{
+    transferClasses?: TransferClassesProps["user"]
+  }>()
+  const [setTeacherAdminAccess] = useSetTeacherAdminAccessMutation()
 
-  const onResendInvite = (token: string): void => {
-    resendInvite({ token })
-      .unwrap()
-      .then(() => {
-        navigate(".", {
-          state: {
-            message: "Teacher re-invited!",
-          },
-        })
-      })
-      .catch(err => {
-        console.error("ResendInvite error: ", err)
-      })
+  function showNotification(children: string, error: boolean = false) {
+    navigate(".", {
+      state: { notifications: [{ props: { children, error } }] },
+    })
   }
 
-  const onDeleteInvite = (token: string): void => {
-    deleteInvite({ token })
+  function handleSetTeacherAdminAccess(id: number, isAdmin: boolean) {
+    setTeacherAdminAccess({ id, is_admin: isAdmin })
       .unwrap()
       .then(() => {
-        navigate(".", {
-          state: {
-            message: "Invitation successfully deleted.",
-          },
-        })
+        showNotification(
+          isAdmin
+            ? "Administrator status has been given successfully."
+            : "Administrator status has been revoked successfully.",
+        )
       })
-      .catch(err => {
-        console.error("DeleteInvite error: ", err)
+      .catch(() => {
+        showNotification(
+          isAdmin
+            ? "Failed to give administrator status."
+            : "Failed to revoke administrator status.",
+          true,
+        )
       })
   }
 
-  const onInviteMakeAdmin = (id: string): void => {
-    setDialog({
-      open: true,
-      onConfirm: () => {
-        onInviteToggleAdmin(id)
-        setDialog({ open: false })
-      },
-    })
-  }
-
-  const onMakeAdmin = (id: string): void => {
-    setDialog({
-      open: true,
-      onConfirm: () => {
-        onToggleAdmin(id)
-        setDialog({ open: false })
-      },
-    })
-  }
-
-  if (isInvite) {
-    return (
-      <>
-        {isTeacherAdmin ? (
-          <Button
-            className={isTeacherAdmin && "alert"}
-            endIcon={<DoNotDisturb />}
-            onClick={() => {
-              onInviteToggleAdmin(id)
-            }}
-          >
-            Revoke admin
-          </Button>
-        ) : (
-          <Button
-            endIcon={<Add />}
-            onClick={() => {
-              onInviteMakeAdmin(id)
-            }}
-          >
-            Make admin
-          </Button>
-        )}
-        <Button
-          endIcon={<EmailOutlined />}
-          onClick={() => {
-            onResendInvite(token as string)
-          }}
-        >
-          Resend invite
-        </Button>
-        <Button
-          className="alert"
-          endIcon={<DeleteOutline />}
-          onClick={() => {
-            onDeleteInvite(token as string)
-          }}
-        >
-          Delete
-        </Button>
-      </>
-    )
-  } else {
-    if (teacherEmail === userEmail) {
-      return (
-        <>
-          <Button
-            endIcon={<Create />}
-            onClick={() => {
-              navigate(paths.teacher.dashboard.account._)
-            }}
-          >
-            Update details
-          </Button>
-          {/* This button below will be used for pending invites  */}
-          <Button endIcon={<EmailOutlined />}>Resend invite</Button>
-        </>
-      )
-    } else if (isTeacherAdmin) {
-      return (
-        <>
-          <Button
-            className="alert"
-            endIcon={<DoNotDisturb />}
-            onClick={() => {
-              onToggleAdmin(id)
-            }}
-          >
-            Revoke admin
-          </Button>
-          <Button
-            className="alert"
-            endIcon={<DeleteOutline />}
-            onClick={() => {
-              onOrganisationKick(id)
-            }}
-          >
-            Delete
-          </Button>
-        </>
-      )
-    } else {
-      return (
-        <>
-          <Button
-            endIcon={<Add />}
-            onClick={() => {
-              onMakeAdmin(id)
-            }}
-          >
-            Make admin
-          </Button>
-          <Button
-            className="alert"
-            endIcon={<DeleteOutline />}
-            onClick={() => {
-              onOrganisationKick(id)
-            }}
-          >
-            Delete
-          </Button>
-          {twoFactorAuthentication ? (
-            <Button endIcon={<DoDisturbOnOutlined />} className="alert">
-              Disable 2FA
-            </Button>
-          ) : (
-            <></>
-          )}
-        </>
-      )
-    }
-  }
-}
-
-export interface TeacherTableProps {
-  teacherData: TeacherDashboardProps["teacher"]
-  coworkersData: TeacherDashboardProps["coworkers"]
-  sentInvites: TeacherDashboardProps["sentInvites"]
-  setDialog: SetDialogType
-}
-
-const TeacherTable: FC<TeacherTableProps> = ({
-  teacherData,
-  coworkersData,
-  sentInvites,
-  setDialog,
-}) => {
-  const isUserAdmin = teacherData.isAdmin
-  const email = teacherData.teacherEmail
-  const boldText: React.FC<string> = (str: string) => (
-    <Typography variant="body2" fontWeight="bold">
-      ({str})
-    </Typography>
-  )
-
   return (
-    <CflTable
-      className="body"
-      titles={
-        isUserAdmin
-          ? ["Name", "Administrator status", "Actions"]
-          : ["Name", "Administrator status"]
-      }
+    <TablePagination
+      useLazyListQuery={useLazyListUsersQuery}
+      filters={{ teachers_in_school: authUser.teacher.school }}
     >
-      {coworkersData.map(
-        ({
-          teacherFirstName,
-          teacherLastName,
-          teacherEmail,
-          isTeacherAdmin,
-          id,
-        }) => (
-          <CflTableBody key={id}>
-            <CflTableCellElement>
-              <Typography variant="subtitle1">
-                {teacherFirstName} {teacherLastName}{" "}
-                {teacherEmail === email ? boldText("you") : ""}{" "}
-              </Typography>
-            </CflTableCellElement>
-            <CflTableCellElement
-              direction="column"
-              alignItems="flex-start"
-              justifyContent="flex-start"
-            >
-              <Typography variant="subtitle1">
-                {isTeacherAdmin ? "Teacher Administrator" : "Standard Teacher"}
-              </Typography>
-              <Typography variant="subtitle1">({teacherEmail}) </Typography>
-            </CflTableCellElement>
-            {isUserAdmin && (
-              <CflTableCellElement justifyContent="center">
-                <TeachersTableActions
-                  {...{
-                    isInvite: false,
-                    teacherEmail,
-                    userEmail: email,
-                    isTeacherAdmin,
-                    id,
-                    setDialog,
-                  }}
-                />
-              </CflTableCellElement>
-            )}
-          </CflTableBody>
-        ),
-      )}
-      {sentInvites.map(
-        ({
-          invitedTeacherFirstName,
-          invitedTeacherLastName,
-          invitedTeacherEmail,
-          invitedTeacherIsAdmin,
-          isExpired,
-          id,
-          token,
-        }) => (
-          <CflTableBody key={token}>
-            <CflTableCellElement>
-              <Typography variant="subtitle1">
-                {invitedTeacherFirstName} {invitedTeacherLastName}{" "}
-                {isExpired ? boldText("expired") : boldText("pending")}{" "}
-              </Typography>
-            </CflTableCellElement>
-            <CflTableCellElement
-              direction="column"
-              alignItems="flex-start"
-              justifyContent="flex-start"
-            >
-              <Typography variant="subtitle1">
-                {invitedTeacherIsAdmin
-                  ? "Teacher Administrator"
-                  : "Standard Teacher"}
-              </Typography>
-              <Typography variant="subtitle1">
-                ({invitedTeacherEmail})
-              </Typography>
-            </CflTableCellElement>
-            {isUserAdmin && (
-              <CflTableCellElement justifyContent="center">
-                <TeachersTableActions
-                  {...{
-                    isInvite: true,
-                    teacherEmail: invitedTeacherEmail,
-                    userEmail: email,
-                    isTeacherAdmin: invitedTeacherIsAdmin,
-                    id,
-                    token,
-                    setDialog,
-                  }}
-                />
-              </CflTableCellElement>
-            )}
-          </CflTableBody>
-        ),
+      {users => (
+        <table.Table
+          className="body"
+          titles={
+            authUser.teacher.is_admin
+              ? ["Name", "Administrator status", "Actions"]
+              : ["Name", "Administrator status"]
+          }
+        >
+          {(
+            users as Array<SchoolTeacherUser<ListUsersResult["data"][number]>>
+          ).map(user => (
+            <table.Body key={`user-${user.id}`}>
+              <table.Cell>
+                <Typography variant="subtitle1">
+                  {user.first_name} {user.last_name}
+                  {user.id === authUser.id ? <strong> (you)</strong> : ""}
+                </Typography>
+              </table.Cell>
+              <table.Cell
+                direction="column"
+                alignItems="flex-start"
+                justifyContent="flex-start"
+              >
+                <Typography variant="subtitle1">
+                  {user.teacher.is_admin
+                    ? "Teacher Administrator"
+                    : "Standard Teacher"}
+                </Typography>
+                <Typography variant="subtitle1">({user.email})</Typography>
+              </table.Cell>
+              {authUser.teacher.is_admin && (
+                <table.Cell justifyContent="center">
+                  {authUser.id === user.id && (
+                    <Button
+                      endIcon={<CreateIcon />}
+                      onClick={() => {
+                        navigate(paths.teacher.dashboard.tab.account._)
+                      }}
+                    >
+                      Update details
+                    </Button>
+                  )}
+                  {user.teacher.is_admin ? (
+                    <Button
+                      className="alert"
+                      endIcon={<DoNotDisturbIcon />}
+                      onClick={() => {
+                        handleSetTeacherAdminAccess(user.teacher.id, false)
+                      }}
+                    >
+                      Revoke admin
+                    </Button>
+                  ) : (
+                    <Button
+                      endIcon={<AddIcon />}
+                      onClick={() => {
+                        handleSetTeacherAdminAccess(user.teacher.id, true)
+                      }}
+                    >
+                      Make admin
+                    </Button>
+                  )}
+                  <Button
+                    className="alert"
+                    endIcon={<DeleteOutlineIcon />}
+                    onClick={() => {
+                      navigate(".", { state: { transferClasses: user } })
+                    }}
+                  >
+                    Delete
+                  </Button>
+                  {true && ( // TODO check if user has otp enabled
+                    <Button
+                      endIcon={<DoDisturbOnOutlinedIcon />}
+                      className="alert"
+                    >
+                      Disable 2FA
+                    </Button>
+                  )}
+                </table.Cell>
+              )}
+            </table.Body>
+          ))}
+        </table.Table>
       )}
-    </CflTable>
+    </TablePagination>
   )
 }
 
diff --git a/src/pages/teacherDashboard/school/TransferClasses.tsx b/src/pages/teacherDashboard/school/TransferClasses.tsx
index b82650e..b6755dd 100644
--- a/src/pages/teacherDashboard/school/TransferClasses.tsx
+++ b/src/pages/teacherDashboard/school/TransferClasses.tsx
@@ -3,8 +3,9 @@ import * as page from "codeforlife/components/page"
 import { Link, LinkButton } from "codeforlife/components/router"
 import { type SchoolTeacher, type User } from "codeforlife/api"
 import { Stack, Typography } from "@mui/material"
-import { useFullList, useNavigate } from "codeforlife/hooks"
 import { type FC } from "react"
+import { TablePagination } from "codeforlife/components"
+import { useNavigate } from "codeforlife/hooks"
 
 import * as table from "../../../components/table"
 import {
@@ -17,39 +18,21 @@ import { useLazyListUsersQuery } from "../../../api/user"
 import { useRemoveTeacherFromSchoolMutation } from "../../../api/teacher"
 
 export interface TransferClassesProps {
-  loggedInTeacherId: number
-  teacherUser: Pick<User, "id" | "first_name" | "last_name"> & {
+  authUserId: User["id"]
+  user: Pick<User, "id" | "first_name" | "last_name"> & {
     teacher: Pick<SchoolTeacher, "id" | "school">
   }
 }
 
-const TransferClasses: FC<TransferClassesProps> = ({
-  loggedInTeacherId,
-  teacherUser,
-}) => {
+const TransferClasses: FC<TransferClassesProps> = ({ authUserId, user }) => {
   const [updateClasses] = useUpdateClassesMutation()
   const [removeTeacherFromSchool] = useRemoveTeacherFromSchoolMutation()
   const navigate = useNavigate()
 
-  const { data: teacherUsers } = useFullList(useLazyListUsersQuery, {
-    teachers_in_school: teacherUser.teacher.school,
-    _id: teacherUser.id,
-  })
-  const { data: classes } = useFullList(useLazyListClassesQuery, {
-    teacher: teacherUser.teacher.id,
-  })
-
-  if (!teacherUsers) return <>TODO</>
-  if (!classes) return <>TODO</>
-
-  const isSelf = teacherUser.teacher.id === loggedInTeacherId
-
-  const usersByTeacherId = Object.fromEntries(
-    teacherUsers.map(user => [user.teacher!.id, user]),
-  )
+  const isSelf = user.id === authUserId
 
   function handleRemoveTeacherFromSchool() {
-    removeTeacherFromSchool(teacherUser.teacher.id)
+    removeTeacherFromSchool(user.teacher.id)
       .unwrap()
       .then(() => {
         if (isSelf) {
@@ -84,8 +67,7 @@ const TransferClasses: FC<TransferClassesProps> = ({
       </page.Notification>
       <page.Section>
         <Typography variant="h4" align="center" marginBottom={5}>
-          Move all classes for teacher {teacherUser.first_name}{" "}
-          {teacherUser.last_name}
+          Move all classes for teacher {user.first_name} {user.last_name}
         </Typography>
         <Link className="back-to" to={paths.teacher.dashboard.tab.school._}>
           dashboard
@@ -94,54 +76,78 @@ const TransferClasses: FC<TransferClassesProps> = ({
           Please specify which teacher you would like the classes below to be
           moved to.
         </Typography>
-        <form.Form
-          initialValues={classes.reduce(
-            (values, klass) => ({
-              ...values,
-              [klass.id]: { teacher: undefined },
-            }),
-            {},
-          )}
-          onSubmit={submitForm(updateClasses, {
-            then: handleRemoveTeacherFromSchool,
-          })}
+        <TablePagination
+          useLazyListQuery={useLazyListClassesQuery}
+          filters={{ teacher: user.teacher.id }}
         >
-          <table.Table className="body" titles={["Class name", "New teacher"]}>
-            {classes.map(klass => (
-              <table.Body key={klass.id}>
-                <table.Cell>
-                  <Typography variant="subtitle1">{klass.name}</Typography>
-                </table.Cell>
-                <table.Cell direction="column" alignItems="flex-start">
-                  <form.AutocompleteField
-                    options={Object.keys(usersByTeacherId).map(Number)}
-                    getOptionLabel={teacherId => {
-                      const user = usersByTeacherId[teacherId]
-                      return `${user.first_name} ${user.last_name}`
-                    }}
-                    textFieldProps={{
-                      required: true,
-                      name: `${klass.id}.teacher`,
-                    }}
-                  />
-                </table.Cell>
-              </table.Body>
-            ))}
-          </table.Table>
-          <Stack direction="row" spacing={2}>
-            <LinkButton
-              variant="outlined"
-              to={paths.teacher.dashboard.tab.school._}
-            >
-              Cancel
-            </LinkButton>
-            <form.SubmitButton>
-              {isSelf
-                ? "Move classes and leave"
-                : "Move classes and remove teacher"}
-            </form.SubmitButton>
-          </Stack>
-        </form.Form>
+          {classes => {
+            if (!classes.length) {
+              handleRemoveTeacherFromSchool()
+              return <></>
+            }
+
+            return (
+              <form.Form
+                initialValues={classes.reduce(
+                  (values, klass) => ({
+                    ...values,
+                    [klass.id]: { teacher: undefined },
+                  }),
+                  {},
+                )}
+                onSubmit={submitForm(updateClasses)}
+              >
+                <table.Table
+                  className="body"
+                  titles={["Class name", "New teacher"]}
+                >
+                  {classes.map(klass => (
+                    <table.Body key={klass.id}>
+                      <table.Cell>
+                        <Typography variant="subtitle1">
+                          {klass.name}
+                        </Typography>
+                      </table.Cell>
+                      <table.Cell direction="column" alignItems="flex-start">
+                        <form.ApiAutocompleteField
+                          useLazyListQuery={useLazyListUsersQuery}
+                          filterOptions={{
+                            teachers_in_school: user.teacher.school,
+                            _id: user.id,
+                          }}
+                          getOptionLabel={({ first_name, last_name }) =>
+                            `${first_name} ${last_name}`
+                          }
+                          getOptionKey={({ teacher }) =>
+                            (teacher as SchoolTeacher).id
+                          }
+                          textFieldProps={{
+                            required: true,
+                            name: `${klass.id}.teacher`,
+                          }}
+                          searchKey="name"
+                        />
+                      </table.Cell>
+                    </table.Body>
+                  ))}
+                </table.Table>
+                <Stack direction="row" spacing={2}>
+                  <LinkButton
+                    variant="outlined"
+                    to={paths.teacher.dashboard.tab.school._}
+                  >
+                    Cancel
+                  </LinkButton>
+                  <form.SubmitButton>
+                    {isSelf
+                      ? "Move classes and leave"
+                      : "Move classes and remove teacher"}
+                  </form.SubmitButton>
+                </Stack>
+              </form.Form>
+            )
+          }}
+        </TablePagination>
       </page.Section>
     </>
   )
diff --git a/src/pages/teacherDashboard/school/UpdateSchoolForm.tsx b/src/pages/teacherDashboard/school/UpdateSchoolForm.tsx
index 6de21b6..e455d78 100644
--- a/src/pages/teacherDashboard/school/UpdateSchoolForm.tsx
+++ b/src/pages/teacherDashboard/school/UpdateSchoolForm.tsx
@@ -1,48 +1,74 @@
-import * as form from "codeforlife/components/form"
+import * as forms from "codeforlife/components/form"
+import { Stack, Typography } from "@mui/material"
 import { type FC } from "react"
+import { submitForm } from "codeforlife/utils/form"
+import { useNavigate } from "codeforlife/hooks"
+
+import {
+  type RetrieveSchoolResult,
+  useUpdateSchoolMutation,
+} from "../../../api/school"
+import { SchoolNameField } from "../../../components/form"
 
 export interface UpdateSchoolFormProps {
-  schoolData: TeacherDashboardProps["school"]
+  school: RetrieveSchoolResult
 }
 
-const UpdateSchoolForm: FC<UpdateSchoolFormProps> = ({ schoolData }) => {
+const UpdateSchoolForm: FC<UpdateSchoolFormProps> = ({ school }) => {
   const navigate = useNavigate()
-  const schoolName = schoolData.name
-  const schoolPostcode = schoolData.postcode
-  const schoolCountry = schoolData.country
-  const [updateSchool] = useOldUpdateSchoolMutation()
+  const [updateSchool] = useUpdateSchoolMutation()
 
   return (
-    <CflHorizontalForm
-      header="Update details of your school or club"
-      subheader="Update your school or club's name and/or postcode"
-      initialValues={{
-        name: schoolName,
-        postcode: schoolPostcode,
-        country: schoolCountry,
-      }}
-      validationSchema={SCHOOL_DETAILS_UPDATE_SCHEMA}
-      onSubmit={values => {
-        updateSchool(values)
-          .unwrap()
-          .then(() => {
+    <>
+      <Typography variant="h5" sx={{ mb: 2 }}>
+        Update details of your school or club
+      </Typography>
+      <forms.Form
+        initialValues={school}
+        onSubmit={submitForm(updateSchool, {
+          then: () => {
+            navigate(".", {
+              state: {
+                notifications: [
+                  {
+                    props: {
+                      children:
+                        "You have updated the details for your school or club successfully.",
+                    },
+                  },
+                ],
+              },
+            })
+          },
+          catch: () => {
             navigate(".", {
               state: {
-                message:
-                  "You have updated the details for your school or club successfully.",
+                notifications: [
+                  {
+                    props: {
+                      children:
+                        "Failed to updated the details for your school or club.",
+                      error: true,
+                    },
+                  },
+                ],
               },
             })
-          })
-          .catch(err => {
-            console.error("UpdateSchool error: ", err)
-          })
-      }}
-      submitButton={<form.SubmitButton>Update details</form.SubmitButton>}
-    >
-      <SchoolNameField />
-      <SchoolPostcodeField />
-      <SchoolCountryField />
-    </CflHorizontalForm>
+          },
+        })}
+      >
+        {form => (
+          <>
+            <Stack direction={{ xs: "column", md: "row" }} gap={3}>
+              <SchoolNameField />
+              <forms.CountryField />
+              {form.values.country === "GB" && <forms.UkCountyField />}
+            </Stack>
+            <forms.SubmitButton>Update details</forms.SubmitButton>
+          </>
+        )}
+      </forms.Form>
+    </>
   )
 }