diff --git a/app/student/forms/edit-recipient/page.tsx b/app/student/forms/edit-recipient/page.tsx
index ef2cc060..8fa10e48 100644
--- a/app/student/forms/edit-recipient/page.tsx
+++ b/app/student/forms/edit-recipient/page.tsx
@@ -170,134 +170,136 @@ export default function EditRecipientPage() {
   };
 
   return (
-    <div className="mx-auto flex w-full max-w-xl flex-col px-4 py-6 sm:px-6 sm:py-8 gap-2">
-      <HeaderTitle icon={FileText}>Edit Recipient Email</HeaderTitle>
-      {isInvalidCorrectionLink ? (
-        <Card className="p-4 sm:p-6">
-          <div className="flex items-start gap-3">
-            <AlertTriangle className="mt-0.5 h-5 w-5 text-amber-600" />
-            <div>
-              <p className="text-base font-semibold text-slate-900">
-                This correction link is no longer available
-              </p>
-              <p className="mt-1 text-sm text-slate-600">
-                The recipient may have already been updated, the link may be
-                missing an event id, or the correction request is no longer
-                valid.
-              </p>
-              <Button className="mt-4" onClick={() => router.push("/forms")}>
-                Go to Forms
-              </Button>
-            </div>
-          </div>
-        </Card>
-      ) : (
-        <Card className="p-4 sm:p-6">
-          <p className="text-xs font-medium text-gray-700">
-            Step {isConfirming ? 2 : 1} of 2
-          </p>
-          <p className="text-xl font-semibold text-slate-900">{formLabel}</p>
-          <p className="mt-1 text-sm text-slate-600">
-            {isConfirming
-              ? "Please review the updated recipient details before submitting."
-              : "Update the email for this signing step so we can resend the request."}
-          </p>
-
-          {!isConfirming && (
-            <div className="mt-4">
-              <RecipientSigningPartyTimeline
-                mode="warning"
-                parties={signingParties.map((party) => ({
-                  id: party.id,
-                  title: party.title,
-                  email: party.email,
-                  isMe: isCurrentUserSigningParty(party.title),
-                  isEditable: party.id === targetSigningPartyId,
-                }))}
-                oldEmail={oldEmail}
-                editableEmail={recipientEmail}
-                onEditableEmailChange={setRecipientEmail}
-                editableDisabled={submitting}
-                editableError={editableError}
-              />
+    <div className="flex w-full flex-col px-4 py-6 sm:px-6 sm:py-8 gap-2 overflow-auto items-center">
+      <div className="max-w-xl">
+        <HeaderTitle icon={FileText}>Edit Recipient Email</HeaderTitle>
+        {isInvalidCorrectionLink ? (
+          <Card className="p-4 sm:p-6">
+            <div className="flex items-start gap-3">
+              <AlertTriangle className="mt-0.5 h-5 w-5 text-amber-600" />
+              <div>
+                <p className="text-base font-semibold text-slate-900">
+                  This correction link is no longer available
+                </p>
+                <p className="mt-1 text-sm text-slate-600">
+                  The recipient may have already been updated, the link may be
+                  missing an event id, or the correction request is no longer
+                  valid.
+                </p>
+                <Button className="mt-4" onClick={() => router.push("/forms")}>
+                  Go to Forms
+                </Button>
+              </div>
             </div>
-          )}
+          </Card>
+        ) : (
+          <Card className="p-4 sm:p-6">
+            <p className="text-xs font-medium text-gray-700">
+              Step {isConfirming ? 2 : 1} of 2
+            </p>
+            <p className="text-xl font-semibold text-slate-900">{formLabel}</p>
+            <p className="mt-1 text-sm text-slate-600">
+              {isConfirming
+                ? "Please review the updated recipient details before submitting."
+                : "Update the email for this signing step so we can resend the request."}
+            </p>
 
-          <form className="mt-4 space-y-3" onSubmit={onSubmit}>
-            {isConfirming && (
-              <div className="space-y-4">
-                <div className="mb-3 flex items-start gap-2">
-                  <LucideClipboardCheck className="h-8 w-8 opacity-40" />
-                  <span className="text-gray-700 font-semibold">
-                    Please check if all your inputs are correct
-                  </span>
-                </div>
+            {!isConfirming && (
+              <div className="mt-4">
                 <RecipientSigningPartyTimeline
+                  mode="warning"
                   parties={signingParties.map((party) => ({
                     id: party.id,
                     title: party.title,
-                    email:
-                      party.id === targetSigningPartyId
-                        ? recipientEmail
-                        : party.email,
+                    email: party.email,
                     isMe: isCurrentUserSigningParty(party.title),
+                    isEditable: party.id === targetSigningPartyId,
                   }))}
-                  isConfirmingRecipients
+                  oldEmail={oldEmail}
+                  editableEmail={recipientEmail}
+                  onEditableEmailChange={setRecipientEmail}
+                  editableDisabled={submitting}
+                  editableError={editableError}
                 />
-                <label className="flex cursor-pointer items-center gap-3 rounded-[0.33em] border border-gray-200 bg-gray-50 px-4 py-3 text-sm text-gray-700">
-                  <Checkbox
-                    checked={hasConfirmedDetails}
-                    onCheckedChange={(checked) =>
-                      setHasConfirmedDetails(checked === true)
-                    }
-                  />
-                  <span>I confirm all the details are correct</span>
-                </label>
               </div>
             )}
-            {statusType !== "idle" && (
-              <p
-                className={`text-sm ${statusType === "success" ? "text-emerald-700" : "text-red-600"}`}
-              >
-                {statusMessage}
-              </p>
-            )}
 
-            <div className="flex flex-col gap-2 sm:flex-row sm:justify-end">
+            <form className="mt-4 space-y-3" onSubmit={onSubmit}>
               {isConfirming && (
+                <div className="space-y-4">
+                  <div className="mb-3 flex items-start gap-2">
+                    <LucideClipboardCheck className="h-8 w-8 opacity-40" />
+                    <span className="text-gray-700 font-semibold">
+                      Please check if all your inputs are correct
+                    </span>
+                  </div>
+                  <RecipientSigningPartyTimeline
+                    parties={signingParties.map((party) => ({
+                      id: party.id,
+                      title: party.title,
+                      email:
+                        party.id === targetSigningPartyId
+                          ? recipientEmail
+                          : party.email,
+                      isMe: isCurrentUserSigningParty(party.title),
+                    }))}
+                    isConfirmingRecipients
+                  />
+                  <label className="flex cursor-pointer items-center gap-3 rounded-[0.33em] border border-gray-200 bg-gray-50 px-4 py-3 text-sm text-gray-700">
+                    <Checkbox
+                      checked={hasConfirmedDetails}
+                      onCheckedChange={(checked) =>
+                        setHasConfirmedDetails(checked === true)
+                      }
+                    />
+                    <span>I confirm all the details are correct</span>
+                  </label>
+                </div>
+              )}
+              {statusType !== "idle" && (
+                <p
+                  className={`text-sm ${statusType === "success" ? "text-emerald-700" : "text-red-600"}`}
+                >
+                  {statusMessage}
+                </p>
+              )}
+
+              <div className="flex flex-col gap-2 sm:flex-row sm:justify-end">
+                {isConfirming && (
+                  <Button
+                    type="button"
+                    variant="outline"
+                    disabled={submitting}
+                    onClick={() => setIsConfirming(false)}
+                  >
+                    Back
+                  </Button>
+                )}
                 <Button
-                  type="button"
-                  variant="outline"
-                  disabled={submitting}
-                  onClick={() => setIsConfirming(false)}
+                  type={isConfirming ? "submit" : "button"}
+                  disabled={
+                    submitting ||
+                    !eventId ||
+                    contextQuery.isPending ||
+                    !contextQuery.data?.success ||
+                    !!editableError ||
+                    (isConfirming && !hasConfirmedDetails)
+                  }
+                  onClick={() => {
+                    if (!isConfirming) reviewChanges();
+                  }}
                 >
-                  Back
+                  {submitting
+                    ? "Updating..."
+                    : isConfirming
+                      ? "Confirm Changes"
+                      : "Review Changes"}
                 </Button>
-              )}
-              <Button
-                type={isConfirming ? "submit" : "button"}
-                disabled={
-                  submitting ||
-                  !eventId ||
-                  contextQuery.isPending ||
-                  !contextQuery.data?.success ||
-                  !!editableError ||
-                  (isConfirming && !hasConfirmedDetails)
-                }
-                onClick={() => {
-                  if (!isConfirming) reviewChanges();
-                }}
-              >
-                {submitting
-                  ? "Updating..."
-                  : isConfirming
-                    ? "Confirm Changes"
-                    : "Review Changes"}
-              </Button>
-            </div>
-          </form>
-        </Card>
-      )}
+              </div>
+            </form>
+          </Card>
+        )}
+      </div>
     </div>
   );
 }