diff --git a/src/pages/teacherDashboard/classes/Classes.tsx b/src/pages/teacherDashboard/classes/Classes.tsx
index 6f0db83..67f6165 100644
--- a/src/pages/teacherDashboard/classes/Classes.tsx
+++ b/src/pages/teacherDashboard/classes/Classes.tsx
@@ -5,7 +5,7 @@ import { type SchoolTeacherUser } from "codeforlife/api"
 import Class from "./class/Class"
 import ClassTable from "./ClassTable"
 import CreateClassForm from "./CreateClassForm"
-import JoinClassRequest from "./JoinClassRequest"
+import JoinClassRequest from "./joinClassRequest/JoinClassRequest"
 import JoinClassRequestTable from "./JoinClassRequestTable"
 import ResetStudentsPassword from "./class/ResetStudentsPassword"
 import { type RetrieveUserResult } from "../../../api/user"
diff --git a/src/pages/teacherDashboard/classes/joinClassRequest/AddedStudent.tsx b/src/pages/teacherDashboard/classes/joinClassRequest/AddedStudent.tsx
new file mode 100644
index 0000000..1c81fd3
--- /dev/null
+++ b/src/pages/teacherDashboard/classes/joinClassRequest/AddedStudent.tsx
@@ -0,0 +1,61 @@
+import * as page from "codeforlife/components/page"
+import { type FC } from "react"
+import { Link } from "codeforlife/components/router"
+import { type StudentUser } from "codeforlife/api"
+import { Typography } from "@mui/material"
+import { generatePath } from "react-router"
+
+import { type RetrieveClassResult } from "../../../../api/klass"
+import { type RetrieveUserResult } from "../../../../api/user"
+import { paths } from "../../../../routes"
+
+export interface AddedStudentProps {
+  klass: RetrieveClassResult
+  user: StudentUser<RetrieveUserResult>
+}
+
+const AddedStudent: FC<AddedStudentProps> = ({ klass, user }) => (
+  <>
+    <page.Section>
+      <Typography variant="h4" align="center" mb={0}>
+        External student added to class {klass.name} ({klass.id})
+      </Typography>
+    </page.Section>
+    <page.Section>
+      <Typography>
+        The student has been successfully added to the class {klass.name}.
+      </Typography>
+      <Typography>
+        Please provide the student with their new login details:
+      </Typography>
+    </page.Section>
+    <page.Section boxProps={{ bgcolor: "info.main" }}>
+      <Typography>
+        <strong>Class Access Code:</strong> {klass.id}
+      </Typography>
+      <Typography>
+        <strong>Name:</strong> {user.first_name}
+      </Typography>
+    </page.Section>
+    <page.Section>
+      <Typography>
+        {user.first_name} should now login as a student with these details.
+      </Typography>
+      <Typography mb={7}>
+        {user.first_name}&apos;s password is unchanged. You may manage this
+        student, including changing their name and password, as with other
+        students.
+      </Typography>
+      <Link
+        className="back-to"
+        to={generatePath(paths.teacher.dashboard.tab.classes.class._, {
+          classId: klass.id,
+        })}
+      >
+        Class
+      </Link>
+    </page.Section>
+  </>
+)
+
+export default AddedStudent
diff --git a/src/pages/teacherDashboard/classes/JoinClassRequest.tsx b/src/pages/teacherDashboard/classes/joinClassRequest/HandleRequest.tsx
similarity index 55%
rename from src/pages/teacherDashboard/classes/JoinClassRequest.tsx
rename to src/pages/teacherDashboard/classes/joinClassRequest/HandleRequest.tsx
index d1a71fd..d6a4cf0 100644
--- a/src/pages/teacherDashboard/classes/JoinClassRequest.tsx
+++ b/src/pages/teacherDashboard/classes/joinClassRequest/HandleRequest.tsx
@@ -1,85 +1,32 @@
 import * as form from "codeforlife/components/form"
 import * as page from "codeforlife/components/page"
-import * as yup from "yup"
-import {
-  CircularProgress,
-  Unstable_Grid2 as Grid,
-  Stack,
-  Typography,
-} from "@mui/material"
-import { type FC, useEffect, useState } from "react"
-import { type IndependentUser, type StudentUser } from "codeforlife/api"
+import { Unstable_Grid2 as Grid, Stack, Typography } from "@mui/material"
 import { Link, LinkButton } from "codeforlife/components/router"
-import { useNavigate, useParams } from "codeforlife/hooks"
+import { type FC } from "react"
+import { type IndependentUser } from "codeforlife/api"
 import { TablePagination } from "codeforlife/components"
 import { generatePath } from "react-router"
 import { submitForm } from "codeforlife/utils/form"
 
-import {
-  type RetrieveClassResult,
-  useLazyRetrieveClassQuery,
-} from "../../../api/klass"
 import {
   type RetrieveUserResult,
   useHandleJoinClassRequestMutation,
   useLazyListUsersQuery,
-  useLazyRetrieveUserQuery,
-} from "../../../api/user"
-import { classIdSchema } from "../../../app/schemas"
-import { paths } from "../../../routes"
-
-const AddedStudent: FC<{
-  klass: RetrieveClassResult
-  user: StudentUser<RetrieveUserResult>
-}> = ({ klass, user }) => (
-  <>
-    <page.Section>
-      <Typography variant="h4" align="center" mb={0}>
-        External student added to class {klass.name} ({klass.id})
-      </Typography>
-    </page.Section>
-    <page.Section>
-      <Typography>
-        The student has been successfully added to the class {klass.name}.
-      </Typography>
-      <Typography>
-        Please provide the student with their new login details:
-      </Typography>
-    </page.Section>
-    <page.Section boxProps={{ bgcolor: "info.main" }}>
-      <Typography>
-        <strong>Class Access Code:</strong> {klass.id}
-      </Typography>
-      <Typography>
-        <strong>Name:</strong> {user.first_name}
-      </Typography>
-    </page.Section>
-    <page.Section>
-      <Typography>
-        {user.first_name} should now login as a student with these details.
-      </Typography>
-      <Typography mb={7}>
-        {user.first_name}&apos;s password is unchanged. You may manage this
-        student, including changing their name and password, as with other
-        students.
-      </Typography>
-      <Link
-        className="back-to"
-        to={generatePath(paths.teacher.dashboard.tab.classes.class._, {
-          classId: klass.id,
-        })}
-      >
-        Class
-      </Link>
-    </page.Section>
-  </>
-)
+} from "../../../../api/user"
+import { type RetrieveClassResult } from "../../../../api/klass"
+import { paths } from "../../../../routes"
 
-const HandleRequest: FC<{
+export interface HandleRequestProps {
   klass: RetrieveClassResult
   user: IndependentUser<RetrieveUserResult>
   onAcceptRequest: () => void
-}> = ({ klass, user, onAcceptRequest }) => {
+}
+
+const HandleRequest: FC<HandleRequestProps> = ({
+  klass,
+  user,
+  onAcceptRequest,
+}) => {
   const [handleJoinClassRequest] = useHandleJoinClassRequestMutation()
 
   return (
@@ -179,53 +126,4 @@ const HandleRequest: FC<{
   )
 }
 
-export interface JoinClassRequestProps {}
-
-const JoinClassRequest: FC<JoinClassRequestProps> = () => {
-  const navigate = useNavigate()
-  const [wasAccepted, setWasAccepted] = useState(false)
-  const params = useParams({
-    classId: classIdSchema.required(),
-    userId: yup.number().required(),
-  })
-
-  const [
-    retrieveUser,
-    { data: user, isLoading: userIsLoading, isError: userIsError },
-  ] = useLazyRetrieveUserQuery()
-  const [
-    retrieveClass,
-    { data: klass, isLoading: classIsLoading, isError: classIsError },
-  ] = useLazyRetrieveClassQuery()
-
-  useEffect(() => {
-    if (params) {
-      void retrieveUser(params.userId)
-      void retrieveClass(params.classId)
-    } else navigate(paths.error.type.pageNotFound._)
-  }, [params, navigate, retrieveUser, retrieveClass])
-
-  if (!params) return <></>
-
-  if (!user || userIsLoading || !klass || classIsLoading)
-    return <CircularProgress />
-
-  if (userIsError || classIsError) alert("TODO: handle error")
-
-  return wasAccepted ? (
-    <AddedStudent
-      klass={klass}
-      user={user as StudentUser<RetrieveUserResult>}
-    />
-  ) : (
-    <HandleRequest
-      klass={klass}
-      user={user as IndependentUser<RetrieveUserResult>}
-      onAcceptRequest={() => {
-        setWasAccepted(true)
-      }}
-    />
-  )
-}
-
-export default JoinClassRequest
+export default HandleRequest
diff --git a/src/pages/teacherDashboard/classes/joinClassRequest/JoinClassRequest.tsx b/src/pages/teacherDashboard/classes/joinClassRequest/JoinClassRequest.tsx
new file mode 100644
index 0000000..3499c5d
--- /dev/null
+++ b/src/pages/teacherDashboard/classes/joinClassRequest/JoinClassRequest.tsx
@@ -0,0 +1,66 @@
+import * as yup from "yup"
+import { type FC, useEffect, useState } from "react"
+import { type IndependentUser, type StudentUser } from "codeforlife/api"
+import { useNavigate, useParams } from "codeforlife/hooks"
+import { CircularProgress } from "@mui/material"
+
+import {
+  type RetrieveUserResult,
+  useLazyRetrieveUserQuery,
+} from "../../../../api/user"
+import AddedStudent from "./AddedStudent"
+import HandleRequest from "./HandleRequest"
+import { classIdSchema } from "../../../../app/schemas"
+import { paths } from "../../../../routes"
+import { useLazyRetrieveClassQuery } from "../../../../api/klass"
+
+export interface JoinClassRequestProps {}
+
+const JoinClassRequest: FC<JoinClassRequestProps> = () => {
+  const navigate = useNavigate()
+  const [wasAccepted, setWasAccepted] = useState(false)
+  const params = useParams({
+    classId: classIdSchema.required(),
+    userId: yup.number().required(),
+  })
+
+  const [
+    retrieveUser,
+    { data: user, isLoading: userIsLoading, isError: userIsError },
+  ] = useLazyRetrieveUserQuery()
+  const [
+    retrieveClass,
+    { data: klass, isLoading: classIsLoading, isError: classIsError },
+  ] = useLazyRetrieveClassQuery()
+
+  useEffect(() => {
+    if (params) {
+      void retrieveUser(params.userId)
+      void retrieveClass(params.classId)
+    } else navigate(paths.error.type.pageNotFound._)
+  }, [params, navigate, retrieveUser, retrieveClass])
+
+  if (!params) return <></>
+
+  if (!user || userIsLoading || !klass || classIsLoading)
+    return <CircularProgress />
+
+  if (userIsError || classIsError) alert("TODO: handle error")
+
+  return wasAccepted ? (
+    <AddedStudent
+      klass={klass}
+      user={user as StudentUser<RetrieveUserResult>}
+    />
+  ) : (
+    <HandleRequest
+      klass={klass}
+      user={user as IndependentUser<RetrieveUserResult>}
+      onAcceptRequest={() => {
+        setWasAccepted(true)
+      }}
+    />
+  )
+}
+
+export default JoinClassRequest