diff --git a/i18n/en-US.yml b/i18n/en-US.yml
index c9047adc0..c15a1b81b 100644
--- a/i18n/en-US.yml
+++ b/i18n/en-US.yml
@@ -363,6 +363,7 @@ components:
     description: The content you requested is not available.
     header: Content not found
   NotificationPrefsPane:
+    devicesRegistered: "{count, plural, one {# device} other {# devices}} registered"
     noDeviceForPush: Register your device using the mobile app to access push notifications.
     notificationChannelPrompt: "Receive notifications about your saved trips via:"
   OTP2ErrorRenderer:
@@ -717,6 +718,11 @@ components:
     confirmDelete: >-
       Are you sure you would like to delete your user account? Once you do so,
       it cannot be recovered.
+    errorUpdatingProfile: Error updating profile.
+    fieldUpdated: This setting has been updated.
+    fields:
+      storeTripHistory: Store trip history
+    updating: Updating
   UserSettings:
     confirmDeletion: >-
       You have recent searches and/or places stored. Disabling storage of recent
diff --git a/i18n/fr.yml b/i18n/fr.yml
index c854ba23b..af03d9b33 100644
--- a/i18n/fr.yml
+++ b/i18n/fr.yml
@@ -378,6 +378,9 @@ components:
     description: Le contenu que vous avez demandé n'est pas disponible.
     header: Contenu introuvable
   NotificationPrefsPane:
+    devicesRegistered: >-
+      {count, plural, one {# appareil enregistré} other {# appareils
+      enregistrés}}
     noDeviceForPush: Inscrivez-vous avec l'application mobile pour accéder à ce paramètre.
     notificationChannelPrompt: "Recevoir des notifications sur vos trajets par :"
   OTP2ErrorRenderer:
@@ -744,6 +747,11 @@ components:
     confirmDelete: >-
       Voulez-vous vraiment supprimer votre compte ? Cette action est
       irréversible.
+    errorUpdatingProfile: Erreur dans la mise à jour de votre profil.
+    fieldUpdated: Ce paramètre a été mis à jour.
+    fields:
+      storeTripHistory: Enregistrement des recherches
+    updating: Mise à jour
   UserSettings:
     confirmDeletion: >-
       Vous avez des recherches et/ou lieux récemment enregistrés qui vont être
diff --git a/i18n/i18n-exceptions.json b/i18n/i18n-exceptions.json
index 60f5855cd..0f3bd1185 100644
--- a/i18n/i18n-exceptions.json
+++ b/i18n/i18n-exceptions.json
@@ -5,6 +5,9 @@
       "sms",
       "push"
     ],
+    "components.UserAccountScreen.fields.*": [
+      "storeTripHistory"
+    ],
     "components.OTP2ErrorRenderer.*.body": [
       "LOCATION_NOT_FOUND",
       "NO_STOPS_IN_RANGE",
diff --git a/lib/actions/ui.js b/lib/actions/ui.js
index 21856fd9b..9db265b8c 100644
--- a/lib/actions/ui.js
+++ b/lib/actions/ui.js
@@ -53,7 +53,7 @@ export const resetSessionTimeout = createAction('RESET_SESSION_TIMEOUT')
  * that preserves the current search or, if
  * replaceSearch is provided (including an empty string), replaces the search
  * when routing to a new URL path.
- * @param  {[type]} url           path to route to
+ * @param  {string} url path to route to
  * @param  {string} [replaceSearch] optional search string to replace current one
  * @param  {func}   [routingMethod] the connected-react-router method to execute (defaults to push).
  */
diff --git a/lib/components/user/existing-account-display.tsx b/lib/components/user/existing-account-display.tsx
index c253b2234..5e80d1fc3 100644
--- a/lib/components/user/existing-account-display.tsx
+++ b/lib/components/user/existing-account-display.tsx
@@ -1,30 +1,38 @@
 import { connect } from 'react-redux'
 import { FormattedMessage, useIntl } from 'react-intl'
+import { FormikProps } from 'formik'
 import React from 'react'
 
+import { AppReduxState } from '../../util/state-types'
+import { TransitModeConfig } from '../../util/config-types'
 import PageTitle from '../util/page-title'
 
+import { EditedUser } from './types'
 import A11yPrefs from './a11y-prefs'
 import BackToTripPlanner from './back-to-trip-planner'
 import DeleteUser from './delete-user'
 import FavoritePlaceList from './places/favorite-place-list'
 import NotificationPrefsPane from './notification-prefs-pane'
-import StackedPaneDisplay from './stacked-pane-display'
+import StackedPanes from './stacked-panes'
 import TermsOfUsePane from './terms-of-use-pane'
 
+interface Props extends FormikProps<EditedUser> {
+  wheelchairEnabled: boolean
+}
+
 /**
  * This component handles the existing account display.
  */
-const ExistingAccountDisplay = (props: {
-  onCancel: () => void
-  wheelchairEnabled: boolean
-}) => {
+const ExistingAccountDisplay = (props: Props) => {
   // The props include Formik props that provide access to the current user data
   // and to its own blur/change/submit event handlers that automate the state.
   // We forward the props to each pane so that their individual controls
   // can be wired to be managed by Formik.
-  const { onCancel, wheelchairEnabled } = props
-  const paneSequence = [
+
+  const { wheelchairEnabled } = props
+  const intl = useIntl()
+
+  const panes = [
     {
       pane: FavoritePlaceList,
       props,
@@ -55,7 +63,6 @@ const ExistingAccountDisplay = (props: {
     }
   ]
 
-  const intl = useIntl()
   // Repeat text from the SubNav component in the title bar for brevity.
   const settings = intl.formatMessage({
     id: 'components.SubNav.settings'
@@ -67,9 +74,8 @@ const ExistingAccountDisplay = (props: {
     <div>
       <BackToTripPlanner />
       <PageTitle title={[settings, myAccount]} />
-      <StackedPaneDisplay
-        onCancel={onCancel}
-        paneSequence={paneSequence}
+      <StackedPanes
+        panes={panes}
         title={
           <FormattedMessage id="components.ExistingAccountDisplay.mainTitle" />
         }
@@ -77,15 +83,12 @@ const ExistingAccountDisplay = (props: {
     </div>
   )
 }
-// TODO: state type
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const mapStateToProps = (state: any) => {
-  const { accessModes } = state.otp.config?.modes
-  const wheelchairEnabled =
-    accessModes &&
-    accessModes.some(
-      (mode: { showWheelchairSetting: boolean }) => mode.showWheelchairSetting
-    )
+
+const mapStateToProps = (state: AppReduxState) => {
+  const { accessModes } = state.otp.config.modes
+  const wheelchairEnabled = accessModes?.some(
+    (mode: TransitModeConfig) => mode.showWheelchairSetting
+  )
   return {
     wheelchairEnabled
   }
diff --git a/lib/components/user/monitored-trip/saved-trip-editor.tsx b/lib/components/user/monitored-trip/saved-trip-editor.tsx
index 83d1af185..2dbd00a1c 100644
--- a/lib/components/user/monitored-trip/saved-trip-editor.tsx
+++ b/lib/components/user/monitored-trip/saved-trip-editor.tsx
@@ -3,7 +3,7 @@ import React, { ComponentType } from 'react'
 
 import BackLink from '../back-link'
 import PageTitle from '../../util/page-title'
-import StackedPaneDisplay from '../stacked-pane-display'
+import StackedPanesWithSave from '../stacked-panes-with-save'
 
 interface Props {
   isCreating: boolean
@@ -50,9 +50,9 @@ const SavedTripEditor = (props: Props): JSX.Element => {
       <>
         <PageTitle title={title} />
         <BackLink />
-        <StackedPaneDisplay
+        <StackedPanesWithSave
           onCancel={onCancel}
-          paneSequence={paneSequence}
+          panes={paneSequence}
           title={title}
         />
       </>
diff --git a/lib/components/user/new-account-wizard.tsx b/lib/components/user/new-account-wizard.tsx
index 8676f5e9c..b0728af10 100644
--- a/lib/components/user/new-account-wizard.tsx
+++ b/lib/components/user/new-account-wizard.tsx
@@ -1,10 +1,11 @@
+import { Form, FormikProps } from 'formik'
 import { FormattedMessage, useIntl } from 'react-intl'
-import { FormikProps } from 'formik'
 import React, { useCallback } from 'react'
+import toast from 'react-hot-toast'
 
 import PageTitle from '../util/page-title'
 
-import { User } from './types'
+import { EditedUser } from './types'
 import AccountSetupFinishPane from './account-setup-finish-pane'
 import FavoritePlaceList from './places/favorite-place-list'
 import NotificationPrefsPane from './notification-prefs-pane'
@@ -16,11 +17,12 @@ import VerifyEmailPane from './verify-email-pane'
 // and to its own blur/change/submit event handlers that automate the state.
 // We forward the props to each pane (via SequentialPaneDisplay) so that their individual controls
 // can be wired to be managed by Formik.
-type FormikUserProps = FormikProps<User>
+type FormikUserProps = FormikProps<EditedUser>
 
 interface Props extends FormikUserProps {
   activePaneId: string
-  onCreate: (value: User) => void
+  onCancel: () => void
+  onCreate: (value: EditedUser) => void
 }
 
 /**
@@ -28,6 +30,7 @@ interface Props extends FormikUserProps {
  */
 const NewAccountWizard = ({
   activePaneId,
+  onCancel, // provided by UserAccountScreen
   onCreate, // provided by UserAccountScreen
   ...formikProps // provided by Formik
 }: Props): JSX.Element => {
@@ -41,20 +44,28 @@ const NewAccountWizard = ({
     }
   }, [onCreate, userData])
 
+  const handleFinish = useCallback(() => {
+    // Display a toast to acknowledge saved changes
+    // (although in reality, changes quietly took effect in previous screens).
+    toast.success(intl.formatMessage({ id: 'actions.user.preferencesSaved' }))
+
+    onCancel && onCancel()
+  }, [intl, onCancel])
+
   if (activePaneId === 'verify') {
     const verifyEmail = intl.formatMessage({
       id: 'components.NewAccountWizard.verify'
     })
     return (
-      <>
+      <Form id="user-settings-form" noValidate>
         <PageTitle title={verifyEmail} />
         <h1>{verifyEmail}</h1>
         <VerifyEmailPane {...formikProps} />
-      </>
+      </Form>
     )
   }
 
-  const { hasConsentedToTerms, notificationChannel = 'email' } = userData
+  const { hasConsentedToTerms, notificationChannel = ['email'] } = userData
   const createNewAccount = intl.formatMessage({
     id: 'components.NewAccountWizard.createNewAccount'
   })
@@ -72,7 +83,7 @@ const NewAccountWizard = ({
     {
       id: 'notifications',
       invalid:
-        notificationChannel === 'sms' &&
+        notificationChannel.includes('sms') &&
         (!userData.phoneNumber || !userData.isPhoneNumberVerified),
       invalidMessage: intl.formatMessage({
         id: 'components.PhoneNumberEditor.invalidPhone'
@@ -93,14 +104,15 @@ const NewAccountWizard = ({
   ]
 
   return (
-    <>
+    <Form id="user-settings-form" noValidate>
       <PageTitle title={createNewAccount} />
       <SequentialPaneDisplay
         activePaneId={activePaneId}
+        onFinish={handleFinish}
         paneProps={formikProps}
         panes={paneSequence}
       />
-    </>
+    </Form>
   )
 }
 
diff --git a/lib/components/user/notification-prefs-pane.tsx b/lib/components/user/notification-prefs-pane.tsx
index 67f3fb091..12eeee8f9 100644
--- a/lib/components/user/notification-prefs-pane.tsx
+++ b/lib/components/user/notification-prefs-pane.tsx
@@ -56,6 +56,7 @@ const NotificationOption = styled(ListGroupItem)`
  */
 const NotificationPrefsPane = ({
   allowedNotificationChannels,
+  handleChange, // Formik or custom handler
   onRequestPhoneVerificationCode,
   onSendPhoneVerificationCode,
   phoneFormatOptions,
@@ -70,8 +71,6 @@ const NotificationPrefsPane = ({
       </legend>
       <ListGroup>
         {allowedNotificationChannels.map((type) => {
-          // TODO: If removing the Save/Cancel buttons on the account screen,
-          // persist changes immediately when onChange is triggered.
           const inputId = `notification-channel-${type}`
           const inputDescriptionId = `${inputId}-description`
           return (
@@ -79,10 +78,12 @@ const NotificationPrefsPane = ({
               <span>
                 <Field
                   aria-describedby={inputDescriptionId}
-                  // TODO: Check this condition.
                   disabled={type === 'push' && !pushDevices}
                   id={inputId}
                   name="notificationChannel"
+                  // Override onChange explicitly to use the custom one for existing accounts.
+                  // (The Formik's one will still be used for new accounts.)
+                  onChange={handleChange}
                   type="checkbox"
                   value={type}
                 />
@@ -105,8 +106,12 @@ const NotificationPrefsPane = ({
                 ) : (
                   <span id={inputDescriptionId}>
                     {pushDevices ? (
-                      // TODO: i18n
-                      `${pushDevices} devices registered`
+                      <FormattedMessage
+                        id="components.NotificationPrefsPane.devicesRegistered"
+                        values={{
+                          count: pushDevices
+                        }}
+                      />
                     ) : (
                       <FormattedMessage id="components.NotificationPrefsPane.noDeviceForPush" />
                     )}
diff --git a/lib/components/user/sequential-pane-display.tsx b/lib/components/user/sequential-pane-display.tsx
index e41a953b7..9f2df97bf 100644
--- a/lib/components/user/sequential-pane-display.tsx
+++ b/lib/components/user/sequential-pane-display.tsx
@@ -21,6 +21,7 @@ export interface PaneProps {
 
 interface OwnProps {
   activePaneId: string
+  onFinish?: () => void
   panes: PaneProps[]
 }
 
@@ -57,7 +58,7 @@ class SequentialPaneDisplay<T> extends Component<Props<T>> {
   }
 
   _handleToNextPane = async (e: MouseEvent<Button>) => {
-    const { activePane, activePaneIndex, panes } = this.props
+    const { activePane, activePaneIndex, onFinish, panes } = this.props
     const { invalid, invalidMessage } = activePane
 
     if (activePaneIndex < panes.length - 1) {
@@ -75,8 +76,10 @@ class SequentialPaneDisplay<T> extends Component<Props<T>> {
         }
         this._routeTo(nextId)
       }
+      this._focusHeader()
+    } else if (onFinish) {
+      onFinish()
     }
-    this._focusHeader()
   }
 
   _handleToPrevPane = () => {
diff --git a/lib/components/user/stacked-pane-display.tsx b/lib/components/user/stacked-panes-with-save.tsx
similarity index 72%
rename from lib/components/user/stacked-pane-display.tsx
rename to lib/components/user/stacked-panes-with-save.tsx
index 2d27bbe75..b7970ff01 100644
--- a/lib/components/user/stacked-pane-display.tsx
+++ b/lib/components/user/stacked-panes-with-save.tsx
@@ -3,13 +3,11 @@ import React, { useEffect, useState } from 'react'
 
 import { InlineLoading } from '../narrative/loading'
 
-import { PageHeading, StackedPaneContainer } from './styled'
 import FormNavigationButtons from './form-navigation-buttons'
+import StackedPanes, { Props as StackedPanesProps } from './stacked-panes'
 
-type Props = {
+interface Props extends StackedPanesProps {
   onCancel: () => void
-  paneSequence: any[]
-  title?: string | JSX.Element
 }
 
 /**
@@ -17,9 +15,9 @@ type Props = {
  *
  * TODO: add types once Pane type exists
  */
-const StackedPaneDisplay = ({
+const StackedPanesWithSave = ({
   onCancel,
-  paneSequence,
+  panes,
   title
 }: Props): JSX.Element => {
   // Create indicator of if cancel button was clicked so that child components can know
@@ -28,22 +26,11 @@ const StackedPaneDisplay = ({
 
   useEffect(() => {
     setButtonClicked('')
-  }, [paneSequence])
+  }, [panes])
 
   return (
     <>
-      {title && <PageHeading>{title}</PageHeading>}
-      {paneSequence.map(
-        ({ hidden, pane: Pane, props, title }, index) =>
-          !hidden && (
-            <StackedPaneContainer key={index}>
-              <h3>{title}</h3>
-              <div>
-                <Pane canceled={isBeingCanceled} {...props} />
-              </div>
-            </StackedPaneContainer>
-          )
-      )}
+      <StackedPanes canceling={isBeingCanceled} panes={panes} title={title} />
 
       <FormNavigationButtons
         backButton={{
@@ -78,4 +65,4 @@ const StackedPaneDisplay = ({
     </>
   )
 }
-export default StackedPaneDisplay
+export default StackedPanesWithSave
diff --git a/lib/components/user/stacked-panes.tsx b/lib/components/user/stacked-panes.tsx
new file mode 100644
index 000000000..e555cd507
--- /dev/null
+++ b/lib/components/user/stacked-panes.tsx
@@ -0,0 +1,38 @@
+import React from 'react'
+
+import { PageHeading, StackedPaneContainer } from './styled'
+
+export interface PaneAttributes {
+  hidden?: boolean
+  pane: React.ElementType
+  props?: any
+  title?: string | JSX.Element
+}
+
+export interface Props {
+  canceling?: boolean
+  panes: PaneAttributes[]
+  title: string | JSX.Element
+}
+
+/**
+ * Stacked layout of panes, each supporting a title and a cancel state.
+ */
+const StackedPanes = ({ canceling, panes, title }: Props): JSX.Element => (
+  <>
+    <PageHeading>{title}</PageHeading>
+    {panes.map(
+      ({ hidden, pane: Pane, props, title }, index) =>
+        !hidden && (
+          <StackedPaneContainer key={index}>
+            {title && <h3>{title}</h3>}
+            <div>
+              <Pane canceled={canceling} {...props} />
+            </div>
+          </StackedPaneContainer>
+        )
+    )}
+  </>
+)
+
+export default StackedPanes
diff --git a/lib/components/user/types.ts b/lib/components/user/types.ts
index 4360052d9..cc375710d 100644
--- a/lib/components/user/types.ts
+++ b/lib/components/user/types.ts
@@ -26,3 +26,7 @@ export interface User {
   savedLocations?: UserSavedLocation[]
   storeTripHistory?: boolean
 }
+
+export type EditedUser = Omit<User, 'notificationChannel'> & {
+  notificationChannel: string[]
+}
diff --git a/lib/components/user/user-account-screen.js b/lib/components/user/user-account-screen.js
deleted file mode 100644
index b99cbf794..000000000
--- a/lib/components/user/user-account-screen.js
+++ /dev/null
@@ -1,196 +0,0 @@
-// TODO: typescript
-/* eslint-disable react/prop-types */
-import * as yup from 'yup'
-import { connect } from 'react-redux'
-import { Form, Formik } from 'formik'
-import { injectIntl } from 'react-intl'
-import { withAuthenticationRequired } from '@auth0/auth0-react'
-import clone from 'clone'
-import React, { Component } from 'react'
-import toast from 'react-hot-toast'
-
-import * as uiActions from '../../actions/ui'
-import * as userActions from '../../actions/user'
-import { CREATE_ACCOUNT_PATH } from '../../util/constants'
-import { RETURN_TO_CURRENT_ROUTE } from '../../util/ui'
-
-import AccountPage from './account-page'
-import ExistingAccountDisplay from './existing-account-display'
-import NewAccountWizard from './new-account-wizard'
-import withLoggedInUserSupport from './with-logged-in-user-support'
-
-// The validation schema for the form fields.
-// FIXME: validationSchema is not really directly used, so the text below is never shown.
-//   Also, this may be removed depending on fate of the Save button on this screen.
-const validationSchema = yup.object({
-  accessibilityRoutingByDefault: yup.boolean(),
-  email: yup.string().email(),
-  hasConsentedToTerms: yup
-    .boolean()
-    .oneOf([true], 'You must agree to the terms to continue.'),
-  savedLocations: yup.array().of(
-    yup.object({
-      address: yup.string(),
-      icon: yup.string(),
-      type: yup.string()
-    })
-  ),
-  storeTripHistory: yup.boolean()
-})
-
-/**
- * This screen handles creating/updating OTP user account settings.
- */
-class UserAccountScreen extends Component {
-  _updateUserPrefs = async (userData, silentOnSucceed = false) => {
-    const { createOrUpdateUser, intl } = this.props
-
-    // Convert the notification attributes from array to comma-separated string.
-    const passedUserData = clone(userData)
-    const { notificationChannel } = passedUserData
-    if (
-      typeof notificationChannel === 'object' &&
-      typeof notificationChannel.length === 'number'
-    ) {
-      passedUserData.notificationChannel = notificationChannel.join(',')
-    }
-    const result = await createOrUpdateUser(passedUserData, intl)
-
-    // If needed, display a toast notification on success.
-    if (result === userActions.UserActionResult.SUCCESS && !silentOnSucceed) {
-      toast.success(intl.formatMessage({ id: 'actions.user.preferencesSaved' }))
-    }
-  }
-
-  /**
-   * Silently persists the user data upon accepting terms.
-   * Creating the user record before the user finishes the account creation steps
-   * is required by the middleware in order to perform phone verification.
-   *
-   * @param {*} userData The user data state to persist.
-   * @returns The new user id the the caller can use.
-   */
-  _handleCreateNewUser = (userData) => {
-    this._updateUserPrefs(userData, true)
-  }
-
-  _handleDeleteUser = (evt) => {
-    const { auth0, deleteUser, intl, loggedInUser } = this.props
-    // Avoid triggering onsubmit with formik (which would result in a save user
-    // call).
-    evt.preventDefault()
-    if (
-      // eslint-disable-next-line no-restricted-globals
-      confirm(
-        intl.formatMessage({ id: 'components.UserAccountScreen.confirmDelete' })
-      )
-    ) {
-      deleteUser(loggedInUser, auth0, intl)
-    }
-  }
-
-  _handleExit = () => {
-    // On exit, route to default search route.
-    this.props.routeTo('/')
-  }
-
-  _handleRequestPhoneVerificationCode = (newPhoneNumber) => {
-    const { intl, requestPhoneVerificationSms } = this.props
-    requestPhoneVerificationSms(newPhoneNumber, intl)
-  }
-
-  /**
-   * Save changes and return to the planner.
-   * @param {*} userData The user edited state to be saved, provided by Formik.
-   */
-  _handleSaveAndExit = async (userData) => {
-    await this._updateUserPrefs(userData)
-    this._handleExit()
-  }
-
-  _handleSendPhoneVerificationCode = async ({ validationCode: code }) => {
-    const { intl, verifyPhoneNumber } = this.props
-    await verifyPhoneNumber(code, intl)
-  }
-
-  render() {
-    const { auth0, isCreating, itemId, loggedInUser } = this.props
-    const DisplayComponent = isCreating
-      ? NewAccountWizard
-      : ExistingAccountDisplay
-    const loggedInUserWithNotificationArray = {
-      ...loggedInUser,
-      notificationChannel: loggedInUser.notificationChannel.split(',')
-    }
-    return (
-      <AccountPage subnav={!isCreating}>
-        <Formik
-          // Force Formik to reload initialValues when we update them (e.g. user gets assigned an id).
-          enableReinitialize
-          initialValues={loggedInUserWithNotificationArray}
-          onSubmit={this._handleSaveAndExit}
-          // Avoid validating on change as it is annoying. Validating on blur is enough.
-          validateOnBlur
-          validateOnChange={false}
-          validationSchema={validationSchema}
-        >
-          {
-            // Formik props provide access to the current user data state and errors,
-            // (in props.values, props.touched, props.errors)
-            // and to its own blur/change/submit event handlers that automate the state.
-            // We pass the Formik props below to the components rendered so that individual controls
-            // can be wired to be managed by Formik.
-            (formikProps) => (
-              <Form id="user-settings-form" noValidate>
-                <DisplayComponent
-                  {...formikProps}
-                  activePaneId={itemId}
-                  emailVerified={auth0.user.email_verified}
-                  loggedInUser={loggedInUser}
-                  onCancel={this._handleExit}
-                  onCreate={this._handleCreateNewUser}
-                  onDelete={this._handleDeleteUser}
-                  onRequestPhoneVerificationCode={
-                    this._handleRequestPhoneVerificationCode
-                  }
-                  onSendPhoneVerificationCode={
-                    this._handleSendPhoneVerificationCode
-                  }
-                />
-              </Form>
-            )
-          }
-        </Formik>
-      </AccountPage>
-    )
-  }
-}
-
-// connect to the redux store
-
-const mapStateToProps = (state, ownProps) => {
-  const { params, url } = ownProps.match
-  const isCreating = url.startsWith(CREATE_ACCOUNT_PATH)
-  const { step } = params
-  return {
-    isCreating,
-    itemId: step,
-    loggedInUser: state.user.loggedInUser
-  }
-}
-
-const mapDispatchToProps = {
-  createOrUpdateUser: userActions.createOrUpdateUser,
-  deleteUser: userActions.deleteUser,
-  requestPhoneVerificationSms: userActions.requestPhoneVerificationSms,
-  routeTo: uiActions.routeTo,
-  verifyPhoneNumber: userActions.verifyPhoneNumber
-}
-
-export default withLoggedInUserSupport(
-  withAuthenticationRequired(
-    connect(mapStateToProps, mapDispatchToProps)(injectIntl(UserAccountScreen)),
-    RETURN_TO_CURRENT_ROUTE
-  ),
-  true
-)
diff --git a/lib/components/user/user-account-screen.tsx b/lib/components/user/user-account-screen.tsx
new file mode 100644
index 000000000..f5af2d47c
--- /dev/null
+++ b/lib/components/user/user-account-screen.tsx
@@ -0,0 +1,293 @@
+import {
+  Auth0ContextInterface,
+  withAuthenticationRequired
+} from '@auth0/auth0-react'
+import { connect } from 'react-redux'
+import { Formik, FormikProps } from 'formik'
+import { injectIntl, IntlShape } from 'react-intl'
+import { RouteComponentProps } from 'react-router'
+import clone from 'clone'
+import React, { ChangeEvent, Component, FormEvent } from 'react'
+import styled, { css } from 'styled-components'
+import toast from 'react-hot-toast'
+
+import * as uiActions from '../../actions/ui'
+import * as userActions from '../../actions/user'
+import { AppReduxState } from '../../util/state-types'
+import { CREATE_ACCOUNT_PATH } from '../../util/constants'
+import { RETURN_TO_CURRENT_ROUTE } from '../../util/ui'
+import { toastSuccess } from '../util/toasts'
+
+import { EditedUser, User } from './types'
+import AccountPage from './account-page'
+import ExistingAccountDisplay from './existing-account-display'
+import NewAccountWizard from './new-account-wizard'
+import withLoggedInUserSupport from './with-logged-in-user-support'
+
+interface Props {
+  auth0: Auth0ContextInterface
+  createOrUpdateUser: (user: User, intl: IntlShape) => Promise<number>
+  deleteUser: (
+    user: User,
+    auth0: Auth0ContextInterface,
+    intl: IntlShape
+  ) => void
+  intl: IntlShape
+  isCreating: boolean
+  itemId: string
+  loggedInUser: User
+  requestPhoneVerificationSms: (phoneNum: string, intl: IntlShape) => void
+  routeTo: (to: string) => void
+  verifyPhoneNumber: (code: string, intl: IntlShape) => void
+}
+
+const pendingCss = css`
+  border-radius: 2px;
+  cursor: wait;
+  outline: 1px solid blue;
+  /* This next line enhances the visuals in Chromium (webkit) browsers */
+  outline: 1px solid -webkit-focus-ring-color;
+`
+
+const Wrapper = styled.div`
+  @keyframes dive-in {
+    0% {
+      ${pendingCss}
+      outline-offset: 2px;
+    }
+    100% {
+      ${pendingCss}
+      outline-offset: -8px;
+    }
+  }
+`
+/**
+ * This screen handles creating/updating OTP user account settings.
+ */
+class UserAccountScreen extends Component<Props> {
+  _updateUserPrefs = async (userData: EditedUser, silentOnSucceed = false) => {
+    const { createOrUpdateUser, intl } = this.props
+
+    // Convert the notification attributes from array to comma-separated string.
+    const passedUserData = {
+      ...clone(userData),
+      notificationChannel: userData.notificationChannel.join(',')
+    }
+
+    const result = await createOrUpdateUser(passedUserData, intl)
+
+    // If needed, display a toast notification on success.
+    if (result === userActions.UserActionResult.SUCCESS && !silentOnSucceed) {
+      toast.success(intl.formatMessage({ id: 'actions.user.preferencesSaved' }))
+    }
+
+    return result
+  }
+
+  /**
+   * Silently persists the user data upon accepting terms.
+   * Creating the user record before the user finishes the account creation steps
+   * is required by the middleware in order to perform phone verification.
+   *
+   * @param {*} userData The user data state to persist.
+   * @returns The new user id the the caller can use.
+   */
+  _handleCreateNewUser = (userData: EditedUser) => {
+    this._updateUserPrefs(userData, true)
+  }
+
+  _handleDeleteUser = (evt: FormEvent) => {
+    const { auth0, deleteUser, intl, loggedInUser } = this.props
+    // Avoid triggering onsubmit with formik (which would result in a save user
+    // call).
+    evt.preventDefault()
+    if (
+      window.confirm(
+        intl.formatMessage({ id: 'components.UserAccountScreen.confirmDelete' })
+      )
+    ) {
+      deleteUser(loggedInUser, auth0, intl)
+    }
+  }
+
+  _handleExit = () => {
+    // On exit, route to default search route.
+    this.props.routeTo('/')
+  }
+
+  _handleRequestPhoneVerificationCode = (newPhoneNumber: string) => {
+    const { intl, requestPhoneVerificationSms } = this.props
+    requestPhoneVerificationSms(newPhoneNumber, intl)
+  }
+
+  _submitForm = async (
+    t: HTMLInputElement,
+    submitForm: () => Promise<void>
+  ) => {
+    const { intl, isCreating } = this.props
+    const firstLabel = t.labels?.[0]
+
+    // Disable input (adds a visual effect) during submission
+    t.disabled = true
+    const initialStyle = t.style.animation
+    t.style.animation = 'dive-in 1s linear infinite'
+    const initialCursor = firstLabel ? firstLabel.style.cursor : ''
+    if (firstLabel) firstLabel.style.cursor = 'wait'
+    const loadingToast = !isCreating
+      ? toast.loading(
+          intl.formatMessage({ id: 'components.UserAccountScreen.updating' })
+        )
+      : undefined
+    try {
+      await submitForm()
+      // On success, display a toast notification for existing accounts.
+      if (!isCreating) {
+        toastSuccess(
+          intl.formatMessage({
+            // Use a summary text for the field, if defined (e.g. to replace long labels),
+            // otherwise, fall back on the first label of the input.
+            defaultMessage: firstLabel?.innerText,
+            id: `components.UserAccountScreen.fields.${t.name}`
+          }),
+          intl.formatMessage({
+            id: 'components.UserAccountScreen.fieldUpdated'
+          }),
+          loadingToast
+        )
+      }
+    } catch {
+      // Remove any toasts before showing alert.
+      toast.remove()
+      alert(
+        intl.formatMessage({
+          id: 'components.UserAccountScreen.errorUpdatingProfile'
+        })
+      )
+    } finally {
+      // Re-enable input (remove visuals) and refocus after submission.
+      if (firstLabel) firstLabel.style.cursor = initialCursor
+      t.disabled = false
+      t.style.animation = initialStyle
+      t.focus()
+    }
+  }
+
+  _handleInputChange =
+    (formikProps: FormikProps<EditedUser>) => (e: ChangeEvent) => {
+      const { handleChange, submitForm, values: userData } = formikProps
+      handleChange(e)
+      const t = e.target as HTMLInputElement
+      const shouldNotSubmit =
+        t.name === 'hasConsentedToTerms' ||
+        (t.name === 'storeTripHistory' && !userData.id)
+      if (!shouldNotSubmit) {
+        // Submit the form right away after applying changes to update the user profile.
+        // Separate the submission part because this handler must not be async for type check.
+        this._submitForm(t, submitForm)
+      }
+    }
+
+  /**
+   * Persist changes immediately (for existing account display)
+   * @param {*} userData The user edited state to be saved, provided by Formik.
+   */
+  _handleFieldChange = async (userData: EditedUser) => {
+    // Turn off the default toast, so we can display a toast per field.
+    const result = await this._updateUserPrefs(userData, true)
+    if (result !== userActions.UserActionResult.SUCCESS) {
+      throw new Error('User update failed.')
+    }
+  }
+
+  _handleSendPhoneVerificationCode = async ({
+    validationCode: code
+  }: {
+    validationCode: string
+  }) => {
+    const { intl, verifyPhoneNumber } = this.props
+    await verifyPhoneNumber(code, intl)
+  }
+
+  render() {
+    const { auth0, isCreating, itemId, loggedInUser } = this.props
+    const DisplayComponent = isCreating
+      ? NewAccountWizard
+      : ExistingAccountDisplay
+    const loggedInUserWithNotificationArray = {
+      ...loggedInUser,
+      notificationChannel: loggedInUser.notificationChannel?.split(',') || []
+    }
+    return (
+      <AccountPage subnav={!isCreating}>
+        <Formik
+          // Force Formik to reload initialValues when we update them (e.g. user gets assigned an id).
+          enableReinitialize
+          initialValues={loggedInUserWithNotificationArray}
+          onSubmit={this._handleFieldChange}
+        >
+          {
+            // Formik props provide access to the current user data state and errors,
+            // (in props.values, props.touched, props.errors)
+            // and to its own blur/change/submit event handlers that automate the state.
+            // We pass the Formik props below to the components rendered so that individual controls
+            // can be wired to be managed by Formik.
+            (formikProps) => (
+              <Wrapper>
+                <DisplayComponent
+                  {...formikProps}
+                  activePaneId={itemId}
+                  // @ts-expect-error emailVerified prop used by only one of the DisplayComponent.
+                  emailVerified={auth0.user?.email_verified}
+                  // Use our own handleChange handler that wraps around Formik's.
+                  handleChange={this._handleInputChange(formikProps)}
+                  loggedInUser={loggedInUser}
+                  onCancel={this._handleExit}
+                  onCreate={this._handleCreateNewUser}
+                  onDelete={this._handleDeleteUser}
+                  onRequestPhoneVerificationCode={
+                    this._handleRequestPhoneVerificationCode
+                  }
+                  onSendPhoneVerificationCode={
+                    this._handleSendPhoneVerificationCode
+                  }
+                />
+              </Wrapper>
+            )
+          }
+        </Formik>
+      </AccountPage>
+    )
+  }
+}
+
+// connect to the redux store
+
+const mapStateToProps = (
+  state: AppReduxState,
+  ownProps: RouteComponentProps<{ step: string }>
+) => {
+  const { params, url } = ownProps.match
+  const isCreating = url.startsWith(CREATE_ACCOUNT_PATH)
+  const { step } = params
+  return {
+    isCreating,
+    itemId: step,
+    loggedInUser: state.user.loggedInUser
+  }
+}
+
+const mapDispatchToProps = {
+  createOrUpdateUser: userActions.createOrUpdateUser,
+  deleteUser: userActions.deleteUser,
+  requestPhoneVerificationSms: userActions.requestPhoneVerificationSms,
+  routeTo: uiActions.routeTo,
+  verifyPhoneNumber: userActions.verifyPhoneNumber
+}
+
+export default withLoggedInUserSupport(
+  withAuthenticationRequired(
+    connect(mapStateToProps, mapDispatchToProps)(injectIntl(UserAccountScreen)),
+    RETURN_TO_CURRENT_ROUTE
+  ),
+  true
+)
diff --git a/lib/components/user/with-logged-in-user-support.js b/lib/components/user/with-logged-in-user-support.js
index 204a52d68..9895e6939 100644
--- a/lib/components/user/with-logged-in-user-support.js
+++ b/lib/components/user/with-logged-in-user-support.js
@@ -24,7 +24,7 @@ import AwaitingScreen from './awaiting-screen'
  *   but will display extra functionality if so.
  *   For such components, omit requireLoggedInUser parameter (or set to false).
  *   The wrapped component is shown immediately, and no awaiting screen is displayed while state.user is being retrieved.
- * @param {React.Component} WrappedComponent The component to be wrapped to that uses state.user from the redux store.
+ * @param {React.ComponentType<WithAuth0Props>} WrappedComponent The component to be wrapped to that uses state.user from the redux store.
  * @param {boolean} requireLoggedInUser Whether the wrapped component requires state.user to properly function.
  */
 export default function withLoggedInUserSupport(
diff --git a/lib/components/util/toasts.tsx b/lib/components/util/toasts.tsx
index e1a635453..89f369d95 100644
--- a/lib/components/util/toasts.tsx
+++ b/lib/components/util/toasts.tsx
@@ -8,6 +8,26 @@ import { UserSavedLocation } from '../user/types'
 // Note: the HTML for toasts is rendered outside of the IntlProvider context,
 // so intl.formatMessage and others have to be used instead of <FormattedMessage> tags.
 
+/**
+ * Helper for displaying formatted toasts.
+ */
+export function toastSuccess(
+  title: string,
+  description: string,
+  id?: string
+): void {
+  toast.success(
+    <span>
+      <strong>{title}</strong>
+      <br />
+      {description}
+    </span>,
+    {
+      id
+    }
+  )
+}
+
 /**
  * Helper that will display a toast notification when a place is saved.
  */
@@ -15,13 +35,10 @@ export function toastOnPlaceSaved(
   place: UserSavedLocation,
   intl: IntlShape
 ): void {
-  toast.success(
-    <span>
-      <strong>{getPlaceMainText(place, intl)}</strong>
-      <br />
-      {intl.formatMessage({
-        id: 'actions.user.placeRemembered'
-      })}
-    </span>
+  toastSuccess(
+    getPlaceMainText(place, intl),
+    intl.formatMessage({
+      id: 'actions.user.placeRemembered'
+    })
   )
 }