diff --git a/shared-helpers/src/views/accounts/AccountCard.module.scss b/shared-helpers/src/views/accounts/AccountCard.module.scss
index 485bfb787a..c9fa125e30 100644
--- a/shared-helpers/src/views/accounts/AccountCard.module.scss
+++ b/shared-helpers/src/views/accounts/AccountCard.module.scss
@@ -1,13 +1,19 @@
 .account-card {
-  --card-header-padding-inline-desktop: var(--seeds-s12);
-  --card-header-padding-inline-mobile: var(--seeds-s4);
-  --card-content-padding-inline-mobile: var(--seeds-s4);
-  --card-border-width: 0rem;
-  --card-divider-width: var(--seeds-border-1);
   width: 100%;
+  height: 100%;
+  justify-content: space-between;
   @media (max-width: theme("screens.sm")) {
     --card-spacing-lg: var(--seeds-s6);
-    --card-border-radius: 0rem;
+  }
+}
+
+.account-card-inline-desktop {
+  --card-header-padding-inline-desktop: var(--seeds-s12);
+}
+
+.account-card-inline-mobile {
+  @media (max-width: theme("screens.sm")) {
+    --card-header-padding-inline-mobile: var(--seeds-s4);
   }
 }
 
@@ -16,8 +22,11 @@
 }
 
 .account-card-heading-group {
-  --subheading-margin: var(--seeds-s3);
   --heading-margin: var(--seeds-s3);
+  --subheading-color: var(--seeds-text-color-light);
+  @media (max-width: theme("screens.sm")) {
+    --subheading-margin: var(--seeds-s3);
+  }
 }
 
 .account-card-heading {
diff --git a/shared-helpers/src/views/accounts/AccountCard.tsx b/shared-helpers/src/views/accounts/AccountCard.tsx
index f199d7809c..47ef391218 100644
--- a/shared-helpers/src/views/accounts/AccountCard.tsx
+++ b/shared-helpers/src/views/accounts/AccountCard.tsx
@@ -13,11 +13,15 @@ interface AccountCardProps {
   divider?: "flush" | "inset"
   headingPriority?: 1 | 2 | 3 | 4 | 5 | 6
   className?: string
+  thinDesktop?: boolean
+  thinMobile?: boolean
 }
 
 const AccountCard = (props: AccountCardProps) => {
   const classNames = [styles["account-card"]]
   if (props.className) classNames.push(props.className)
+  if (!props.thinDesktop) classNames.push(styles["account-card-inline-desktop"])
+  if (props.thinMobile) classNames.push(styles["account-card-inline-mobile"])
 
   const customIcon = CustomIconMap[props.iconSymbol]
 
diff --git a/sites/public/src/components/account/StatusItem.module.scss b/sites/public/src/components/account/StatusItem.module.scss
index 8abc78ad41..203fab5a0d 100644
--- a/sites/public/src/components/account/StatusItem.module.scss
+++ b/sites/public/src/components/account/StatusItem.module.scss
@@ -1,8 +1,8 @@
 .status-item {
   position: relative;
   padding: var(--seeds-s4);
-  background-color: var(--seeds-color-primary-lighter);
-  color: var(--seeds-gray-800);
+  background-color: var(--seeds-bg-color-muted);
+  color: var(--seeds-color-gray-900);
   border-bottom-width: 0.0625rem;
   border-style: solid;
   border-color: var(--seeds-color-gray-450);
@@ -16,7 +16,7 @@
   border-style: solid;
   border-color: var(--seeds-color-gray-450);
   margin-bottom: var(seeds-s4);
-  @media (max-width: theme("screens.md")) {
+  @media (max-width: theme("screens.sm")) {
     padding-bottom: var(--seeds-s2);
     display: block;
   }
@@ -31,17 +31,22 @@
   text-align: right;
   align-self: center;
   font-size: var(--seeds-font-size-sm);
-  @media (max-width: theme("screens.md")) {
+  color: var(--seeds-color-gray-750);
+  @media (max-width: theme("screens.sm")) {
     text-align: left;
     padding-top: var(--seeds-s2_5);
   }
 }
 
+.status-item__due-date {
+  font-weight: var(--seeds-font-weight-semibold);
+}
+
 .status-item__content {
   display: flex;
   justify-content: space-between;
   padding-top: var(--seeds-s4);
-  @media (max-width: theme("screens.md")) {
+  @media (max-width: theme("screens.sm")) {
     display: grid;
   }
 }
@@ -54,10 +59,9 @@
   padding-top: 0;
   text-align: right;
 
-  @media (max-width: theme("screens.md")) {
+  @media (max-width: theme("screens.sm")) {
     text-align: center;
     padding-top: var(seeds-s4);
-    margin-bottom: var(--seeds-s4);
   }
 }
 
@@ -68,15 +72,17 @@
   justify-content: flex-start;
   padding-top: var(--seeds-s4);
   width: fit-content;
-  @media (max-width: theme("screens.md")) {
+  @media (max-width: theme("screens.sm")) {
     flex-direction: column;
+    padding-top: var(--seeds-s6);
   }
 }
 
 .status-item__status {
   padding-block: 0;
   font-size: var(--seeds-font-size-sm);
-  @media (max-width: theme("screens.md")) {
+  color: var(--seeds-color-gray-750);
+  @media (max-width: theme("screens.sm")) {
     padding-block: var(--seeds-s4);
   }
 }
@@ -88,5 +94,6 @@
 
 .status-item__confirm-number {
   font-size: var(--seeds-font-size-lg);
+  font-weight: var(--seeds-font-weight-semibold);
   padding-top: var(--seeds-s2);
 }
diff --git a/sites/public/src/components/account/StatusItem.tsx b/sites/public/src/components/account/StatusItem.tsx
index 94f32ad023..3237ee12cf 100644
--- a/sites/public/src/components/account/StatusItem.tsx
+++ b/sites/public/src/components/account/StatusItem.tsx
@@ -24,9 +24,7 @@ interface StatusItemProps {
 
 const StatusItem = (props: StatusItemProps) => {
   return (
-    <Card.Section
-      className={`${accountStyles["account-card-section"]} ${accountStyles["application-card-section"]}`}
-    >
+    <Card.Section className={accountStyles["account-card-applications-section"]}>
       <article className={styles["status-item"]}>
         <header className={styles["status-item__header"]}>
           <h3 className={styles["status-item__title"]}>{props.listingName}</h3>
@@ -57,7 +55,7 @@ const StatusItem = (props: StatusItemProps) => {
             {props.applicationDueDate && (
               <p className={styles["status-item__due"]}>
                 {props.strings?.applicationsDeadline ?? t("listings.applicationDeadline")}:{" "}
-                {props.applicationDueDate}
+                <span className={styles["status-item__due-date"]}>{props.applicationDueDate}</span>
               </p>
             )}
           </div>
@@ -70,7 +68,7 @@ const StatusItem = (props: StatusItemProps) => {
             </Button>
           </div>
           <div>
-            <Button href={props.listingURL} variant="primary-outlined" size="sm">
+            <Button href={props.listingURL} variant="secondary-outlined" size="sm">
               {props.strings?.seeListing ?? t("t.seeListing")}
             </Button>
           </div>
diff --git a/sites/public/src/components/applications/SubmittedApplicationView.modules.scss b/sites/public/src/components/applications/SubmittedApplicationView.modules.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/sites/public/src/components/applications/SubmittedApplicationView.tsx b/sites/public/src/components/applications/SubmittedApplicationView.tsx
new file mode 100644
index 0000000000..a500d8e07a
--- /dev/null
+++ b/sites/public/src/components/applications/SubmittedApplicationView.tsx
@@ -0,0 +1,101 @@
+import { t } from "@bloom-housing/ui-components"
+import { Button, Card, Heading, Icon } from "@bloom-housing/ui-seeds"
+import FormSummaryDetails from "../shared/FormSummaryDetails"
+import { listingSectionQuestions } from "@bloom-housing/shared-helpers"
+import {
+  Application,
+  Listing,
+  MultiselectQuestionsApplicationSectionEnum,
+} from "@bloom-housing/shared-helpers/src/types/backend-swagger"
+import { useMemo } from "react"
+import { DATE_FORMAT } from "../../lib/constants"
+import dayjs from "dayjs"
+import { faChevronLeft } from "@fortawesome/free-solid-svg-icons"
+
+interface SubmittedApplicationViewProps {
+  application: Application
+  listing: Listing
+  backHref: string
+}
+
+const SubmittedApplicationView = ({
+  application,
+  listing,
+  backHref,
+}: SubmittedApplicationViewProps) => {
+  const confirmationDate = useMemo(() => {
+    return dayjs().format(DATE_FORMAT)
+  }, [])
+
+  return (
+    <>
+      <Card spacing={"sm"} className={"my-6"}>
+        <Card.Section className={"bg-primary px-8 py-4"}>
+          <Heading priority={1} size="xl" className={"font-bold font-alt-sans text-white"}>
+            {listing?.name}
+          </Heading>
+        </Card.Section>
+        <Card.Section className={"px-8"}>
+          <div>
+            {listing && (
+              <Button
+                size="sm"
+                variant={"text"}
+                href={`/listing/${listing.id}/${listing?.urlSlug}`}
+              >
+                {t("application.confirmation.viewOriginalListing")}
+              </Button>
+            )}
+          </div>
+        </Card.Section>
+      </Card>
+      <Card spacing={"lg"} className={"mb-6"}>
+        <Card.Section divider={"inset"}>
+          <Button
+            size="sm"
+            leadIcon={<Icon icon={faChevronLeft} />}
+            variant={"text"}
+            href={backHref}
+          >
+            {t("t.back")}
+          </Button>
+          <Heading priority={2} size={"2xl"} className="mt-6">
+            {t("application.confirmation.informationSubmittedTitle")}
+          </Heading>
+          <p className="field-note mt-4">
+            {t("application.confirmation.submitted")}
+            {confirmationDate}
+          </p>
+        </Card.Section>
+        <Card.Section divider={"inset"} className={"border-none"}>
+          <p>{`${t("application.yourLotteryNumber")}:`}</p>
+          <p className="font-semibold text-lg mt-3">
+            {application?.confirmationCode || application?.id}
+          </p>
+        </Card.Section>
+        <FormSummaryDetails
+          listing={listing}
+          application={application}
+          hidePreferences={
+            listingSectionQuestions(listing, MultiselectQuestionsApplicationSectionEnum.preferences)
+              ?.length === 0
+          }
+          hidePrograms={
+            listingSectionQuestions(listing, MultiselectQuestionsApplicationSectionEnum.programs)
+              ?.length === 0
+          }
+          editMode={false}
+        />
+        <Card.Section>
+          <div className="hide-for-print">
+            <Button variant="text" size="sm" onClick={() => window.print()}>
+              {t("application.confirmation.printCopy")}
+            </Button>
+          </div>
+        </Card.Section>
+      </Card>
+    </>
+  )
+}
+
+export { SubmittedApplicationView as default, SubmittedApplicationView }
diff --git a/sites/public/src/components/shared/FormSummaryDetails.tsx b/sites/public/src/components/shared/FormSummaryDetails.tsx
index 3b1cd8ce01..0d96bdb970 100644
--- a/sites/public/src/components/shared/FormSummaryDetails.tsx
+++ b/sites/public/src/components/shared/FormSummaryDetails.tsx
@@ -142,7 +142,7 @@ const FormSummaryDetails = ({
   ) => {
     return (
       <>
-        <h3 className="form--card__sub-header">
+        <h3 className="form--card__sub-header border-none text-xl">
           {header}
           {editMode && !validationError && <EditLink href={appLink} />}
         </h3>
@@ -187,7 +187,7 @@ const FormSummaryDetails = ({
 
   return (
     <>
-      <h3 className="form--card__sub-header">
+      <h3 className="form--card__sub-header border-none text-xl">
         {t("t.you")}
         {editMode && <EditLink href="/applications/contact/name" />}
       </h3>
@@ -304,7 +304,7 @@ const FormSummaryDetails = ({
       {application.alternateContact.type !== "" &&
         application.alternateContact.type !== "noContact" && (
           <div id="alternateContact">
-            <h3 className="form--card__sub-header">
+            <h3 className="form--card__sub-header border-none text-xl">
               {t("application.alternateContact.type.label")}
               {editMode && !validationError && (
                 <EditLink href="/applications/contact/alternate-contact-type" />
@@ -365,7 +365,7 @@ const FormSummaryDetails = ({
 
       {application.householdSize > 1 && (
         <div id="householdMembers">
-          <h3 className="form--card__sub-header">
+          <h3 className="form--card__sub-header border-none text-xl">
             {t("application.household.householdMembers")}
             {editMode && !validationError && (
               <EditLink href="/applications/household/add-members" />
@@ -417,7 +417,7 @@ const FormSummaryDetails = ({
       )}
 
       <div id="householdDetails">
-        <h3 className="form--card__sub-header">
+        <h3 className="form--card__sub-header border-none text-xl">
           {t("application.review.householdDetails")}
           {editMode && !validationError && (
             <EditLink href="/applications/household/preferred-units" />
@@ -478,7 +478,7 @@ const FormSummaryDetails = ({
               : null
           )}
 
-        <h3 className="form--card__sub-header">
+        <h3 className="form--card__sub-header border-none text-xl">
           {t("t.income")}
           {editMode && !validationError && <EditLink href="/applications/financial/vouchers" />}
         </h3>
diff --git a/sites/public/src/pages/account/StatusItemWrapper.tsx b/sites/public/src/pages/account/StatusItemWrapper.tsx
index 1629112a30..599359f4b0 100644
--- a/sites/public/src/pages/account/StatusItemWrapper.tsx
+++ b/sites/public/src/pages/account/StatusItemWrapper.tsx
@@ -11,11 +11,11 @@ interface StatusItemWrapperProps {
 }
 
 const StatusItemWrapper = (props: StatusItemWrapperProps) => {
+  const applicationDueDate = props.application?.fullListing?.applicationDueDate
+
   return (
     <StatusItem
-      applicationDueDate={dayjs(props.application?.fullListing?.applicationDueDate).format(
-        "MMMM D, YYYY"
-      )}
+      applicationDueDate={applicationDueDate && dayjs(applicationDueDate).format("MMMM D, YYYY")}
       applicationURL={`application/${props.application?.id}`}
       applicationUpdatedAt={dayjs(props.application?.updatedAt).format("MMMM D, YYYY")}
       confirmationNumber={props.application?.confirmationCode || props.application?.id}
diff --git a/sites/public/src/pages/account/account.module.scss b/sites/public/src/pages/account/account.module.scss
index 79e3b2761b..f1431b1660 100644
--- a/sites/public/src/pages/account/account.module.scss
+++ b/sites/public/src/pages/account/account.module.scss
@@ -1,19 +1,24 @@
 .account-card-container {
   padding-inline: var(--seeds-s6);
   @media (max-width: theme("screens.sm")) {
-    padding-inline: 0rem;
-    padding-block: var(--seeds-s4);
+    padding: var(--seeds-s4);
   }
 }
 
-.account-card-section {
-  @media (min-width: theme("screens.sm")) {
-    --card-content-padding-inline: var(--seeds-s12);
+.account-card-applications-section {
+  --card-content-padding-inline: var(--seeds-s12);
+  @media (max-width: theme("screens.sm")) {
+    --card-content-padding-inline: var(--seeds-s4);
+    --card-content-padding-block: var(--seeds-s4);
   }
 }
 
-.application-card-section {
-  --card-content-padding-block: var(--seeds-s6);
+.account-card-settings-section {
+  --card-content-padding-inline: var(--seeds-s12);
+  @media (max-width: theme("screens.sm")) {
+    --card-content-padding-inline: var(--seeds-s4);
+    --card-content-padding-block: var(--seeds-s6);
+  }
 }
 
 .account-settings-label {
@@ -22,5 +27,12 @@
 }
 
 .application-no-results {
-  padding-bottom: var(--seeds-s4);
+  padding: var(--seeds-s8);
+  background-color: var(--seeds-bg-color-muted);
+  @media (max-width: theme("screens.sm")) {
+    padding: var(--seeds-s6);
+  }
+}
+.application-no-results-text {
+  padding-bottom: var(--seeds-s6);
 }
diff --git a/sites/public/src/pages/account/application/[id].tsx b/sites/public/src/pages/account/application/[id].tsx
index 68ee3a445d..05db6fb920 100644
--- a/sites/public/src/pages/account/application/[id].tsx
+++ b/sites/public/src/pages/account/application/[id].tsx
@@ -1,17 +1,16 @@
 import React, { useEffect, useState, useContext } from "react"
-import { t, FormCard, dateToString, Heading } from "@bloom-housing/ui-components"
-import Link from "next/link"
-import FormSummaryDetails from "../../../components/shared/FormSummaryDetails"
+import { t } from "@bloom-housing/ui-components"
 import FormsLayout from "../../../layouts/forms"
 import { useRouter } from "next/router"
 import { AuthContext, RequireLogin } from "@bloom-housing/shared-helpers"
 import { Application, Listing } from "@bloom-housing/shared-helpers/src/types/backend-swagger"
+import { SubmittedApplicationView } from "../../../components/applications/SubmittedApplicationView"
+import { Card, Button, Heading } from "@bloom-housing/ui-seeds"
 
 export default () => {
   const router = useRouter()
   const applicationId = router.query.id as string
-  const { applicationsService, listingsService } = useContext(AuthContext)
-  const { profile } = useContext(AuthContext)
+  const { applicationsService, listingsService, profile } = useContext(AuthContext)
   const [application, setApplication] = useState<Application>()
   const [listing, setListing] = useState<Listing>()
   const [unauthorized, setUnauthorized] = useState(false)
@@ -50,71 +49,41 @@ export default () => {
       <RequireLogin signInPath="/sign-in" signInMessage={t("t.loginIsRequired")}>
         <FormsLayout>
           {noApplication && (
-            <FormCard header={<Heading priority={1}>{t("account.application.error")}</Heading>}>
-              <p className="field-note mb-5">{t("account.application.noApplicationError")}</p>
-              <a href={`applications`} className="button is-small">
-                {t("account.application.return")}
-              </a>
-            </FormCard>
+            <Card spacing={"sm"} className={"my-6"}>
+              <Card.Section className={"bg-primary px-8 py-4"}>
+                <Heading priority={1} className={"text-xl font-bold font-alt-sans text-white"}>
+                  {t("account.application.error")}
+                </Heading>
+              </Card.Section>
+              <Card.Section className={"px-8"}>
+                <p className="field-note mb-5">{t("account.application.noApplicationError")}</p>
+                <Button href={`applications`} size="sm" variant="primary-outlined">
+                  {t("account.application.return")}
+                </Button>
+              </Card.Section>
+            </Card>
           )}
           {unauthorized && (
-            <FormCard header={<Heading priority={1}>{t("account.application.error")}</Heading>}>
-              <p className="field-note mb-5">{t("account.application.noAccessError")}</p>
-              <a href={`applications`} className="button is-small">
-                {t("account.application.return")}
-              </a>
-            </FormCard>
+            <Card spacing={"sm"} className={"my-6"}>
+              <Card.Section className={"bg-primary px-8 py-4"}>
+                <Heading priority={1} className={"text-xl font-bold font-alt-sans text-white"}>
+                  {t("account.application.error")}
+                </Heading>
+              </Card.Section>
+              <Card.Section className={"px-8"}>
+                <p className="field-note mb-5">{t("account.application.noAccessError")}</p>
+                <Button href={`applications`} size="sm" variant="primary-outlined">
+                  {t("account.application.return")}
+                </Button>
+              </Card.Section>
+            </Card>
           )}
           {application && (
-            <>
-              <FormCard
-                header={<Heading priority={1}>{t("account.application.confirmation")}</Heading>}
-              >
-                <div className="py-2">
-                  {listing && (
-                    <span className="lined text-sm">
-                      <Link
-                        href={`listing/id=${listing.id}`}
-                        as={`${origin}/listing/${listing.id}/${listing.urlSlug}`}
-                      >
-                        {t("application.confirmation.viewOriginalListing")}
-                      </Link>
-                    </span>
-                  )}
-                </div>
-              </FormCard>
-
-              <FormCard>
-                <div className="form-card__lead border-b">
-                  <h2 className="form-card__title is-borderless">
-                    {t("application.confirmation.informationSubmittedTitle")}
-                  </h2>
-                  <p className="field-note mt-4 text-center">
-                    {t("application.confirmation.submitted")}
-                    {dateToString(application.submissionDate)}
-                  </p>
-                </div>
-                <div className="form-card__group text-center">
-                  <h3 className="form-card__paragraph-title">
-                    {t("application.confirmation.lotteryNumber")}
-                  </h3>
-
-                  <p className="font-serif text-2xl my-0">
-                    {application.confirmationCode || application.id}
-                  </p>
-                </div>
-
-                <FormSummaryDetails listing={listing} application={application} />
-
-                <div className="form-card__pager hide-for-print">
-                  <div className="form-card__pager-row py-6">
-                    <button className="lined text-sm" onClick={() => window.print()}>
-                      {t("application.confirmation.printCopy")}
-                    </button>
-                  </div>
-                </div>
-              </FormCard>
-            </>
+            <SubmittedApplicationView
+              application={application}
+              listing={listing}
+              backHref={"/account/applications"}
+            />
           )}
         </FormsLayout>
       </RequireLogin>
diff --git a/sites/public/src/pages/account/applications.tsx b/sites/public/src/pages/account/applications.tsx
index 4f370fd3ed..793c8aa73a 100644
--- a/sites/public/src/pages/account/applications.tsx
+++ b/sites/public/src/pages/account/applications.tsx
@@ -62,21 +62,21 @@ const Applications = () => {
 
   const noApplicationsSection = () => {
     return (
-      <Card.Section
-        className={`${styles["account-card-section"]} ${styles["application-card-section"]}`}
-      >
-        {error ? (
-          <Heading size="2xl">{`${t("account.errorFetchingApplications")}`}</Heading>
-        ) : (
-          <>
-            <Heading className={styles["application-no-results"]} size="2xl">
-              {t("account.noApplications")}
-            </Heading>
-            <Button variant="primary-outlined" href="/listings">
-              {t("listings.browseListings")}
-            </Button>
-          </>
-        )}
+      <Card.Section className={styles["account-card-applications-section"]}>
+        <div className={styles["application-no-results"]}>
+          {error ? (
+            <Heading priority={2} size="xl">{`${t("account.errorFetchingApplications")}`}</Heading>
+          ) : (
+            <>
+              <Heading priority={2} className={styles["application-no-results-text"]} size="xl">
+                {t("account.noApplications")}
+              </Heading>
+              <Button size="sm" variant="primary-outlined" href="/listings">
+                {t("listings.browseListings")}
+              </Button>
+            </>
+          )}
+        </div>
       </Card.Section>
     )
   }
@@ -93,7 +93,9 @@ const Applications = () => {
               iconSymbol="application"
               title={t("account.myApplications")}
               subtitle={t("account.myApplicationsSubtitle")}
+              headingPriority={1}
               divider="inset"
+              thinMobile
             >
               <>
                 <LoadingOverlay isLoading={loading}>
diff --git a/sites/public/src/pages/account/dashboard.tsx b/sites/public/src/pages/account/dashboard.tsx
index df964db8d5..e9087870e0 100644
--- a/sites/public/src/pages/account/dashboard.tsx
+++ b/sites/public/src/pages/account/dashboard.tsx
@@ -63,9 +63,11 @@ function Dashboard(props: DashboardProps) {
                     iconSymbol="application"
                     title={t("account.myApplications")}
                     subtitle={t("account.myApplicationsSubtitle")}
+                    thinDesktop
                   >
-                    <Card.Section className={styles["account-card-section"]}>
+                    <Card.Section>
                       <Button
+                        size="sm"
                         href={"/account/applications"}
                         variant="primary-outlined"
                         id="account-dashboard-applications"
@@ -81,9 +83,10 @@ function Dashboard(props: DashboardProps) {
                     title={t("account.accountSettings")}
                     subtitle={t("account.accountSettingsSubtitle")}
                     id="account-dashboard-settings"
+                    thinDesktop
                   >
-                    <Card.Section className={styles["account-card-section"]}>
-                      <Button href={"/account/edit"} variant="primary-outlined">
+                    <Card.Section>
+                      <Button size="sm" href={"/account/edit"} variant="primary-outlined">
                         {t("account.accountSettingsUpdate")}
                       </Button>
                     </Card.Section>
diff --git a/sites/public/src/pages/account/edit.tsx b/sites/public/src/pages/account/edit.tsx
index 12525d9c5f..2132780793 100644
--- a/sites/public/src/pages/account/edit.tsx
+++ b/sites/public/src/pages/account/edit.tsx
@@ -156,6 +156,7 @@ const Edit = () => {
           subtitle={t("account.accountSettingsSubtitle")}
           divider="inset"
           headingPriority={1}
+          thinMobile
         >
           <>
             <SiteAlert type="notice" dismissable />
@@ -170,7 +171,7 @@ const Edit = () => {
                 {nameAlert.message}
               </AlertBox>
             )}
-            <Card.Section divider="inset" className={styles["account-card-section"]}>
+            <Card.Section divider="inset" className={styles["account-card-settings-section"]}>
               <Form id="update-name" onSubmit={handleSubmit(onNameSubmit)}>
                 <label className={styles["account-settings-label"]} htmlFor="firstName">
                   {t("application.name.yourName")}
@@ -217,7 +218,7 @@ const Edit = () => {
                       : t("errors.lastNameError")
                   }
                 />
-                <Button type="submit" variant="primary-outlined">
+                <Button type="submit" size="sm" variant="primary-outlined">
                   {t("account.settings.update")}
                 </Button>
               </Form>
@@ -233,7 +234,7 @@ const Edit = () => {
                 {dobAlert.message}
               </AlertBox>
             )}
-            <Card.Section divider="inset" className={styles["account-card-section"]}>
+            <Card.Section divider="inset" className={styles["account-card-settings-section"]}>
               <Form id="update-birthdate" onSubmit={handleSubmit(onBirthdateSubmit)}>
                 <DOBField
                   id="dateOfBirth"
@@ -250,7 +251,8 @@ const Edit = () => {
                   }}
                   label={t("application.name.yourDateOfBirth")}
                 />
-                <Button type="submit" variant="primary-outlined" className="mt-6">
+                <p className={"field-sub-note"}>{t("application.name.dobHelper")}</p>
+                <Button type="submit" size="sm" variant="primary-outlined" className="mt-6">
                   {t("account.settings.update")}
                 </Button>
               </Form>
@@ -265,7 +267,7 @@ const Edit = () => {
                 {emailAlert.message}
               </AlertBox>
             )}
-            <Card.Section divider="inset" className={styles["account-card-section"]}>
+            <Card.Section divider="inset" className={styles["account-card-settings-section"]}>
               <Form id="update-email" onSubmit={handleSubmit(onEmailSubmit)}>
                 <label className={styles["account-settings-label"]} htmlFor="email">
                   {t("application.name.yourEmailAddress")}
@@ -282,7 +284,7 @@ const Edit = () => {
                   register={register}
                   defaultValue={profile ? profile.email : null}
                 />
-                <Button type="submit" variant="primary-outlined">
+                <Button type="submit" size="sm" variant="primary-outlined">
                   {t("account.settings.update")}
                 </Button>
               </Form>
@@ -298,7 +300,7 @@ const Edit = () => {
                 {passwordAlert.message}
               </AlertBox>
             )}
-            <Card.Section divider="inset" className={styles["account-card-section"]}>
+            <Card.Section divider="inset" className={styles["account-card-settings-section"]}>
               <Form id="update-password" onSubmit={handleSubmit(onPasswordSubmit)}>
                 <fieldset>
                   <legend className={styles["account-settings-label"]}>
@@ -352,7 +354,7 @@ const Edit = () => {
                     register={register}
                   />
 
-                  <Button type="submit" variant="primary-outlined">
+                  <Button type="submit" size="sm" variant="primary-outlined">
                     {t("account.settings.update")}
                   </Button>
                 </fieldset>
diff --git a/sites/public/src/pages/applications/view.tsx b/sites/public/src/pages/applications/view.tsx
index 6da789fc53..77aa3043dc 100644
--- a/sites/public/src/pages/applications/view.tsx
+++ b/sites/public/src/pages/applications/view.tsx
@@ -2,23 +2,12 @@
 5.5 View
 Optional application summary
 */
-import Link from "next/link"
-import dayjs from "dayjs"
-import { t } from "@bloom-housing/ui-components"
 import FormsLayout from "../../layouts/forms"
 import { AppSubmissionContext } from "../../lib/applications/AppSubmissionContext"
-import React, { useContext, useEffect, useMemo } from "react"
-import FormSummaryDetails from "../../components/shared/FormSummaryDetails"
-import { DATE_FORMAT, UserStatus } from "../../lib/constants"
-import {
-  pushGtmEvent,
-  PageView,
-  AuthContext,
-  listingSectionQuestions,
-} from "@bloom-housing/shared-helpers"
-import { MultiselectQuestionsApplicationSectionEnum } from "@bloom-housing/shared-helpers/src/types/backend-swagger"
-import { Card, Heading } from "@bloom-housing/ui-seeds"
-import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card"
+import React, { useContext, useEffect } from "react"
+import { pushGtmEvent, PageView, AuthContext } from "@bloom-housing/shared-helpers"
+import { UserStatus } from "../../lib/constants"
+import { SubmittedApplicationView } from "../../components/applications/SubmittedApplicationView"
 
 const ApplicationView = () => {
   const { application, listing } = useContext(AppSubmissionContext)
@@ -32,69 +21,13 @@ const ApplicationView = () => {
     })
   }, [profile])
 
-  const confirmationDate = useMemo(() => {
-    return dayjs().format(DATE_FORMAT)
-  }, [])
-
   return (
     <FormsLayout>
-      <Card spacing={"sm"} className={"my-6"}>
-        <CardSection className={"bg-primary px-8 py-4 text-white"}>
-          <Heading priority={1} className={"text-xl font-bold font-alt-sans"}>
-            {t("account.application.confirmation")}
-          </Heading>
-        </CardSection>
-        <CardSection className={"px-8"}>
-          <div>
-            {listing && (
-              <span className={"lined text-sm"}>
-                <Link href={`/listing/${listing.id}/${listing.urlSlug}`}>
-                  {t("application.confirmation.viewOriginalListing")}
-                </Link>
-              </span>
-            )}
-          </div>
-        </CardSection>
-      </Card>
-      <Card spacing={"lg"} className={"mb-6"}>
-        <CardSection divider={"inset"}>
-          <Heading priority={2} size={"2xl"}>
-            {t("application.confirmation.informationSubmittedTitle")}
-          </Heading>
-          <p className="field-note mt-4">
-            {t("application.confirmation.submitted")}
-            {confirmationDate}
-          </p>
-        </CardSection>
-        <CardSection divider={"inset"} className={"border-none"}>
-          <Heading priority={3} size={"md"}>
-            {t("application.confirmation.lotteryNumber")}
-          </Heading>
-          <p className="font-serif text-2xl my-0">
-            {application.confirmationCode || application.id}
-          </p>
-        </CardSection>
-        <FormSummaryDetails
-          listing={listing}
-          application={application}
-          hidePreferences={
-            listingSectionQuestions(listing, MultiselectQuestionsApplicationSectionEnum.preferences)
-              ?.length === 0
-          }
-          hidePrograms={
-            listingSectionQuestions(listing, MultiselectQuestionsApplicationSectionEnum.programs)
-              ?.length === 0
-          }
-          editMode={false}
-        />
-        <CardSection>
-          <div className="hide-for-print">
-            <button className="lined text-sm" onClick={() => window.print()}>
-              {t("application.confirmation.printCopy")}
-            </button>
-          </div>
-        </CardSection>
-      </Card>
+      <SubmittedApplicationView
+        application={application}
+        listing={listing}
+        backHref={"/applications/review/confirmation"}
+      ></SubmittedApplicationView>
     </FormsLayout>
   )
 }
diff --git a/sites/public/src/pages/create-account.tsx b/sites/public/src/pages/create-account.tsx
index 6d21f24192..2c18f6790e 100644
--- a/sites/public/src/pages/create-account.tsx
+++ b/sites/public/src/pages/create-account.tsx
@@ -96,6 +96,7 @@ export default () => {
             title={t("account.createAccount")}
             divider="inset"
             headingPriority={1}
+            thinMobile
           >
             <>
               {requestError && (
@@ -107,7 +108,7 @@ export default () => {
               <Form id="create-account" onSubmit={handleSubmit(onSubmit)}>
                 <CardSection
                   divider={"inset"}
-                  className={accountCardStyles["account-card-section"]}
+                  className={accountCardStyles["account-card-settings-section"]}
                 >
                   <label className={styles["create-account-header"]} htmlFor="firstName">
                     {t("application.name.yourName")}
@@ -163,7 +164,7 @@ export default () => {
                 </CardSection>
                 <CardSection
                   divider={"inset"}
-                  className={accountCardStyles["account-card-section"]}
+                  className={accountCardStyles["account-card-settings-section"]}
                 >
                   <DOBField
                     register={register}
@@ -181,7 +182,7 @@ export default () => {
 
                 <CardSection
                   divider={"inset"}
-                  className={accountCardStyles["account-card-section"]}
+                  className={accountCardStyles["account-card-settings-section"]}
                 >
                   <Field
                     caps={true}
@@ -197,7 +198,7 @@ export default () => {
                 </CardSection>
                 <CardSection
                   divider={"inset"}
-                  className={accountCardStyles["account-card-section"]}
+                  className={accountCardStyles["account-card-settings-section"]}
                 >
                   <Field
                     caps={true}
@@ -249,7 +250,7 @@ export default () => {
                 </CardSection>
                 <CardSection
                   divider={"inset"}
-                  className={accountCardStyles["account-card-section"]}
+                  className={accountCardStyles["account-card-settings-section"]}
                 >
                   <Heading priority={2} size="2xl" className="mb-6">
                     {t("account.haveAnAccount")}