diff --git a/api/prisma/seed-dev.ts b/api/prisma/seed-dev.ts
index 17846d5d4e..6872bcab22 100644
--- a/api/prisma/seed-dev.ts
+++ b/api/prisma/seed-dev.ts
@@ -60,6 +60,14 @@ export const devSeeding = async (
       password: 'abcdef',
     }),
   });
+  await prismaClient.userAccounts.create({
+    data: await userFactory({
+      email: 'public-user@example.com',
+      confirmedAt: new Date(),
+      jurisdictionIds: [jurisdiction.id],
+      password: 'abcdef',
+    }),
+  });
   await prismaClient.userAccounts.create({
     data: await userFactory({
       roles: { isJurisdictionalAdmin: true },
diff --git a/api/prisma/seed-helpers/user-factory.ts b/api/prisma/seed-helpers/user-factory.ts
index 81e3be86cb..e23c831584 100644
--- a/api/prisma/seed-helpers/user-factory.ts
+++ b/api/prisma/seed-helpers/user-factory.ts
@@ -5,6 +5,7 @@ import { passwordToHash } from '../../src/utilities/password-helpers';
 export const userFactory = async (optionalParams?: {
   roles?: Prisma.UserRolesUncheckedCreateWithoutUserAccountsInput;
   firstName?: string;
+  middleName?: string;
   lastName?: string;
   email?: string;
   singleUseCode?: string;
@@ -21,6 +22,7 @@ export const userFactory = async (optionalParams?: {
     optionalParams?.email?.toLocaleLowerCase() ||
     `${randomNoun().toLowerCase()}${randomNoun().toLowerCase()}@${randomAdjective().toLowerCase()}.com`,
   firstName: optionalParams?.firstName || 'First',
+  middleName: optionalParams?.middleName || 'Middle',
   lastName: optionalParams?.lastName || 'Last',
   passwordHash: optionalParams?.password
     ? await passwordToHash(optionalParams?.password)
diff --git a/api/prisma/seed-staging.ts b/api/prisma/seed-staging.ts
index 848e1e4735..5627ccddfe 100644
--- a/api/prisma/seed-staging.ts
+++ b/api/prisma/seed-staging.ts
@@ -95,6 +95,14 @@ export const stagingSeed = async (
       singleUseCode: '12345',
     }),
   });
+  await prismaClient.userAccounts.create({
+    data: await userFactory({
+      email: 'public-user@example.com',
+      confirmedAt: new Date(),
+      jurisdictionIds: [jurisdiction.id],
+      password: 'abcdef',
+    }),
+  });
   // add jurisdiction specific translations and default ones
   await prismaClient.translations.create({
     data: translationFactory(jurisdiction.id, jurisdiction.name),
diff --git a/sites/partners/src/components/users/FormUserConfirm.tsx b/sites/partners/src/components/users/FormUserConfirm.tsx
index 3d05081371..73fd131909 100644
--- a/sites/partners/src/components/users/FormUserConfirm.tsx
+++ b/sites/partners/src/components/users/FormUserConfirm.tsx
@@ -14,7 +14,7 @@ type FormUserConfirmFields = {
   agree: boolean
 }
 
-const MIN_PASSWORD_LENGTH = 8
+const MIN_PASSWORD_LENGTH = 12
 
 const FormUserConfirm = () => {
   // eslint-disable-next-line @typescript-eslint/unbound-method
diff --git a/sites/public/cypress/e2e/account/account.spec.ts b/sites/public/cypress/e2e/account/account.spec.ts
new file mode 100644
index 0000000000..afcf94b4ce
--- /dev/null
+++ b/sites/public/cypress/e2e/account/account.spec.ts
@@ -0,0 +1,63 @@
+import { publicUser, updatedPublicUser } from "../../mockData/userData"
+
+describe("User accounts", () => {
+  it("should allow users to update their account information", () => {
+    cy.visit("/sign-in")
+    cy.signIn(publicUser.email, publicUser.password)
+
+    // Assert that a user's data shows up on their settings page
+    cy.getByID("account-dashboard-settings").click()
+    cy.getByTestId("loading-overlay").should("not.exist")
+    cy.getByTestId("account-first-name").should("have.value", publicUser.firstName)
+    cy.getByTestId("account-middle-name").should("have.value", publicUser.middleName)
+    cy.getByTestId("account-last-name").should("have.value", publicUser.lastName)
+    cy.getByTestId("dob-field-month").should("have.value", publicUser.birthMonth)
+    cy.getByTestId("dob-field-day").should("have.value", publicUser.birthDay)
+    cy.getByTestId("dob-field-year").should("have.value", publicUser.birthYear)
+    cy.getByTestId("account-email").should("have.value", publicUser.email)
+
+    // Change the name fields
+    cy.getByTestId("account-first-name").clear().type(updatedPublicUser.firstName)
+    cy.getByTestId("account-middle-name").clear().type(updatedPublicUser.middleName)
+    cy.getByTestId("account-last-name").clear().type(updatedPublicUser.lastName)
+    cy.getByID("account-submit-name").click()
+    cy.getByTestId("alert-box").contains("Name update successful")
+    cy.get("[aria-label='close alert']").click()
+    cy.getByTestId("alert-box").should("not.exist")
+
+    // Change the birthday field
+    cy.getByTestId("dob-field-month").clear().type(updatedPublicUser.birthMonth)
+    cy.getByTestId("dob-field-day").clear().type(updatedPublicUser.birthDay)
+    cy.getByTestId("dob-field-year").clear().type(updatedPublicUser.birthYear)
+    cy.getByID("account-submit-dob").click()
+    cy.getByTestId("alert-box").contains("Birthdate update successful")
+    cy.get("[aria-label='close alert']").click()
+    cy.getByTestId("alert-box").should("not.exist")
+
+    // Change the password
+    cy.getByTestId("account-current-password").type(publicUser.password)
+    cy.getByTestId("account-password").type(updatedPublicUser.password)
+    cy.getByTestId("account-password-confirmation").type(updatedPublicUser.passwordConfirmation)
+    cy.getByID("account-submit-password").click()
+    cy.getByTestId("alert-box").contains("Password update successful")
+    cy.get("[aria-label='close alert']").click()
+    cy.getByTestId("alert-box").should("not.exist")
+
+    cy.visit("/account/edit")
+
+    // Confirm that the data actually updated
+    cy.getByTestId("loading-overlay").should("not.exist")
+    cy.getByTestId("account-first-name").should("have.value", updatedPublicUser.firstName)
+    cy.getByTestId("account-middle-name").should("have.value", updatedPublicUser.middleName)
+    cy.getByTestId("account-last-name").should("have.value", updatedPublicUser.lastName)
+    cy.getByTestId("dob-field-month").should("have.value", updatedPublicUser.birthMonth)
+    cy.getByTestId("dob-field-day").should("have.value", updatedPublicUser.birthDay)
+    cy.getByTestId("dob-field-year").should("have.value", updatedPublicUser.birthYear)
+
+    cy.signOut()
+
+    // Confirm that the new password works
+    cy.visit("/sign-in")
+    cy.signIn(updatedPublicUser.email, updatedPublicUser.password)
+  })
+})
diff --git a/sites/public/cypress/mockData/applicationData.ts b/sites/public/cypress/mockData/applicationData.ts
index ac6deda635..0cb45fc91e 100644
--- a/sites/public/cypress/mockData/applicationData.ts
+++ b/sites/public/cypress/mockData/applicationData.ts
@@ -7,6 +7,8 @@ import {
   YesNoEnum,
   UnitTypeEnum,
   ApplicationMultiselectQuestion,
+  AlternateContactRelationship,
+  HouseholdMemberRelationship,
 } from "@bloom-housing/shared-helpers/src/types/backend-swagger"
 
 const idDefaults = {
@@ -133,7 +135,7 @@ export const ElmVillageApplication: Application = {
   },
   alternateContact: {
     ...idDefaults,
-    type: "other",
+    type: AlternateContactRelationship.other,
     firstName: "Alternate Name",
     lastName: "Alternate Last Name",
     agency: "Agency Name",
@@ -184,7 +186,7 @@ export const ElmVillageApplication: Application = {
         zipCode: "90224",
       },
       sameAddress: YesNoEnum.no,
-      relationship: "spouse",
+      relationship: HouseholdMemberRelationship.spouse,
       workInRegion: YesNoEnum.yes,
     },
   ],
@@ -370,7 +372,7 @@ export const minimalDataApplication: Application = {
   },
   alternateContact: {
     ...idDefaults,
-    type: "dontHave",
+    type: AlternateContactRelationship.noContact,
     firstName: "",
     lastName: "",
     agency: "",
diff --git a/sites/public/cypress/mockData/userData.ts b/sites/public/cypress/mockData/userData.ts
new file mode 100644
index 0000000000..dd802afd1d
--- /dev/null
+++ b/sites/public/cypress/mockData/userData.ts
@@ -0,0 +1,22 @@
+export const publicUser = {
+  email: "public-user@example.com",
+  password: "abcdef",
+  firstName: "First",
+  middleName: "Middle",
+  lastName: "Last",
+  birthDay: "01",
+  birthMonth: "01",
+  birthYear: "1970",
+}
+
+export const updatedPublicUser = {
+  email: "public-user@example.com",
+  password: "Abcdefghijk1!",
+  passwordConfirmation: "Abcdefghijk1!",
+  firstName: "First Updated",
+  middleName: "Middle Updated",
+  lastName: "Last Updated",
+  birthDay: "20",
+  birthMonth: "12",
+  birthYear: "2000",
+}
diff --git a/sites/public/cypress/support/commands.js b/sites/public/cypress/support/commands.js
index ad2f353a30..2cc36a7dc7 100644
--- a/sites/public/cypress/support/commands.js
+++ b/sites/public/cypress/support/commands.js
@@ -9,9 +9,9 @@ import {
   raceCheckboxesOrder,
 } from "./../mockData/applicationData"
 
-Cypress.Commands.add("signIn", () => {
-  cy.get(`[data-testid="sign-in-email-field"]`).type("admin@example.com")
-  cy.get(`[data-testid="sign-in-password-field"]`).type("abcdef")
+Cypress.Commands.add("signIn", (email, password) => {
+  cy.get(`[data-testid="sign-in-email-field"]`).type(email ?? "admin@example.com")
+  cy.get(`[data-testid="sign-in-password-field"]`).type(password ?? "abcdef")
   cy.getByID("sign-in-button").click()
 })
 
@@ -578,7 +578,7 @@ Cypress.Commands.add("step18Summary", (application, verify) => {
     fields.push({ id: val, fieldValue: val })
   }
 
-  if (application.alternateContact.type !== "dontHave") {
+  if (application.alternateContact.type !== "noContact") {
     fields.push({
       id: "app-summary-alternate-name",
       fieldValue: `${application.alternateContact.firstName} ${application.alternateContact.lastName}`,
@@ -682,7 +682,7 @@ Cypress.Commands.add("submitApplication", (listingName, application, signedIn, v
   cy.step1PrimaryApplicantName(application)
   cy.step2PrimaryApplicantAddresses(application)
   cy.step3AlternateContactType(application)
-  if (application.alternateContact.type !== "dontHave") {
+  if (application.alternateContact.type !== "noContact") {
     cy.step4AlternateContactName(application)
     cy.step5AlternateContactInfo(application)
   }
diff --git a/sites/public/cypress/support/helpers.ts b/sites/public/cypress/support/helpers.ts
index da8b40343b..e0c5c14239 100644
--- a/sites/public/cypress/support/helpers.ts
+++ b/sites/public/cypress/support/helpers.ts
@@ -70,7 +70,7 @@ export const getListingIncome = (): GetIncomeReturn => {
 }
 
 export const updatePreferredUnits = ({ config, listing }: UpdatePreferredUnitsProps) => {
-  const firstUnitType = listing.units[0].unitType
+  const firstUnitType = listing.units[0].unitTypes
   config.preferredUnit = [{ id: firstUnitType?.id }]
 
   return config
diff --git a/sites/public/cypress/support/index.d.ts b/sites/public/cypress/support/index.d.ts
index 8eeaaf44c0..0f188f656a 100644
--- a/sites/public/cypress/support/index.d.ts
+++ b/sites/public/cypress/support/index.d.ts
@@ -11,7 +11,7 @@ declare namespace Cypress {
     getPhoneFieldByTestId(testId: string): Chainable<Element>
     goNext(): Chainable<Element>
     isNextRouteValid(currentStep: string, skip?: number): Chainable
-    signIn(): Chainable
+    signIn(email?: string, password?: string): Chainable
     signOut(): Chainable
     step1PrimaryApplicantName(application: Application): Chainable
     step2PrimaryApplicantAddresses(application: Application): Chainable
diff --git a/sites/public/src/components/shared/FormSummaryDetails.tsx b/sites/public/src/components/shared/FormSummaryDetails.tsx
index 30174b49c5..a42d015d5b 100644
--- a/sites/public/src/components/shared/FormSummaryDetails.tsx
+++ b/sites/public/src/components/shared/FormSummaryDetails.tsx
@@ -78,8 +78,6 @@ const FormSummaryDetails = ({
         return application.alternateContact.otherType
       case "caseManager":
         return application.alternateContact.agency
-      case "":
-        return ""
       default:
         return t(`application.alternateContact.type.options.${application.alternateContact.type}`)
     }
@@ -291,69 +289,66 @@ const FormSummaryDetails = ({
         )}
       </Card.Section>
 
-      {application.alternateContact.type !== "" &&
-        application.alternateContact.type !== "noContact" && (
-          <>
-            <Card.Header className={styles["summary-header"]}>
-              <Heading priority={3} size="xl" className="font-serif font-normal">
-                {t("application.alternateContact.type.label")}
-              </Heading>
-              {editMode && !validationError && (
-                <Link href="/applications/contact/alternate-contact-type">{t("t.edit")}</Link>
-              )}
-            </Card.Header>
-
-            <Card.Section className={styles["summary-section"]}>
-              <p className={styles["summary-note-text"]}>
-                {t(`application.alternateContact.type.description`)}
-              </p>
+      {application.alternateContact.type && application.alternateContact.type !== "noContact" && (
+        <>
+          <Card.Header className={styles["summary-header"]}>
+            <Heading priority={3} size="xl" className="font-serif font-normal">
+              {t("application.alternateContact.type.label")}
+            </Heading>
+            {editMode && !validationError && (
+              <Link href="/applications/contact/alternate-contact-type">{t("t.edit")}</Link>
+            )}
+          </Card.Header>
+
+          <Card.Section className={styles["summary-section"]}>
+            <p className={styles["summary-note-text"]}>
+              {t(`application.alternateContact.type.description`)}
+            </p>
+            <FieldValue
+              testId={"app-summary-alternate-name"}
+              id="alternateName"
+              label={t("t.name")}
+              helpText={alternateContactName()}
+              className={styles["summary-value"]}
+            >
+              {application.alternateContact.firstName} {application.alternateContact.lastName}
+            </FieldValue>
+
+            {application.alternateContact.emailAddress && (
               <FieldValue
-                testId={"app-summary-alternate-name"}
-                id="alternateName"
-                label={t("t.name")}
-                helpText={alternateContactName()}
+                testId={"app-summary-alternate-email"}
+                id="alternateEmail"
+                label={t("t.email")}
                 className={styles["summary-value"]}
               >
-                {application.alternateContact.firstName} {application.alternateContact.lastName}
+                {application.alternateContact.emailAddress}
               </FieldValue>
+            )}
 
-              {application.alternateContact.emailAddress && (
-                <FieldValue
-                  testId={"app-summary-alternate-email"}
-                  id="alternateEmail"
-                  label={t("t.email")}
-                  className={styles["summary-value"]}
-                >
-                  {application.alternateContact.emailAddress}
-                </FieldValue>
-              )}
-
-              {application.alternateContact.phoneNumber && (
-                <FieldValue
-                  testId={"app-summary-alternate-phone"}
-                  id="alternatePhone"
-                  label={t("t.phone")}
-                  className={styles["summary-value"]}
-                >
-                  {application.alternateContact.phoneNumber}
-                </FieldValue>
-              )}
+            {application.alternateContact.phoneNumber && (
+              <FieldValue
+                testId={"app-summary-alternate-phone"}
+                id="alternatePhone"
+                label={t("t.phone")}
+                className={styles["summary-value"]}
+              >
+                {application.alternateContact.phoneNumber}
+              </FieldValue>
+            )}
 
-              {Object.values(application.alternateContact.address).some(
-                (value) => value !== ""
-              ) && (
-                <FieldValue
-                  testId={"app-summary-alternate-mailing-address"}
-                  id="alternateMailingAddress"
-                  label={t("application.contact.address")}
-                  className={styles["summary-value"]}
-                >
-                  <MultiLineAddress address={application.alternateContact.address} />
-                </FieldValue>
-              )}
-            </Card.Section>
-          </>
-        )}
+            {Object.values(application.alternateContact.address).some((value) => value !== "") && (
+              <FieldValue
+                testId={"app-summary-alternate-mailing-address"}
+                id="alternateMailingAddress"
+                label={t("application.contact.address")}
+                className={styles["summary-value"]}
+              >
+                <MultiLineAddress address={application.alternateContact.address} />
+              </FieldValue>
+            )}
+          </Card.Section>
+        </>
+      )}
 
       {application.householdSize > 1 && (
         <>
diff --git a/sites/public/src/pages/account/dashboard.tsx b/sites/public/src/pages/account/dashboard.tsx
index a6489fa9ad..c21467c615 100644
--- a/sites/public/src/pages/account/dashboard.tsx
+++ b/sites/public/src/pages/account/dashboard.tsx
@@ -92,7 +92,12 @@ function Dashboard(props: DashboardProps) {
                     headingPriority={2}
                   >
                     <Card.Section>
-                      <Button size="sm" href={"/account/edit"} variant="primary-outlined">
+                      <Button
+                        size="sm"
+                        href={"/account/edit"}
+                        variant="primary-outlined"
+                        id={"account-dashboard-settings"}
+                      >
                         {t("account.accountSettingsUpdate")}
                       </Button>
                     </Card.Section>
diff --git a/sites/public/src/pages/account/edit.tsx b/sites/public/src/pages/account/edit.tsx
index 2504bdfd69..b448ccd9da 100644
--- a/sites/public/src/pages/account/edit.tsx
+++ b/sites/public/src/pages/account/edit.tsx
@@ -14,6 +14,7 @@ import {
   AlertTypes,
   DOBField,
   DOBFieldValues,
+  LoadingOverlay,
 } from "@bloom-housing/ui-components"
 import { Button, Card } from "@bloom-housing/ui-seeds"
 import Link from "next/link"
@@ -36,9 +37,36 @@ type AlertMessage = {
 }
 
 const Edit = () => {
-  /* Form Handler */
   // eslint-disable-next-line @typescript-eslint/unbound-method
-  const { register, handleSubmit, errors, watch } = useForm()
+  const {
+    register: nameRegister,
+    formState: { errors: nameErrors },
+    handleSubmit: nameHandleSubmit,
+  } = useForm()
+
+  // eslint-disable-next-line @typescript-eslint/unbound-method
+  const {
+    register: dobRegister,
+    formState: { errors: dobErrors },
+    handleSubmit: dobHandleSubmit,
+    watch: dobWatch,
+  } = useForm()
+
+  // eslint-disable-next-line @typescript-eslint/unbound-method
+  const {
+    register: emailRegister,
+    formState: { errors: emailErrors },
+    handleSubmit: emailHandleSubmit,
+  } = useForm()
+
+  // eslint-disable-next-line @typescript-eslint/unbound-method
+  const {
+    register: pwdRegister,
+    formState: { errors: pwdErrors },
+    handleSubmit: pwdHandleSubmit,
+    watch: pwdWatch,
+  } = useForm()
+
   const { profile, userService } = useContext(AuthContext)
   const [passwordAlert, setPasswordAlert] = useState<AlertMessage>()
   const [nameAlert, setNameAlert] = useState<AlertMessage>()
@@ -48,10 +76,12 @@ const Edit = () => {
   const [birthdateLoading, setBirthdateLoading] = useState(false)
   const [emailLoading, setEmailLoading] = useState(false)
   const [passwordLoading, setPasswordLoading] = useState(false)
+  const [user, setUser] = useState(null)
+  const [loading, setLoading] = useState(true)
 
-  const MIN_PASSWORD_LENGTH = 8
+  const MIN_PASSWORD_LENGTH = 12
   const password = useRef({})
-  password.current = watch("password", "")
+  password.current = pwdWatch("password", "")
 
   useEffect(() => {
     if (profile) {
@@ -60,8 +90,17 @@ const Edit = () => {
         pageTitle: "Account Settings",
         status: UserStatus.LoggedIn,
       })
+      const getUser = async () => {
+        const user = await userService.retrieve({ id: profile.id }).catch((err) => {
+          console.error(`Error fetching user`)
+          throw err
+        })
+        setUser(user)
+        setLoading(false)
+      }
+      void getUser()
     }
-  }, [profile])
+  }, [profile, userService])
 
   const onNameSubmit = async (data: {
     firstName: string
@@ -72,9 +111,10 @@ const Edit = () => {
     const { firstName, middleName, lastName } = data
     setNameAlert(null)
     try {
-      await userService.update({
-        body: { ...profile, firstName, middleName, lastName },
+      const newUser = await userService.update({
+        body: { ...user, firstName, middleName, lastName },
       })
+      setUser(newUser)
       setNameAlert({ type: "success", message: `${t("account.settings.alerts.nameSuccess")}` })
       setNameLoading(false)
     } catch (err) {
@@ -89,14 +129,15 @@ const Edit = () => {
     const { dateOfBirth } = data
     setDobAlert(null)
     try {
-      await userService.update({
+      const newUser = await userService.update({
         body: {
-          ...profile,
+          ...user,
           dob: dayjs(
             `${dateOfBirth.birthYear}-${dateOfBirth.birthMonth}-${dateOfBirth.birthDay}`
           ).toDate(),
         },
       })
+      setUser(newUser)
       setDobAlert({ type: "success", message: `${t("account.settings.alerts.dobSuccess")}` })
       setBirthdateLoading(false)
     } catch (err) {
@@ -111,13 +152,14 @@ const Edit = () => {
     const { email } = data
     setEmailAlert(null)
     try {
-      await userService.update({
+      const newUser = await userService.update({
         body: {
-          ...profile,
+          ...user,
           appUrl: window.location.origin,
           newEmail: email,
         },
       })
+      setUser(newUser)
       setEmailAlert({ type: "success", message: `${t("account.settings.alerts.emailSuccess")}` })
       setEmailLoading(false)
     } catch (err) {
@@ -147,9 +189,10 @@ const Edit = () => {
       return
     }
     try {
-      await userService.update({
-        body: { ...profile, password, currentPassword },
+      const newUser = await userService.update({
+        body: { ...user, password, currentPassword },
       })
+      setUser(newUser)
       setPasswordAlert({
         type: "success",
         message: `${t("account.settings.alerts.passwordSuccess")}`,
@@ -179,234 +222,247 @@ const Edit = () => {
           subtitle={t("account.accountSettingsSubtitle")}
           headingPriority={1}
         >
-          <>
-            <Card.Section divider="inset" className={styles["account-card-settings-section"]}>
-              {nameAlert && (
-                <AlertBox
-                  type={nameAlert.type}
-                  onClose={() => setNameAlert(null)}
-                  className="mb-4"
-                  inverted
-                  closeable
-                >
-                  {nameAlert.message}
-                </AlertBox>
-              )}
-              <Form id="update-name" onSubmit={handleSubmit(onNameSubmit)}>
-                <label className={styles["account-settings-label"]} htmlFor="firstName">
-                  {t("application.name.yourName")}
-                </label>
-                <Field
-                  label={t("application.contact.givenName")}
-                  className="my-3"
-                  controlClassName="mt-2"
-                  name="firstName"
-                  error={errors.firstName}
-                  validation={{ maxLength: 64 }}
-                  errorMessage={
-                    errors.firstName?.type === "maxLength"
-                      ? t("errors.maxLength")
-                      : t("errors.firstNameError")
-                  }
-                  register={register}
-                  defaultValue={profile ? profile.firstName : null}
-                />
-
-                <Field
-                  name="middleName"
-                  className="mb-3"
-                  register={register}
-                  defaultValue={profile ? profile?.middleName : null}
-                  label={t("application.name.middleNameOptional")}
-                  error={errors.middleName}
-                  validation={{ maxLength: 64 }}
-                  errorMessage={t("errors.maxLength")}
-                />
-
-                <Field
-                  name="lastName"
-                  placeholder={t("application.name.lastName")}
-                  className="mb-6"
-                  error={errors.lastName}
-                  register={register}
-                  defaultValue={profile ? profile.lastName : null}
-                  label={t("application.contact.familyName")}
-                  validation={{ maxLength: 64 }}
-                  errorMessage={
-                    errors.lastName?.type === "maxLength"
-                      ? t("errors.maxLength")
-                      : t("errors.lastNameError")
-                  }
-                />
-                <Button
-                  type="submit"
-                  size="sm"
-                  variant="primary-outlined"
-                  loadingMessage={nameLoading ? t("t.loading") : undefined}
-                >
-                  {t("account.settings.update")}
-                </Button>
-              </Form>
-            </Card.Section>
-
-            <Card.Section divider="inset" className={styles["account-card-settings-section"]}>
-              {dobAlert && (
-                <AlertBox
-                  type={dobAlert.type}
-                  onClose={() => setDobAlert(null)}
-                  className="mb-4"
-                  inverted
-                  closeable
-                >
-                  {dobAlert.message}
-                </AlertBox>
-              )}
-              <Form id="update-birthdate" onSubmit={handleSubmit(onBirthdateSubmit)}>
-                <DOBField
-                  id="dateOfBirth"
-                  name="dateOfBirth"
-                  register={register}
-                  error={errors?.dateOfBirth}
-                  watch={watch}
-                  validateAge18={true}
-                  required={true}
-                  errorMessage={t("errors.dateOfBirthErrorAge")}
-                  defaultDOB={{
-                    birthDay: profile ? dayjs(new Date(profile.dob)).utc().format("DD") : null,
-                    birthMonth: profile ? dayjs(new Date(profile.dob)).utc().format("MM") : null,
-                    birthYear: profile ? dayjs(new Date(profile.dob)).utc().format("YYYY") : null,
-                  }}
-                  label={t("application.name.yourDateOfBirth")}
-                />
-                <p className={"field-sub-note"}>{t("application.name.dobHelper")}</p>
-                <Button
-                  type="submit"
-                  size="sm"
-                  variant="primary-outlined"
-                  className="mt-6"
-                  loadingMessage={birthdateLoading ? t("t.loading") : undefined}
-                >
-                  {t("account.settings.update")}
-                </Button>
-              </Form>
-            </Card.Section>
-
-            <Card.Section divider="inset" className={styles["account-card-settings-section"]}>
-              {emailAlert && (
-                <AlertBox
-                  type={emailAlert.type}
-                  onClose={() => setEmailAlert(null)}
-                  inverted
-                  closeable
-                  className={"mb-4"}
-                >
-                  {emailAlert.message}
-                </AlertBox>
-              )}
-              <Form id="update-email" onSubmit={handleSubmit(onEmailSubmit)}>
-                <label className={styles["account-settings-label"]} htmlFor="email">
-                  {t("application.name.yourEmailAddress")}
-                </label>
-                <Field
-                  type="email"
-                  name="email"
-                  label={`${t("t.email")}`}
-                  placeholder="example@web.com"
-                  className="mt-3 mb-6"
-                  validation={{ pattern: emailRegex }}
-                  error={errors.email}
-                  errorMessage={`${t("errors.emailAddressError")}`}
-                  register={register}
-                  defaultValue={profile ? profile.email : null}
-                />
-                <Button
-                  type="submit"
-                  size="sm"
-                  variant="primary-outlined"
-                  loadingMessage={emailLoading ? t("t.loading") : undefined}
-                >
-                  {t("account.settings.update")}
-                </Button>
-              </Form>
-            </Card.Section>
-
-            <Card.Section divider="inset" className={styles["account-card-settings-section"]}>
-              {passwordAlert && (
-                <AlertBox
-                  type={passwordAlert.type}
-                  onClose={() => setPasswordAlert(null)}
-                  className="mb-4"
-                  inverted
-                  closeable
-                >
-                  {passwordAlert.message}
-                </AlertBox>
-              )}
-              <Form id="update-password" onSubmit={handleSubmit(onPasswordSubmit)}>
-                <fieldset>
-                  <legend className={styles["account-settings-label"]}>
-                    {t("authentication.createAccount.password")}
-                  </legend>
-                  <p className="field-note mt-2 mb-3">{t("account.settings.passwordRemember")}</p>
-                  <div className={"flex flex-col"}>
-                    <Field
-                      type="password"
-                      name="currentPassword"
-                      label={t("account.settings.currentPassword")}
-                      error={errors.currentPassword}
-                      register={register}
-                      className={"mb-1"}
-                    />
-                    <span className="float-left text-sm font-semibold mt-2">
-                      <Link href="/forgot-password">
-                        {t("authentication.signIn.forgotPassword")}
-                      </Link>
-                    </span>
-                  </div>
+          <LoadingOverlay isLoading={loading}>
+            <>
+              <Card.Section divider="inset" className={styles["account-card-settings-section"]}>
+                {nameAlert && (
+                  <AlertBox
+                    type={nameAlert.type}
+                    onClose={() => setNameAlert(null)}
+                    className="mb-4"
+                    inverted
+                    closeable
+                  >
+                    {nameAlert.message}
+                  </AlertBox>
+                )}
+                <Form id="update-name" onSubmit={nameHandleSubmit(onNameSubmit)}>
+                  <label className={styles["account-settings-label"]} htmlFor="firstName">
+                    {t("application.name.yourName")}
+                  </label>
+                  <Field
+                    label={t("application.contact.givenName")}
+                    className="my-3"
+                    controlClassName="mt-2"
+                    name="firstName"
+                    error={nameErrors.firstName}
+                    validation={{ maxLength: 64 }}
+                    errorMessage={
+                      nameErrors.firstName?.type === "maxLength"
+                        ? t("errors.maxLength")
+                        : t("errors.firstNameError")
+                    }
+                    register={nameRegister}
+                    defaultValue={user ? user.firstName : null}
+                    dataTestId={"account-first-name"}
+                  />
 
                   <Field
-                    type="password"
-                    name="password"
-                    label={t("account.settings.newPassword")}
-                    labelClassName="mt-4"
-                    className="mt-4"
-                    note={t("authentication.createAccount.passwordInfo")}
-                    validation={{
-                      minLength: MIN_PASSWORD_LENGTH,
-                      pattern: passwordRegex,
-                    }}
-                    error={errors.password}
-                    errorMessage={t("authentication.signIn.passwordError")}
-                    register={register}
+                    name="middleName"
+                    className="mb-3"
+                    register={nameRegister}
+                    defaultValue={user ? user?.middleName : null}
+                    label={t("application.name.middleNameOptional")}
+                    error={nameErrors.middleName}
+                    validation={{ maxLength: 64 }}
+                    errorMessage={t("errors.maxLength")}
+                    dataTestId={"account-middle-name"}
                   />
 
                   <Field
-                    type="password"
-                    name="passwordConfirmation"
-                    label={t("account.settings.confirmNewPassword")}
-                    className="mt-4 mb-6"
-                    validation={{
-                      validate: (value) =>
-                        value === password.current ||
-                        t("authentication.createAccount.errors.passwordMismatch"),
+                    name="lastName"
+                    placeholder={t("application.name.lastName")}
+                    className="mb-6"
+                    error={nameErrors.lastName}
+                    register={nameRegister}
+                    defaultValue={user ? user.lastName : null}
+                    label={t("application.contact.familyName")}
+                    validation={{ maxLength: 64 }}
+                    errorMessage={
+                      nameErrors.lastName?.type === "maxLength"
+                        ? t("errors.maxLength")
+                        : t("errors.lastNameError")
+                    }
+                    dataTestId={"account-last-name"}
+                  />
+                  <Button
+                    type="submit"
+                    size="sm"
+                    variant="primary-outlined"
+                    loadingMessage={nameLoading ? t("t.loading") : undefined}
+                    id={"account-submit-name"}
+                  >
+                    {t("account.settings.update")}
+                  </Button>
+                </Form>
+              </Card.Section>
+
+              <Card.Section divider="inset" className={styles["account-card-settings-section"]}>
+                {dobAlert && (
+                  <AlertBox
+                    type={dobAlert.type}
+                    onClose={() => setDobAlert(null)}
+                    className="mb-4"
+                    inverted
+                    closeable
+                  >
+                    {dobAlert.message}
+                  </AlertBox>
+                )}
+                <Form id="update-birthdate" onSubmit={dobHandleSubmit(onBirthdateSubmit)}>
+                  <DOBField
+                    id="dateOfBirth"
+                    name="dateOfBirth"
+                    register={dobRegister}
+                    error={dobErrors?.dateOfBirth}
+                    watch={dobWatch}
+                    validateAge18={true}
+                    required={true}
+                    errorMessage={t("errors.dateOfBirthErrorAge")}
+                    defaultDOB={{
+                      birthDay: user ? dayjs(new Date(user.dob)).utc().format("DD") : null,
+                      birthMonth: user ? dayjs(new Date(user.dob)).utc().format("MM") : null,
+                      birthYear: user ? dayjs(new Date(user.dob)).utc().format("YYYY") : null,
                     }}
-                    error={errors.passwordConfirmation}
-                    errorMessage={t("authentication.createAccount.errors.passwordMismatch")}
-                    register={register}
+                    label={t("application.name.yourDateOfBirth")}
                   />
+                  <p className={"field-sub-note"}>{t("application.name.dobHelper")}</p>
+                  <Button
+                    type="submit"
+                    size="sm"
+                    variant="primary-outlined"
+                    className="mt-6"
+                    loadingMessage={birthdateLoading ? t("t.loading") : undefined}
+                    id={"account-submit-dob"}
+                  >
+                    {t("account.settings.update")}
+                  </Button>
+                </Form>
+              </Card.Section>
 
+              <Card.Section divider="inset" className={styles["account-card-settings-section"]}>
+                {emailAlert && (
+                  <AlertBox
+                    type={emailAlert.type}
+                    onClose={() => setEmailAlert(null)}
+                    inverted
+                    closeable
+                    className={"mb-4"}
+                  >
+                    {emailAlert.message}
+                  </AlertBox>
+                )}
+                <Form id="update-email" onSubmit={emailHandleSubmit(onEmailSubmit)}>
+                  <label className={styles["account-settings-label"]} htmlFor="email">
+                    {t("application.name.yourEmailAddress")}
+                  </label>
+                  <Field
+                    type="email"
+                    name="email"
+                    label={`${t("t.email")}`}
+                    placeholder="example@web.com"
+                    className="mt-3 mb-6"
+                    validation={{ pattern: emailRegex }}
+                    error={emailErrors.email}
+                    errorMessage={`${t("errors.emailAddressError")}`}
+                    register={emailRegister}
+                    defaultValue={user ? user.email : null}
+                    dataTestId={"account-email"}
+                  />
                   <Button
                     type="submit"
                     size="sm"
                     variant="primary-outlined"
-                    loadingMessage={passwordLoading ? t("t.loading") : undefined}
+                    loadingMessage={emailLoading ? t("t.loading") : undefined}
+                    id={"account-submit-email"}
                   >
                     {t("account.settings.update")}
                   </Button>
-                </fieldset>
-              </Form>
-            </Card.Section>
-          </>
+                </Form>
+              </Card.Section>
+
+              <Card.Section divider="inset" className={styles["account-card-settings-section"]}>
+                {passwordAlert && (
+                  <AlertBox
+                    type={passwordAlert.type}
+                    onClose={() => setPasswordAlert(null)}
+                    className="mb-4"
+                    inverted
+                    closeable
+                  >
+                    {passwordAlert.message}
+                  </AlertBox>
+                )}
+                <Form id="update-password" onSubmit={pwdHandleSubmit(onPasswordSubmit)}>
+                  <fieldset>
+                    <legend className={styles["account-settings-label"]}>
+                      {t("authentication.createAccount.password")}
+                    </legend>
+                    <p className="field-note mt-2 mb-3">{t("account.settings.passwordRemember")}</p>
+                    <div className={"flex flex-col"}>
+                      <Field
+                        type="password"
+                        name="currentPassword"
+                        label={t("account.settings.currentPassword")}
+                        error={pwdErrors.currentPassword}
+                        register={pwdRegister}
+                        className={"mb-1"}
+                        dataTestId={"account-current-password"}
+                      />
+                      <span className="float-left text-sm font-semibold mt-2">
+                        <Link href="/forgot-password">
+                          {t("authentication.signIn.forgotPassword")}
+                        </Link>
+                      </span>
+                    </div>
+
+                    <Field
+                      type="password"
+                      name="password"
+                      label={t("account.settings.newPassword")}
+                      labelClassName="mt-4"
+                      className="mt-4"
+                      note={t("authentication.createAccount.passwordInfo")}
+                      validation={{
+                        minLength: MIN_PASSWORD_LENGTH,
+                        pattern: passwordRegex,
+                      }}
+                      error={pwdErrors.password}
+                      errorMessage={t("authentication.signIn.passwordError")}
+                      register={pwdRegister}
+                      dataTestId={"account-password"}
+                    />
+
+                    <Field
+                      type="password"
+                      name="passwordConfirmation"
+                      label={t("account.settings.confirmNewPassword")}
+                      className="mt-4 mb-6"
+                      validation={{
+                        validate: (value) =>
+                          value === password.current ||
+                          t("authentication.createAccount.errors.passwordMismatch"),
+                      }}
+                      error={pwdErrors.passwordConfirmation}
+                      errorMessage={t("authentication.createAccount.errors.passwordMismatch")}
+                      register={pwdRegister}
+                      dataTestId={"account-password-confirmation"}
+                    />
+
+                    <Button
+                      type="submit"
+                      size="sm"
+                      variant="primary-outlined"
+                      loadingMessage={passwordLoading ? t("t.loading") : undefined}
+                      id={"account-submit-password"}
+                    >
+                      {t("account.settings.update")}
+                    </Button>
+                  </fieldset>
+                </Form>
+              </Card.Section>
+            </>
+          </LoadingOverlay>
         </BloomCard>
       </FormsLayout>
     </RequireLogin>