diff --git a/shared-helpers/package.json b/shared-helpers/package.json
index 59e93c018a6..4d93741b858 100644
--- a/shared-helpers/package.json
+++ b/shared-helpers/package.json
@@ -17,7 +17,7 @@
     "prettier": "prettier --write \"**/*.ts\""
   },
   "dependencies": {
-    "@bloom-housing/ui-components": "13.0.3",
+    "@bloom-housing/ui-components": "13.0.6",
     "@bloom-housing/ui-seeds": "3.3.1",
     "@heroicons/react": "^2.1.1",
     "axios-cookiejar-support": "^5.0.5",
diff --git a/sites/partners/package.json b/sites/partners/package.json
index 7fd32372781..b0bfe4594a0 100644
--- a/sites/partners/package.json
+++ b/sites/partners/package.json
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@bloom-housing/shared-helpers": "^7.7.1",
-    "@bloom-housing/ui-components": "13.0.3",
+    "@bloom-housing/ui-components": "13.0.6",
     "@bloom-housing/ui-seeds": "3.3.1",
     "@heroicons/react": "^2.2.0",
     "@mapbox/mapbox-sdk": "^0.13.0",
diff --git a/sites/public/package.json b/sites/public/package.json
index d7d8f966198..2bd4d2bf794 100644
--- a/sites/public/package.json
+++ b/sites/public/package.json
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@bloom-housing/shared-helpers": "^7.7.1",
-    "@bloom-housing/ui-components": "13.0.3",
+    "@bloom-housing/ui-components": "13.0.6",
     "@bloom-housing/ui-seeds": "3.3.1",
     "@heroicons/react": "^2.1.1",
     "@mapbox/mapbox-sdk": "^0.13.0",
diff --git a/sites/public/src/components/applications/ApplicationMultiselectQuestionStep.tsx b/sites/public/src/components/applications/ApplicationMultiselectQuestionStep.tsx
index d08def9eb90..5e9c5abce6f 100644
--- a/sites/public/src/components/applications/ApplicationMultiselectQuestionStep.tsx
+++ b/sites/public/src/components/applications/ApplicationMultiselectQuestionStep.tsx
@@ -24,8 +24,11 @@ import {
 import FormsLayout from "../../layouts/forms"
 import { useFormConductor } from "../../lib/hooks"
 import { UserStatus } from "../../lib/constants"
+import ApplicationFormLayout, {
+  ApplicationAlertBox,
+  onFormError,
+} from "../../layouts/application-form"
 import { AddressValidationSelection, findValidatedAddress, FoundAddress } from "./ValidateAddress"
-import ApplicationFormLayout from "../../layouts/application-form"
 
 export interface ApplicationMultiselectQuestionStepProps {
   applicationSection: MultiselectQuestionsApplicationSectionEnum
@@ -168,6 +171,10 @@ const ApplicationMultiselectQuestionStep = ({
     conductor.routeToNextOrReturnUrl()
   }
 
+  const onError = () => {
+    onFormError()
+  }
+
   const watchQuestions = watch(allOptionNames)
 
   if (!clientLoaded || !allOptionNames) {
@@ -237,7 +244,7 @@ const ApplicationMultiselectQuestionStep = ({
         swapCommunityTypeWithPrograms
       )} - ${t("listings.apply.applyOnline")} - ${listing?.name}`}
     >
-      <Form onSubmit={handleSubmit(onSubmit)}>
+      <Form onSubmit={handleSubmit(onSubmit, onError)}>
         <ApplicationFormLayout
           listingName={listing?.name}
           heading={
@@ -271,11 +278,7 @@ const ApplicationMultiselectQuestionStep = ({
           }
           conductor={conductor}
         >
-          {!!Object.keys(errors).length && (
-            <AlertBox type="alert" inverted closeable>
-              {t("errors.errorsToResolve")}
-            </AlertBox>
-          )}
+          <ApplicationAlertBox errors={errors} />
 
           <div style={{ display: verifyAddress ? "none" : "block" }} key={question?.id}>
             <CardSection>
diff --git a/sites/public/src/layouts/application-form.tsx b/sites/public/src/layouts/application-form.tsx
index f288da924d7..fafa4526dd9 100644
--- a/sites/public/src/layouts/application-form.tsx
+++ b/sites/public/src/layouts/application-form.tsx
@@ -1,7 +1,8 @@
 import React from "react"
 import Markdown from "markdown-to-jsx"
+import { UseFormMethods } from "react-hook-form"
 import { BloomCard, CustomIconMap } from "@bloom-housing/shared-helpers"
-import { Button, Heading, Icon, Message } from "@bloom-housing/ui-seeds"
+import { Alert, Button, Heading, Icon, Message } from "@bloom-housing/ui-seeds"
 import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card"
 import { t, ProgressNav, StepHeader } from "@bloom-housing/ui-components"
 import ApplicationConductor from "../lib/applications/ApplicationConductor"
@@ -37,6 +38,32 @@ export const LockIcon = ({ locked }: { locked: boolean }) => {
   )
 }
 
+interface ApplicationAlertBoxProps {
+  errors: UseFormMethods["errors"]
+}
+
+export const onFormError = (errorBoxId?: string) => {
+  window.scrollTo(0, 0)
+  document.getElementById(errorBoxId ?? "application-alert-box-wrapper")?.focus()
+}
+
+export const ApplicationAlertBox = (props: ApplicationAlertBoxProps) => {
+  return (
+    <div id="application-alert-box-wrapper" tabIndex={-1}>
+      {Object.entries(props.errors).length > 0 && (
+        <Alert
+          className={styles["message-inside-card"]}
+          variant="alert"
+          fullwidth
+          id={"application-alert-box"}
+        >
+          {t("errors.errorsToResolve")}
+        </Alert>
+      )}
+    </div>
+  )
+}
+
 const ApplicationFormLayout = (props: ApplicationFormLayoutProps) => {
   const getBackLink = (url?: string, onClickFxn?: () => void) => {
     return (
diff --git a/sites/public/src/pages/applications/contact/address.tsx b/sites/public/src/pages/applications/contact/address.tsx
index 242e8e4c47e..bbb9e918e8a 100644
--- a/sites/public/src/pages/applications/contact/address.tsx
+++ b/sites/public/src/pages/applications/contact/address.tsx
@@ -24,8 +24,10 @@ import {
   AddressValidationSelection,
 } from "../../../components/applications/ValidateAddress"
 import { UserStatus } from "../../../lib/constants"
-import ApplicationFormLayout from "../../../layouts/application-form"
-import styles from "../../../layouts/application-form.module.scss"
+import ApplicationFormLayout, {
+  ApplicationAlertBox,
+  onFormError,
+} from "../../../layouts/application-form"
 
 const ApplicationAddress = () => {
   const { profile } = useContext(AuthContext)
@@ -103,7 +105,7 @@ const ApplicationAddress = () => {
     conductor.routeToNextOrReturnUrl()
   }
   const onError = () => {
-    window.scrollTo(0, 0)
+    onFormError()
   }
 
   const noPhone: boolean = watch("applicant.noPhone")
@@ -167,16 +169,7 @@ const ApplicationAddress = () => {
           }}
           conductor={conductor}
         >
-          {Object.entries(errors).length > 0 && (
-            <Alert
-              className={styles["message-inside-card"]}
-              variant="alert"
-              fullwidth
-              id={"application-alert-box"}
-            >
-              {t("errors.errorsToResolve")}
-            </Alert>
-          )}
+          <ApplicationAlertBox errors={errors} />
           <div style={{ display: verifyAddress ? "none" : "block" }}>
             <CardSection divider={"inset"}>
               <fieldset>
diff --git a/sites/public/src/pages/applications/contact/alternate-contact-contact.tsx b/sites/public/src/pages/applications/contact/alternate-contact-contact.tsx
index 096bd3ca5dc..2456fbf5bdb 100644
--- a/sites/public/src/pages/applications/contact/alternate-contact-contact.tsx
+++ b/sites/public/src/pages/applications/contact/alternate-contact-contact.tsx
@@ -2,7 +2,6 @@ import React, { useContext, useEffect } from "react"
 import { useForm } from "react-hook-form"
 import { Field, Form, PhoneField, Select, t } from "@bloom-housing/ui-components"
 import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card"
-import { Alert } from "@bloom-housing/ui-seeds"
 import {
   OnClientSide,
   PageView,
@@ -13,9 +12,12 @@ import {
 } from "@bloom-housing/shared-helpers"
 import { useFormConductor } from "../../../lib/hooks"
 import { UserStatus } from "../../../lib/constants"
-import ApplicationFormLayout, { LockIcon } from "../../../layouts/application-form"
+import ApplicationFormLayout, {
+  ApplicationAlertBox,
+  LockIcon,
+  onFormError,
+} from "../../../layouts/application-form"
 import FormsLayout from "../../../layouts/forms"
-import styles from "../../../layouts/application-form.module.scss"
 
 const ApplicationAlternateContactContact = () => {
   const { profile } = useContext(AuthContext)
@@ -45,7 +47,7 @@ const ApplicationAlternateContactContact = () => {
     conductor.routeToNextOrReturnUrl()
   }
   const onError = () => {
-    window.scrollTo(0, 0)
+    onFormError()
   }
 
   useEffect(() => {
@@ -106,17 +108,7 @@ const ApplicationAlternateContactContact = () => {
           }}
           conductor={conductor}
         >
-          {Object.entries(errors).length > 0 && (
-            <Alert
-              className={styles["message-inside-card"]}
-              variant="alert"
-              fullwidth
-              id={"application-alert-box"}
-            >
-              {t("errors.errorsToResolve")}
-            </Alert>
-          )}
-
+          <ApplicationAlertBox errors={errors} />
           <CardSection divider={"inset"}>
             <label className="text__caps-spaced" htmlFor="phoneNumber">
               <LockIcon locked={isAdvocate} />
diff --git a/sites/public/src/pages/applications/contact/alternate-contact-name.tsx b/sites/public/src/pages/applications/contact/alternate-contact-name.tsx
index 175d9e36d0e..9c590969fd5 100644
--- a/sites/public/src/pages/applications/contact/alternate-contact-name.tsx
+++ b/sites/public/src/pages/applications/contact/alternate-contact-name.tsx
@@ -9,7 +9,11 @@ import FormsLayout from "../../../layouts/forms"
 import { isFeatureFlagOn } from "../../../lib/helpers"
 import { useFormConductor } from "../../../lib/hooks"
 import { UserStatus } from "../../../lib/constants"
-import ApplicationFormLayout, { LockIcon } from "../../../layouts/application-form"
+import ApplicationFormLayout, {
+  ApplicationAlertBox,
+  LockIcon,
+  onFormError,
+} from "../../../layouts/application-form"
 import styles from "../../../layouts/application-form.module.scss"
 
 const ApplicationAlternateContactName = () => {
@@ -39,7 +43,7 @@ const ApplicationAlternateContactName = () => {
     conductor.routeToNextOrReturnUrl()
   }
   const onError = () => {
-    window.scrollTo(0, 0)
+    onFormError()
   }
 
   useEffect(() => {
@@ -80,16 +84,7 @@ const ApplicationAlternateContactName = () => {
           }}
           conductor={conductor}
         >
-          {Object.entries(errors).length > 0 && (
-            <Alert
-              className={styles["message-inside-card"]}
-              variant="alert"
-              fullwidth
-              id={"application-alert-box"}
-            >
-              {t("errors.errorsToResolve")}
-            </Alert>
-          )}
+          <ApplicationAlertBox errors={errors} />
           <CardSection divider={"flush"} className={"border-none"}>
             <fieldset>
               <legend className="text__caps-spaced">
diff --git a/sites/public/src/pages/applications/contact/alternate-contact-type.tsx b/sites/public/src/pages/applications/contact/alternate-contact-type.tsx
index 3a326410035..2e96b364b6f 100644
--- a/sites/public/src/pages/applications/contact/alternate-contact-type.tsx
+++ b/sites/public/src/pages/applications/contact/alternate-contact-type.tsx
@@ -1,6 +1,6 @@
 import React, { Fragment, useContext, useEffect } from "react"
 import { useForm } from "react-hook-form"
-import { Alert, FormErrorMessage } from "@bloom-housing/ui-seeds"
+import { FormErrorMessage } from "@bloom-housing/ui-seeds"
 import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card"
 import { Field, Form, t } from "@bloom-housing/ui-components"
 import {
@@ -15,8 +15,10 @@ import FormsLayout from "../../../layouts/forms"
 import { isFeatureFlagOn } from "../../../lib/helpers"
 import { useFormConductor } from "../../../lib/hooks"
 import { UserStatus } from "../../../lib/constants"
-import ApplicationFormLayout from "../../../layouts/application-form"
-import styles from "../../../layouts/application-form.module.scss"
+import ApplicationFormLayout, {
+  ApplicationAlertBox,
+  onFormError,
+} from "../../../layouts/application-form"
 
 const ApplicationAlternateContactType = () => {
   const { profile } = useContext(AuthContext)
@@ -44,7 +46,7 @@ const ApplicationAlternateContactType = () => {
     conductor.routeToNextOrReturnUrl()
   }
   const onError = () => {
-    window.scrollTo(0, 0)
+    onFormError()
   }
   const type = watch("type", application.alternateContact.type)
   const getOptionLabel = (option: string) => {
@@ -84,16 +86,7 @@ const ApplicationAlternateContactType = () => {
           }}
           conductor={conductor}
         >
-          {Object.entries(errors).length > 0 && (
-            <Alert
-              className={styles["message-inside-card"]}
-              variant="alert"
-              fullwidth
-              id={"application-alert-box"}
-            >
-              {t("errors.errorsToResolve")}
-            </Alert>
-          )}
+          <ApplicationAlertBox errors={errors} />
           <CardSection divider={"flush"} className={"border-none"}>
             <fieldset>
               <legend className={`text__caps-spaced ${errors?.type ? "text-alert" : ""}`}>
diff --git a/sites/public/src/pages/applications/contact/name.tsx b/sites/public/src/pages/applications/contact/name.tsx
index b0fed3fccf3..abef555d8c7 100644
--- a/sites/public/src/pages/applications/contact/name.tsx
+++ b/sites/public/src/pages/applications/contact/name.tsx
@@ -2,7 +2,6 @@ import React, { useContext, useEffect, useState } from "react"
 import { useForm } from "react-hook-form"
 import { DOBField, Field, Form, t } from "@bloom-housing/ui-components"
 import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card"
-import { Alert } from "@bloom-housing/ui-seeds"
 import {
   OnClientSide,
   PageView,
@@ -13,8 +12,11 @@ import {
 import FormsLayout from "../../../layouts/forms"
 import { useFormConductor } from "../../../lib/hooks"
 import { UserStatus } from "../../../lib/constants"
-import ApplicationFormLayout, { LockIcon } from "../../../layouts/application-form"
-import styles from "../../../layouts/application-form.module.scss"
+import ApplicationFormLayout, {
+  ApplicationAlertBox,
+  LockIcon,
+  onFormError,
+} from "../../../layouts/application-form"
 
 const ApplicationName = () => {
   const { profile } = useContext(AuthContext)
@@ -43,8 +45,9 @@ const ApplicationName = () => {
     }
     conductor.routeToNextOrReturnUrl()
   }
+
   const onError = () => {
-    window.scrollTo(0, 0)
+    onFormError()
   }
 
   const emailPresent: string = watch("applicant.emailAddress")
@@ -85,16 +88,7 @@ const ApplicationName = () => {
           }}
           conductor={conductor}
         >
-          {Object.entries(errors).length > 0 && (
-            <Alert
-              className={styles["message-inside-card"]}
-              variant="alert"
-              fullwidth
-              id={"application-alert-box"}
-            >
-              {t("errors.errorsToResolve")}
-            </Alert>
-          )}
+          <ApplicationAlertBox errors={errors} />
           <CardSection divider={"inset"}>
             <div id={"application-initial-page"}>
               <fieldset>
diff --git a/sites/public/src/pages/applications/financial/income.tsx b/sites/public/src/pages/applications/financial/income.tsx
index 46f0ee2b405..22bbda7a1d2 100644
--- a/sites/public/src/pages/applications/financial/income.tsx
+++ b/sites/public/src/pages/applications/financial/income.tsx
@@ -2,7 +2,6 @@ import React, { useContext, useEffect, useState } from "react"
 import Link from "next/link"
 import { useForm } from "react-hook-form"
 import { AlertBox, AlertNotice, Field, FieldGroup, Form, t } from "@bloom-housing/ui-components"
-import { Alert } from "@bloom-housing/ui-seeds"
 import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card"
 import {
   OnClientSide,
@@ -18,8 +17,10 @@ import {
 import FormsLayout from "../../../layouts/forms"
 import { useFormConductor } from "../../../lib/hooks"
 import { UserStatus } from "../../../lib/constants"
-import ApplicationFormLayout from "../../../layouts/application-form"
-import styles from "../../../layouts/application-form.module.scss"
+import ApplicationFormLayout, {
+  ApplicationAlertBox,
+  onFormError,
+} from "../../../layouts/application-form"
 
 type IncomeError = "low" | "high" | null
 type IncomePeriod = "perMonth" | "perYear"
@@ -91,7 +92,7 @@ const ApplicationIncome = () => {
     }
   }
   const onError = () => {
-    window.scrollTo(0, 0)
+    onFormError()
   }
 
   const incomePeriodValues = [
@@ -140,17 +141,7 @@ const ApplicationIncome = () => {
           }}
           conductor={conductor}
         >
-          {Object.entries(errors).length > 0 && (
-            <Alert
-              className={styles["message-inside-card"]}
-              variant="alert"
-              fullwidth
-              id={"application-alert-box"}
-            >
-              {t("errors.errorsToResolve")}
-            </Alert>
-          )}
-
+          <ApplicationAlertBox errors={errors} />
           {incomeError && (
             <CardSection>
               <AlertBox type="alert" inverted onClose={() => setIncomeError(null)}>
diff --git a/sites/public/src/pages/applications/financial/vouchers.tsx b/sites/public/src/pages/applications/financial/vouchers.tsx
index 9d3d65e3de4..dae536cabea 100644
--- a/sites/public/src/pages/applications/financial/vouchers.tsx
+++ b/sites/public/src/pages/applications/financial/vouchers.tsx
@@ -2,7 +2,6 @@ import React, { useContext, useEffect } from "react"
 import { useForm } from "react-hook-form"
 import { Form, t, FieldGroup } from "@bloom-housing/ui-components"
 import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card"
-import { Alert } from "@bloom-housing/ui-seeds"
 import {
   OnClientSide,
   PageView,
@@ -14,8 +13,10 @@ import { MultiselectQuestionsApplicationSectionEnum } from "@bloom-housing/share
 import FormsLayout from "../../../layouts/forms"
 import { useFormConductor } from "../../../lib/hooks"
 import { UserStatus } from "../../../lib/constants"
-import ApplicationFormLayout from "../../../layouts/application-form"
-import styles from "../../../layouts/application-form.module.scss"
+import ApplicationFormLayout, {
+  ApplicationAlertBox,
+  onFormError,
+} from "../../../layouts/application-form"
 
 const ApplicationVouchers = () => {
   const { profile } = useContext(AuthContext)
@@ -44,7 +45,7 @@ const ApplicationVouchers = () => {
     conductor.routeToNextOrReturnUrl()
   }
   const onError = () => {
-    window.scrollTo(0, 0)
+    onFormError()
   }
 
   const incomeVouchersValues = [
@@ -105,17 +106,7 @@ const ApplicationVouchers = () => {
           }}
           conductor={conductor}
         >
-          {Object.entries(errors).length > 0 && (
-            <Alert
-              className={styles["message-inside-card"]}
-              variant="alert"
-              fullwidth
-              id={"application-alert-box"}
-            >
-              {t("errors.errorsToResolve")}
-            </Alert>
-          )}
-
+          <ApplicationAlertBox errors={errors} />
           <CardSection divider={"flush"} className={"border-none"}>
             <fieldset>
               <legend className="sr-only">{t("application.financial.vouchers.legend")}</legend>
diff --git a/sites/public/src/pages/applications/household/ada.tsx b/sites/public/src/pages/applications/household/ada.tsx
index b8efef57141..72242b5ce11 100644
--- a/sites/public/src/pages/applications/household/ada.tsx
+++ b/sites/public/src/pages/applications/household/ada.tsx
@@ -1,6 +1,7 @@
 import React, { useContext, useEffect } from "react"
 import { useForm } from "react-hook-form"
-import { Alert, FormErrorMessage } from "@bloom-housing/ui-seeds"
+import { FormErrorMessage } from "@bloom-housing/ui-seeds"
+import { FeatureFlagEnum } from "@bloom-housing/shared-helpers/src/types/backend-swagger"
 import { Form, t, FieldGroup, FieldSingle } from "@bloom-housing/ui-components"
 import {
   OnClientSide,
@@ -14,9 +15,10 @@ import FormsLayout from "../../../layouts/forms"
 import { isFeatureFlagOn } from "../../../lib/helpers"
 import { useFormConductor } from "../../../lib/hooks"
 import { UserStatus } from "../../../lib/constants"
-import ApplicationFormLayout from "../../../layouts/application-form"
-import styles from "../../../layouts/application-form.module.scss"
-import { FeatureFlagEnum } from "@bloom-housing/shared-helpers/src/types/backend-swagger"
+import ApplicationFormLayout, {
+  ApplicationAlertBox,
+  onFormError,
+} from "../../../layouts/application-form"
 
 const ApplicationAda = () => {
   const { profile } = useContext(AuthContext)
@@ -57,7 +59,7 @@ const ApplicationAda = () => {
     conductor.routeToNextOrReturnUrl()
   }
   const onError = () => {
-    window.scrollTo(0, 0)
+    onFormError()
   }
 
   useEffect(() => {
@@ -140,18 +142,7 @@ const ApplicationAda = () => {
           }}
           conductor={conductor}
         >
-          {Object.entries(errors).length === Object.keys(getValues()).length &&
-            Object.keys(getValues()).length > 0 && (
-              <Alert
-                className={styles["message-inside-card"]}
-                variant="alert"
-                fullwidth
-                id={"application-alert-box"}
-              >
-                {t("errors.errorsToResolve")}
-              </Alert>
-            )}
-
+          <ApplicationAlertBox errors={errors} />
           <CardSection divider={"flush"} className={"border-none"}>
             <fieldset>
               <legend className="sr-only">{t("application.details.adaPriorities")}</legend>
diff --git a/sites/public/src/pages/applications/household/changes.tsx b/sites/public/src/pages/applications/household/changes.tsx
index 09b176a4ba1..8328e94e363 100644
--- a/sites/public/src/pages/applications/household/changes.tsx
+++ b/sites/public/src/pages/applications/household/changes.tsx
@@ -2,13 +2,14 @@ import React, { useContext, useEffect } from "react"
 import { useForm } from "react-hook-form"
 import { FieldGroup, Form, t } from "@bloom-housing/ui-components"
 import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card"
-import { Alert } from "@bloom-housing/ui-seeds"
 import { OnClientSide, PageView, pushGtmEvent, AuthContext } from "@bloom-housing/shared-helpers"
 import FormsLayout from "../../../layouts/forms"
 import { useFormConductor } from "../../../lib/hooks"
 import { UserStatus } from "../../../lib/constants"
-import ApplicationFormLayout from "../../../layouts/application-form"
-import styles from "../../../layouts/application-form.module.scss"
+import ApplicationFormLayout, {
+  ApplicationAlertBox,
+  onFormError,
+} from "../../../layouts/application-form"
 
 const ApplicationHouseholdChanges = () => {
   const { profile } = useContext(AuthContext)
@@ -32,7 +33,7 @@ const ApplicationHouseholdChanges = () => {
   }
 
   const onError = () => {
-    window.scrollTo(0, 0)
+    onFormError()
   }
 
   const householdChangesValues = [
@@ -78,17 +79,7 @@ const ApplicationHouseholdChanges = () => {
           }}
           conductor={conductor}
         >
-          {Object.entries(errors).length > 0 && (
-            <Alert
-              className={styles["message-inside-card"]}
-              variant="alert"
-              fullwidth
-              id={"application-alert-box"}
-            >
-              {t("errors.errorsToResolve")}
-            </Alert>
-          )}
-
+          <ApplicationAlertBox errors={errors} />
           <CardSection divider={"flush"} className={"border-none"}>
             <fieldset>
               <FieldGroup
diff --git a/sites/public/src/pages/applications/household/live-alone.tsx b/sites/public/src/pages/applications/household/live-alone.tsx
index 5e0867c7bb8..c5b81d53556 100644
--- a/sites/public/src/pages/applications/household/live-alone.tsx
+++ b/sites/public/src/pages/applications/household/live-alone.tsx
@@ -2,14 +2,15 @@ import React, { ChangeEvent, useContext, useEffect, useState } from "react"
 import { useForm } from "react-hook-form"
 import { FieldGroup, Form, t } from "@bloom-housing/ui-components"
 import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card"
-import { Alert } from "@bloom-housing/ui-seeds"
 import { OnClientSide, PageView, pushGtmEvent, AuthContext } from "@bloom-housing/shared-helpers"
 import FormsLayout from "../../../layouts/forms"
 import { HouseholdSizeField } from "../../../components/applications/HouseholdSizeField"
 import { useFormConductor } from "../../../lib/hooks"
 import { UserStatus } from "../../../lib/constants"
-import ApplicationFormLayout from "../../../layouts/application-form"
-import styles from "../../../layouts/application-form.module.scss"
+import ApplicationFormLayout, {
+  ApplicationAlertBox,
+  onFormError,
+} from "../../../layouts/application-form"
 
 const ApplicationLiveAlone = () => {
   const { profile } = useContext(AuthContext)
@@ -27,6 +28,10 @@ const ApplicationLiveAlone = () => {
     conductor.routeToNextOrReturnUrl()
   }
 
+  const onError = () => {
+    onFormError()
+  }
+
   useEffect(() => {
     pushGtmEvent<PageView>({
       event: "pageView",
@@ -56,7 +61,7 @@ const ApplicationLiveAlone = () => {
         listing?.name
       }`}
     >
-      <Form className="mb-4" onSubmit={handleSubmit(onSubmit)}>
+      <Form className="mb-4" onSubmit={handleSubmit(onSubmit, onError)}>
         <ApplicationFormLayout
           listingName={listing?.name}
           heading={t("application.household.liveAlone.title")}
@@ -71,16 +76,7 @@ const ApplicationLiveAlone = () => {
           }}
           conductor={conductor}
         >
-          {Object.entries(errors).length > 0 && (
-            <Alert
-              className={styles["message-inside-card"]}
-              variant="alert"
-              fullwidth
-              id={"application-alert-box"}
-            >
-              {t("errors.errorsToResolve")}
-            </Alert>
-          )}
+          <ApplicationAlertBox errors={errors} />
           <div>
             <HouseholdSizeField
               assistanceUrl={t("application.household.assistanceUrl")}
@@ -107,7 +103,7 @@ const ApplicationLiveAlone = () => {
                 }
               }}
             >
-              <legend className={`text__caps-spaced ${errors?.type ? "text-alert" : ""}`}>
+              <legend className={`text__caps-spaced ${errors?.householdSize ? "text-alert" : ""}`}>
                 {t("application.household.householdMembers")}
               </legend>
               <p className="field-note mb-4">{t("t.pleaseSelectOne")}</p>
diff --git a/sites/public/src/pages/applications/household/member.tsx b/sites/public/src/pages/applications/household/member.tsx
index 0ffe45e7e96..d748306867f 100644
--- a/sites/public/src/pages/applications/household/member.tsx
+++ b/sites/public/src/pages/applications/household/member.tsx
@@ -1,6 +1,7 @@
 import React, { useContext, useEffect } from "react"
 import { useRouter } from "next/router"
-import { Alert, Button, FormErrorMessage } from "@bloom-housing/ui-seeds"
+import { useForm } from "react-hook-form"
+import { Button, FormErrorMessage } from "@bloom-housing/ui-seeds"
 import {
   DOBField,
   Field,
@@ -27,10 +28,12 @@ import {
   AuthContext,
 } from "@bloom-housing/shared-helpers"
 import FormsLayout from "../../../layouts/forms"
-import { useForm } from "react-hook-form"
 import { AppSubmissionContext } from "../../../lib/applications/AppSubmissionContext"
 import { UserStatus } from "../../../lib/constants"
-import ApplicationFormLayout from "../../../layouts/application-form"
+import ApplicationFormLayout, {
+  ApplicationAlertBox,
+  onFormError,
+} from "../../../layouts/application-form"
 import styles from "../../../layouts/application-form.module.scss"
 import { isFeatureFlagOn } from "../../../lib/helpers"
 
@@ -119,7 +122,7 @@ const ApplicationMember = () => {
     void router.push("/applications/household/add-members")
   }
   const onError = () => {
-    window.scrollTo(0, 0)
+    onFormError()
   }
   const deleteMember = () => {
     if (member.orderId != undefined) {
@@ -212,17 +215,7 @@ const ApplicationMember = () => {
           }}
           overrideIsAdvocate={conductor.config.isAdvocate}
         >
-          {Object.entries(errors).length > 0 && (
-            <Alert
-              className={styles["message-inside-card"]}
-              variant="alert"
-              fullwidth
-              id={"application-alert-box"}
-            >
-              {t("errors.errorsToResolve")}
-            </Alert>
-          )}
-
+          <ApplicationAlertBox errors={errors} />
           <CardSection divider={"inset"}>
             <fieldset>
               <legend className="text__caps-spaced">
diff --git a/sites/public/src/pages/applications/household/members-info.tsx b/sites/public/src/pages/applications/household/members-info.tsx
index a26aa08f9d9..af9c94e8152 100644
--- a/sites/public/src/pages/applications/household/members-info.tsx
+++ b/sites/public/src/pages/applications/household/members-info.tsx
@@ -2,13 +2,14 @@ import React, { useContext, useEffect } from "react"
 import { useForm } from "react-hook-form"
 import { useRouter } from "next/router"
 import { Form, t } from "@bloom-housing/ui-components"
-import { Alert } from "@bloom-housing/ui-seeds"
 import { OnClientSide, PageView, pushGtmEvent, AuthContext } from "@bloom-housing/shared-helpers"
 import FormsLayout from "../../../layouts/forms"
 import { useFormConductor } from "../../../lib/hooks"
 import { UserStatus } from "../../../lib/constants"
-import ApplicationFormLayout from "../../../layouts/application-form"
-import styles from "../../../layouts/application-form.module.scss"
+import ApplicationFormLayout, {
+  ApplicationAlertBox,
+  onFormError,
+} from "../../../layouts/application-form"
 
 const ApplicationMembersInfo = () => {
   const { profile } = useContext(AuthContext)
@@ -24,7 +25,7 @@ const ApplicationMembersInfo = () => {
   }
 
   const onError = () => {
-    window.scrollTo(0, 0)
+    onFormError()
   }
 
   useEffect(() => {
@@ -57,16 +58,7 @@ const ApplicationMembersInfo = () => {
           }}
           hideBorder={true}
         >
-          {Object.entries(errors).length > 0 && (
-            <Alert
-              className={styles["message-inside-card"]}
-              variant="alert"
-              fullwidth
-              id={"application-alert-box"}
-            >
-              {t("errors.errorsToResolve")}
-            </Alert>
-          )}
+          <ApplicationAlertBox errors={errors} />
         </ApplicationFormLayout>
       </Form>
     </FormsLayout>
diff --git a/sites/public/src/pages/applications/household/preferred-units.tsx b/sites/public/src/pages/applications/household/preferred-units.tsx
index ce46b1a8cc0..3e02de4d5af 100644
--- a/sites/public/src/pages/applications/household/preferred-units.tsx
+++ b/sites/public/src/pages/applications/household/preferred-units.tsx
@@ -2,7 +2,6 @@ import React, { useContext, useEffect } from "react"
 import { useForm } from "react-hook-form"
 import { FieldGroup, Form, t } from "@bloom-housing/ui-components"
 import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card"
-import { Alert } from "@bloom-housing/ui-seeds"
 import {
   createUnitTypeId,
   getUniqueUnitTypes,
@@ -16,9 +15,11 @@ import { FeatureFlagEnum } from "@bloom-housing/shared-helpers/src/types/backend
 import { isFeatureFlagOn } from "../../../lib/helpers"
 import { useFormConductor } from "../../../lib/hooks"
 import { UserStatus } from "../../../lib/constants"
-import ApplicationFormLayout from "../../../layouts/application-form"
+import ApplicationFormLayout, {
+  ApplicationAlertBox,
+  onFormError,
+} from "../../../layouts/application-form"
 import FormsLayout from "../../../layouts/forms"
-import styles from "../../../layouts/application-form.module.scss"
 
 const ApplicationPreferredUnits = () => {
   const { profile } = useContext(AuthContext)
@@ -46,7 +47,7 @@ const ApplicationPreferredUnits = () => {
     conductor.routeToNextOrReturnUrl()
   }
   const onError = () => {
-    window.scrollTo(0, 0)
+    onFormError()
   }
 
   const unitTypes = enableUnitGroups
@@ -91,17 +92,7 @@ const ApplicationPreferredUnits = () => {
           }}
           conductor={conductor}
         >
-          {Object.entries(errors).length > 0 && (
-            <Alert
-              className={styles["message-inside-card"]}
-              variant="alert"
-              fullwidth
-              id={"application-alert-box"}
-            >
-              {t("errors.errorsToResolve")}
-            </Alert>
-          )}
-
+          <ApplicationAlertBox errors={errors} />
           <CardSection divider={"flush"} className={"border-none"}>
             <fieldset>
               <legend className="sr-only">{t("application.household.preferredUnit.legend")}</legend>
diff --git a/sites/public/src/pages/applications/household/student.tsx b/sites/public/src/pages/applications/household/student.tsx
index 102b802b2c2..365c000fdd3 100644
--- a/sites/public/src/pages/applications/household/student.tsx
+++ b/sites/public/src/pages/applications/household/student.tsx
@@ -2,15 +2,16 @@ import React, { useContext, useEffect } from "react"
 import { useForm } from "react-hook-form"
 import { FieldGroup, Form, t } from "@bloom-housing/ui-components"
 import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card"
-import { Alert } from "@bloom-housing/ui-seeds"
 import { FeatureFlagEnum } from "@bloom-housing/shared-helpers/src/types/backend-swagger"
 import { OnClientSide, PageView, pushGtmEvent, AuthContext } from "@bloom-housing/shared-helpers"
 import FormsLayout from "../../../layouts/forms"
 import { useFormConductor } from "../../../lib/hooks"
 import { UserStatus } from "../../../lib/constants"
 import { isFeatureFlagOn } from "../../../lib/helpers"
-import ApplicationFormLayout from "../../../layouts/application-form"
-import styles from "../../../layouts/application-form.module.scss"
+import ApplicationFormLayout, {
+  ApplicationAlertBox,
+  onFormError,
+} from "../../../layouts/application-form"
 
 const ApplicationHouseholdStudent = () => {
   const { profile } = useContext(AuthContext)
@@ -39,7 +40,7 @@ const ApplicationHouseholdStudent = () => {
   }
 
   const onError = () => {
-    window.scrollTo(0, 0)
+    onFormError()
   }
 
   const householdStudentValues = [
@@ -89,16 +90,7 @@ const ApplicationHouseholdStudent = () => {
           }}
           conductor={conductor}
         >
-          {Object.entries(errors).length > 0 && (
-            <Alert
-              className={styles["message-inside-card"]}
-              variant="alert"
-              fullwidth
-              id={"application-alert-box"}
-            >
-              {t("errors.errorsToResolve")}
-            </Alert>
-          )}
+          <ApplicationAlertBox errors={errors} />
           <CardSection divider={"flush"} className={"border-none"}>
             <fieldset>
               <FieldGroup
diff --git a/yarn.lock b/yarn.lock
index c8eec8a0ce1..a966c18f8a5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1006,10 +1006,10 @@
   resolved "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@bloom-housing/ui-components@13.0.3":
-  version "13.0.3"
-  resolved "https://registry.yarnpkg.com/@bloom-housing/ui-components/-/ui-components-13.0.3.tgz#7120699d7fce6603b7f5c1636baa06bb7edafb67"
-  integrity sha512-yMi1aIjWO7iNEJeX1YkRRvd1pemzJ9/Td3gpG9DiPkXh5gsnRH/CT5EATJAOzPtzq6w5VCpJ3yTOvbHraOVr0w==
+"@bloom-housing/ui-components@13.0.6":
+  version "13.0.6"
+  resolved "https://registry.yarnpkg.com/@bloom-housing/ui-components/-/ui-components-13.0.6.tgz#d9f5a75780b1a2e3280fae550396952d9c8f5735"
+  integrity sha512-1xguoeK3QmDzTxrLusCDIgP4x5ZbOTWaYFtOrm8zwI2PiGKl8yaSwlG2JDDDTtphl6x5xWWKY932tjDvTxxKSg==
   dependencies:
     "@fortawesome/fontawesome-svg-core" "^6.1.1"
     "@fortawesome/free-regular-svg-icons" "^6.1.1"