diff --git a/frontend/src/pages/Login/index.tsx b/frontend/src/pages/Login/index.tsx
index c2fc2d08..488a3e27 100644
--- a/frontend/src/pages/Login/index.tsx
+++ b/frontend/src/pages/Login/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, ChangeEvent } from "react";
+import React, { useEffect, useRef, useState, ChangeEvent } from "react";
 
 import { Alert, Button } from "components";
 import { useAuthState } from "context";
@@ -6,6 +6,7 @@ import { useAuthState } from "context";
 import logo from "../../img/logo-text-vertical-grey.png";
 
 function Login() {
+	const emailRef = useRef(null);
 	const { login } = useAuthState();
 	const [loading, setLoading] = useState(false);
 	const [errorMessage, setErrorMessage] = useState("");
@@ -31,6 +32,11 @@ function Login() {
 		setFormData({ ...formData, [target.name]: target.value });
 	};
 
+	useEffect(() => {
+		// @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
+		emailRef.current.focus();
+	}, []);
+
 	return (
 		<div className="container-tight py-4">
 			<div className="text-center mb-4">
@@ -46,6 +52,7 @@ function Login() {
 					<div className="mb-3">
 						<label className="form-label">Email address</label>
 						<input
+							ref={emailRef}
 							type="email"
 							onChange={onChange}
 							className="form-control"
diff --git a/frontend/src/pages/Setup/index.tsx b/frontend/src/pages/Setup/index.tsx
index 891d1d00..be62900b 100644
--- a/frontend/src/pages/Setup/index.tsx
+++ b/frontend/src/pages/Setup/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, ChangeEvent } from "react";
+import React, { useEffect, useRef, useState, ChangeEvent } from "react";
 
 import { createUser } from "api/npm";
 import { Alert, Button } from "components";
@@ -7,6 +7,7 @@ import { useAuthState, useHealthState } from "context";
 import logo from "../../img/logo-text-vertical-grey.png";
 
 function Setup() {
+	const nameRef = useRef(null);
 	const { refreshHealth } = useHealthState();
 	const { login } = useAuthState();
 	const [loading, setLoading] = useState(false);
@@ -62,6 +63,11 @@ function Setup() {
 		setFormData({ ...formData, [target.name]: target.value });
 	};
 
+	useEffect(() => {
+		// @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
+		nameRef.current.focus();
+	}, []);
+
 	return (
 		<div className="page page-center">
 			<div className="container-tight py-4">
@@ -86,6 +92,7 @@ function Setup() {
 						<div className="mb-3">
 							<label className="form-label">Name</label>
 							<input
+								ref={nameRef}
 								onChange={onChange}
 								className="form-control"
 								name="name"