diff --git a/package.json b/package.json
index 28c3649..c4a409f 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "✅ Do add `devDependencies` below that are `peerDependencies` in the CFL package."
   ],
   "dependencies": {
-    "codeforlife": "github:ocadotechnology/codeforlife-package-javascript#v2.5.0",
+    "codeforlife": "github:ocadotechnology/codeforlife-package-javascript#v2.5.1",
     "crypto-js": "^4.2.0"
   },
   "devDependencies": {
diff --git a/src/pages/studentJoinClass/RequestPending.tsx b/src/pages/studentJoinClass/RequestPending.tsx
new file mode 100644
index 0000000..e501049
--- /dev/null
+++ b/src/pages/studentJoinClass/RequestPending.tsx
@@ -0,0 +1,80 @@
+import { Button, Stack, Typography } from "@mui/material"
+import { type FC } from "react"
+import { type IndependentUser } from "codeforlife/api"
+import { LinkButton } from "codeforlife/components/router"
+import { useNavigate } from "react-router-dom"
+
+import { type RetrieveUserResult, useUpdateUserMutation } from "../../api/user"
+import { handleResultState } from "codeforlife/utils/api"
+import { paths } from "../../routes"
+import { useRetrieveSchoolQuery } from "../../api/school"
+
+export interface RequestPendingProps {
+  user: IndependentUser<RetrieveUserResult>
+}
+
+const RequestPending: FC<RequestPendingProps> = ({ user }) => {
+  const navigate = useNavigate()
+  const [updateUser] = useUpdateUserMutation()
+
+  return handleResultState(
+    useRetrieveSchoolQuery(user.requesting_to_join_class!.school),
+    school => (
+      <>
+        <Typography variant="h5">Request pending</Typography>
+        <Typography>
+          Your request to join class {user.requesting_to_join_class!.id} in the
+          school or club {school.name} is still pending.
+        </Typography>
+        <Typography>
+          The teacher for that class must review and approve the request to
+          complete the process.
+        </Typography>
+        <Typography>
+          If successful, the teacher will then contact you with your new login
+          details.
+        </Typography>
+        <Typography>
+          <strong>Warning:</strong> once the teacher accepts you to their class,
+          that teacher and the school or club will manage your account.
+        </Typography>
+        <Typography>
+          You may cancel your request now, before the teacher makes their
+          decision.
+        </Typography>
+        <Stack direction="row" spacing={2}>
+          <LinkButton variant="outlined" to={paths.indy.dashboard._}>
+            Back
+          </LinkButton>
+          <Button
+            onClick={() => {
+              void updateUser({
+                id: user.id,
+                requesting_to_join_class: null,
+              })
+                .unwrap()
+                .then(() => {
+                  navigate(".", {
+                    state: {
+                      notifications: [
+                        {
+                          props: {
+                            children:
+                              "Your request to join a school has been revoked successfully.",
+                          },
+                        },
+                      ],
+                    },
+                  })
+                })
+            }}
+          >
+            Cancel request
+          </Button>
+        </Stack>
+      </>
+    ),
+  )
+}
+
+export default RequestPending
diff --git a/src/pages/studentJoinClass/RequestToJoinClassForm.tsx b/src/pages/studentJoinClass/RequestToJoinClassForm.tsx
new file mode 100644
index 0000000..b8e2bab
--- /dev/null
+++ b/src/pages/studentJoinClass/RequestToJoinClassForm.tsx
@@ -0,0 +1,61 @@
+import * as forms from "codeforlife/components/form"
+import { type FC } from "react"
+import { LinkButton } from "codeforlife/components/router"
+import { Stack } from "@mui/material"
+import { type User } from "codeforlife/api"
+import { useNavigate } from "codeforlife/hooks"
+
+import { classIdSchema } from "../../app/schemas.ts"
+import { paths } from "../../routes"
+import { useUpdateUserMutation } from "../../api/user"
+
+export interface RequestToJoinClassFormProps {
+  indyUser: Pick<User, "id" | "requesting_to_join_class">
+}
+
+const RequestToJoinClassForm: FC<RequestToJoinClassFormProps> = ({
+  indyUser,
+}) => {
+  const navigate = useNavigate()
+
+  return (
+    <forms.Form
+      initialValues={indyUser}
+      useMutation={useUpdateUserMutation}
+      submitOptions={{
+        then: () => {
+          navigate(".", {
+            state: {
+              notifications: [
+                {
+                  index: 1,
+                  props: {
+                    children:
+                      "Your request to join a school has been received successfully.",
+                  },
+                },
+              ],
+            },
+          })
+        },
+      }}
+    >
+      <forms.TextField
+        placeholder="Class access code"
+        label="Class access code"
+        name="requesting_to_join_class"
+        sx={{ width: { xs: "100%", sm: "50%" } }}
+        schema={classIdSchema}
+        required
+      />
+      <Stack direction="row" spacing={2} paddingY={3}>
+        <LinkButton variant="outlined" to={paths.indy.dashboard._}>
+          Cancel
+        </LinkButton>
+        <forms.SubmitButton>Request</forms.SubmitButton>
+      </Stack>
+    </forms.Form>
+  )
+}
+
+export default RequestToJoinClassForm
diff --git a/src/pages/studentJoinClass/StudentJoinClass.tsx b/src/pages/studentJoinClass/StudentJoinClass.tsx
new file mode 100644
index 0000000..341994c
--- /dev/null
+++ b/src/pages/studentJoinClass/StudentJoinClass.tsx
@@ -0,0 +1,62 @@
+import * as page from "codeforlife/components/page"
+import { type FC } from "react"
+import type { IndependentUser } from "codeforlife/api"
+import type { SessionMetadata } from "codeforlife/hooks"
+import { Typography } from "@mui/material"
+import { handleResultState } from "codeforlife/utils/api"
+
+import { type RetrieveUserResult, useRetrieveUserQuery } from "../../api/user"
+import RequestPending from "./RequestPending.tsx"
+import RequestToJoinClassForm from "./RequestToJoinClassForm.tsx"
+
+const _StudentJoinClass: FC<SessionMetadata> = ({ user_id }) => {
+  return handleResultState(useRetrieveUserQuery(user_id), authUser => {
+    const user = authUser as IndependentUser<RetrieveUserResult>
+
+    return (
+      <page.Section>
+        <Typography align="center" variant="h4">
+          Join a school or club
+        </Typography>
+        {user.requesting_to_join_class ? (
+          <RequestPending user={user} />
+        ) : (
+          <>
+            <Typography variant="h5">
+              Request to join a school or club
+            </Typography>
+            <Typography>
+              If you want to link your Code For Life account with a school or
+              club, ask a teacher to enable external requests and provide you
+              with the Class Access Code for the class you want to join. Simply
+              add the Class Access Code to the form below and submit.
+            </Typography>
+            <Typography>
+              <strong>Warning:</strong> once the teacher accepts you to their
+              class, that teacher and the school or club will manage your
+              account.
+            </Typography>
+            <Typography>
+              If successful, the teacher will contact you with your new login
+              details.
+            </Typography>
+            <RequestToJoinClassForm
+              indyUser={{
+                id: user.id,
+                requesting_to_join_class: user.requesting_to_join_class!.id,
+              }}
+            />
+          </>
+        )}
+      </page.Section>
+    )
+  })
+}
+
+export interface StudentJoinClassProps {}
+
+const StudentJoinClass: FC<StudentJoinClassProps> = () => (
+  <page.Page session={{ userType: "indy" }}>{_StudentJoinClass}</page.Page>
+)
+
+export default StudentJoinClass
diff --git a/src/routes/student.tsx b/src/routes/student.tsx
index e9ff2b1..60ded59 100644
--- a/src/routes/student.tsx
+++ b/src/routes/student.tsx
@@ -3,6 +3,7 @@ import { Route } from "react-router-dom"
 // import Student from '../../pages/student/Student';
 import StudentAccount from "../pages/studentAccount/StudentAccount"
 import StudentDashboard from "../pages/studentDashboard/StudentDashboard"
+import StudentJoinClass from "../pages/studentJoinClass/StudentJoinClass"
 import paths from "./paths"
 
 const student = (
@@ -24,6 +25,10 @@ const student = (
       path={paths.indy.dashboard._}
       element={<StudentDashboard userType="indy" />}
     />
+    <Route
+      path={paths.indy.dashboard.joinClass._}
+      element={<StudentJoinClass />}
+    />
   </>
 )
 
diff --git a/yarn.lock b/yarn.lock
index 6d0900e..8f4fcb0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2824,9 +2824,9 @@ clsx@^2.0.0, clsx@^2.1.0, clsx@^2.1.1:
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
   integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
 
-"codeforlife@github:ocadotechnology/codeforlife-package-javascript#v2.5.0":
-  version "2.5.0"
-  resolved "https://codeload.github.com/ocadotechnology/codeforlife-package-javascript/tar.gz/47d9378050aead76bf8acd550744054527affaef"
+"codeforlife@github:ocadotechnology/codeforlife-package-javascript#v2.5.1":
+  version "2.5.1"
+  resolved "https://codeload.github.com/ocadotechnology/codeforlife-package-javascript/tar.gz/e85ae592b15de42fbe5fd20a5e8649271f68772f"
   dependencies:
     "@emotion/react" "^11.10.6"
     "@emotion/styled" "^11.10.6"