diff --git a/src/pages/teacherDashboard/classes/class/UpdateStudentUser.tsx b/src/pages/teacherDashboard/classes/class/UpdateStudentUser.tsx
deleted file mode 100644
index 56adf41..0000000
--- a/src/pages/teacherDashboard/classes/class/UpdateStudentUser.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-import * as forms from "codeforlife/components/form"
-import * as pages from "codeforlife/components/page"
-import { type Class, type User } from "codeforlife/api"
-import { Link, Navigate } from "codeforlife/components/router"
-import { useNavigate, useParams } from "codeforlife/hooks"
-import { type FC } from "react"
-import { type StudentUser } from "codeforlife/api"
-import { Typography } from "@mui/material"
-import { generatePath } from "react-router-dom"
-import { handleResultState } from "codeforlife/utils/api"
-import { submitForm } from "codeforlife/utils/form"
-
-import {
-  type RetrieveUserResult,
-  useRetrieveUserQuery,
-  useUpdateUserMutation,
-} from "../../../../api/user"
-import { classIdSchema, userIdSchema } from "../../../../app/schemas"
-import { NewPasswordField } from "../../../../components/form"
-import { type ResetStudentsPasswordState } from "../resetStudentsPassword/ResetStudentsPassword"
-import { paths } from "../../../../routes"
-import { useResetStudentsPasswordMutation } from "../../../../api/student"
-import { useRetrieveClassQuery } from "../../../../api/klass"
-
-const UpdateStudentUserFormsSection: FC<{
-  classId: Class["id"]
-  studentUserId: User["id"]
-}> = ({ classId, studentUserId }) => {
-  const retrieveClassResult = useRetrieveClassQuery(classId)
-  const retrieveUserResult = useRetrieveUserQuery(studentUserId)
-  const [resetStudentsPassword] = useResetStudentsPasswordMutation()
-  const [updateUser] = useUpdateUserMutation()
-  const navigate = useNavigate()
-
-  const classPath = generatePath(paths.teacher.dashboard.tab.classes.class._, {
-    classId,
-  })
-
-  return handleResultState(retrieveClassResult, klass =>
-    handleResultState(retrieveUserResult, user => (
-      <>
-        <pages.Section>
-          <Typography align="center" variant="h4" marginBottom={11.5}>
-            Edit student details for {user.first_name} from class {klass.name} (
-            {klass.id})
-          </Typography>
-          <Link className="back-to" to={classPath}>
-            Class
-          </Link>
-          <Typography mb={0}>
-            Edit this student&apos;s name and manage their password and direct
-            access link.
-          </Typography>
-        </pages.Section>
-        <pages.Section>
-          <Typography variant="h5">Update name</Typography>
-          <Typography>
-            Remember this is the name they use to log in with, so you should
-            tell them what you&apos;ve changed it to.
-          </Typography>
-          <forms.Form
-            initialValues={{ id: studentUserId, first_name: user.first_name }}
-            onSubmit={submitForm(updateUser, {
-              then: () => {
-                navigate(classPath, {
-                  state: {
-                    notifications: [
-                      {
-                        index: 1,
-                        props: {
-                          children: "Student's details successfully updated.",
-                        },
-                      },
-                    ],
-                  },
-                })
-              },
-            })}
-          >
-            <forms.FirstNameField
-              required
-              dirty
-              label="First name of student"
-              placeholder="Enter first name of student"
-            />
-            <forms.SubmitButton>Update</forms.SubmitButton>
-          </forms.Form>
-        </pages.Section>
-        <pages.Section>
-          <Typography variant="h5">Update password</Typography>
-          <Typography>
-            You can set this student&apos;s password. Setting the password will
-            also regenerate their direct access link. Enter and confirm the
-            password in the boxes below. Try to prevent others from being able
-            to guess the new password when making this decision.
-          </Typography>
-          <forms.Form
-            initialValues={{
-              [user.student!.id]: {
-                user: { password: "", password_repeat: "" },
-              },
-            }}
-            onSubmit={submitForm(resetStudentsPassword, {
-              exclude: [`${user.student!.id}.user.password_repeat`],
-              then: resetStudentsPasswordResult => {
-                navigate<ResetStudentsPasswordState>(
-                  generatePath(
-                    paths.teacher.dashboard.tab.classes.class.students
-                      .resetPassword._,
-                    { classId },
-                  ),
-                  {
-                    state: {
-                      studentUsers: [user as StudentUser<RetrieveUserResult>],
-                      resetStudentsPasswordResult,
-                    },
-                  },
-                )
-              },
-            })}
-          >
-            <NewPasswordField
-              name={`${user.student!.id}.user.password`}
-              userType="student"
-              label="Password of student"
-              placeholder="Enter password of student"
-              repeatFieldProps={{
-                label: "Repeat password of student",
-                placeholder: "Enter password of student again",
-              }}
-            />
-            <forms.SubmitButton>Update</forms.SubmitButton>
-          </forms.Form>
-        </pages.Section>
-      </>
-    )),
-  )
-}
-
-export interface UpdateStudentUserProps {}
-
-const UpdateStudentUser: FC<UpdateStudentUserProps> = () => {
-  const params = useParams({
-    classId: classIdSchema.required(),
-    studentUserId: userIdSchema.required(),
-  })
-
-  return params ? (
-    <UpdateStudentUserFormsSection {...params} />
-  ) : (
-    <Navigate to={paths.teacher.dashboard.tab.classes._} />
-  )
-}
-
-export default UpdateStudentUser
diff --git a/src/pages/teacherDashboard/classes/updateStudentUser/UpdateNameForm.tsx b/src/pages/teacherDashboard/classes/updateStudentUser/UpdateNameForm.tsx
new file mode 100644
index 0000000..0192e32
--- /dev/null
+++ b/src/pages/teacherDashboard/classes/updateStudentUser/UpdateNameForm.tsx
@@ -0,0 +1,60 @@
+import * as forms from "codeforlife/components/form"
+import { type FC } from "react"
+import { Typography } from "@mui/material"
+import { type User } from "codeforlife/api"
+import { submitForm } from "codeforlife/utils/form"
+import { useNavigate } from "codeforlife/hooks"
+
+import { useUpdateUserMutation } from "../../../../api/user"
+
+export interface UpdateNameFormProps {
+  classPath: string
+  studentUser: Pick<User, "id" | "first_name">
+}
+
+const UpdateNameForm: FC<UpdateNameFormProps> = ({
+  classPath,
+  studentUser,
+}) => {
+  const [updateUser] = useUpdateUserMutation()
+  const navigate = useNavigate()
+
+  return (
+    <>
+      <Typography variant="h5">Update name</Typography>
+      <Typography>
+        Remember this is the name they use to log in with, so you should tell
+        them what you&apos;ve changed it to.
+      </Typography>
+      <forms.Form
+        initialValues={studentUser}
+        onSubmit={submitForm(updateUser, {
+          then: () => {
+            navigate(classPath, {
+              state: {
+                notifications: [
+                  {
+                    index: 1,
+                    props: {
+                      children: "Student's details successfully updated.",
+                    },
+                  },
+                ],
+              },
+            })
+          },
+        })}
+      >
+        <forms.FirstNameField
+          required
+          dirty
+          label="First name of student"
+          placeholder="Enter first name of student"
+        />
+        <forms.SubmitButton>Update</forms.SubmitButton>
+      </forms.Form>
+    </>
+  )
+}
+
+export default UpdateNameForm
diff --git a/src/pages/teacherDashboard/classes/updateStudentUser/UpdatePasswordForm.tsx b/src/pages/teacherDashboard/classes/updateStudentUser/UpdatePasswordForm.tsx
new file mode 100644
index 0000000..e1d0fa1
--- /dev/null
+++ b/src/pages/teacherDashboard/classes/updateStudentUser/UpdatePasswordForm.tsx
@@ -0,0 +1,74 @@
+import * as forms from "codeforlife/components/form"
+import { type Class, type StudentUser } from "codeforlife/api"
+import { type FC } from "react"
+import { Typography } from "@mui/material"
+import { generatePath } from "react-router-dom"
+import { submitForm } from "codeforlife/utils/form"
+import { useNavigate } from "codeforlife/hooks"
+
+import { NewPasswordField } from "../../../../components/form"
+import { type ResetStudentsPasswordState } from "../resetStudentsPassword/ResetStudentsPassword"
+import { type RetrieveUserResult } from "../../../../api/user"
+import { paths } from "../../../../routes"
+import { useResetStudentsPasswordMutation } from "../../../../api/student"
+
+export interface UpdatePasswordFormProps {
+  classId: Class["id"]
+  user: StudentUser<RetrieveUserResult>
+}
+
+const UpdatePasswordForm: FC<UpdatePasswordFormProps> = ({ classId, user }) => {
+  const [resetStudentsPassword] = useResetStudentsPasswordMutation()
+  const navigate = useNavigate()
+
+  return (
+    <>
+      <Typography variant="h5">Update password</Typography>
+      <Typography>
+        You can set this student&apos;s password. Setting the password will also
+        regenerate their direct access link. Enter and confirm the password in
+        the boxes below. Try to prevent others from being able to guess the new
+        password when making this decision.
+      </Typography>
+      <forms.Form
+        initialValues={{
+          [user.student.id]: {
+            user: { password: "", password_repeat: "" },
+          },
+        }}
+        onSubmit={submitForm(resetStudentsPassword, {
+          exclude: [`${user.student.id}.user.password_repeat`],
+          then: resetStudentsPasswordResult => {
+            navigate<ResetStudentsPasswordState>(
+              generatePath(
+                paths.teacher.dashboard.tab.classes.class.students.resetPassword
+                  ._,
+                { classId },
+              ),
+              {
+                state: {
+                  studentUsers: [user],
+                  resetStudentsPasswordResult,
+                },
+              },
+            )
+          },
+        })}
+      >
+        <NewPasswordField
+          name={`${user.student.id}.user.password`}
+          userType="student"
+          label="Password of student"
+          placeholder="Enter password of student"
+          repeatFieldProps={{
+            label: "Repeat password of student",
+            placeholder: "Enter password of student again",
+          }}
+        />
+        <forms.SubmitButton>Update</forms.SubmitButton>
+      </forms.Form>
+    </>
+  )
+}
+
+export default UpdatePasswordForm
diff --git a/src/pages/teacherDashboard/classes/updateStudentUser/UpdateStudentUser.tsx b/src/pages/teacherDashboard/classes/updateStudentUser/UpdateStudentUser.tsx
new file mode 100644
index 0000000..de30824
--- /dev/null
+++ b/src/pages/teacherDashboard/classes/updateStudentUser/UpdateStudentUser.tsx
@@ -0,0 +1,79 @@
+import * as pages from "codeforlife/components/page"
+import { type Class, type StudentUser, type User } from "codeforlife/api"
+import { Link, Navigate } from "codeforlife/components/router"
+import { type FC } from "react"
+import { Typography } from "@mui/material"
+import { generatePath } from "react-router-dom"
+import { handleResultState } from "codeforlife/utils/api"
+import { useParams } from "codeforlife/hooks"
+
+import {
+  type RetrieveUserResult,
+  useRetrieveUserQuery,
+} from "../../../../api/user"
+import { classIdSchema, userIdSchema } from "../../../../app/schemas"
+import UpdateNameForm from "./UpdateNameForm"
+import UpdatePasswordForm from "./UpdatePasswordForm"
+import { paths } from "../../../../routes"
+import { useRetrieveClassQuery } from "../../../../api/klass"
+
+const _UpdateStudentUser: FC<{
+  classId: Class["id"]
+  studentUserId: User["id"]
+}> = ({ classId, studentUserId }) => {
+  const retrieveClassResult = useRetrieveClassQuery(classId)
+  const retrieveUserResult = useRetrieveUserQuery(studentUserId)
+
+  const classPath = generatePath(paths.teacher.dashboard.tab.classes.class._, {
+    classId,
+  })
+
+  return handleResultState(retrieveClassResult, klass =>
+    handleResultState(retrieveUserResult, user => (
+      <>
+        <pages.Section>
+          <Typography align="center" variant="h4" marginBottom={11.5}>
+            Edit student details for {user.first_name} from class {klass.name} (
+            {klass.id})
+          </Typography>
+          <Link className="back-to" to={classPath}>
+            Class
+          </Link>
+          <Typography mb={0}>
+            Edit this student&apos;s name and manage their password and direct
+            access link.
+          </Typography>
+        </pages.Section>
+        <pages.Section>
+          <UpdateNameForm
+            classPath={classPath}
+            studentUser={{ id: studentUserId, first_name: user.first_name }}
+          />
+        </pages.Section>
+        <pages.Section>
+          <UpdatePasswordForm
+            classId={classId}
+            user={user as StudentUser<RetrieveUserResult>}
+          />
+        </pages.Section>
+      </>
+    )),
+  )
+}
+
+export interface UpdateStudentUserProps {}
+
+const UpdateStudentUser: FC<UpdateStudentUserProps> = () => {
+  const params = useParams({
+    classId: classIdSchema.required(),
+    studentUserId: userIdSchema.required(),
+  })
+
+  return params ? (
+    <_UpdateStudentUser {...params} />
+  ) : (
+    <Navigate to={paths.teacher.dashboard.tab.classes._} />
+  )
+}
+
+export default UpdateStudentUser