diff --git a/sites/public/src/components/applications/HouseholdMemberForm.tsx b/sites/public/src/components/applications/HouseholdMemberForm.tsx
index 2309a2f725..896ad49105 100644
--- a/sites/public/src/components/applications/HouseholdMemberForm.tsx
+++ b/sites/public/src/components/applications/HouseholdMemberForm.tsx
@@ -2,6 +2,7 @@ import React from "react"
 import { t } from "@bloom-housing/ui-components"
 import { Button, FieldValue, Icon } from "@bloom-housing/ui-seeds"
 import { CustomIconMap } from "@bloom-housing/shared-helpers"
+import styles from "../../layouts/application-form.module.scss"
 
 export interface HouseholdMemberFormProps {
   editMember?: (memberId: number | undefined) => void
@@ -19,8 +20,11 @@ const HouseholdMemberForm = (props: HouseholdMemberFormProps) => {
   const editMode = props.editMode !== false && props.editMember // undefined should default to true
 
   return (
-    <div className="flex justify-between flex-row border-b">
-      <FieldValue helpText={props.subtitle} className="py-4 text-left">
+    <div className={styles["application-form-household-member"]}>
+      <FieldValue
+        className={styles["application-form-household-field-value"]}
+        helpText={props.subtitle}
+      >
         {props.memberFirstName} {props.memberLastName}
       </FieldValue>
       <div>
@@ -29,7 +33,7 @@ const HouseholdMemberForm = (props: HouseholdMemberFormProps) => {
             id={`edit-member-${props.memberFirstName}-${props.memberLastName}`}
             type="button"
             variant="text"
-            className="pt-4 app-household-member-edit-button"
+            className="app-household-member-edit-button pb-1"
             onClick={() => props.editMember && props.editMember(props.memberId)}
           >
             {props.strings?.edit ?? t("t.edit")}
diff --git a/sites/public/src/components/applications/HouseholdSizeField.tsx b/sites/public/src/components/applications/HouseholdSizeField.tsx
index 1a859c6622..c0da179c5e 100644
--- a/sites/public/src/components/applications/HouseholdSizeField.tsx
+++ b/sites/public/src/components/applications/HouseholdSizeField.tsx
@@ -1,4 +1,5 @@
 import React from "react"
+import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card"
 import { t, ErrorMessage, AlertBox, AlertNotice } from "@bloom-housing/ui-components"
 import { UseFormMethods, FieldError } from "react-hook-form"
 
@@ -60,23 +61,27 @@ const HouseholdSizeField = (props: HouseholdSizeFieldProps) => {
           }
         />
       </span>
-      <ErrorMessage
-        id={"householdsize-error"}
-        error={!!error}
-        className="block mt-0 line-normal text-alert"
-      >
-        <AlertBox type="alert" inverted onClose={() => clearErrors()}>
-          {strings?.dontQualifyHeader ?? t("application.household.dontQualifyHeader")}
-        </AlertBox>
-        <AlertNotice title={error?.message} type="alert" inverted>
-          <p className="mb-2">
-            {strings?.dontQualifyDescription ?? t("application.household.dontQualifyInfo")}
-          </p>
-          <p>
-            <a href={assistanceUrl}>{strings?.getAssistance ?? t("pageTitle.getAssistance")}</a>
-          </p>
-        </AlertNotice>
-      </ErrorMessage>
+      {error && (
+        <CardSection>
+          <ErrorMessage
+            id={"householdsize-error"}
+            error={!!error}
+            className="block mt-0 line-normal text-alert"
+          >
+            <AlertBox type="alert" inverted onClose={() => clearErrors()}>
+              {strings?.dontQualifyHeader ?? t("application.household.dontQualifyHeader")}
+            </AlertBox>
+            <AlertNotice title={error?.message} type="alert" inverted>
+              <p className="mb-2">
+                {strings?.dontQualifyDescription ?? t("application.household.dontQualifyInfo")}
+              </p>
+              <p>
+                <a href={assistanceUrl}>{strings?.getAssistance ?? t("pageTitle.getAssistance")}</a>
+              </p>
+            </AlertNotice>
+          </ErrorMessage>
+        </CardSection>
+      )}
     </>
   )
 }
diff --git a/sites/public/src/components/shared/FormSummaryDetails.module.scss b/sites/public/src/components/shared/FormSummaryDetails.module.scss
new file mode 100644
index 0000000000..9588315fbd
--- /dev/null
+++ b/sites/public/src/components/shared/FormSummaryDetails.module.scss
@@ -0,0 +1,38 @@
+.summary-header {
+  display: flex;
+  justify-content: space-between;
+  padding-block: var(--seeds-spacer-header);
+  background: var(--seeds-color-gray-300);
+}
+
+.summary-section {
+  padding-block-end: var(--seeds-spacer-header);
+}
+
+.summary-value {
+  padding-block-end: var(--seeds-spacer-content);
+
+  &:last-of-type {
+    padding-block-end: var(--seeds-spacer-header);
+  }
+}
+
+.summary-note-text {
+  font-size: var(--seeds-type-label-size);
+  margin-block-end: var(--seeds-spacer-content);
+}
+
+.household-member-section {
+  border-block-end: 1px solid var(--seeds-color-gray-450);
+  margin-block-end: var(--seeds-spacer-header);
+
+  &:last-child {
+    border-block-end: none;
+  }
+}
+
+.household-member-same-address {
+  font-size: var(--seeds-type-label-size);
+  color: var(--seeds-text-color-light);
+  padding-block-end: var(--seeds-spacer-header);
+}
diff --git a/sites/public/src/components/shared/FormSummaryDetails.tsx b/sites/public/src/components/shared/FormSummaryDetails.tsx
index 5d296449a9..0733469bcd 100644
--- a/sites/public/src/components/shared/FormSummaryDetails.tsx
+++ b/sites/public/src/components/shared/FormSummaryDetails.tsx
@@ -1,6 +1,6 @@
 import React, { Fragment, useEffect, useState } from "react"
-import { LocalizedLink, MultiLineAddress, t } from "@bloom-housing/ui-components"
-import { FieldValue } from "@bloom-housing/ui-seeds"
+import { MultiLineAddress, t } from "@bloom-housing/ui-components"
+import { Card, FieldValue, Heading, Link } from "@bloom-housing/ui-seeds"
 import {
   getUniqueUnitTypes,
   AddressHolder,
@@ -15,6 +15,7 @@ import {
   Listing,
   MultiselectQuestionsApplicationSectionEnum,
 } from "@bloom-housing/shared-helpers/src/types/backend-swagger"
+import styles from "./FormSummaryDetails.module.scss"
 
 type FormSummaryDetailsProps = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -26,14 +27,6 @@ type FormSummaryDetailsProps = {
   validationError?: boolean
 }
 
-const EditLink = (props: { href: string }) => (
-  <div className="float-right flex edit-link">
-    <LocalizedLink href={props.href} className={"text-blue-700"}>
-      {t("t.edit")}
-    </LocalizedLink>
-  </div>
-)
-
 const accessibilityLabels = (accessibility) => {
   const labels = []
   if (accessibility.mobility) labels.push(t("application.ada.mobility"))
@@ -138,20 +131,24 @@ const FormSummaryDetails = ({
     appLink: string,
     header: string,
     emptyText?: string,
-    className?: string
+    divider?: boolean
   ) => {
     return (
       <>
-        <h3 className="form--card__sub-header border-none text-xl">
-          {header}
-          {editMode && !validationError && <EditLink href={appLink} />}
-        </h3>
-        <div
+        <Card.Header className={styles["summary-header"]}>
+          <Heading priority={3} size="xl" className="font-serif font-normal">
+            {header}
+          </Heading>
+          {editMode && !validationError && <Link href={appLink}>{t("t.edit")}</Link>}
+        </Card.Header>
+
+        <Card.Section
+          className={styles["summary-section"]}
           id={applicationSection}
-          className={`form-card__group mx-0 ${className ? className : ""}`}
+          divider={divider ? "flush" : undefined}
         >
           {emptyText ? (
-            <p className="field-note text-black">{emptyText}</p>
+            <p className={styles["summary-note-text"]}>{emptyText}</p>
           ) : (
             <>
               {application[applicationSection]
@@ -173,7 +170,7 @@ const FormSummaryDetails = ({
                 )}
             </>
           )}
-        </div>
+        </Card.Section>
       </>
     )
   }
@@ -187,32 +184,32 @@ const FormSummaryDetails = ({
 
   return (
     <>
-      <h3 className="form--card__sub-header border-none text-xl">
-        {t("t.you")}
-        {editMode && <EditLink href="/applications/contact/name" />}
-      </h3>
-
-      <div className="form-card__group mx-0">
+      <Card.Header className={styles["summary-header"]}>
+        <Heading priority={3} size="xl" className="font-serif font-normal">
+          {t("t.you")}
+        </Heading>
+        {editMode && <Link href="/applications/contact/name">{t("t.edit")}</Link>}
+      </Card.Header>
+
+      <Card.Section className={styles["summary-section"]}>
         <FieldValue
           testId={"app-summary-name"}
           id="applicantName"
           label={t("t.name")}
-          className={"pb-4"}
+          className={styles["summary-value"]}
         >
           {application.applicant.firstName} {application.applicant.middleName}{" "}
           {application.applicant.lastName}
         </FieldValue>
-
         <FieldValue
           testId={"app-summary-dob"}
           id="applicantbirthDay"
           label={t("application.household.member.dateOfBirth")}
-          className={"pb-4"}
+          className={styles["summary-value"]}
         >
           {application.applicant.birthMonth}/{application.applicant.birthDay}/
           {application.applicant.birthYear}
         </FieldValue>
-
         {application.applicant.phoneNumber && (
           <FieldValue
             testId={"app-summary-phone"}
@@ -221,12 +218,11 @@ const FormSummaryDetails = ({
             helpText={t(
               `application.contact.phoneNumberTypes.${application.applicant.phoneNumberType}`
             )}
-            className={"pb-4"}
+            className={styles["summary-value"]}
           >
             {application.applicant.phoneNumber}
           </FieldValue>
         )}
-
         {application.additionalPhoneNumber && (
           <FieldValue
             testId={"app-summary-additional-phone"}
@@ -235,39 +231,36 @@ const FormSummaryDetails = ({
             helpText={t(
               `application.contact.phoneNumberTypes.${application.additionalPhoneNumberType}`
             )}
-            className={"pb-4"}
+            className={styles["summary-value"]}
           >
             {application.additionalPhoneNumber}
           </FieldValue>
         )}
-
         {application.applicant.emailAddress && (
           <FieldValue
             testId={"app-summary-email"}
             id="applicantEmail"
             label={t("t.email")}
-            className={"pb-4"}
+            className={styles["summary-value"]}
           >
             {application.applicant.emailAddress}
           </FieldValue>
         )}
-
         <FieldValue
           id="applicantAddress"
           label={t("application.contact.address")}
-          className={"pb-4"}
+          className={styles["summary-value"]}
         >
           <MultiLineAddress
             data-testid={"app-summary-address"}
             address={reformatAddress(application.applicant.applicantAddress)}
           />
         </FieldValue>
-
         {application.sendMailToMailingAddress && (
           <FieldValue
             id="applicantMailingAddress"
             label={t("application.contact.mailingAddress")}
-            className={"pb-4"}
+            className={styles["summary-value"]}
           >
             <MultiLineAddress
               data-testid={"app-summary-mailing-address"}
@@ -275,12 +268,11 @@ const FormSummaryDetails = ({
             />
           </FieldValue>
         )}
-
         {application.applicant.workInRegion === "yes" && (
           <FieldValue
             id="applicantWorkAddress"
             label={t("application.contact.workAddress")}
-            className={"pb-4"}
+            className={styles["summary-value"]}
           >
             <MultiLineAddress
               data-testid={"app-summary-work-address"}
@@ -288,31 +280,32 @@ const FormSummaryDetails = ({
             />
           </FieldValue>
         )}
-
         {application.contactPreferences && (
           <FieldValue
             testId={"app-summary-contact-type"}
             id="applicantPreferredContactType"
             label={t("application.contact.preferredContactType")}
-            className={"pb-4"}
+            className={styles["summary-value"]}
           >
             {application.contactPreferences?.map((item) => t(`t.${item}`)).join(", ")}
           </FieldValue>
         )}
-      </div>
+      </Card.Section>
 
       {application.alternateContact.type !== "" &&
         application.alternateContact.type !== "noContact" && (
-          <div id="alternateContact">
-            <h3 className="form--card__sub-header border-none text-xl">
-              {t("application.alternateContact.type.label")}
+          <>
+            <Card.Header className={styles["summary-header"]}>
+              <Heading priority={3} size="xl" className="font-serif font-normal">
+                {t("application.alternateContact.type.label")}
+              </Heading>
               {editMode && !validationError && (
-                <EditLink href="/applications/contact/alternate-contact-type" />
+                <Link href="/applications/contact/alternate-contact-type">{t("t.edit")}</Link>
               )}
-            </h3>
+            </Card.Header>
 
-            <div className="form-card__group mx-0">
-              <p className="field-note mb-5">
+            <Card.Section className={styles["summary-section"]}>
+              <p className={styles["summary-note-text"]}>
                 {t(`application.alternateContact.type.description`)}
               </p>
               <FieldValue
@@ -320,7 +313,7 @@ const FormSummaryDetails = ({
                 id="alternateName"
                 label={t("t.name")}
                 helpText={alternateContactName()}
-                className={"pb-4"}
+                className={styles["summary-value"]}
               >
                 {application.alternateContact.firstName} {application.alternateContact.lastName}
               </FieldValue>
@@ -330,7 +323,7 @@ const FormSummaryDetails = ({
                   testId={"app-summary-alternate-email"}
                   id="alternateEmail"
                   label={t("t.email")}
-                  className={"pb-4"}
+                  className={styles["summary-value"]}
                 >
                   {application.alternateContact.emailAddress}
                 </FieldValue>
@@ -341,7 +334,7 @@ const FormSummaryDetails = ({
                   testId={"app-summary-alternate-phone"}
                   id="alternatePhone"
                   label={t("t.phone")}
-                  className={"pb-4"}
+                  className={styles["summary-value"]}
                 >
                   {application.alternateContact.phoneNumber}
                 </FieldValue>
@@ -354,83 +347,85 @@ const FormSummaryDetails = ({
                   testId={"app-summary-alternate-mailing-address"}
                   id="alternateMailingAddress"
                   label={t("application.contact.address")}
-                  className={"pb-4"}
+                  className={styles["summary-value"]}
                 >
                   <MultiLineAddress address={application.alternateContact.address} />
                 </FieldValue>
               )}
-            </div>
-          </div>
+            </Card.Section>
+          </>
         )}
 
       {application.householdSize > 1 && (
-        <div id="householdMembers">
-          <h3 className="form--card__sub-header border-none text-xl">
-            {t("application.household.householdMembers")}
+        <>
+          <Card.Header className={styles["summary-header"]}>
+            <Heading priority={3} size="xl" className="font-serif font-normal">
+              {t("application.review.householdDetails")}
+            </Heading>
             {editMode && !validationError && (
-              <EditLink href="/applications/household/add-members" />
+              <Link href="/applications/household/preferred-units">{t("t.edit")}</Link>
             )}
-          </h3>
+          </Card.Header>
 
-          <div id="members" className="form-card__group info-group mx-0">
+          <Card.Section className={styles["summary-section"]}>
             {application.householdMember.map((member, index) => (
               <div
-                className="info-group__item"
+                className={styles["household-member-section"]}
                 key={`${member.firstName} - ${member.lastName} - ${index}`}
               >
                 <FieldValue
                   label={t("t.name")}
                   testId={"app-summary-household-member-name"}
-                  className={"pb-4"}
+                  className={styles["summary-value"]}
                 >
                   {member.firstName} {member.lastName}
                 </FieldValue>
-                <div>
-                  <FieldValue
-                    testId={"app-summary-household-member-dob"}
-                    label={t("application.household.member.dateOfBirth")}
-                    className={"pb-4"}
-                  >
-                    {member.birthMonth}/{member.birthDay}/{member.birthYear}
+                <FieldValue
+                  testId={"app-summary-household-member-dob"}
+                  label={t("application.household.member.dateOfBirth")}
+                  className={styles["summary-value"]}
+                >
+                  {member.birthMonth}/{member.birthDay}/{member.birthYear}
+                </FieldValue>
+                {member.sameAddress === "no" && (
+                  <FieldValue label={t("application.contact.address")} className={"pb-4"}>
+                    <MultiLineAddress
+                      data-testid={"app-summary-household-member-address"}
+                      address={reformatAddress(member.householdMemberAddress)}
+                    />
                   </FieldValue>
-                  {member.sameAddress === "no" && (
-                    <FieldValue label={t("application.contact.address")} className={"pb-4"}>
-                      <MultiLineAddress
-                        data-testid={"app-summary-household-member-address"}
-                        address={reformatAddress(member.householdMemberAddress)}
-                      />
-                    </FieldValue>
-                  )}
-                  {member.sameAddress !== "no" && (
-                    <p
-                      data-testid={"app-summary-household-member-same-address"}
-                      className={"text-xs text-gray-750"}
-                    >
-                      {t("application.review.sameAddressAsApplicant")}
-                    </p>
-                  )}
-                </div>
+                )}
+                {member.sameAddress !== "no" && (
+                  <p
+                    data-testid={"app-summary-household-member-same-address"}
+                    className={styles["household-member-same-address"]}
+                  >
+                    {t("application.review.sameAddressAsApplicant")}
+                  </p>
+                )}
               </div>
             ))}
-          </div>
-        </div>
+          </Card.Section>
+        </>
       )}
 
-      <div id="householdDetails">
-        <h3 className="form--card__sub-header border-none text-xl">
-          {t("application.review.householdDetails")}
+      <>
+        <Card.Header className={styles["summary-header"]}>
+          <Heading priority={3} size="xl" className="font-serif font-normal">
+            {t("application.review.householdDetails")}
+          </Heading>
           {editMode && !validationError && (
-            <EditLink href="/applications/household/preferred-units" />
+            <Link href="/applications/household/preferred-units">{t("t.edit")}</Link>
           )}
-        </h3>
+        </Card.Header>
 
-        <div className="form-card__group mx-0">
+        <Card.Section className={styles["summary-section"]}>
           {preferredUnits && (
             <FieldValue
               testId={"app-summary-preferred-units"}
               id="householdUnitType"
               label={t("application.household.preferredUnit.preferredUnitType")}
-              className={"pb-4"}
+              className={styles["summary-value"]}
             >
               {preferredUnits
                 ?.map((item) => t(`application.household.preferredUnit.options.${item}`))
@@ -441,7 +436,7 @@ const FormSummaryDetails = ({
             testId={"app-summary-ada"}
             id="householdAda"
             label={t("application.ada.label")}
-            className={"pb-4"}
+            className={styles["summary-value"]}
           >
             {accessibilityLabels(application.accessibility).map((item) => (
               <Fragment key={item}>
@@ -453,18 +448,18 @@ const FormSummaryDetails = ({
           <FieldValue
             id="householdChanges"
             label={t("application.household.expectingChanges.title")}
-            className={"pb-4"}
+            className={styles["summary-value"]}
           >
             {application.householdExpectingChanges ? t("t.yes") : t("t.no")}
           </FieldValue>
           <FieldValue
             id="householdStudent"
             label={t("application.household.householdStudent.title")}
-            className={"pb-4"}
+            className={styles["summary-value"]}
           >
             {application.householdStudent ? t("t.yes") : t("t.no")}
           </FieldValue>
-        </div>
+        </Card.Section>
 
         {!hidePrograms &&
           multiselectQuestionSection(
@@ -478,17 +473,24 @@ const FormSummaryDetails = ({
               : null
           )}
 
-        <h3 className="form--card__sub-header border-none text-xl">
-          {t("t.income")}
-          {editMode && !validationError && <EditLink href="/applications/financial/vouchers" />}
-        </h3>
+        <Card.Header className={styles["summary-header"]}>
+          <Heading priority={3} size="xl" className="font-serif font-normal">
+            {t("t.income")}
+          </Heading>
+          {editMode && !validationError && (
+            <Link href="/applications/financial/vouchers">{t("t.edit")}</Link>
+          )}
+        </Card.Header>
 
-        <div className={`form-card__group mx-0 ${hidePreferences && "border-b"}`}>
+        <Card.Section
+          className={styles["summary-section"]}
+          divider={hidePreferences ? "flush" : undefined}
+        >
           <FieldValue
             testId={"app-summary-income-vouchers"}
             id="incomeVouchers"
             label={t("application.review.voucherOrSubsidy")}
-            className={"pb-4"}
+            className={styles["summary-value"]}
           >
             {application.incomeVouchers ? t("t.yes") : t("t.no")}
           </FieldValue>
@@ -498,7 +500,7 @@ const FormSummaryDetails = ({
               testId={"app-summary-income"}
               id="incomeValue"
               label={t("t.income")}
-              className={"pb-4"}
+              className={styles["summary-value"]}
             >
               $
               {parseFloat(application.income).toLocaleString("en-US", {
@@ -508,7 +510,7 @@ const FormSummaryDetails = ({
               {t(`t.${application.incomePeriod}`)}
             </FieldValue>
           )}
-        </div>
+        </Card.Section>
 
         {!hidePreferences &&
           multiselectQuestionSection(
@@ -520,9 +522,9 @@ const FormSummaryDetails = ({
                   county: listing?.listingsBuildingAddress?.county || listing?.jurisdictions?.name,
                 })} ${t("application.preferences.general.preamble")}`
               : null,
-            "border-b"
+            true
           )}
-      </div>
+      </>
     </>
   )
 }
diff --git a/sites/public/src/layouts/application-form.module.scss b/sites/public/src/layouts/application-form.module.scss
index 47952c7376..49346851a3 100644
--- a/sites/public/src/layouts/application-form.module.scss
+++ b/sites/public/src/layouts/application-form.module.scss
@@ -87,6 +87,17 @@
   margin-bottom: var(--seeds-s6);
 }
 
+/* step-specific styles */
+.application-form-household-member {
+  display: flex;
+  align-items: top;
+  justify-content: space-between;
+}
+
+.application-form-household-field-value {
+  --field-value-content-spacer: var(--seeds-s3);
+}
+
 /* overrides for Seeds Message & Alert */
 .message-inside-card {
   --common-message-max-width: auto;
diff --git a/sites/public/src/pages/applications/household/add-members.tsx b/sites/public/src/pages/applications/household/add-members.tsx
index b433147efe..87288d9c2b 100644
--- a/sites/public/src/pages/applications/household/add-members.tsx
+++ b/sites/public/src/pages/applications/household/add-members.tsx
@@ -11,6 +11,7 @@ import { HouseholdMemberForm } from "../../../components/applications/HouseholdM
 import { useFormConductor } from "../../../lib/hooks"
 import { UserStatus } from "../../../lib/constants"
 import ApplicationFormLayout from "../../../layouts/application-form"
+import styles from "../../../layouts/application-form.module.scss"
 
 const ApplicationAddMembers = () => {
   const { profile } = useContext(AuthContext)
@@ -51,14 +52,16 @@ const ApplicationAddMembers = () => {
 
   const membersSection = application.householdMember.map((member, index) => {
     return (
-      <HouseholdMemberForm
-        editMember={editMember}
-        key={index}
-        memberFirstName={member.firstName}
-        memberId={index}
-        memberLastName={member.lastName}
-        subtitle={t("application.household.householdMember")}
-      />
+      <CardSection divider="inset">
+        <HouseholdMemberForm
+          editMember={editMember}
+          key={index}
+          memberFirstName={member.firstName}
+          memberId={index}
+          memberLastName={member.lastName}
+          subtitle={t("application.household.householdMember")}
+        />
+      </CardSection>
     )
   })
 
@@ -89,30 +92,26 @@ const ApplicationAddMembers = () => {
             url: conductor.determinePreviousUrl(),
           }}
         >
-          <Form>
-            <div>
-              <HouseholdSizeField
-                assistanceUrl={t("application.household.assistanceUrl")}
-                clearErrors={clearErrors}
-                error={errors.householdSize}
-                householdSize={householdSize}
-                householdSizeMax={listing?.householdSizeMax}
-                householdSizeMin={listing?.householdSizeMin}
-                register={register}
-                validate={true}
-              />
-            </div>
-            <div className="px-8 my-0 mx-0 pb-0 pt-0">
-              <HouseholdMemberForm
-                editMember={editMember}
-                editMode={!application.autofilled}
-                memberFirstName={applicant.firstName}
-                memberLastName={applicant.lastName}
-                subtitle={t("application.household.primaryApplicant")}
-              />
-              {membersSection}
-            </div>
-          </Form>
+          <HouseholdSizeField
+            assistanceUrl={t("application.household.assistanceUrl")}
+            clearErrors={clearErrors}
+            error={errors.householdSize}
+            householdSize={householdSize}
+            householdSizeMax={listing?.householdSizeMax}
+            householdSizeMin={listing?.householdSizeMin}
+            register={register}
+            validate={true}
+          />
+          <CardSection divider="inset">
+            <HouseholdMemberForm
+              editMember={editMember}
+              editMode={!application.autofilled}
+              memberFirstName={applicant.firstName}
+              memberLastName={applicant.lastName}
+              subtitle={t("application.household.primaryApplicant")}
+            />
+          </CardSection>
+          {membersSection}
           <CardSection divider={"flush"} className={"border-none"}>
             <Button
               onClick={onAddMember}
@@ -123,7 +122,7 @@ const ApplicationAddMembers = () => {
               {t("application.household.addMembers.addHouseholdMember")}
             </Button>
           </CardSection>
-          <CardSection className={"bg-primary-lighter"}>
+          <CardSection className={styles["application-form-action-footer"]}>
             <Button
               onClick={() => {
                 conductor.returnToReview = false