diff --git a/shared-helpers/index.ts b/shared-helpers/index.ts
index 74a81269f2..50f4aa02d6 100644
--- a/shared-helpers/index.ts
+++ b/shared-helpers/index.ts
@@ -7,6 +7,7 @@ export * from "./src/auth/catchNetworkError"
 export * from "./src/utilities/blankApplication"
 export * from "./src/utilities/events"
 export * from "./src/utilities/formKeys"
+export * from "./src/utilities/getListingRedirectUrl"
 export * from "./src/utilities/gtm"
 export * from "./src/utilities/nextjs"
 export * from "./src/utilities/pdfs"
@@ -18,6 +19,7 @@ export * from "./src/utilities/unitTypes"
 export * from "./src/utilities/DateFormat"
 export * from "./src/utilities/constants"
 export * from "./src/utilities/maskData"
+export * from "./src/views/components/BloomCard"
 export * from "./src/views/multiselectQuestions"
 export * from "./src/views/occupancyFormatting"
 export * from "./src/views/summaryTables"
diff --git a/shared-helpers/src/types/scss.d.ts b/shared-helpers/src/types/scss.d.ts
new file mode 100644
index 0000000000..e4089fc807
--- /dev/null
+++ b/shared-helpers/src/types/scss.d.ts
@@ -0,0 +1 @@
+declare module "*.scss"
diff --git a/shared-helpers/src/views/accounts/AccountCard.module.scss b/shared-helpers/src/views/accounts/AccountCard.module.scss
deleted file mode 100644
index c9fa125e30..0000000000
--- a/shared-helpers/src/views/accounts/AccountCard.module.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-.account-card {
-  width: 100%;
-  height: 100%;
-  justify-content: space-between;
-  @media (max-width: theme("screens.sm")) {
-    --card-spacing-lg: var(--seeds-s6);
-  }
-}
-
-.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);
-  }
-}
-
-.acccount-card-icon {
-  margin-bottom: var(--seeds-s3);
-}
-
-.account-card-heading-group {
-  --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 {
-  margin-top: var(--seeds-s3);
-}
diff --git a/shared-helpers/src/views/accounts/AccountCard.tsx b/shared-helpers/src/views/accounts/AccountCard.tsx
deleted file mode 100644
index 47ef391218..0000000000
--- a/shared-helpers/src/views/accounts/AccountCard.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { Heading, HeadingGroup, Icon } from "@bloom-housing/ui-seeds"
-import Card from "@bloom-housing/ui-seeds/src/blocks/Card"
-import React from "react"
-import styles from "./AccountCard.module.scss"
-import { CustomIconMap, CustomIconType } from "./CustomIconMap"
-
-interface AccountCardProps {
-  iconSymbol: CustomIconType
-  title: string
-  subtitle?: string
-  children: React.ReactElement
-  id?: string
-  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]
-
-  return (
-    <Card spacing="lg" className={classNames.join(" ")}>
-      <Card.Header divider={props?.divider}>
-        <Icon size="2xl" className={styles["account-card-icon"]}>
-          {customIcon}
-        </Icon>
-        {props.subtitle ? (
-          <HeadingGroup
-            size="2xl"
-            heading={props.title}
-            subheading={props.subtitle}
-            className={styles["account-card-heading-group"]}
-            headingPriority={props.headingPriority}
-          />
-        ) : (
-          <Heading size="2xl" className={styles["account-card-heading"]}>
-            {props.title}
-          </Heading>
-        )}
-      </Card.Header>
-      {props.children}
-    </Card>
-  )
-}
-
-export { AccountCard as default, AccountCard }
diff --git a/shared-helpers/src/views/components/BloomCard.module.scss b/shared-helpers/src/views/components/BloomCard.module.scss
new file mode 100644
index 0000000000..c1f4c1ae69
--- /dev/null
+++ b/shared-helpers/src/views/components/BloomCard.module.scss
@@ -0,0 +1,30 @@
+.form-card {
+  --card-content-padding-inline: var(--seeds-s12);
+  --card-header-padding-inline: var(--seeds-s12);
+  @media (max-width: theme("screens.sm")) {
+    --card-content-padding-inline: var(--seeds-s4);
+    --card-header-padding-inline: var(--seeds-s4);
+    --card-border-radius: 0;
+    --card-content-padding-block: var(--seeds-s6);
+  }
+  width: 100%;
+}
+
+.block-card {
+  width: 100%;
+  height: 100%;
+  justify-content: space-between;
+  --subheading-color: var(--seeds-text-color-light);
+  --heading-margin: var(--seeds-s3);
+  @media (max-width: theme("screens.sm")) {
+    --card-spacing-lg: var(--seeds-s6);
+  }
+}
+
+.card-icon {
+  margin-bottom: var(--seeds-s3);
+}
+
+.card-heading-group {
+  --subheading-color: var(--seeds-text-color-light);
+}
diff --git a/shared-helpers/src/views/components/BloomCard.tsx b/shared-helpers/src/views/components/BloomCard.tsx
new file mode 100644
index 0000000000..3a6922ee70
--- /dev/null
+++ b/shared-helpers/src/views/components/BloomCard.tsx
@@ -0,0 +1,68 @@
+import { Heading, HeadingGroup, Icon } from "@bloom-housing/ui-seeds"
+import Card from "@bloom-housing/ui-seeds/src/blocks/Card"
+import React from "react"
+import styles from "./BloomCard.module.scss"
+import { CustomIconMap, CustomIconType } from "../accounts/CustomIconMap"
+
+interface BloomCardProps {
+  iconSymbol?: CustomIconType
+  title?: string
+  subtitle?: string | React.ReactNode
+  children: React.ReactElement
+  id?: string
+  headingPriority?: 1 | 2 | 3 | 4 | 5 | 6
+  className?: string
+  variant?: "form" | "block"
+  headerLink?: React.ReactNode
+}
+
+const BloomCard = (props: BloomCardProps) => {
+  const classNames = [props.variant === "block" ? styles["block-card"] : styles["form-card"]]
+  if (props.className) classNames.push(props.className)
+
+  const customIcon = props.iconSymbol ? CustomIconMap[props.iconSymbol] : undefined
+
+  const getTitle = () => {
+    if (props.title) {
+      if (props.subtitle) {
+        return (
+          <HeadingGroup
+            size="2xl"
+            heading={props.title}
+            subheading={props.subtitle}
+            className={styles["card-heading-group"]}
+            headingPriority={props.headingPriority || 1}
+          />
+        )
+      }
+      return (
+        <Heading size="2xl" priority={props.headingPriority || 1}>
+          {props.title}
+        </Heading>
+      )
+    }
+    return null
+  }
+
+  const title = getTitle()
+
+  return (
+    <Card spacing="lg" className={classNames.join(" ")}>
+      {title && (
+        <Card.Header divider={props.variant === "block" ? undefined : "inset"}>
+          {customIcon && (
+            <Icon size="2xl" className={styles["card-icon"]}>
+              {customIcon}
+            </Icon>
+          )}
+          {props.headerLink && props.headerLink}
+          {title}
+        </Card.Header>
+      )}
+
+      {props.children}
+    </Card>
+  )
+}
+
+export { BloomCard as default, BloomCard }
diff --git a/shared-helpers/src/views/forgot-password/FormForgotPassword.module.scss b/shared-helpers/src/views/forgot-password/FormForgotPassword.module.scss
new file mode 100644
index 0000000000..fa85af41b2
--- /dev/null
+++ b/shared-helpers/src/views/forgot-password/FormForgotPassword.module.scss
@@ -0,0 +1,3 @@
+.forgot-password-submit-button {
+  margin-top: var(--seeds-s1);
+}
diff --git a/shared-helpers/src/views/forgot-password/FormForgotPassword.tsx b/shared-helpers/src/views/forgot-password/FormForgotPassword.tsx
index be2a12497f..c6ae0baa7e 100644
--- a/shared-helpers/src/views/forgot-password/FormForgotPassword.tsx
+++ b/shared-helpers/src/views/forgot-password/FormForgotPassword.tsx
@@ -3,8 +3,6 @@ import { Button } from "@bloom-housing/ui-seeds"
 import {
   Field,
   Form,
-  FormCard,
-  Icon,
   t,
   AlertBox,
   SiteAlert,
@@ -13,8 +11,11 @@ import {
   NavigationContext,
   emailRegex,
 } from "@bloom-housing/ui-components"
+import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card"
 import { NetworkErrorReset, NetworkStatusContent } from "../../auth/catchNetworkError"
 import type { UseFormMethods } from "react-hook-form"
+import BloomCard from "../components/BloomCard"
+import styles from "./FormForgotPassword.module.scss"
 
 export type FormForgotPasswordProps = {
   control: FormForgotPasswordControl
@@ -49,59 +50,58 @@ const FormForgotPassword = ({
   const { router } = useContext(NavigationContext)
 
   return (
-    <FormCard>
-      <div className="form-card__lead text-center border-b mx-0">
-        <Icon size="2xl" symbol="profile" />
-        <h1 className="form-card__title">{t("authentication.forgotPassword.sendEmail")}</h1>
-      </div>
+    <BloomCard title={t("authentication.forgotPassword.sendEmail")} iconSymbol={"profile"}>
+      <>
+        {Object.entries(errors).length > 0 && !networkError.error && (
+          <AlertBox type="alert" inverted closeable>
+            {errors.authentication ? errors.authentication.message : t("errors.errorsToResolve")}
+          </AlertBox>
+        )}
 
-      {Object.entries(errors).length > 0 && !networkError.error && (
-        <AlertBox type="alert" inverted closeable>
-          {errors.authentication ? errors.authentication.message : t("errors.errorsToResolve")}
-        </AlertBox>
-      )}
+        {!!networkError.error?.error && Object.entries(errors).length === 0 && (
+          <ErrorMessage id={"forgotpasswordemail-error"} error={!!networkError.error}>
+            <AlertBox type="alert" inverted onClose={() => networkError.reset()}>
+              {networkError.error.title}
+            </AlertBox>
 
-      {!!networkError.error?.error && Object.entries(errors).length === 0 && (
-        <ErrorMessage id={"forgotpasswordemail-error"} error={!!networkError.error}>
-          <AlertBox type="alert" inverted onClose={() => networkError.reset()}>
-            {networkError.error.title}
-          </AlertBox>
+            <AlertNotice title="" type="alert" inverted>
+              {networkError.error.description}
+            </AlertNotice>
+          </ErrorMessage>
+        )}
 
-          <AlertNotice title="" type="alert" inverted>
-            {networkError.error.description}
-          </AlertNotice>
-        </ErrorMessage>
-      )}
+        <SiteAlert type="notice" dismissable />
 
-      <SiteAlert type="notice" dismissable />
+        <CardSection>
+          <Form id="sign-in" onSubmit={handleSubmit(onSubmit, onError)}>
+            <Field
+              name="email"
+              label={t("t.email")}
+              validation={{ required: true, pattern: emailRegex }}
+              error={errors.email}
+              errorMessage={errors.email ? t("authentication.signIn.loginError") : undefined}
+              register={register}
+              onChange={() => networkError.reset()}
+              labelClassName={"text__caps-spaced"}
+            />
 
-      <div className="form-card__group pt-0">
-        <Form id="sign-in" className="mt-10" onSubmit={handleSubmit(onSubmit, onError)}>
-          <Field
-            caps={true}
-            name="email"
-            label={t("t.email")}
-            validation={{ required: true, pattern: emailRegex }}
-            error={errors.email}
-            errorMessage={errors.email ? t("authentication.signIn.loginError") : undefined}
-            register={register}
-            onChange={() => networkError.reset()}
-          />
-          <section>
-            <div className="text-center mt-6">
-              <Button type="submit" variant="primary">
-                {t("authentication.forgotPassword.sendEmail")}
-              </Button>
-            </div>
-            <div className="text-center mt-6">
+            <Button
+              type="submit"
+              variant="primary"
+              className={styles["forgot-password-submit-button"]}
+            >
+              {t("authentication.forgotPassword.sendEmail")}
+            </Button>
+
+            <div className={"mt-4"}>
               <Button onClick={() => router.back()} variant="text">
                 {t("t.cancel")}
               </Button>
             </div>
-          </section>
-        </Form>
-      </div>
-    </FormCard>
+          </Form>
+        </CardSection>
+      </>
+    </BloomCard>
   )
 }
 
diff --git a/shared-helpers/src/views/sign-in/FormSignIn.module.scss b/shared-helpers/src/views/sign-in/FormSignIn.module.scss
new file mode 100644
index 0000000000..3bf53b4c23
--- /dev/null
+++ b/shared-helpers/src/views/sign-in/FormSignIn.module.scss
@@ -0,0 +1,19 @@
+.forgot-password {
+  float: right;
+  font-size: var(--seeds-font-size-sm);
+  text-decoration-line: underline;
+  color: var(--seeds-color-blue-900);
+}
+
+.sign-in-error-container {
+  margin-inline: var(--seeds-s4);
+
+  @media (min-width: theme("screens.sm")) {
+    margin-inline: var(--seeds-s12);
+  }
+}
+
+.sign-in-error {
+  margin-top: var(--seeds-s6);
+  width: 100%;
+}
diff --git a/shared-helpers/src/views/sign-in/FormSignIn.tsx b/shared-helpers/src/views/sign-in/FormSignIn.tsx
index 91f60f87f7..b46b05434a 100644
--- a/shared-helpers/src/views/sign-in/FormSignIn.tsx
+++ b/shared-helpers/src/views/sign-in/FormSignIn.tsx
@@ -1,14 +1,14 @@
 import React, { useContext } from "react"
+import type { UseFormMethods } from "react-hook-form"
 import { Field, Form, NavigationContext, t } from "@bloom-housing/ui-components"
 import { Button, Heading } from "@bloom-housing/ui-seeds"
-import { CardSection, CardFooter } from "@bloom-housing/ui-seeds/src/blocks/Card"
+import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card"
 import { FormSignInErrorBox } from "./FormSignInErrorBox"
 import { NetworkStatus } from "../../auth/catchNetworkError"
-import type { UseFormMethods } from "react-hook-form"
-import { AccountCard } from "../accounts/AccountCard"
-import styles from "../../../../sites/public/styles/sign-in.module.scss"
+import { BloomCard } from "../components/BloomCard"
 import { useRouter } from "next/router"
 import { getListingRedirectUrl } from "../../utilities/getListingRedirectUrl"
+import styles from "./FormSignIn.module.scss"
 
 export type FormSignInProps = {
   control: FormSignInControl
@@ -45,27 +45,26 @@ const FormSignIn = ({
   const createAccountUrl = getListingRedirectUrl(listingIdRedirect, "/create-account")
 
   return (
-    <AccountCard iconSymbol="profile" title={t("nav.signIn")} divider="inset" headingPriority={1}>
+    <BloomCard iconSymbol="profile" title={t("nav.signIn")} headingPriority={1}>
       <>
         <FormSignInErrorBox
           errors={errors}
           networkStatus={networkStatus}
           errorMessageId={"main-sign-in"}
-          className="mx-12"
+          className={styles["sign-in-error-container"]}
         />
-        <CardSection className="mx-4">
+        <CardSection divider={"inset"}>
           <Form id="sign-in" onSubmit={handleSubmit(onSubmit, onError)}>
             <Field
-              caps={true}
               className="mb-6"
               name="email"
               label={t("t.email")}
-              labelClassName="font-semibold p-0"
               validation={{ required: true }}
               error={errors.email}
               errorMessage={t("authentication.signIn.enterLoginEmail")}
               register={register}
               dataTestId="sign-in-email-field"
+              labelClassName={"text__caps-spaced"}
             />
             <aside>
               <LinkComponent href={forgetPasswordURL} className={styles["forgot-password"]}>
@@ -73,17 +72,16 @@ const FormSignIn = ({
               </LinkComponent>
             </aside>
             <Field
-              caps={true}
               className="mb-3"
               name="password"
               label={t("authentication.createAccount.password")}
-              labelClassName="font-semibold p-0"
               validation={{ required: true }}
               error={errors.password}
               errorMessage={t("authentication.signIn.enterLoginPassword")}
               register={register}
               type={"password"}
               dataTestId="sign-in-password-field"
+              labelClassName={"text__caps-spaced"}
             />
             <div className="mt-6">
               <Button type="submit" variant="primary" id="sign-in-button">
@@ -93,7 +91,7 @@ const FormSignIn = ({
           </Form>
         </CardSection>
         {showRegisterBtn && (
-          <CardFooter className="border-t py-8 mx-12">
+          <CardSection divider={"inset"}>
             <Heading priority={2} size="2xl" className="mb-6">
               {t("authentication.createAccount.noAccount")}
             </Heading>
@@ -101,10 +99,10 @@ const FormSignIn = ({
             <Button variant="primary-outlined" href={createAccountUrl}>
               {t("account.createAccount")}
             </Button>
-          </CardFooter>
+          </CardSection>
         )}
       </>
-    </AccountCard>
+    </BloomCard>
   )
 }
 
diff --git a/shared-helpers/src/views/sign-in/FormSignInErrorBox.tsx b/shared-helpers/src/views/sign-in/FormSignInErrorBox.tsx
index f3b4874170..ca8b808271 100644
--- a/shared-helpers/src/views/sign-in/FormSignInErrorBox.tsx
+++ b/shared-helpers/src/views/sign-in/FormSignInErrorBox.tsx
@@ -2,6 +2,7 @@ import React from "react"
 import { t, AlertBox, SiteAlert, AlertNotice, ErrorMessage } from "@bloom-housing/ui-components"
 import type { UseFormMethods } from "react-hook-form"
 import { NetworkStatus } from "../../auth/catchNetworkError"
+import styles from "./FormSignIn.module.scss"
 
 export type FormSignInErrorBoxProps = {
   errors: FormSignInErrorBoxControl["errors"]
@@ -21,12 +22,10 @@ const FormSignInErrorBox = ({
   errorMessageId,
   className,
 }: FormSignInErrorBoxProps) => {
-  const classNames = ["border-b"]
-  if (className) classNames.push(className)
   return (
-    <div className={classNames.join(" ")}>
+    <div className={className ? className : ""}>
       {Object.entries(errors).length > 0 && !networkStatus.content && (
-        <AlertBox type="alert" inverted closeable>
+        <AlertBox type="alert" inverted closeable className={styles["sign-in-error"]}>
           {errors.authentication ? errors.authentication.message : t("errors.errorsToResolve")}
         </AlertBox>
       )}
@@ -35,7 +34,7 @@ const FormSignInErrorBox = ({
         <ErrorMessage
           id={`form-sign-in-${errorMessageId}-error`}
           error={!!networkStatus.content}
-          className="block mt-0 leading-normal text-alert"
+          className={styles["sign-in-error"]}
         >
           <AlertBox type={"alert"} inverted onClose={() => networkStatus.reset()}>
             {networkStatus.content.title}
@@ -49,7 +48,12 @@ const FormSignInErrorBox = ({
 
       {networkStatus.type === "success" && (
         <>
-          <AlertBox type="success" inverted onClose={() => networkStatus.reset()}>
+          <AlertBox
+            type="success"
+            inverted
+            onClose={() => networkStatus.reset()}
+            className={styles["sign-in-error"]}
+          >
             {networkStatus.content?.title}
           </AlertBox>
 
@@ -58,8 +62,7 @@ const FormSignInErrorBox = ({
           </AlertNotice>
         </>
       )}
-
-      <SiteAlert type="notice" dismissable />
+      <SiteAlert type="notice" dismissable className={styles["sign-in-error"]} />
     </div>
   )
 }
diff --git a/shared-helpers/src/views/sign-in/ResendConfirmationModal.tsx b/shared-helpers/src/views/sign-in/ResendConfirmationModal.tsx
index fa4c21bf48..7d6de2e2ca 100644
--- a/shared-helpers/src/views/sign-in/ResendConfirmationModal.tsx
+++ b/shared-helpers/src/views/sign-in/ResendConfirmationModal.tsx
@@ -80,7 +80,6 @@ const ResendConfirmationModal = ({
       <>
         <Form>
           <Field
-            caps={true}
             type="email"
             name="emailResend"
             label={t("authentication.createAccount.resendAnEmailTo")}
@@ -89,6 +88,7 @@ const ResendConfirmationModal = ({
             error={!!errors.emailResend}
             errorMessage={t("authentication.signIn.loginError")}
             register={register}
+            labelClassName={"text__caps-spaced"}
           />
         </Form>
 
diff --git a/sites/partners/src/pages/reset-password.tsx b/sites/partners/src/pages/reset-password.tsx
index 8e2294bd5b..6c5ccad7f4 100644
--- a/sites/partners/src/pages/reset-password.tsx
+++ b/sites/partners/src/pages/reset-password.tsx
@@ -64,7 +64,6 @@ const ResetPassword = () => {
         <div className="form-card__group pt-0 border-b">
           <Form id="sign-in" className="mt-10" onSubmit={handleSubmit(onSubmit)}>
             <Field
-              caps={true}
               name="password"
               label={t("authentication.createAccount.password")}
               validation={{ required: true }}
@@ -72,9 +71,9 @@ const ResetPassword = () => {
               errorMessage={t("authentication.forgotPassword.enterNewLoginPassword")}
               register={register}
               type="password"
+              labelClassName={"text__caps-spaced"}
             />
             <Field
-              caps={true}
               name="passwordConfirmation"
               label={t("authentication.forgotPassword.passwordConfirmation")}
               validation={{
@@ -86,6 +85,7 @@ const ResetPassword = () => {
               errorMessage={t("authentication.createAccount.errors.passwordMismatch")}
               register={register}
               type="password"
+              labelClassName={"text__caps-spaced"}
             />
 
             <div className="text-center mt-6">
diff --git a/sites/public/src/components/account/ConfirmationModal.tsx b/sites/public/src/components/account/ConfirmationModal.tsx
index 1d511ef70e..097194e393 100644
--- a/sites/public/src/components/account/ConfirmationModal.tsx
+++ b/sites/public/src/components/account/ConfirmationModal.tsx
@@ -112,7 +112,6 @@ const ConfirmationModal = (props: ConfirmationModalProps) => {
         )}
         <Form id="resend-confirmation" onSubmit={handleSubmit(onSubmit)}>
           <Field
-            caps={true}
             type="email"
             name="email"
             label={t("authentication.createAccount.resendAnEmailTo")}
@@ -121,6 +120,7 @@ const ConfirmationModal = (props: ConfirmationModalProps) => {
             error={errors.email}
             errorMessage={t("authentication.signIn.loginError")}
             register={register}
+            labelClassName={"text__caps-spaced"}
           />
         </Form>
         <p className="pt-4">{t("authentication.createAccount.resendEmailInfo")}</p>
diff --git a/sites/public/src/components/account/SignUpBenefits.module.scss b/sites/public/src/components/account/SignUpBenefits.module.scss
new file mode 100644
index 0000000000..38566e4b58
--- /dev/null
+++ b/sites/public/src/components/account/SignUpBenefits.module.scss
@@ -0,0 +1,28 @@
+.sign-up-benefits-container {
+  display: flex;
+  flex-direction: column;
+  padding-top: var(--seeds-s6);
+  padding-bottom: var(--seeds-s4);
+  padding-inline: var(--seeds-s4);
+  @media (min-width: theme("screens.md")) {
+    padding: 0;
+  }
+}
+
+.sign-up-benefits-item {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: var(--seeds-s3);
+  align-items: center;
+
+  .icon {
+    border: 1px solid var(--seeds-color-white);
+    background-color: var(--seeds-color-white);
+    border-radius: var(--seeds-rounded-full);
+    padding: var(--seeds-s2_5);
+  }
+
+  .text {
+    margin-left: var(--seeds-s3);
+  }
+}
diff --git a/sites/public/src/components/account/SignUpBenefits.tsx b/sites/public/src/components/account/SignUpBenefits.tsx
index 7b18d551fb..2a4b6c8864 100644
--- a/sites/public/src/components/account/SignUpBenefits.tsx
+++ b/sites/public/src/components/account/SignUpBenefits.tsx
@@ -1,6 +1,7 @@
 import { Icon } from "@bloom-housing/ui-seeds"
 import { faStopwatch, faEye, faLock } from "@fortawesome/free-solid-svg-icons"
 import { t } from "@bloom-housing/ui-components"
+import styles from "./SignUpBenefits.module.scss"
 
 type SignUpBenefitsProps = {
   className?: string
@@ -12,18 +13,14 @@ const SignUpBenefits = (props: SignUpBenefitsProps) => {
     { icon: faEye, text: t("account.signUpSaveTime.checkStatus") },
     { icon: faLock, text: t("account.signUpSaveTime.resetPassword") },
   ]
-  const classNames = ["flex flex-col pt-6 pb-6 pr-4 pl-4 md:p-0"]
+  const classNames = [styles["sign-up-benefits-container"]]
   if (props.className) classNames.push(props.className)
   return (
     <ul className={classNames.join(" ")}>
       {iconListItems.map((item) => (
-        <li className="flex flex-row mb-3 items-center" key={`${item.text}-${props.idTag}`}>
-          <Icon
-            icon={item.icon}
-            size="xl"
-            className="border border-white bg-white rounded-full p-2.5"
-          />
-          <p className="ml-3">{item.text}</p>
+        <li className={styles["sign-up-benefits-item"]} key={`${item.text}-${props.idTag}`}>
+          <Icon icon={item.icon} size="xl" className={styles["icon"]} />
+          <p className={styles["text"]}>{item.text}</p>
         </li>
       ))}
     </ul>
diff --git a/sites/public/src/components/account/SignUpBenefitsHeadingGroup.module.scss b/sites/public/src/components/account/SignUpBenefitsHeadingGroup.module.scss
new file mode 100644
index 0000000000..766637f366
--- /dev/null
+++ b/sites/public/src/components/account/SignUpBenefitsHeadingGroup.module.scss
@@ -0,0 +1,13 @@
+.sign-up-benefits-heading-group {
+  padding-top: var(--seeds-s6);
+  padding-inline: var(--seeds-s4);
+  padding-bottom: var(--seeds-s2);
+
+  @media (min-width: theme("screens.md")) {
+    padding-bottom: var(--seeds-s6);
+  }
+
+  @media (min-width: theme("screens.sm")) {
+    padding-top: 0;
+  }
+}
diff --git a/sites/public/src/components/account/SignUpBenefitsHeadingGroup.tsx b/sites/public/src/components/account/SignUpBenefitsHeadingGroup.tsx
index f55de20e44..4566a4fcd9 100644
--- a/sites/public/src/components/account/SignUpBenefitsHeadingGroup.tsx
+++ b/sites/public/src/components/account/SignUpBenefitsHeadingGroup.tsx
@@ -1,14 +1,14 @@
 import { t } from "@bloom-housing/ui-components"
 import { HeadingGroup } from "@bloom-housing/ui-seeds"
+import styles from "./SignUpBenefitsHeadingGroup.module.scss"
 
 const SignUpBenefitsHeadingGroup = (props: { mobileView: boolean }) => {
-  const classNames = props.mobileView ? "py-6 px-4" : ""
   return (
     <HeadingGroup
       heading={t("account.signUpSaveTime.title")}
       subheading={t("account.signUpSaveTime.subTitle")}
       size="2xl"
-      className={classNames}
+      className={props.mobileView ? styles["sign-up-benefits-heading-group"] : ""}
     />
   )
 }
diff --git a/sites/public/src/layouts/application-form.module.scss b/sites/public/src/layouts/application-form.module.scss
index 0b0a5218db..47952c7376 100644
--- a/sites/public/src/layouts/application-form.module.scss
+++ b/sites/public/src/layouts/application-form.module.scss
@@ -1,5 +1,6 @@
 .application-form-header {
   margin-block: var(--seeds-s6);
+  color: var(--seeds-color-gray-700);
 
   @media (max-width: theme("screens.md")) {
     margin-block-end: 0;
@@ -13,11 +14,49 @@
     border-top-right-radius: 0;
     margin-top: 0;
   }
+
+  .application-form-header-title {
+    background-color: var(--seeds-color-primary);
+    padding-block: var(--seeds-s4);
+    color: var(--seeds-color-white);
+    --card-content-padding-inline: var(--seeds-s8);
+    @media (max-width: theme("screens.sm")) {
+      --card-content-padding-inline: var(--seeds-s4);
+    }
+  }
+
+  .application-form-header-heading {
+    font-size: var(--seeds-type-heading-size-xl);
+    color: var(--seeds-color-white);
+    font-weight: var(--seeds-font-weight-bold);
+    font-family: var(--seeds-font-alt-sans);
+  }
+
+  .application-form-header-progress {
+    padding-block: var(--seeds-s4);
+    --card-content-padding-block: var(--seeds-s4);
+    --card-content-padding-inline: var(--seeds-s8);
+    @media (max-width: theme("screens.sm")) {
+      --card-content-padding-inline: var(--seeds-s4);
+    }
+
+    .desktop-nav {
+      display: block;
+      @media (max-width: theme("screens.sm")) {
+        display: none;
+      }
+    }
+
+    .mobile-nav {
+      display: none;
+      @media (max-width: theme("screens.sm")) {
+        display: block;
+      }
+    }
+  }
 }
 
 .application-form-body {
-  margin-block-end: var(--seeds-s6);
-
   @media (max-width: theme("screens.md")) {
     border-top-left-radius: 0;
     border-top-right-radius: 0;
@@ -30,6 +69,24 @@
   }
 }
 
+.application-form-header-no-border {
+  header {
+    --card-divider-width: 0;
+  }
+}
+
+.application-form-action-footer {
+  background-color: var(--seeds-color-primary-lighter);
+}
+
+.application-form-save-and-return {
+  margin-top: var(--seeds-s4);
+}
+
+.application-form-back-link {
+  margin-bottom: var(--seeds-s6);
+}
+
 /* overrides for Seeds Message & Alert */
 .message-inside-card {
   --common-message-max-width: auto;
diff --git a/sites/public/src/layouts/application-form.tsx b/sites/public/src/layouts/application-form.tsx
index 3d5560c203..babd56eb94 100644
--- a/sites/public/src/layouts/application-form.tsx
+++ b/sites/public/src/layouts/application-form.tsx
@@ -1,10 +1,10 @@
 import React from "react"
 import { faChevronLeft } from "@fortawesome/free-solid-svg-icons"
-import { Button, Card, Heading, Icon } from "@bloom-housing/ui-seeds"
+import { Button, Heading, Icon } from "@bloom-housing/ui-seeds"
+import { BloomCard } from "@bloom-housing/shared-helpers"
 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"
-
 import styles from "./application-form.module.scss"
 
 interface ApplicationFormLayoutProps {
@@ -29,7 +29,7 @@ interface ApplicationFormLayoutProps {
 const ApplicationFormLayout = (props: ApplicationFormLayoutProps) => {
   const getBackLink = (url?: string, onClickFxn?: () => void) => {
     return (
-      <div className={"mb-6"}>
+      <div className={styles["application-form-back-link"]}>
         <Button
           leadIcon={<Icon icon={faChevronLeft} />}
           variant={"text"}
@@ -45,67 +45,72 @@ const ApplicationFormLayout = (props: ApplicationFormLayoutProps) => {
 
   return (
     <>
-      <Card spacing={"sm"} className={styles["application-form-header"]}>
-        <CardSection className={"bg-primary px-8 py-4 text-white"}>
-          <Heading priority={1} className={"text-xl text-white font-bold font-alt-sans"}>
-            {props.listingName}
-          </Heading>
-        </CardSection>
-        <CardSection className={"px-8"}>
-          <div className={"hidden md:block"}>
-            <ProgressNav {...props.progressNavProps} />
-          </div>
-          <div className={"block md:hidden"}>
-            <StepHeader
-              currentStep={props.progressNavProps.currentPageSection}
-              totalSteps={props.progressNavProps.labels.length}
-              stepPreposition={"of"}
-              stepLabeling={props.progressNavProps.labels}
-            />
-          </div>
-        </CardSection>
-      </Card>
-      <Card spacing={"lg"} className={styles["application-form-body"]}>
-        <CardSection divider={"inset"} className={props.hideBorder && "border-none"}>
-          {props.backLink && getBackLink(props.backLink.url, props.backLink.onClickFxn)}
-          <Heading priority={2} size={"2xl"}>
-            {props.heading}
-          </Heading>
-          {props.subheading && <p className="field-note mt-6">{props.subheading}</p>}
-        </CardSection>
-        {props.children}
-        {props.conductor && (
-          <CardSection className={"bg-primary-lighter"}>
-            <Button
-              type="submit"
-              variant="primary"
-              onClick={() => {
-                props.conductor.returnToReview = false
-                props.conductor.setNavigatedBack(false)
-              }}
-              id={"app-next-step-button"}
-            >
-              {t("t.next")}
-            </Button>
-
-            {props.conductor.canJumpForwardToReview() && (
-              <div>
-                <Button
-                  type="submit"
-                  variant="text"
-                  className="mt-4"
-                  onClick={() => {
-                    props.conductor.returnToReview = true
-                    props.conductor.setNavigatedBack(false)
-                  }}
-                >
-                  {t("application.form.general.saveAndReturn")}
-                </Button>
-              </div>
-            )}
+      <BloomCard className={styles["application-form-header"]}>
+        <>
+          <CardSection className={styles["application-form-header-title"]}>
+            <Heading priority={1} className={styles["application-form-header-heading"]}>
+              {props.listingName}
+            </Heading>
           </CardSection>
-        )}
-      </Card>
+          <CardSection className={styles["application-form-header-progress"]}>
+            <div className={styles["desktop-nav"]}>
+              <ProgressNav {...props.progressNavProps} />
+            </div>
+            <div className={styles["mobile-nav"]}>
+              <StepHeader
+                currentStep={props.progressNavProps.currentPageSection}
+                totalSteps={props.progressNavProps.labels.length}
+                stepPreposition={"of"}
+                stepLabeling={props.progressNavProps.labels}
+              />
+            </div>
+          </CardSection>
+        </>
+      </BloomCard>
+      <BloomCard
+        title={props.heading}
+        headingPriority={2}
+        subtitle={props.subheading}
+        headerLink={props.backLink && getBackLink(props.backLink.url, props.backLink.onClickFxn)}
+        className={`${styles["application-form-body"]} ${
+          props.hideBorder && styles["application-form-header-no-border"]
+        }`}
+      >
+        <>
+          {props.children}
+          {props.conductor && (
+            <CardSection className={styles["application-form-action-footer"]}>
+              <Button
+                type="submit"
+                variant="primary"
+                onClick={() => {
+                  props.conductor.returnToReview = false
+                  props.conductor.setNavigatedBack(false)
+                }}
+                id={"app-next-step-button"}
+              >
+                {t("t.next")}
+              </Button>
+
+              {props.conductor.canJumpForwardToReview() && (
+                <div>
+                  <Button
+                    type="submit"
+                    variant="text"
+                    className={styles["application-form-save-and-return"]}
+                    onClick={() => {
+                      props.conductor.returnToReview = true
+                      props.conductor.setNavigatedBack(false)
+                    }}
+                  >
+                    {t("application.form.general.saveAndReturn")}
+                  </Button>
+                </div>
+              )}
+            </CardSection>
+          )}
+        </>
+      </BloomCard>
     </>
   )
 }
diff --git a/sites/public/src/layouts/forms.module.scss b/sites/public/src/layouts/forms.module.scss
new file mode 100644
index 0000000000..3003bf6195
--- /dev/null
+++ b/sites/public/src/layouts/forms.module.scss
@@ -0,0 +1,14 @@
+.form-layout-container {
+  background-color: var(--seeds-bg-color-canvas);
+  border-top: 1px solid var(--seeds-border-color);
+}
+
+.form-layout {
+  margin-inline: auto;
+  max-width: 100%;
+  @media (min-width: theme("screens.sm")) {
+    margin-bottom: var(--seeds-s20);
+    margin-top: var(--seeds-s12);
+    max-width: var(--seeds-width-lg);
+  }
+}
diff --git a/sites/public/src/layouts/forms.tsx b/sites/public/src/layouts/forms.tsx
index 526b1cb940..84c885e561 100644
--- a/sites/public/src/layouts/forms.tsx
+++ b/sites/public/src/layouts/forms.tsx
@@ -1,21 +1,20 @@
 import React from "react"
 import Layout from "./application"
 import { ApplicationTimeout } from "../components/applications/ApplicationTimeout"
+import styles from "./forms.module.scss"
 
 interface FormLayoutProps {
   children?: React.ReactNode
   className?: string
 }
 const FormLayout = (props: FormLayoutProps) => {
-  const classNames = [
-    "md:mb-20 md:mt-12 mx-auto sm:max-w-lg max-w-full print:my-0 print:max-w-full",
-  ]
+  const classNames = [styles["form-layout"]]
   if (props.className) classNames.push(props.className)
   return (
     <>
       <ApplicationTimeout />
       <Layout>
-        <section className="bg-gray-300 border-t border-gray-450">
+        <section className={styles["form-layout-container"]}>
           <div className={classNames.join(" ")}>{props.children}</div>
         </section>
       </Layout>
diff --git a/sites/public/src/pages/account/account.module.scss b/sites/public/src/pages/account/account.module.scss
index f1431b1660..b4ed1e3580 100644
--- a/sites/public/src/pages/account/account.module.scss
+++ b/sites/public/src/pages/account/account.module.scss
@@ -24,6 +24,7 @@
 .account-settings-label {
   font-size: var(--seeds-font-size-sm);
   font-weight: var(--seeds-font-weight-bold);
+  color: var(--seeds-input-text-label-color);
 }
 
 .application-no-results {
diff --git a/sites/public/src/pages/account/applications.tsx b/sites/public/src/pages/account/applications.tsx
index 793c8aa73a..ee5026e41c 100644
--- a/sites/public/src/pages/account/applications.tsx
+++ b/sites/public/src/pages/account/applications.tsx
@@ -2,12 +2,17 @@ import React, { useEffect, useState, Fragment, useContext } from "react"
 import Head from "next/head"
 import { t, LoadingOverlay } from "@bloom-housing/ui-components"
 import { Button, Card, Heading } from "@bloom-housing/ui-seeds"
-import { PageView, pushGtmEvent, AuthContext, RequireLogin } from "@bloom-housing/shared-helpers"
+import {
+  PageView,
+  pushGtmEvent,
+  AuthContext,
+  RequireLogin,
+  BloomCard,
+} from "@bloom-housing/shared-helpers"
 import Layout from "../../layouts/application"
 import { StatusItemWrapper, AppWithListing } from "./StatusItemWrapper"
 import { MetaTags } from "../../components/shared/MetaTags"
 import { UserStatus } from "../../lib/constants"
-import { AccountCard } from "@bloom-housing/shared-helpers/src/views/accounts/AccountCard"
 
 import styles from "../../pages/account/account.module.scss"
 
@@ -88,14 +93,12 @@ const Applications = () => {
         </Head>
         <MetaTags title={t("account.myApplications")} description="" />
         <section className="bg-gray-300 border-t border-gray-450">
-          <div className="flex flex-wrap relative max-w-3xl mx-auto md:py-8">
-            <AccountCard
+          <div className="flex flex-wrap relative max-w-3xl mx-auto sm:p-8">
+            <BloomCard
               iconSymbol="application"
               title={t("account.myApplications")}
               subtitle={t("account.myApplicationsSubtitle")}
               headingPriority={1}
-              divider="inset"
-              thinMobile
             >
               <>
                 <LoadingOverlay isLoading={loading}>
@@ -108,7 +111,7 @@ const Applications = () => {
 
                 {!applications && !loading && noApplicationsSection()}
               </>
-            </AccountCard>
+            </BloomCard>
           </div>
         </section>
       </Layout>
diff --git a/sites/public/src/pages/account/dashboard.tsx b/sites/public/src/pages/account/dashboard.tsx
index e9087870e0..a1b1273f79 100644
--- a/sites/public/src/pages/account/dashboard.tsx
+++ b/sites/public/src/pages/account/dashboard.tsx
@@ -2,12 +2,17 @@ import React, { useEffect, useState, useContext } from "react"
 import Head from "next/head"
 import { NextRouter, withRouter } from "next/router"
 import { t, SiteAlert, AlertBox } from "@bloom-housing/ui-components"
-import { PageView, pushGtmEvent, AuthContext, RequireLogin } from "@bloom-housing/shared-helpers"
+import {
+  PageView,
+  pushGtmEvent,
+  AuthContext,
+  RequireLogin,
+  BloomCard,
+} from "@bloom-housing/shared-helpers"
 import Layout from "../../layouts/application"
 import { MetaTags } from "../../components/shared/MetaTags"
 import { UserStatus } from "../../lib/constants"
 import { Button, Card, Grid } from "@bloom-housing/ui-seeds"
-import { AccountCard } from "@bloom-housing/shared-helpers/src/views/accounts/AccountCard"
 
 import styles from "./account.module.scss"
 
@@ -59,11 +64,12 @@ function Dashboard(props: DashboardProps) {
             <Grid spacing="lg" className={styles["account-card-container"]}>
               <Grid.Row columns={2}>
                 <Grid.Cell>
-                  <AccountCard
+                  <BloomCard
                     iconSymbol="application"
                     title={t("account.myApplications")}
                     subtitle={t("account.myApplicationsSubtitle")}
-                    thinDesktop
+                    variant={"block"}
+                    headingPriority={2}
                   >
                     <Card.Section>
                       <Button
@@ -75,22 +81,23 @@ function Dashboard(props: DashboardProps) {
                         {t("account.viewApplications")}
                       </Button>
                     </Card.Section>
-                  </AccountCard>
+                  </BloomCard>
                 </Grid.Cell>
                 <Grid.Cell>
-                  <AccountCard
+                  <BloomCard
                     iconSymbol="profile"
                     title={t("account.accountSettings")}
                     subtitle={t("account.accountSettingsSubtitle")}
                     id="account-dashboard-settings"
-                    thinDesktop
+                    variant={"block"}
+                    headingPriority={2}
                   >
                     <Card.Section>
                       <Button size="sm" href={"/account/edit"} variant="primary-outlined">
                         {t("account.accountSettingsUpdate")}
                       </Button>
                     </Card.Section>
-                  </AccountCard>
+                  </BloomCard>
                 </Grid.Cell>
               </Grid.Row>
             </Grid>
diff --git a/sites/public/src/pages/account/edit.tsx b/sites/public/src/pages/account/edit.tsx
index a2831a469c..a247b206cd 100644
--- a/sites/public/src/pages/account/edit.tsx
+++ b/sites/public/src/pages/account/edit.tsx
@@ -19,10 +19,15 @@ import {
 } from "@bloom-housing/ui-components"
 import { Button, Card } from "@bloom-housing/ui-seeds"
 import Link from "next/link"
-import { PageView, pushGtmEvent, AuthContext, RequireLogin } from "@bloom-housing/shared-helpers"
+import {
+  PageView,
+  pushGtmEvent,
+  AuthContext,
+  RequireLogin,
+  BloomCard,
+} from "@bloom-housing/shared-helpers"
 import { UserStatus } from "../../lib/constants"
 import FormsLayout from "../../layouts/forms"
-import { AccountCard } from "@bloom-housing/shared-helpers/src/views/accounts/AccountCard"
 
 import styles from "./account.module.scss"
 
@@ -150,28 +155,27 @@ const Edit = () => {
   return (
     <RequireLogin signInPath="/sign-in" signInMessage={t("t.loginIsRequired")}>
       <FormsLayout>
-        <AccountCard
+        <BloomCard
           iconSymbol="profile"
           title={t("account.accountSettings")}
           subtitle={t("account.accountSettingsSubtitle")}
-          divider="inset"
           headingPriority={1}
-          thinMobile
         >
           <>
             <SiteAlert type="notice" dismissable />
-            {nameAlert && (
-              <AlertBox
-                type={nameAlert.type}
-                onClose={() => setNameAlert(null)}
-                className="my-0"
-                inverted
-                closeable
-              >
-                {nameAlert.message}
-              </AlertBox>
-            )}
+
             <Card.Section divider="inset" className={styles["account-card-settings-section"]}>
+              {nameAlert && (
+                <AlertBox
+                  type={nameAlert.type}
+                  onClose={() => setNameAlert(null)}
+                  className="mb-4"
+                  inverted
+                  closeable
+                >
+                  {nameAlert.message}
+                </AlertBox>
+              )}
               <Form id="update-name" onSubmit={handleSubmit(onNameSubmit)}>
                 <label className={styles["account-settings-label"]} htmlFor="firstName">
                   {t("application.name.yourName")}
@@ -223,18 +227,19 @@ const Edit = () => {
                 </Button>
               </Form>
             </Card.Section>
-            {dobAlert && (
-              <AlertBox
-                type={dobAlert.type}
-                onClose={() => setDobAlert(null)}
-                className="my-0"
-                inverted
-                closeable
-              >
-                {dobAlert.message}
-              </AlertBox>
-            )}
+
             <Card.Section divider="inset" className={styles["account-card-settings-section"]}>
+              {dobAlert && (
+                <AlertBox
+                  type={dobAlert.type}
+                  onClose={() => setDobAlert(null)}
+                  className="mb-4"
+                  inverted
+                  closeable
+                >
+                  {dobAlert.message}
+                </AlertBox>
+              )}
               <Form id="update-birthdate" onSubmit={handleSubmit(onBirthdateSubmit)}>
                 <DOBField
                   id="dateOfBirth"
@@ -258,17 +263,19 @@ const Edit = () => {
                 </Button>
               </Form>
             </Card.Section>
-            {emailAlert && (
-              <AlertBox
-                type={emailAlert.type}
-                onClose={() => setEmailAlert(null)}
-                inverted
-                closeable
-              >
-                {emailAlert.message}
-              </AlertBox>
-            )}
+
             <Card.Section divider="inset" className={styles["account-card-settings-section"]}>
+              {emailAlert && (
+                <AlertBox
+                  type={emailAlert.type}
+                  onClose={() => setEmailAlert(null)}
+                  inverted
+                  closeable
+                  className={"mb-4"}
+                >
+                  {emailAlert.message}
+                </AlertBox>
+              )}
               <Form id="update-email" onSubmit={handleSubmit(onEmailSubmit)}>
                 <label className={styles["account-settings-label"]} htmlFor="email">
                   {t("application.name.yourEmailAddress")}
@@ -290,18 +297,19 @@ const Edit = () => {
                 </Button>
               </Form>
             </Card.Section>
-            {passwordAlert && (
-              <AlertBox
-                type={passwordAlert.type}
-                onClose={() => setPasswordAlert(null)}
-                className="my-0"
-                inverted
-                closeable
-              >
-                {passwordAlert.message}
-              </AlertBox>
-            )}
+
             <Card.Section divider="inset" className={styles["account-card-settings-section"]}>
+              {passwordAlert && (
+                <AlertBox
+                  type={passwordAlert.type}
+                  onClose={() => setPasswordAlert(null)}
+                  className="mb-4"
+                  inverted
+                  closeable
+                >
+                  {passwordAlert.message}
+                </AlertBox>
+              )}
               <Form id="update-password" onSubmit={handleSubmit(onPasswordSubmit)}>
                 <fieldset>
                   <legend className={styles["account-settings-label"]}>
@@ -362,7 +370,7 @@ const Edit = () => {
               </Form>
             </Card.Section>
           </>
-        </AccountCard>
+        </BloomCard>
       </FormsLayout>
     </RequireLogin>
   )
diff --git a/sites/public/src/pages/applications/financial/income.tsx b/sites/public/src/pages/applications/financial/income.tsx
index ea72245968..b056a75241 100644
--- a/sites/public/src/pages/applications/financial/income.tsx
+++ b/sites/public/src/pages/applications/financial/income.tsx
@@ -177,7 +177,7 @@ const ApplicationIncome = () => {
               name="income"
               type="currency"
               label={t("application.financial.income.prompt")}
-              caps={true}
+              labelClassName={"text__caps-spaced"}
               validation={{ required: true, min: 0.01 }}
               error={errors.income}
               register={register}
diff --git a/sites/public/src/pages/create-account.tsx b/sites/public/src/pages/create-account.tsx
index 2c18f6790e..860eddf428 100644
--- a/sites/public/src/pages/create-account.tsx
+++ b/sites/public/src/pages/create-account.tsx
@@ -17,10 +17,9 @@ import dayjs from "dayjs"
 import customParseFormat from "dayjs/plugin/customParseFormat"
 dayjs.extend(customParseFormat)
 import { useRouter } from "next/router"
-import { PageView, pushGtmEvent, AuthContext } from "@bloom-housing/shared-helpers"
+import { PageView, pushGtmEvent, AuthContext, BloomCard } from "@bloom-housing/shared-helpers"
 import { UserStatus } from "../lib/constants"
 import FormsLayout from "../layouts/forms"
-import { AccountCard } from "@bloom-housing/shared-helpers/src/views/accounts/AccountCard"
 import accountCardStyles from "./account/account.module.scss"
 import styles from "../../styles/create-account.module.scss"
 import signUpBenefitsStyles from "../../styles/sign-up-benefits.module.scss"
@@ -91,13 +90,7 @@ export default () => {
           </div>
         )}
         <div className={signUpCopy && signUpBenefitsStyles["benefits-form-container"]}>
-          <AccountCard
-            iconSymbol="profile"
-            title={t("account.createAccount")}
-            divider="inset"
-            headingPriority={1}
-            thinMobile
-          >
+          <BloomCard iconSymbol="profile" title={t("account.createAccount")} headingPriority={1}>
             <>
               {requestError && (
                 <AlertBox className="" onClose={() => setRequestError(undefined)} type="alert">
@@ -185,7 +178,6 @@ export default () => {
                   className={accountCardStyles["account-card-settings-section"]}
                 >
                   <Field
-                    caps={true}
                     type="email"
                     name="email"
                     label={t("application.name.yourEmailAddress")}
@@ -194,6 +186,7 @@ export default () => {
                     errorMessage={t("authentication.signIn.loginError")}
                     register={register}
                     controlClassName={styles["create-account-input"]}
+                    labelClassName={"text__caps-spaced"}
                   />
                 </CardSection>
                 <CardSection
@@ -201,7 +194,7 @@ export default () => {
                   className={accountCardStyles["account-card-settings-section"]}
                 >
                   <Field
-                    caps={true}
+                    labelClassName={"text__caps-spaced"}
                     type={"password"}
                     name="password"
                     note={t("authentication.createAccount.passwordInfo")}
@@ -261,7 +254,7 @@ export default () => {
                 </CardSection>
               </Form>
             </>
-          </AccountCard>
+          </BloomCard>
         </div>
         {signUpCopy && (
           <div className={signUpBenefitsStyles["benefits-hide-display"]}>
diff --git a/sites/public/src/pages/reset-password.tsx b/sites/public/src/pages/reset-password.tsx
index 51227c2bc4..fe1c8a95f7 100644
--- a/sites/public/src/pages/reset-password.tsx
+++ b/sites/public/src/pages/reset-password.tsx
@@ -4,15 +4,14 @@ import { useForm } from "react-hook-form"
 import {
   Field,
   Form,
-  FormCard,
-  Icon,
   t,
   AlertBox,
   SiteAlert,
   setSiteAlertMessage,
 } from "@bloom-housing/ui-components"
 import { Button } from "@bloom-housing/ui-seeds"
-import { PageView, pushGtmEvent, AuthContext } from "@bloom-housing/shared-helpers"
+import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card"
+import { PageView, pushGtmEvent, AuthContext, BloomCard } from "@bloom-housing/shared-helpers"
 import { UserStatus } from "../lib/constants"
 import FormsLayout from "../layouts/forms"
 
@@ -67,53 +66,49 @@ const ResetPassword = () => {
 
   return (
     <FormsLayout>
-      <FormCard>
-        <div className="form-card__lead text-center border-b mx-0">
-          <Icon size="2xl" symbol="profile" />
-          <h2 className="form-card__title">{t("authentication.forgotPassword.changePassword")}</h2>
-        </div>
-        {requestError && (
-          <AlertBox className="" onClose={() => setRequestError(undefined)} type="alert">
-            {requestError}
-          </AlertBox>
-        )}
-        <SiteAlert type="notice" dismissable />
-        <div className="form-card__group pt-0 border-b">
-          <Form id="sign-in" className="mt-10" onSubmit={handleSubmit(onSubmit)}>
-            <Field
-              caps={true}
-              name="password"
-              label={t("authentication.createAccount.password")}
-              validation={{ required: true }}
-              error={errors.password}
-              errorMessage={t("authentication.forgotPassword.enterNewLoginPassword")}
-              register={register}
-              type="password"
-            />
+      <BloomCard title={t("authentication.forgotPassword.changePassword")} iconSymbol={"profile"}>
+        <>
+          {requestError && (
+            <AlertBox className="mt-6" onClose={() => setRequestError(undefined)} type="alert">
+              {requestError}
+            </AlertBox>
+          )}
+          <SiteAlert type="notice" dismissable />
+          <CardSection>
+            <Form id="sign-in" onSubmit={handleSubmit(onSubmit)}>
+              <Field
+                name="password"
+                label={t("authentication.createAccount.password")}
+                validation={{ required: true }}
+                error={errors.password}
+                errorMessage={t("authentication.forgotPassword.enterNewLoginPassword")}
+                register={register}
+                type="password"
+                labelClassName={"text__caps-spaced"}
+              />
 
-            <Field
-              caps={true}
-              name="passwordConfirmation"
-              label={t("authentication.forgotPassword.passwordConfirmation")}
-              validation={{
-                validate: (value) =>
-                  value === passwordValue.current ||
-                  t("authentication.createAccount.errors.passwordMismatch"),
-              }}
-              error={errors.passwordConfirmation}
-              errorMessage={t("authentication.createAccount.errors.passwordMismatch")}
-              register={register}
-              type="password"
-            />
+              <Field
+                name="passwordConfirmation"
+                label={t("authentication.forgotPassword.passwordConfirmation")}
+                validation={{
+                  validate: (value) =>
+                    value === passwordValue.current ||
+                    t("authentication.createAccount.errors.passwordMismatch"),
+                }}
+                error={errors.passwordConfirmation}
+                errorMessage={t("authentication.createAccount.errors.passwordMismatch")}
+                register={register}
+                type="password"
+                labelClassName={"text__caps-spaced"}
+              />
 
-            <div className="text-center mt-6">
               <Button type="submit" variant="primary">
                 {t("authentication.forgotPassword.changePassword")}
               </Button>
-            </div>
-          </Form>
-        </div>
-      </FormCard>
+            </Form>
+          </CardSection>
+        </>
+      </BloomCard>
     </FormsLayout>
   )
 }
diff --git a/sites/public/styles/create-account.module.scss b/sites/public/styles/create-account.module.scss
index 8eeb43315f..ebfa1a3103 100644
--- a/sites/public/styles/create-account.module.scss
+++ b/sites/public/styles/create-account.module.scss
@@ -1,26 +1,26 @@
 .create-account-header {
-    color: var(--seeds-color-gray-750);
-    font-size: var(--seeds-font-size-sm);
-    font-weight: var(--seeds-font-weight-bold);
-    display: block;
+  color: var(--seeds-input-text-label-color);
+  font-size: var(--seeds-font-size-sm);
+  font-weight: var(--seeds-font-weight-bold);
+  display: block;
 }
 
 .create-account-field {
-    color: var(--seeds-color-gray-750);
-    font-size: var(--seeds-font-size-sm);
-    display: block;
-    margin-top: var(--bloom-s3);
+  color: var(--seeds-input-text-label-color);
+  font-size: var(--seeds-font-size-sm);
+  display: block;
+  margin-top: var(--bloom-s3);
 }
 
 .create-account-input {
-    border-radius: var(--bloom-rounded-lg);
-    margin-top: var(--bloom-s2);
+  border-radius: var(--bloom-rounded-lg);
+  margin-top: var(--bloom-s2);
 }
 
 .create-account-gap {
-    margin-bottom: var(--bloom-s4);
+  margin-bottom: var(--bloom-s4);
 }
 
 .create-account-label {
-    margin-bottom: var(--bloom-s1);
-}
\ No newline at end of file
+  margin-bottom: var(--bloom-s1);
+}
diff --git a/sites/public/styles/overrides.scss b/sites/public/styles/overrides.scss
index 71842a4cc4..d4664d0f81 100644
--- a/sites/public/styles/overrides.scss
+++ b/sites/public/styles/overrides.scss
@@ -2,10 +2,11 @@
   .seeds-button {
     -webkit-font-smoothing: antialiased; // restore macOS styling that had been unset
   }
-  
+
   --text-caps-spaced-letter-spacing: var(--bloom-letter-spacing-tight);
   --text-caps-spaced-font-weight: 700;
   .text__caps-spaced {
     text-transform: none;
+    color: var(--seeds-input-text-label-color);
   }
 }
diff --git a/sites/public/styles/sign-in.module.scss b/sites/public/styles/sign-in.module.scss
deleted file mode 100644
index b97924f850..0000000000
--- a/sites/public/styles/sign-in.module.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.forgot-password {
-    float: right;
-    font-size: var(--seeds-font-size-sm); 
-    text-decoration-line: underline;
-    color: var(--seeds-color-blue-900);
-}
\ No newline at end of file
diff --git a/sites/public/styles/sign-up-benefits.module.scss b/sites/public/styles/sign-up-benefits.module.scss
index 8a46239e97..65f9c60f69 100644
--- a/sites/public/styles/sign-up-benefits.module.scss
+++ b/sites/public/styles/sign-up-benefits.module.scss
@@ -1,54 +1,53 @@
 .benefits-form-layout {
-    @media (min-width: theme("screens.sm")) {
-      max-width: var(--seeds-width-lg);
-    }
-    @media (min-width: theme("screens.md")) {
-      max-width: 100%;
-    }
+  @media (min-width: theme("screens.sm")) {
+    max-width: var(--seeds-width-lg);
   }
-  .benefits-container {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-  
-    @media (min-width: theme("screens.md")) {
-      flex-direction: row;
-      margin-left: var(--seeds-s20);
-    }
+  @media (min-width: theme("screens.md")) {
+    max-width: 100%;
   }
-  
-  .benefits-display-hide {
-    display: block;
-  
-    @media (min-width: theme("screens.md")) {
-      display: none;
-    }
+}
+.benefits-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  @media (min-width: theme("screens.md")) {
+    flex-direction: row;
+    margin-left: var(--seeds-s20);
   }
-  
-  .benefits-hide-display {
+}
+
+.benefits-display-hide {
+  display: block;
+
+  @media (min-width: theme("screens.md")) {
     display: none;
-  
-    @media (min-width: theme("screens.md")) {
-      display: flex;
-    }
   }
-  
-  .benefits-form-container {
+}
+
+.benefits-hide-display {
+  display: none;
+
+  @media (min-width: theme("screens.md")) {
+    display: flex;
+  }
+}
+
+.benefits-form-container {
+  width: 100%;
+  justify-content: center;
+
+  @media (min-width: theme("screens.md")) {
+    max-width: var(--seeds-width-lg);
+  }
+}
+
+.benefits-desktop-container {
+  @media (min-width: theme("screens.md")) {
+    display: flex;
+    flex-direction: column;
+    padding: var(--seeds-s8);
+    max-width: var(--seeds-width-lg);
     width: 100%;
-    justify-content: center;
-  
-    @media (min-width: theme("screens.md")) {
-      max-width: var(--seeds-width-lg);
-      width: max-content;
-    }
   }
-  
-  .benefits-desktop-container {
-    @media (min-width: theme("screens.md")) {
-      display: flex;
-      flex-direction: column;
-      padding: var(--seeds-s8);
-      max-width: var(--seeds-width-lg);
-      width: 100%;
-    }
-  }
\ No newline at end of file
+}
diff --git a/sites/public/tailwind.config.js b/sites/public/tailwind.config.js
index 51aa076671..cf9d186a96 100644
--- a/sites/public/tailwind.config.js
+++ b/sites/public/tailwind.config.js
@@ -17,6 +17,7 @@ module.exports = {
       "./src/**/*.tsx",
       "../../node_modules/@bloom-housing/shared-helpers/src/views/**/*.tsx",
       "../../node_modules/@bloom-housing/ui-components/src/**/*.tsx",
+      "../../node_modules/@bloom-housing/shared-helpers/src/views/**/*.tsx",
     ],
     safelist: [/grid-cols-/],
   },